@a.nemreen/dga-ui 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -23,16 +23,16 @@ Standalone Angular UI components for the DGA design system — forms, overlays,
23
23
  - Forms: input, select, checkbox, radio, switch, OTP, upload, date picker, …
24
24
  - Overlays: dialog, modal, drawer, toast, menu, tooltip
25
25
  - Shell: header, top bar, hero, footer, preloader
26
- - Feedback & a11y: alert, cookies, accessibility panel, skip link
26
+ - Feedback & a11y: alert, cookies, skip link (accessibility panel `@a.nemreen/a11y`)
27
27
  - Layout: card, section, grid, clamp, expandable
28
28
 
29
29
  ## Install
30
30
 
31
31
  ```bash
32
- npm install @a.nemreen/dga-ui @a.nemreen/dga-tokens @platformscode/icons
32
+ npm install @a.nemreen/dga-ui @a.nemreen/dga-tokens
33
33
  ```
34
34
 
35
- **Peers:** `@angular/core` / `@angular/common` / `@angular/platform-browser` ^19, `@a.nemreen/dga-tokens` ^0.2, `@platformscode/icons` ^0.0.11.
35
+ **Peers:** `@angular/core` / `@angular/common` / `@angular/forms` / `@angular/platform-browser` ^19–22, `@a.nemreen/dga-tokens` ^0.2 || ^0.3.
36
36
 
37
37
  ## Library layout
38
38
 
@@ -52,7 +52,19 @@ Sources live under `src/lib/<domain>/<component>/`. Place new work in the matchi
52
52
  | `domain/` | Locale/region data helpers (not UI) |
53
53
  | `utils/` | Internal helpers only (not exported) |
54
54
 
