@a.nemreen/dga-ui 0.3.1 → 0.3.3

package/README.md

@@ -23,16 +23,16 @@ Standalone Angular UI components for the DGA design system — forms, overlays,
 - Forms: input, select, checkbox, radio, switch, OTP, upload, date picker, …
 - Overlays: dialog, modal, drawer, toast, menu, tooltip
 - Shell: header, top bar, hero, footer, preloader
-- Feedback & a11y: alert, cookies, accessibility panel, skip link
+- Feedback & a11y: alert, cookies, skip link (accessibility panel → `@a.nemreen/a11y`)
 - Layout: card, section, grid, clamp, expandable
 
 ## Install
 
 ```bash
-npm install @a.nemreen/dga-ui @a.nemreen/dga-tokens @platformscode/icons
+npm install @a.nemreen/dga-ui @a.nemreen/dga-tokens
 ```
 
-**Peers:** `@angular/core` / `@angular/common` / `@angular/platform-browser` ^19, `@a.nemreen/dga-tokens` ^0.2, `@platformscode/icons` ^0.0.11.
+**Peers:** `@angular/core` / `@angular/common` / `@angular/forms` / `@angular/platform-browser` ^19–22, `@a.nemreen/dga-tokens` ^0.2 || ^0.3.
 
 ## Library layout
 
@@ -52,7 +52,19 @@ Sources live under `src/lib/<domain>/<component>/`. Place new work in the matchi
 | `domain/` | Locale/region data helpers (not UI) |
 | `utils/` | Internal helpers only (not exported) |
 
