{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cookie-consent-bar",
  "title": "Cookie Consent — Bar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cookie-consent-bar/cookie-consent-bar.component.ts",
      "content": "// Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a\n// one-line statement of what is actually stored. Reject carries the same visual weight as\n// accept — a ghost \"reject\" beside a solid \"accept\" is a dark pattern with extra steps.\n// Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnInit, signal } from '@angular/core'\nimport { Cookie, LucideAngularModule } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type CookieConsentChoice = 'accepted' | 'rejected'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cookie-consent-bar, [ui-cookie-consent-bar]',\n  standalone: true,\n  // The block renders its own fixed root <div>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    @if (visible()) {\n      <div\n        data-slot=\"cookie-consent-bar\"\n        class=\"border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur\"\n        role=\"region\"\n        aria-label=\"Cookie consent\"\n      >\n        <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 lg:flex-row lg:items-center lg:gap-8\">\n          <div class=\"flex min-w-0 items-start gap-3\">\n            <lucide-icon [img]=\"Cookie\" class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n            <div class=\"min-w-0\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <p class=\"text-sm font-medium\">We store two things</p>\n                <span ui-badge variant=\"outline\">No ad tracking</span>\n              </div>\n              <p class=\"text-muted-foreground mt-1 text-sm leading-relaxed\">\n                A session cookie so you stay signed in, and an analytics cookie recording which pages get read.\n                Rejecting keeps the first and drops the second.\n              </p>\n            </div>\n          </div>\n\n          <ui-separator orientation=\"vertical\" class=\"hidden h-10 lg:block\" />\n\n          <!-- Reject carries the same visual weight as accept. A ghost \"reject\"\n               beside a solid \"accept\" is a dark pattern with extra steps. -->\n          <div class=\"flex shrink-0 flex-wrap items-center gap-2\">\n            <button ui-button variant=\"outline\" (click)=\"decide('rejected')\">Reject analytics</button>\n            <button ui-button (click)=\"decide('accepted')\">Accept</button>\n            <button ui-button variant=\"ghost\" size=\"sm\">Manage</button>\n          </div>\n        </div>\n      </div>\n    }\n  `,\n})\nexport class UiCookieConsentBarComponent implements OnInit {\n  protected readonly Cookie = Cookie\n\n  @Input() storageKey = 'uipkge:consent'\n\n  readonly visible = signal(false)\n\n  ngOnInit(): void {\n    try {\n      this.visible.set(!window.localStorage.getItem(this.storageKey))\n    } catch {\n      this.visible.set(true)\n    }\n  }\n\n  decide(choice: CookieConsentChoice): void {\n    this.visible.set(false)\n    try {\n      window.localStorage.setItem(this.storageKey, choice)\n    } catch {\n      // Blocked storage: the choice holds for this page view only.\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cookie-consent-bar/cookie-consent-bar.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cookie-consent-bar/index.ts",
      "content": "export { UiCookieConsentBarComponent, type CookieConsentChoice } from './cookie-consent-bar.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cookie-consent-bar/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a one-line statement of what is actually stored.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "cookie-consent"
}