55
- Consumers always import from `@a.nemreen/dga-ui` — do not deep-import library paths.
55
+ Import from the public package surface — do not deep-import `src/lib/...` paths.
56
+
57
+ ### Secondary entry points
58
+
59
+ Heavier shell pieces ship as separate FESMs so the primary bundle stays lean:
60
+
61
+ ```ts
62
+ import { DgaHeader } from '@a.nemreen/dga-ui/header';
63
+ import { DgaCookies } from '@a.nemreen/dga-ui/cookies';
64
+ import { DgaDatePicker } from '@a.nemreen/dga-ui/date-picker';
65
+ ```
66
+
67
+ Accessibility tools live in a separate package — [`@a.nemreen/a11y`](https://www.npmjs.com/package/@a.nemreen/a11y) — mount with `Accessibility.mount()`.
56
68
 
57
69
  ## Setup
58
70
 
@@ -113,11 +125,11 @@ Use `arrowNext` / `arrowPrev` for forward/back — they mirror under `dir="rtl"`
113
125
 
114
126
  Sizes (px): `2xs` 10 · `xs` 14 · `sm` 16 · `md` 18 · `lg` 20 · `xl` 24 · `2xl` 28 · `3xl` 32.
115
127
 
116
- 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.
128
+ Chrome icons are vendored in the library (no `@platformscode/icons` peer). For content glyphs, use the optional icon font from `@a.nemreen/dga-tokens`.
117
129
 
118
130
  ### Scroll to top
119
131
 
120
- Floating control that appears after the page scrolls past a threshold. Mount once at the app root; it stacks above `dga-accessibility` by default.
132
+ 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.
121
133
 
122
134
  ```html
123
135
  <dga-scroll-top position="end" [threshold]="320" />
@@ -0,0 +1,305 @@
1
+ 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?"\u0645\u0644\u0641\u0627\u062A \u062A\u0639\u0631\u064A\u0641 \u0627\u0644\u0627\u0631\u062A\u0628\u0627\u0637":"Cookies",body:e?"\u064A\u0633\u062A\u062E\u062F\u0645 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0642\u0639 \u0645\u0644\u0641\u0627\u062A \u062A\u0639\u0631\u064A\u0641 \u0627\u0644\u0627\u0631\u062A\u0628\u0627\u0637 \u0644\u0636\u0645\u0627\u0646 \u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0648\u062A\u0642\u062F\u064A\u0645 \u062A\u062C\u0631\u0628\u0629 \u062A\u0635\u0641\u062D \u0645\u062D\u0633\u0651\u0646\u0629. \u0628\u0645\u062A\u0627\u0628\u0639\u062A\u0643 \u0644\u0644\u062A\u0635\u0641\u062D \u0641\u0625\u0646\u0643 \u062A\u0642\u0631\u0651 \u0648\u062A\u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u0627\u0633\u062A\u062E\u062F\u0627\u0645\u0647\u0627.":"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?"\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062D\u0643\u0627\u0645":"Terms & Conditions",privacy:e?"\u0633\u064A\u0627\u0633\u0629 \u0627\u0644\u062E\u0635\u0648\u0635\u064A\u0629":"Privacy Policy",cookiePolicy:e?"\u0633\u064A\u0627\u0633\u0629 \u0645\u0644\u0641\u0627\u062A \u0627\u0644\u0627\u0631\u062A\u0628\u0627\u0637":"Cookie Policy",accept:e?"\u0642\u0628\u0648\u0644":"Accept",acceptAll:e?"\u0642\u0628\u0648\u0644 \u0627\u0644\u0643\u0644":"Accept All",decline:e?"\u0631\u0641\u0636 \u063A\u064A\u0631 \u0627\u0644\u0636\u0631\u0648\u0631\u064A":"Reject Non-Essential",customize:e?"\u062A\u062E\u0635\u064A\u0635":"Customize",save:e?"\u062D\u0641\u0638 \u0627\u0644\u062A\u0641\u0636\u064A\u0644\u0627\u062A":"Save Preferences",categories:e?"\u0641\u0626\u0627\u062A \u0645\u0644\u0641\u0627\u062A \u0627\u0644\u0627\u0631\u062A\u0628\u0627\u0637":"Cookie categories",policies:e?"\u0633\u064A\u0627\u0633\u0627\u062A \u0627\u0644\u0645\u0648\u0642\u0639":"Site policies",close:e?"\u0625\u063A\u0644\u0627\u0642":"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 \u0275fac=s.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:s,type:n,deps:[],target:s.\u0275\u0275FactoryTarget.Component});static \u0275cmp=s.\u0275\u0275ngDeclareComponent({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:`
2
+ @if (mounted()) {
3
+ @if (hasOverlay()) {
4
+ <div
5
+ class="dga-cookies-backdrop fixed inset-0 z-urgent bg-overlay/40"
6
+ aria-hidden="true"
7
+ data-part="backdrop"
8
+ (click)="onOverlayClick()"
9
+ ></div>
10
+ }
11
+ <div
12
+ role="dialog"
13
+ [attr.aria-modal]="hasOverlay() ? 'true' : 'false'"
14
+ [attr.aria-labelledby]="titleId"
15
+ [attr.aria-describedby]="bodyId"
16
+ [class]="panelClasses()"
17
+ [class.dga-cookies-panel--open]="visible()"
18
+ [class.dga-cookies-panel--closing]="!visible()"
19
+ [attr.data-state]="visible() ? 'open' : 'closing'"
20
+ [attr.data-position]="placement().edge"
21
+ [attr.data-align]="placement().align"
22
+ [attr.data-overlay]="hasOverlay() || null"
23
+ >
24
+ <div class="flex shrink-0 items-center justify-between gap-lg">
25
+ <dga-icon-badge size="md" appearance="outline">
26
+ <dga-icon [name]="icon()" tone="primary" size="lg" />
27
+ </dga-icon-badge>
28
+ @if (dismissible()) {
29
+ <button
30
+ dgaButton
31
+ type="button"
32
+ variant="ghost"
33
+ size="md"
34
+ iconOnly
35
+ class="shrink-0 text-muted"
36
+ [attr.aria-label]="copy().close"
37
+ (click)="dismiss()"
38
+ >
39
+ <dga-icon name="close" size="md" tone="muted" />
40
+ </button>
41
+ }
42
+ </div>
43
+
44
+ <div class="dga-cookies-body mt-2xl flex min-h-0 flex-1 flex-col gap-2xl overflow-y-auto pe-xs">
45
+ <div class="min-w-0 shrink-0">
46
+ <h2 [id]="titleId" class="m-0 text-body-lg font-bold tracking-tight text-display">
47
+ {{ title() || copy().title }}
48
+ </h2>
49
+ <p
50
+ [id]="bodyId"
51
+ class="m-0 mt-md text-body-md leading-relaxed text-paragraph"
52
+ >
53
+ {{ description() || copy().body }}
54
+ </p>
55
+ </div>
56
+
57
+ @if (showLinks() && hasLinks()) {
58
+ <nav
59
+ 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"
60
+ [attr.aria-label]="copy().policies"
61
+ >
62
+ @for (link of resolvedLinks(); track link.href; let last = $last) {
63
+ <a dgaLink class="w-fit" [href]="safeHref(link.href)">{{ link.label }}</a>
64
+ @if (!last) {
65
+ <span class="hidden select-none text-border sm:inline" aria-hidden="true">|</span>
66
+ }
67
+ }
68
+ </nav>
69
+ }
70
+
71
+ @if (customizing() && resolvedCategories().length) {
72
+ <div
73
+ class="flex shrink-0 flex-col divide-y divide-border overflow-hidden rounded-lg border border-border bg-surface"
74
+ role="group"
75
+ [attr.aria-label]="copy().categories"
76
+ >
77
+ @for (cat of resolvedCategories(); track cat.id) {
78
+ <div class="flex items-start justify-between gap-lg px-xl py-lg">
79
+ <div class="min-w-0 flex-1">
80
+ <div class="text-body-sm font-semibold text-display">{{ cat.label }}</div>
81
+ @if (cat.description) {
82
+ <div class="mt-xs text-body-xs leading-relaxed text-muted">
83
+ {{ cat.description }}
84
+ </div>
85
+ }
86
+ </div>
87
+ <dga-switch
88
+ size="sm"
89
+ class="mt-xxs"
90
+ [checked]="draftPrefs()[cat.id] === true"
91
+ [disabled]="!!cat.required"
92
+ [label]="cat.label"
93
+ (changed)="onCategoryToggle(cat.id, $event)"
94
+ />
95
+ </div>
96
+ }
97
+ </div>
98
+ }
99
+ </div>
100
+
101
+ <div [class]="actionsClasses()">
102
+ <button
103
+ dgaButton
104
+ type="button"
105
+ variant="primary"
106
+ size="md"
107
+ class="w-full whitespace-nowrap"
108
+ (click)="accept()"
109
+ >
110
+ {{ acceptLabel() || (hasCategories() ? copy().acceptAll : copy().accept) }}
111
+ </button>
112
+ @if (showDecline()) {
113
+ <button
114
+ dgaButton
115
+ type="button"
116
+ variant="outline"
117
+ size="md"
118
+ class="w-full whitespace-nowrap"
119
+ (click)="decline()"
120
+ >
121
+ {{ declineLabel() || copy().decline }}
122
+ </button>
123
+ }
124
+ @if (hasCategories() && showCustomize()) {
125
+ @if (customizing()) {
126
+ <button
127
+ dgaButton
128
+ type="button"
129
+ variant="subtle"
130
+ size="md"
131
+ class="w-full whitespace-nowrap sm:col-span-2"
132
+ (click)="savePreferences()"
133
+ >
134
+ {{ saveLabel() || copy().save }}
135
+ </button>
136
+ } @else {
137
+ <button
138
+ dgaButton
139
+ type="button"
140
+ variant="subtle"
141
+ size="md"
142
+ class="w-full whitespace-nowrap sm:col-span-2"
143
+ (click)="openCustomize()"
144
+ >
145
+ {{ customizeLabel() || copy().customize }}
146
+ </button>
147
+ }
148
+ }
149
+ </div>
150
+ </div>
151
+ }
152
+ `,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}}
153
+ `],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.\u0275\u0275ngDeclareClassMetadata({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:`
154
+ @if (mounted()) {
155
+ @if (hasOverlay()) {
156
+ <div
157
+ class="dga-cookies-backdrop fixed inset-0 z-urgent bg-overlay/40"
158
+ aria-hidden="true"
159
+ data-part="backdrop"
160
+ (click)="onOverlayClick()"
161
+ ></div>
162
+ }
163
+ <div
164
+ role="dialog"
165
+ [attr.aria-modal]="hasOverlay() ? 'true' : 'false'"
166
+ [attr.aria-labelledby]="titleId"
167
+ [attr.aria-describedby]="bodyId"
168
+ [class]="panelClasses()"
169
+ [class.dga-cookies-panel--open]="visible()"
170
+ [class.dga-cookies-panel--closing]="!visible()"
171
+ [attr.data-state]="visible() ? 'open' : 'closing'"
172
+ [attr.data-position]="placement().edge"
173
+ [attr.data-align]="placement().align"
174
+ [attr.data-overlay]="hasOverlay() || null"
175
+ >
176
+ <div class="flex shrink-0 items-center justify-between gap-lg">
177
+ <dga-icon-badge size="md" appearance="outline">
178
+ <dga-icon [name]="icon()" tone="primary" size="lg" />
179
+ </dga-icon-badge>
180
+ @if (dismissible()) {
181
+ <button
182
+ dgaButton
183
+ type="button"
184
+ variant="ghost"
185
+ size="md"
186
+ iconOnly
187
+ class="shrink-0 text-muted"
188
+ [attr.aria-label]="copy().close"
189
+ (click)="dismiss()"
190
+ >
191
+ <dga-icon name="close" size="md" tone="muted" />
192
+ </button>
193
+ }
194
+ </div>
195
+
196
+ <div class="dga-cookies-body mt-2xl flex min-h-0 flex-1 flex-col gap-2xl overflow-y-auto pe-xs">
197
+ <div class="min-w-0 shrink-0">
198
+ <h2 [id]="titleId" class="m-0 text-body-lg font-bold tracking-tight text-display">
199
+ {{ title() || copy().title }}
200
+ </h2>
201
+ <p
202
+ [id]="bodyId"
203
+ class="m-0 mt-md text-body-md leading-relaxed text-paragraph"
204
+ >
205
+ {{ description() || copy().body }}
206
+ </p>
207
+ </div>
208
+
209
+ @if (showLinks() && hasLinks()) {
210
+ <nav
211
+ 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"
212
+ [attr.aria-label]="copy().policies"
213
+ >
214
+ @for (link of resolvedLinks(); track link.href; let last = $last) {
215
+ <a dgaLink class="w-fit" [href]="safeHref(link.href)">{{ link.label }}</a>
216
+ @if (!last) {
217
+ <span class="hidden select-none text-border sm:inline" aria-hidden="true">|</span>
218
+ }
219
+ }
220
+ </nav>
221
+ }
222
+
223
+ @if (customizing() && resolvedCategories().length) {
224
+ <div
225
+ class="flex shrink-0 flex-col divide-y divide-border overflow-hidden rounded-lg border border-border bg-surface"
226
+ role="group"
227
+ [attr.aria-label]="copy().categories"
228
+ >
229
+ @for (cat of resolvedCategories(); track cat.id) {
230
+ <div class="flex items-start justify-between gap-lg px-xl py-lg">
231
+ <div class="min-w-0 flex-1">
232
+ <div class="text-body-sm font-semibold text-display">{{ cat.label }}</div>
233
+ @if (cat.description) {
234
+ <div class="mt-xs text-body-xs leading-relaxed text-muted">
235
+ {{ cat.description }}
236
+ </div>
237
+ }
238
+ </div>
239
+ <dga-switch
240
+ size="sm"
241
+ class="mt-xxs"
242
+ [checked]="draftPrefs()[cat.id] === true"
243
+ [disabled]="!!cat.required"
244
+ [label]="cat.label"
245
+ (changed)="onCategoryToggle(cat.id, $event)"
246
+ />
247
+ </div>
248
+ }
249
+ </div>
250
+ }
251
+ </div>
252
+
253
+ <div [class]="actionsClasses()">
254
+ <button
255
+ dgaButton
256
+ type="button"
257
+ variant="primary"
258
+ size="md"
259
+ class="w-full whitespace-nowrap"
260
+ (click)="accept()"
261
+ >
262
+ {{ acceptLabel() || (hasCategories() ? copy().acceptAll : copy().accept) }}
263
+ </button>
264
+ @if (showDecline()) {
265
+ <button
266
+ dgaButton
267
+ type="button"
268
+ variant="outline"
269
+ size="md"
270
+ class="w-full whitespace-nowrap"
271
+ (click)="decline()"
272
+ >
273
+ {{ declineLabel() || copy().decline }}
274
+ </button>
275
+ }
276
+ @if (hasCategories() && showCustomize()) {
277
+ @if (customizing()) {
278
+ <button
279
+ dgaButton
280
+ type="button"
281
+ variant="subtle"
282
+ size="md"
283
+ class="w-full whitespace-nowrap sm:col-span-2"
284
+ (click)="savePreferences()"
285
+ >
286
+ {{ saveLabel() || copy().save }}
287
+ </button>
288
+ } @else {
289
+ <button
290
+ dgaButton
291
+ type="button"
292
+ variant="subtle"
293
+ size="md"
294
+ class="w-full whitespace-nowrap sm:col-span-2"
295
+ (click)="openCustomize()"
296
+ >
297
+ {{ customizeLabel() || copy().customize }}
298
+ </button>
299
+ }
300
+ }
301
+ </div>
302
+ </div>
303
+ }
304
+ `,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}}
305
+ `]}]}],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};