-Consumers always import from `@a.nemreen/dga-ui` — do not deep-import library paths.
+Import from the public package surface — do not deep-import `src/lib/...` paths.
+
+### Secondary entry points
+
+Heavier shell pieces ship as separate FESMs so the primary bundle stays lean:
+
+```ts
+import { DgaHeader } from '@a.nemreen/dga-ui/header';
+import { DgaCookies } from '@a.nemreen/dga-ui/cookies';
+import { DgaDatePicker } from '@a.nemreen/dga-ui/date-picker';
+```
+
+Accessibility tools live in a separate package — [`@a.nemreen/a11y`](https://www.npmjs.com/package/@a.nemreen/a11y) — mount with `Accessibility.mount()`.
 
 ## Setup
 
@@ -113,11 +125,11 @@ Use `arrowNext` / `arrowPrev` for forward/back — they mirror under `dir="rtl"`
 
 Sizes (px): `2xs` 10 · `xs` 14 · `sm` 16 · `md` 18 · `lg` 20 · `xl` 24 · `2xl` 28 · `3xl` 32.
 
-Full SVG catalog remains available from [@platformscode/icons](https://www.npmjs.com/package/@platformscode/icons) when you need a glyph outside the curated `name` list.
+Chrome icons are vendored in the library (no `@platformscode/icons` peer). For content glyphs, use the optional icon font from `@a.nemreen/dga-tokens`.
 
 ### Scroll to top
 
-Floating control that appears after the page scrolls past a threshold. Mount once at the app root; it stacks above `dga-accessibility` by default.
+Floating control that appears after the page scrolls past a threshold. Mount once at the app root; it stacks above `@a.nemreen/a11y` by default.
 
 ```html
 <dga-scroll-top position="end" [threshold]="320" />

package/fesm2022/a.nemreen-dga-ui-cookies.mjs

@@ -0,0 +1,303 @@
+import*as s from"@angular/core";import{inject as y,DestroyRef as S,ElementRef as L,input as o,booleanAttribute as c,output as m,signal as b,computed as u,ChangeDetectionStrategy as P,Component as q}from"@angular/core";import{dgaIsArabic as z,dgaCx as p,dgaSafeHref as D,DgaButton as h,DgaIcon as v,DgaIconBadge as k,DgaLink as x,DgaSwitch as N}from"@a.nemreen/dga-ui";const f="cookieConsent",w=365,I=["_ga","_gid","_gat","_fbp","_fbc"],M={necessary:["security_storage"],essential:["security_storage"],functional:["functionality_storage"],functionality:["functionality_storage"],preferences:["personalization_storage"],personalization:["personalization_storage"],analytics:["analytics_storage"],statistics:["analytics_storage"],marketing:["ad_storage","ad_user_data","ad_personalization"],advertising:["ad_storage","ad_user_data","ad_personalization"],ads:["ad_storage","ad_user_data","ad_personalization"]};class n{destroyRef=y(S);hostRef=y(L);portalHome=null;compact=o(!1,{...ngDevMode?{debugName:"compact"}:{},transform:c});position=o("bottom",...ngDevMode?[{debugName:"position"}]:[]);align=o("",...ngDevMode?[{debugName:"align"}]:[]);delayMs=o(6e3,...ngDevMode?[{debugName:"delayMs"}]:[]);autoShow=o(!0,{...ngDevMode?{debugName:"autoShow"}:{},transform:c});dismissible=o(!0,{...ngDevMode?{debugName:"dismissible"}:{},transform:c});showDecline=o(!0,{...ngDevMode?{debugName:"showDecline"}:{},transform:c});showLinks=o(!0,{...ngDevMode?{debugName:"showLinks"}:{},transform:c});showCustomize=o(!0,{...ngDevMode?{debugName:"showCustomize"}:{},transform:c});overlay=o(!1,{...ngDevMode?{debugName:"overlay"}:{},transform:c});blocking=o(!1,{...ngDevMode?{debugName:"blocking"}:{},transform:c});overlayClose=o(!0,{...ngDevMode?{debugName:"overlayClose"}:{},transform:c});termsHref=o("/terms-and-conditions",...ngDevMode?[{debugName:"termsHref"}]:[]);privacyHref=o("/privacy-policy",...ngDevMode?[{debugName:"privacyHref"}]:[]);cookiePolicyHref=o("",...ngDevMode?[{debugName:"cookiePolicyHref"}]:[]);termsLabel=o("",...ngDevMode?[{debugName:"termsLabel"}]:[]);privacyLabel=o("",...ngDevMode?[{debugName:"privacyLabel"}]:[]);cookiePolicyLabel=o("",...ngDevMode?[{debugName:"cookiePolicyLabel"}]:[]);title=o("",...ngDevMode?[{debugName:"title"}]:[]);description=o("",...ngDevMode?[{debugName:"description"}]:[]);acceptLabel=o("",...ngDevMode?[{debugName:"acceptLabel"}]:[]);declineLabel=o("",...ngDevMode?[{debugName:"declineLabel"}]:[]);customizeLabel=o("",...ngDevMode?[{debugName:"customizeLabel"}]:[]);saveLabel=o("",...ngDevMode?[{debugName:"saveLabel"}]:[]);icon=o("cookie",...ngDevMode?[{debugName:"icon"}]:[]);gaTrackingIds=o("",...ngDevMode?[{debugName:"gaTrackingIds"}]:[]);consentDays=o(w,...ngDevMode?[{debugName:"consentDays"}]:[]);consentCookieName=o(f,...ngDevMode?[{debugName:"consentCookieName"}]:[]);analyticsCookieNames=o(I,...ngDevMode?[{debugName:"analyticsCookieNames"}]:[]);categories=o([],...ngDevMode?[{debugName:"categories"}]:[]);accepted=m();declined=m();closed=m();decided=m();preferencesChange=m();decision=m();visible=b(!1,...ngDevMode?[{debugName:"visible"}]:[]);mounted=b(!1,...ngDevMode?[{debugName:"mounted"}]:[]);customizing=b(!1,...ngDevMode?[{debugName:"customizing"}]:[]);draftPrefs=b({},...ngDevMode?[{debugName:"draftPrefs"}]:[]);seq=Math.random().toString(36).slice(2,8);titleId=`dga-cookies-title-${this.seq}`;bodyId=`dga-cookies-body-${this.seq}`;openTimer=null;closeTimer=null;copy=u(()=>{const e=z();return{title:e?"ملفات تعريف الارتباط":"Cookies",body:e?"يستخدم هذا الموقع ملفات تعريف الارتباط لضمان سهولة الاستخدام وتقديم تجربة تصفح محسّنة. بمتابعتك للتصفح فإنك تقرّ وتوافق على استخدامها.":"This website uses cookies to ensure ease of use and provide an enhanced browsing experience. By continuing to browse this site, you acknowledge and accept the use of cookies.",terms:e?"الشروط والأحكام":"Terms & Conditions",privacy:e?"سياسة الخصوصية":"Privacy Policy",cookiePolicy:e?"سياسة ملفات الارتباط":"Cookie Policy",accept:e?"قبول":"Accept",acceptAll:e?"قبول الكل":"Accept All",decline:e?"رفض غير الضروري":"Reject Non-Essential",customize:e?"تخصيص":"Customize",save:e?"حفظ التفضيلات":"Save Preferences",categories:e?"فئات ملفات الارتباط":"Cookie categories",policies:e?"سياسات الموقع":"Site policies",close:e?"إغلاق":"Close"}},...ngDevMode?[{debugName:"copy"}]:[]);resolvedCategories=u(()=>[...this.categories()??[]],...ngDevMode?[{debugName:"resolvedCategories"}]:[]);resolvedLinks=u(()=>{const e=this.copy(),t=[],a=this.termsHref();a&&t.push({href:a,label:this.termsLabel()||e.terms});const i=this.privacyHref();i&&t.push({href:i,label:this.privacyLabel()||e.privacy});const r=this.cookiePolicyHref();return r&&t.push({href:r,label:this.cookiePolicyLabel()||e.cookiePolicy}),t},...ngDevMode?[{debugName:"resolvedLinks"}]:[]);actionsClasses=u(()=>p("mt-2xl grid w-full shrink-0 gap-md",this.showDecline()?"grid-cols-1 sm:grid-cols-2":"grid-cols-1"),...ngDevMode?[{debugName:"actionsClasses"}]:[]);placement=u(()=>T(this.position(),this.align()),...ngDevMode?[{debugName:"placement"}]:[]);hasOverlay=u(()=>this.overlay()||this.blocking(),...ngDevMode?[{debugName:"hasOverlay"}]:[]);panelClasses=u(()=>{const e=this.compact(),{edge:t,align:a}=this.placement(),i="fixed z-urgent flex max-h-[min(100dvh-2rem,42rem)] flex-col overflow-hidden border border-border bg-elevated p-3xl shadow-xl backdrop-blur-md supports-[backdrop-filter]:bg-elevated/95";if(!e)return t==="top"?p(i,"inset-x-0 top-0 w-full rounded-b-2xl sm:inset-x-xl sm:top-xl sm:mx-auto sm:w-[min(100%-2rem,42rem)] sm:rounded-2xl"):p(i,"inset-x-0 bottom-0 w-full rounded-t-2xl sm:inset-x-xl sm:bottom-xl sm:mx-auto sm:w-[min(100%-2rem,42rem)] sm:rounded-2xl");const r="w-[min(100%-2rem,26rem)] rounded-2xl sm:w-[min(100%-2rem,28rem)]",d=t==="top"?"top-xl sm:top-3xl":"bottom-xl sm:bottom-3xl";return a==="start"?p(i,r,d,"start-xl sm:start-3xl"):a==="end"?p(i,r,d,"end-xl sm:end-3xl"):p(i,r,d,"inset-x-xl mx-auto sm:inset-x-auto sm:start-1/2 sm:-translate-x-1/2 rtl:sm:translate-x-1/2")},...ngDevMode?[{debugName:"panelClasses"}]:[]);constructor(){this.destroyRef.onDestroy(()=>{this.clearTimer(),this.clearCloseTimer(),this.restorePortal()})}ngOnInit(){const e=this.readStored();if(e.consent){C(e.consent,e.preferences,this.trackingIds(),this.analyticsCookieNames());return}if(!this.autoShow())return;const t=this.delayMs();t<=0||(this.openTimer=setTimeout(()=>this.show(),t))}hasCategories(){return this.resolvedCategories().length>0}hasLinks(){return this.resolvedLinks().length>0}show(){this.clearTimer(),this.clearCloseTimer(),this.customizing.set(!1),this.draftPrefs.set(this.buildDefaultPrefs(this.readStored().preferences)),this.ensureBodyPortal(),this.mounted.set(!0),requestAnimationFrame(()=>this.visible.set(!0))}dismiss(){this.hidePanel(()=>this.closed.emit())}onOverlayClick(){!this.overlayClose()||!this.dismissible()||this.dismiss()}openCustomize(){this.draftPrefs.set(this.buildDefaultPrefs(this.readStored().preferences)),this.customizing.set(!0)}onCategoryToggle(e,t){this.resolvedCategories().find(i=>i.id===e)?.required||this.draftPrefs.update(i=>({...i,[e]:t}))}accept(){const e=this.buildAllPrefs(!0);this.commit("accepted",e)}decline(){const e=this.buildAllPrefs(!1);this.commit("declined",e)}savePreferences(){const e={...this.draftPrefs()};for(const i of this.resolvedCategories())i.required&&(e[i.id]=!0);const a=this.resolvedCategories().some(i=>!i.required&&e[i.id]===!0)?"custom":"declined";this.commit(a,e)}commit(e,t){n.writeConsent(e,t,{name:this.consentCookieName(),days:this.consentDays(),hasCategories:this.hasCategories()}),C(e,t,this.trackingIds(),this.analyticsCookieNames()),this.hidePanel(()=>{e==="accepted"&&this.accepted.emit(),e==="declined"&&this.declined.emit(),this.decided.emit(e),this.preferencesChange.emit(t),this.decision.emit({consent:e,preferences:t})})}buildDefaultPrefs(e){const t={};for(const a of this.resolvedCategories())a.required?t[a.id]=!0:e&&a.id in e?t[a.id]=!!e[a.id]:t[a.id]=!!a.defaultEnabled;return t}buildAllPrefs(e){const t={};for(const a of this.resolvedCategories())t[a.id]=a.required?!0:e;return t}readStored(){return n.parseStored(n.get(this.consentCookieName()))}hidePanel(e){this.visible.set(!1),this.clearCloseTimer();const a=typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches?0:200;this.closeTimer=setTimeout(()=>{this.mounted.set(!1),this.customizing.set(!1),this.closeTimer=null,e?.()},a)}trackingIds(){const e=this.gaTrackingIds();return Array.isArray(e)?[...e].filter(Boolean):String(e??"").split(",").map(a=>a.trim()).filter(Boolean)}ensureBodyPortal(){if(typeof document>"u")return;const e=this.hostRef.nativeElement;e.parentElement!==document.body&&(this.portalHome=e.parentNode,document.body.appendChild(e))}restorePortal(){const e=this.hostRef.nativeElement;if(!this.portalHome||e.parentNode===this.portalHome){this.portalHome=null;return}try{this.portalHome.appendChild(e)}catch{}this.portalHome=null}clearTimer(){this.openTimer!==null&&(clearTimeout(this.openTimer),this.openTimer=null)}clearCloseTimer(){this.closeTimer!==null&&(clearTimeout(this.closeTimer),this.closeTimer=null)}static getConsent(e=f){return n.parseStored(n.get(e)).consent}static getPreferences(e=f){return n.parseStored(n.get(e)).preferences}static setConsent(e,t){n.writeConsent(e,t?.preferences??null,{name:t?.name??f,days:t?.days??w,hasCategories:!!t?.preferences})}static clearConsent(e=f){n.delete(e)}static parseStored(e){if(!e)return{consent:null,preferences:null};if(e==="accepted"||e==="declined"||e==="custom")return{consent:e,preferences:null};try{const t=JSON.parse(e);if(t&&typeof t=="object"&&!Array.isArray(t)){if(t.status==="accepted"||t.status==="declined"||t.status==="custom")return{consent:t.status,preferences:t.preferences??null};const a={};for(const[i,r]of Object.entries(t))typeof r=="boolean"&&(a[i]=r);if(Object.keys(a).length)return{consent:"custom",preferences:a}}}catch{}return{consent:null,preferences:null}}static writeConsent(e,t,a){if(a.hasCategories&&t){n.set(a.name,JSON.stringify({status:e,preferences:t}),a.days);return}n.set(a.name,e==="custom"?"accepted":e,a.days)}static get(e){if(typeof document>"u")try{return localStorage.getItem(`dga_${e}`)}catch{return null}if(location.protocol==="file:")try{return localStorage.getItem(`dga_${e}`)}catch{return null}const t=document.cookie.match(new RegExp(`(?:^|; )${R(e)}=([^;]*)`));return t?decodeURIComponent(t[1]):null}static set(e,t,a=30){if(typeof document>"u"||location.protocol==="file:"){try{localStorage.setItem(`dga_${e}`,t)}catch{}return}const i=Math.max(0,Math.floor(a*86400));document.cookie=`${e}=${encodeURIComponent(t)}; path=/; max-age=${i}; SameSite=Lax`}static delete(e){if(typeof document>"u"||location.protocol==="file:"){try{localStorage.removeItem(`dga_${e}`)}catch{}return}document.cookie=`${e}=; path=/; max-age=0; SameSite=Lax`,document.cookie=`${e}=; path=/; max-age=0; domain=${location.hostname}; SameSite=Lax`}safeHref(e){return D(e)}static ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:s,type:n,deps:[],target:s.ɵɵFactoryTarget.Component});static ɵcmp=s.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.0.7",type:n,isStandalone:!0,selector:"dga-cookies",inputs:{compact:{classPropertyName:"compact",publicName:"compact",isSignal:!0,isRequired:!1,transformFunction:null},position:{classPropertyName:"position",publicName:"position",isSignal:!0,isRequired:!1,transformFunction:null},align:{classPropertyName:"align",publicName:"align",isSignal:!0,isRequired:!1,transformFunction:null},delayMs:{classPropertyName:"delayMs",publicName:"delayMs",isSignal:!0,isRequired:!1,transformFunction:null},autoShow:{classPropertyName:"autoShow",publicName:"autoShow",isSignal:!0,isRequired:!1,transformFunction:null},dismissible:{classPropertyName:"dismissible",publicName:"dismissible",isSignal:!0,isRequired:!1,transformFunction:null},showDecline:{classPropertyName:"showDecline",publicName:"showDecline",isSignal:!0,isRequired:!1,transformFunction:null},showLinks:{classPropertyName:"showLinks",publicName:"showLinks",isSignal:!0,isRequired:!1,transformFunction:null},showCustomize:{classPropertyName:"showCustomize",publicName:"showCustomize",isSignal:!0,isRequired:!1,transformFunction:null},overlay:{classPropertyName:"overlay",publicName:"overlay",isSignal:!0,isRequired:!1,transformFunction:null},blocking:{classPropertyName:"blocking",publicName:"blocking",isSignal:!0,isRequired:!1,transformFunction:null},overlayClose:{classPropertyName:"overlayClose",publicName:"overlayClose",isSignal:!0,isRequired:!1,transformFunction:null},termsHref:{classPropertyName:"termsHref",publicName:"termsHref",isSignal:!0,isRequired:!1,transformFunction:null},privacyHref:{classPropertyName:"privacyHref",publicName:"privacyHref",isSignal:!0,isRequired:!1,transformFunction:null},cookiePolicyHref:{classPropertyName:"cookiePolicyHref",publicName:"cookiePolicyHref",isSignal:!0,isRequired:!1,transformFunction:null},termsLabel:{classPropertyName:"termsLabel",publicName:"termsLabel",isSignal:!0,isRequired:!1,transformFunction:null},privacyLabel:{classPropertyName:"privacyLabel",publicName:"privacyLabel",isSignal:!0,isRequired:!1,transformFunction:null},cookiePolicyLabel:{classPropertyName:"cookiePolicyLabel",publicName:"cookiePolicyLabel",isSignal:!0,isRequired:!1,transformFunction:null},title:{classPropertyName:"title",publicName:"title",isSignal:!0,isRequired:!1,transformFunction:null},description:{classPropertyName:"description",publicName:"description",isSignal:!0,isRequired:!1,transformFunction:null},acceptLabel:{classPropertyName:"acceptLabel",publicName:"acceptLabel",isSignal:!0,isRequired:!1,transformFunction:null},declineLabel:{classPropertyName:"declineLabel",publicName:"declineLabel",isSignal:!0,isRequired:!1,transformFunction:null},customizeLabel:{classPropertyName:"customizeLabel",publicName:"customizeLabel",isSignal:!0,isRequired:!1,transformFunction:null},saveLabel:{classPropertyName:"saveLabel",publicName:"saveLabel",isSignal:!0,isRequired:!1,transformFunction:null},icon:{classPropertyName:"icon",publicName:"icon",isSignal:!0,isRequired:!1,transformFunction:null},gaTrackingIds:{classPropertyName:"gaTrackingIds",publicName:"gaTrackingIds",isSignal:!0,isRequired:!1,transformFunction:null},consentDays:{classPropertyName:"consentDays",publicName:"consentDays",isSignal:!0,isRequired:!1,transformFunction:null},consentCookieName:{classPropertyName:"consentCookieName",publicName:"consentCookieName",isSignal:!0,isRequired:!1,transformFunction:null},analyticsCookieNames:{classPropertyName:"analyticsCookieNames",publicName:"analyticsCookieNames",isSignal:!0,isRequired:!1,transformFunction:null},categories:{classPropertyName:"categories",publicName:"categories",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{accepted:"accepted",declined:"declined",closed:"closed",decided:"decided",preferencesChange:"preferencesChange",decision:"decision"},host:{properties:{"attr.data-compact":"compact() || null","attr.data-overlay":"hasOverlay() || null"},classAttribute:"contents"},ngImport:s,template:`
+    @if (mounted()) {
+      @if (hasOverlay()) {
+        <div
+          class="dga-cookies-backdrop fixed inset-0 z-urgent bg-overlay/40"
+          aria-hidden="true"
+          data-part="backdrop"
+          (click)="onOverlayClick()"
+        ></div>
+      }
+      <div
+        role="dialog"
+        [attr.aria-modal]="hasOverlay() ? 'true' : 'false'"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="bodyId"
+        [class]="panelClasses()"
+        [class.dga-cookies-panel--open]="visible()"
+        [class.dga-cookies-panel--closing]="!visible()"
+        [attr.data-state]="visible() ? 'open' : 'closing'"
+        [attr.data-position]="placement().edge"
+        [attr.data-align]="placement().align"
+        [attr.data-overlay]="hasOverlay() || null"
+      >
+        <div class="flex shrink-0 items-center justify-between gap-lg">
+          <dga-icon-badge size="md" appearance="outline">
+            <dga-icon [name]="icon()" tone="primary" size="lg" />
+          </dga-icon-badge>
+          @if (dismissible()) {
+            <button
+              dgaButton
+              type="button"
+              variant="ghost"
+              size="md"
+              iconOnly
+              class="shrink-0 text-muted"
+              [attr.aria-label]="copy().close"
+              (click)="dismiss()"
+            >
+              <dga-icon name="close" size="md" tone="muted" />
+            </button>
+          }
+        </div>
+
+        <div class="dga-cookies-body mt-2xl flex min-h-0 flex-1 flex-col gap-2xl overflow-y-auto pe-xs">
+          <div class="min-w-0 shrink-0">
+            <h2 [id]="titleId" class="m-0 text-body-lg font-bold tracking-tight text-display">
+              {{ title() || copy().title }}
+            </h2>
+            <p
+              [id]="bodyId"
+              class="m-0 mt-md text-body-md leading-relaxed text-paragraph"
+            >
+              {{ description() || copy().body }}
+            </p>
+          </div>
+
+          @if (showLinks() && hasLinks()) {
+            <nav
+              class="flex shrink-0 flex-col gap-sm text-body-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-md sm:gap-y-sm"
+              [attr.aria-label]="copy().policies"
+            >
+              @for (link of resolvedLinks(); track link.href; let last = $last) {
+                <a dgaLink class="w-fit" [href]="safeHref(link.href)">{{ link.label }}</a>
+                @if (!last) {
+                  <span class="hidden select-none text-border sm:inline" aria-hidden="true">|</span>
+                }
+              }
+            </nav>
+          }
+
+          @if (customizing() && resolvedCategories().length) {
+            <div
+              class="flex shrink-0 flex-col divide-y divide-border overflow-hidden rounded-lg border border-border bg-surface"
+              role="group"
+              [attr.aria-label]="copy().categories"
+            >
+              @for (cat of resolvedCategories(); track cat.id) {
+                <div class="flex items-start justify-between gap-lg px-xl py-lg">
+                  <div class="min-w-0 flex-1">
+                    <div class="text-body-sm font-semibold text-display">{{ cat.label }}</div>
+                    @if (cat.description) {
+                      <div class="mt-xs text-body-xs leading-relaxed text-muted">
+                        {{ cat.description }}
+                      </div>
+                    }
+                  </div>
+                  <dga-switch
+                    size="sm"
+                    class="mt-xxs"
+                    [checked]="draftPrefs()[cat.id] === true"
+                    [disabled]="!!cat.required"
+                    [label]="cat.label"
+                    (changed)="onCategoryToggle(cat.id, $event)"
+                  />
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <div [class]="actionsClasses()">
+          <button
+            dgaButton
+            type="button"
+            variant="primary"
+            size="md"
+            class="w-full whitespace-nowrap"
+            (click)="accept()"
+          >
+            {{ acceptLabel() || (hasCategories() ? copy().acceptAll : copy().accept) }}
+          </button>
+          @if (showDecline()) {
+            <button
+              dgaButton
+              type="button"
+              variant="outline"
+              size="md"
+              class="w-full whitespace-nowrap"
+              (click)="decline()"
+            >
+              {{ declineLabel() || copy().decline }}
+            </button>
+          }
+          @if (hasCategories() && showCustomize()) {
+            @if (customizing()) {
+              <button
+                dgaButton
+                type="button"
+                variant="subtle"
+                size="md"
+                class="w-full whitespace-nowrap sm:col-span-2"
+                (click)="savePreferences()"
+              >
+                {{ saveLabel() || copy().save }}
+              </button>
+            } @else {
+              <button
+                dgaButton
+                type="button"
+                variant="subtle"
+                size="md"
+                class="w-full whitespace-nowrap sm:col-span-2"
+                (click)="openCustomize()"
+              >
+                {{ customizeLabel() || copy().customize }}
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `,isInline:!0,styles:["@keyframes dga-cookie-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-cookie-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}.dga-cookies-panel--open{animation:dga-cookie-in .32s cubic-bezier(.22,1,.36,1) both}.dga-cookies-panel--closing{animation:dga-cookie-out .2s ease-in both;pointer-events:none}.dga-cookies-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent) transparent}.dga-cookies-body::-webkit-scrollbar{width:4px}.dga-cookies-body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent)}@media(prefers-reduced-motion:reduce){.dga-cookies-panel--open,.dga-cookies-panel--closing{animation:none!important}}\n"],dependencies:[{kind:"directive",type:h,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","iconOnly","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:v,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]},{kind:"component",type:k,selector:"dga-icon-badge",inputs:["size","appearance"]},{kind:"directive",type:x,selector:"a[dgaLink]",inputs:["variant","dropdown"]},{kind:"component",type:N,selector:"dga-switch",inputs:["checked","size","label","disabled"],outputs:["checkedChange","changed"]}],changeDetection:s.ChangeDetectionStrategy.OnPush})}s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:s,type:n,decorators:[{type:q,args:[{selector:"dga-cookies",standalone:!0,imports:[h,v,k,x,N],template:`
+    @if (mounted()) {
+      @if (hasOverlay()) {
+        <div
+          class="dga-cookies-backdrop fixed inset-0 z-urgent bg-overlay/40"
+          aria-hidden="true"
+          data-part="backdrop"
+          (click)="onOverlayClick()"
+        ></div>
+      }
+      <div
+        role="dialog"
+        [attr.aria-modal]="hasOverlay() ? 'true' : 'false'"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-describedby]="bodyId"
+        [class]="panelClasses()"
+        [class.dga-cookies-panel--open]="visible()"
+        [class.dga-cookies-panel--closing]="!visible()"
+        [attr.data-state]="visible() ? 'open' : 'closing'"
+        [attr.data-position]="placement().edge"
+        [attr.data-align]="placement().align"
+        [attr.data-overlay]="hasOverlay() || null"
+      >
+        <div class="flex shrink-0 items-center justify-between gap-lg">
+          <dga-icon-badge size="md" appearance="outline">
+            <dga-icon [name]="icon()" tone="primary" size="lg" />
+          </dga-icon-badge>
+          @if (dismissible()) {
+            <button
+              dgaButton
+              type="button"
+              variant="ghost"
+              size="md"
+              iconOnly
+              class="shrink-0 text-muted"
+              [attr.aria-label]="copy().close"
+              (click)="dismiss()"
+            >
+              <dga-icon name="close" size="md" tone="muted" />
+            </button>
+          }
+        </div>
+
+        <div class="dga-cookies-body mt-2xl flex min-h-0 flex-1 flex-col gap-2xl overflow-y-auto pe-xs">
+          <div class="min-w-0 shrink-0">
+            <h2 [id]="titleId" class="m-0 text-body-lg font-bold tracking-tight text-display">
+              {{ title() || copy().title }}
+            </h2>
+            <p
+              [id]="bodyId"
+              class="m-0 mt-md text-body-md leading-relaxed text-paragraph"
+            >
+              {{ description() || copy().body }}
+            </p>
+          </div>
+
+          @if (showLinks() && hasLinks()) {
+            <nav
+              class="flex shrink-0 flex-col gap-sm text-body-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-md sm:gap-y-sm"
+              [attr.aria-label]="copy().policies"
+            >
+              @for (link of resolvedLinks(); track link.href; let last = $last) {
+                <a dgaLink class="w-fit" [href]="safeHref(link.href)">{{ link.label }}</a>
+                @if (!last) {
+                  <span class="hidden select-none text-border sm:inline" aria-hidden="true">|</span>
+                }
+              }
+            </nav>
+          }
+
+          @if (customizing() && resolvedCategories().length) {
+            <div
+              class="flex shrink-0 flex-col divide-y divide-border overflow-hidden rounded-lg border border-border bg-surface"
+              role="group"
+              [attr.aria-label]="copy().categories"
+            >
+              @for (cat of resolvedCategories(); track cat.id) {
+                <div class="flex items-start justify-between gap-lg px-xl py-lg">
+                  <div class="min-w-0 flex-1">
+                    <div class="text-body-sm font-semibold text-display">{{ cat.label }}</div>
+                    @if (cat.description) {
+                      <div class="mt-xs text-body-xs leading-relaxed text-muted">
+                        {{ cat.description }}
+                      </div>
+                    }
+                  </div>
+                  <dga-switch
+                    size="sm"
+                    class="mt-xxs"
+                    [checked]="draftPrefs()[cat.id] === true"
+                    [disabled]="!!cat.required"
+                    [label]="cat.label"
+                    (changed)="onCategoryToggle(cat.id, $event)"
+                  />
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <div [class]="actionsClasses()">
+          <button
+            dgaButton
+            type="button"
+            variant="primary"
+            size="md"
+            class="w-full whitespace-nowrap"
+            (click)="accept()"
+          >
+            {{ acceptLabel() || (hasCategories() ? copy().acceptAll : copy().accept) }}
+          </button>
+          @if (showDecline()) {
+            <button
+              dgaButton
+              type="button"
+              variant="outline"
+              size="md"
+              class="w-full whitespace-nowrap"
+              (click)="decline()"
+            >
+              {{ declineLabel() || copy().decline }}
+            </button>
+          }
+          @if (hasCategories() && showCustomize()) {
+            @if (customizing()) {
+              <button
+                dgaButton
+                type="button"
+                variant="subtle"
+                size="md"
+                class="w-full whitespace-nowrap sm:col-span-2"
+                (click)="savePreferences()"
+              >
+                {{ saveLabel() || copy().save }}
+              </button>
+            } @else {
+              <button
+                dgaButton
+                type="button"
+                variant="subtle"
+                size="md"
+                class="w-full whitespace-nowrap sm:col-span-2"
+                (click)="openCustomize()"
+              >
+                {{ customizeLabel() || copy().customize }}
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `,host:{class:"contents","[attr.data-compact]":"compact() || null","[attr.data-overlay]":"hasOverlay() || null"},changeDetection:P.OnPush,styles:["@keyframes dga-cookie-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-cookie-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}.dga-cookies-panel--open{animation:dga-cookie-in .32s cubic-bezier(.22,1,.36,1) both}.dga-cookies-panel--closing{animation:dga-cookie-out .2s ease-in both;pointer-events:none}.dga-cookies-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent) transparent}.dga-cookies-body::-webkit-scrollbar{width:4px}.dga-cookies-body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent)}@media(prefers-reduced-motion:reduce){.dga-cookies-panel--open,.dga-cookies-panel--closing{animation:none!important}}\n"]}]}],ctorParameters:()=>[],propDecorators:{compact:[{type:s.Input,args:[{isSignal:!0,alias:"compact",required:!1}]}],position:[{type:s.Input,args:[{isSignal:!0,alias:"position",required:!1}]}],align:[{type:s.Input,args:[{isSignal:!0,alias:"align",required:!1}]}],delayMs:[{type:s.Input,args:[{isSignal:!0,alias:"delayMs",required:!1}]}],autoShow:[{type:s.Input,args:[{isSignal:!0,alias:"autoShow",required:!1}]}],dismissible:[{type:s.Input,args:[{isSignal:!0,alias:"dismissible",required:!1}]}],showDecline:[{type:s.Input,args:[{isSignal:!0,alias:"showDecline",required:!1}]}],showLinks:[{type:s.Input,args:[{isSignal:!0,alias:"showLinks",required:!1}]}],showCustomize:[{type:s.Input,args:[{isSignal:!0,alias:"showCustomize",required:!1}]}],overlay:[{type:s.Input,args:[{isSignal:!0,alias:"overlay",required:!1}]}],blocking:[{type:s.Input,args:[{isSignal:!0,alias:"blocking",required:!1}]}],overlayClose:[{type:s.Input,args:[{isSignal:!0,alias:"overlayClose",required:!1}]}],termsHref:[{type:s.Input,args:[{isSignal:!0,alias:"termsHref",required:!1}]}],privacyHref:[{type:s.Input,args:[{isSignal:!0,alias:"privacyHref",required:!1}]}],cookiePolicyHref:[{type:s.Input,args:[{isSignal:!0,alias:"cookiePolicyHref",required:!1}]}],termsLabel:[{type:s.Input,args:[{isSignal:!0,alias:"termsLabel",required:!1}]}],privacyLabel:[{type:s.Input,args:[{isSignal:!0,alias:"privacyLabel",required:!1}]}],cookiePolicyLabel:[{type:s.Input,args:[{isSignal:!0,alias:"cookiePolicyLabel",required:!1}]}],title:[{type:s.Input,args:[{isSignal:!0,alias:"title",required:!1}]}],description:[{type:s.Input,args:[{isSignal:!0,alias:"description",required:!1}]}],acceptLabel:[{type:s.Input,args:[{isSignal:!0,alias:"acceptLabel",required:!1}]}],declineLabel:[{type:s.Input,args:[{isSignal:!0,alias:"declineLabel",required:!1}]}],customizeLabel:[{type:s.Input,args:[{isSignal:!0,alias:"customizeLabel",required:!1}]}],saveLabel:[{type:s.Input,args:[{isSignal:!0,alias:"saveLabel",required:!1}]}],icon:[{type:s.Input,args:[{isSignal:!0,alias:"icon",required:!1}]}],gaTrackingIds:[{type:s.Input,args:[{isSignal:!0,alias:"gaTrackingIds",required:!1}]}],consentDays:[{type:s.Input,args:[{isSignal:!0,alias:"consentDays",required:!1}]}],consentCookieName:[{type:s.Input,args:[{isSignal:!0,alias:"consentCookieName",required:!1}]}],analyticsCookieNames:[{type:s.Input,args:[{isSignal:!0,alias:"analyticsCookieNames",required:!1}]}],categories:[{type:s.Input,args:[{isSignal:!0,alias:"categories",required:!1}]}],accepted:[{type:s.Output,args:["accepted"]}],declined:[{type:s.Output,args:["declined"]}],closed:[{type:s.Output,args:["closed"]}],decided:[{type:s.Output,args:["decided"]}],preferencesChange:[{type:s.Output,args:["preferencesChange"]}],decision:[{type:s.Output,args:["decision"]}]}});function T(l,e){let t="bottom",a="center";if(l==="start"||l==="center"||l==="end")a=l;else if(l==="top"||l==="bottom")t=l;else{const[i,r]=l.split("-");(i==="top"||i==="bottom")&&(t=i),(r==="start"||r==="center"||r==="end")&&(a=r)}return(e==="start"||e==="center"||e==="end")&&(a=e),{edge:t,align:a}}function R(l){return l.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function C(l,e,t,a){const i=globalThis.gtag,r=O(l,e);if(typeof i=="function"&&i("consent","update",r),!(r.analytics_storage==="granted"||e==null&&l==="accepted")){for(const g of t)globalThis[`ga-disable-${g}`]=!0;for(const g of a)n.delete(g)}}function O(l,e){const t=l==="accepted",a={analytics_storage:t?"granted":"denied",ad_storage:t?"granted":"denied",ad_user_data:t?"granted":"denied",ad_personalization:t?"granted":"denied",functionality_storage:t?"granted":"denied",personalization_storage:t?"granted":"denied",security_storage:"granted"};if(!e)return a;for(const i of Object.keys(a))i!=="security_storage"&&(a[i]="denied");for(const[i,r]of Object.entries(e)){if(!r)continue;const d=M[i];if(d)for(const g of d)a[g]="granted"}return a}export{n as DgaCookies};