@a.nemreen/dga-ui 0.3.1 → 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 +18 -6
- package/fesm2022/a.nemreen-dga-ui-cookies.mjs +305 -0
- package/fesm2022/a.nemreen-dga-ui-date-picker.mjs +387 -0
- package/fesm2022/a.nemreen-dga-ui-header.mjs +2483 -0
- package/fesm2022/a.nemreen-dga-ui.mjs +850 -4420
- package/package.json +20 -4
- package/types/a.nemreen-dga-ui-cookies.d.ts +201 -0
- package/types/a.nemreen-dga-ui-date-picker.d.ts +207 -0
- package/types/a.nemreen-dga-ui-header.d.ts +367 -0
- package/types/a.nemreen-dga-ui.d.ts +212 -1007
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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 `
|
|
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};
|