{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cookie-consent", "title": "Cookie Consent", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cookie-consent/cookie-consent-banner.component.ts", "content": "// GDPR-style cookie consent banner with two variants: a full-width bottom bar and a compact\n// card. Customize expands inline preferences with Necessary (always on), Analytics, and\n// Marketing switches. Accept, Reject, and Save dismiss with a 150ms fade.\n// Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Cookie, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport type CookieConsentBannerVariant = 'bottom-bar' | 'card'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cookie-consent-banner, [ui-cookie-consent-banner]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiButtonComponent, UiSeparatorComponent, UiSwitchComponent],\n template: `\n @if (visible()) {\n
\n @if (variant === 'bottom-bar') {\n
\n
\n
\n
\n \n \n \n

\n We use cookies to improve your experience and analyze traffic. Read our\n Cookie Policy.\n

\n
\n
\n \n \n \n
\n
\n\n @if (showPreferences()) {\n
\n \n
\n
\n

Necessary

\n

Required for the site to function.

\n
\n \n
\n
\n
\n

Analytics

\n

Helps us understand usage patterns.

\n
\n \n
\n
\n
\n

Marketing

\n

Used to personalize campaigns.

\n
\n \n
\n
\n \n
\n
\n }\n
\n
\n } @else {\n
\n
\n
\n \n \n \n
\n

We value your privacy

\n

\n We use cookies to improve your experience and analyze traffic. Read our\n Cookie Policy.\n

\n
\n
\n\n @if (showPreferences()) {\n \n
\n
\n

Necessary

\n

Required for the site to function.

\n
\n \n
\n
\n
\n

Analytics

\n

Helps us understand usage patterns.

\n
\n \n
\n
\n
\n

Marketing

\n

Used to personalize campaigns.

\n
\n \n
\n }\n\n
\n \n
\n \n \n
\n
\n
\n
\n }\n
\n }\n `,\n})\nexport class UiCookieConsentBannerComponent {\n protected readonly Cookie = Cookie\n\n @Input() variant: CookieConsentBannerVariant = 'bottom-bar'\n @Input('class') className?: string\n\n readonly visible = signal(true)\n readonly showPreferences = signal(false)\n readonly analytics = signal(true)\n readonly marketing = signal(false)\n\n get rootClass(): string {\n return cn('animate-in fade-in duration-150', this.className)\n }\n\n dismiss(): void {\n this.visible.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cookie-consent/cookie-consent-banner.component.ts" }, { "path": "packages/registry-angular/blocks/cookie-consent/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
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n template: `\n @if (visible()) {\n \n
\n
\n \n
\n
\n

We store two things

\n No ad tracking\n
\n

\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

\n
\n
\n\n \n\n \n
\n \n \n \n
\n
\n
\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/cookie-consent-bar.component.ts" }, { "path": "packages/registry-angular/blocks/cookie-consent/cookie-consent-preferences.component.ts", "content": "// Granular cookie consent dialog: each category states its purpose and retention, with a\n// switch. Strictly-necessary is listed and shown locked rather than hidden — omitting it\n// implies there is nothing there, which is not true. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core'\nimport { Lock, LucideAngularModule } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport interface CookieCategory {\n id: string\n label: string\n purpose: string\n retention: string\n locked: boolean\n}\n\nconst categories: CookieCategory[] = [\n {\n id: 'necessary',\n label: 'Strictly necessary',\n purpose: 'Session and sign-in state. Without these the app cannot keep you logged in.',\n retention: 'Session',\n locked: true,\n },\n {\n id: 'analytics',\n label: 'Product analytics',\n purpose: 'Which pages are read and where people give up. Aggregated, never sold.',\n retention: '13 months',\n locked: false,\n },\n {\n id: 'support',\n label: 'Support chat',\n purpose: 'Keeps a conversation open across page loads so you do not repeat yourself.',\n retention: '30 days',\n locked: false,\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cookie-consent-preferences, [ui-cookie-consent-preferences]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n
\n
\n
\n Privacy\n

Choose what we store

\n

\n Each category says what it is for and how long it is kept. Nothing here is advertising.\n

\n
\n\n \n\n
    \n @for (category of categories; track category.id) {\n
  • \n
    \n
    \n

    {{ category.label }}

    \n @if (category.locked) {\n \n \n Required\n \n }\n
    \n

    {{ category.purpose }}

    \n

    Kept {{ category.retention }}

    \n
    \n \n
    • \n }\n
\n\n
\n \n \n
\n
\n
\n
\n `,\n})\nexport class UiCookieConsentPreferencesComponent {\n protected readonly Lock = Lock\n protected readonly categories = categories\n\n readonly open = signal(true)\n readonly choices = signal>({ necessary: true, analytics: false, support: false })\n\n setChoice(id: string, value: boolean): void {\n this.choices.update((prev) => ({ ...prev, [id]: value }))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cookie-consent/cookie-consent-preferences.component.ts" }, { "path": "packages/registry-angular/blocks/cookie-consent/index.ts", "content": "export { UiCookieConsentBannerComponent, type CookieConsentBannerVariant } from './cookie-consent-banner.component'\nexport { UiCookieConsentBarComponent, type CookieConsentChoice } from './cookie-consent-bar.component'\nexport { UiCookieConsentPreferencesComponent, type CookieCategory } from './cookie-consent-preferences.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cookie-consent/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/dialog.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "Consent trio covering the whole banner-to-dialog flow: a full-width banner with inline preferences, a bottom bar with equally weighted accept, reject, and manage actions, and a granular preferences dialog with per-category purpose, retention, and switches.", "categories": [ "legal", "marketing", "feedback" ] }