@atlasng/labs 0.0.2

package/README.md

@@ -0,0 +1,3 @@
+# @atlasng/labs
+
+Work in progress components.

package/cookie-modal/src/lib/tokens.scss

@@ -0,0 +1,26 @@
+@use 'internal/sass-utils';
+@use 'internal/token-utils';
+
+$config: (
+  namespace: 'ang-cookie-modal',
+  tokens: (
+    container-color: token-utils.sys-token(surface-bright),
+    container-elevation-shadow: 0px 12px 32px 24px sass-utils.color-with-opacity(token-utils.sys-token(tertiary), 24%),
+    container-shape: token-utils.sys-token(corner-small),
+    divider-color: token-utils.sys-token(outline-variant),
+    border-color: token-utils.sys-token(outline-variant),
+    border-radius: token-utils.sys-token(corner-medium),
+    title-color: token-utils.sys-token(on-surface),
+    title-font: token-utils.sys-token(title-small-font),
+    title-line-height: token-utils.sys-token(title-small-line-height),
+    title-size: token-utils.sys-token(title-small-size),
+    title-tracking: token-utils.sys-token(title-small-tracking),
+    title-weight: token-utils.sys-token(title-small-weight),
+    description-color: token-utils.sys-token(on-surface-variant),
+    description-font: token-utils.sys-token(body-medium-font),
+    description-line-height: token-utils.sys-token(body-medium-line-height),
+    description-size: token-utils.sys-token(body-medium-size),
+    description-tracking: token-utils.sys-token(body-medium-tracking),
+    description-weight: token-utils.sys-token(body-medium-weight),
+  ),
+);

package/fesm2022/atlasng-labs-cookie-modal.mjs

@@ -0,0 +1,266 @@
+import * as i0 from '@angular/core';
+import { input, inject, ChangeDetectionStrategy, Component, model, computed, signal, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/material/divider';
+import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { EventScope, TrackClick, provideEventScope } from '@atlasng/analytics';
+import { AnalyticsEventCategory, ALLOW_ALL_ANALYTICS_EVENT_CATEGORY_PERMISSIONS, ALLOW_NECESSARY_ANALYTICS_EVENT_CATEGORY_PERMISSIONS } from '@atlasng/analytics/events';
+import * as i1$1 from '@angular/cdk/accordion';
+import { CdkAccordionItem, CdkAccordionModule } from '@angular/cdk/accordion';
+import * as i4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { IdGenerator, AnyLink } from '@atlasng/common';
+import { TextLink } from '@atlasng/design-system/text-link';
+
+/**
+ * Renders a list of cookie providers with links to their privacy details.
+ */
+class ProviderList {
+    /**
+     * Providers displayed in the list.
+     */
+    providers = input([], ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    /**
+     * Generates unique IDs for list item accessibility attributes.
+     */
+    idGenerator = inject(IdGenerator);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProviderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ProviderList, isStandalone: true, selector: "ang-providers-list", inputs: { providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ang-provider-list--empty": "providers().length === 0" }, classAttribute: "ang-provider-list" }, ngImport: i0, template: "@for (provider of providers(); track $index) {\n  @let id = idGenerator.getId('ang-providers-list');\n\n  <div class=\"ang-provider-list--card\" [angEventScope]=\"provider.label.toLowerCase()\">\n    <span class=\"ang-provider-list--label\" [attr.id]=\"id\">{{ provider.label }}</span>\n    <a\n      class=\"ang-provider-list--link\"\n      angTextLink\n      target=\"_blank\"\n      [angAnyLink]=\"provider.href\"\n      [attr.aria-labelledby]=\"id\"\n    >\n      <span>Learn more about this provider</span>\n      <mat-icon fontIcon=\"open_in_new\" />\n    </a>\n  </div>\n} @empty {\n  <div class=\"ang-provider-list--card\">\n    <p class=\"ang-provider-list--empty-text\">We do not use cookies or technology of this type</p>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:16px}:host .ang-provider-list--card{padding:12px 16px;border:1px solid var(--ang-ang-cookie-modal-border-color, var(--mat-sys-outline-variant));border-radius:var(--ang-ang-cookie-modal-border-radius, var(--mat-sys-corner-medium))}:host .ang-provider-list--label{margin:0 0 4px;color:var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));font-family:var(--ang-ang-cookie-modal-title-font, var(--mat-sys-title-small-font));font-size:var(--ang-ang-cookie-modal-title-size, var(--mat-sys-title-small-size));font-weight:var(--ang-ang-cookie-modal-title-weight, var(--mat-sys-title-small-weight));line-height:var(--ang-ang-cookie-modal-title-line-height, var(--mat-sys-title-small-line-height));letter-spacing:var(--ang-ang-cookie-modal-title-tracking, var(--mat-sys-title-small-tracking))}:host .ang-provider-list--link,:host .ang-provider-list--empty-text{margin:0;color:var(--ang-ang-cookie-modal-description-color, var(--mat-sys-on-surface-variant));font-family:var(--ang-ang-cookie-modal-description-font, var(--mat-sys-body-medium-font));font-size:var(--ang-ang-cookie-modal-description-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-ang-cookie-modal-description-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-ang-cookie-modal-description-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-ang-cookie-modal-description-tracking, var(--mat-sys-body-medium-tracking))}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnyLink, selector: "[angAnyLink]", inputs: ["angAnyLink", "target", "rel", "download", "queryParams", "queryParamsHandling", "fragment", "preserveFragment", "skipLocationChange", "relativeTo", "browserUrl", "replaceUrl", "state", "info"], exportAs: ["angAnyLink"] }, { kind: "component", type: TextLink, selector: "a[angTextLink]" }, { kind: "directive", type: EventScope, selector: "[angEventScope]", inputs: ["angEventScope"], exportAs: ["angEventScope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProviderList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ang-providers-list', imports: [MatIconModule, AnyLink, TextLink, EventScope], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ang-provider-list',
+                        '[class.ang-provider-list--empty]': 'providers().length === 0',
+                    }, template: "@for (provider of providers(); track $index) {\n  @let id = idGenerator.getId('ang-providers-list');\n\n  <div class=\"ang-provider-list--card\" [angEventScope]=\"provider.label.toLowerCase()\">\n    <span class=\"ang-provider-list--label\" [attr.id]=\"id\">{{ provider.label }}</span>\n    <a\n      class=\"ang-provider-list--link\"\n      angTextLink\n      target=\"_blank\"\n      [angAnyLink]=\"provider.href\"\n      [attr.aria-labelledby]=\"id\"\n    >\n      <span>Learn more about this provider</span>\n      <mat-icon fontIcon=\"open_in_new\" />\n    </a>\n  </div>\n} @empty {\n  <div class=\"ang-provider-list--card\">\n    <p class=\"ang-provider-list--empty-text\">We do not use cookies or technology of this type</p>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:16px}:host .ang-provider-list--card{padding:12px 16px;border:1px solid var(--ang-ang-cookie-modal-border-color, var(--mat-sys-outline-variant));border-radius:var(--ang-ang-cookie-modal-border-radius, var(--mat-sys-corner-medium))}:host .ang-provider-list--label{margin:0 0 4px;color:var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));font-family:var(--ang-ang-cookie-modal-title-font, var(--mat-sys-title-small-font));font-size:var(--ang-ang-cookie-modal-title-size, var(--mat-sys-title-small-size));font-weight:var(--ang-ang-cookie-modal-title-weight, var(--mat-sys-title-small-weight));line-height:var(--ang-ang-cookie-modal-title-line-height, var(--mat-sys-title-small-line-height));letter-spacing:var(--ang-ang-cookie-modal-title-tracking, var(--mat-sys-title-small-tracking))}:host .ang-provider-list--link,:host .ang-provider-list--empty-text{margin:0;color:var(--ang-ang-cookie-modal-description-color, var(--mat-sys-on-surface-variant));font-family:var(--ang-ang-cookie-modal-description-font, var(--mat-sys-body-medium-font));font-size:var(--ang-ang-cookie-modal-description-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-ang-cookie-modal-description-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-ang-cookie-modal-description-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-ang-cookie-modal-description-tracking, var(--mat-sys-body-medium-tracking))}\n"] }]
+        }], propDecorators: { providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }] } });
+
+/**
+ * Renders a single cookie permission accordion item with toggle and provider links.
+ */
+class CookiePermissionItem {
+    /**
+     * Display metadata for this cookie category.
+     */
+    info = input.required(...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way model for the category enabled state.
+     */
+    enabled = model.required(...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Providers associated with the category.
+     */
+    providers = input([], ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique id for the header toggle control.
+     */
+    toggleId = inject(IdGenerator).getId('ang-cookie-permission-item--header-toggle');
+    /**
+     * Unique id for the expandable body region.
+     */
+    bodyId = inject(IdGenerator).getId('ang-cookie-permission-item--body');
+    /**
+     * Accessible label for the current toggle action.
+     */
+    stateLabel = computed(() => {
+        return `${this.enabled() ? 'Disallow' : 'Allow'} ${this.info().title.toLowerCase()} cookies`;
+    }, ...(ngDevMode ? [{ debugName: "stateLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether the accordion section is expanded.
+     */
+    get expanded() {
+        return this.accordionItem.expanded;
+    }
+    /**
+     * Host accordion item directive controlling expand/collapse behavior.
+     */
+    accordionItem = inject(CdkAccordionItem);
+    /**
+     * Opens this accordion item.
+     */
+    open() {
+        this.accordionItem.open();
+    }
+    /**
+     * Closes this accordion item.
+     */
+    close() {
+        this.accordionItem.close();
+    }
+    /**
+     * Toggles this accordion item between open and closed.
+     */
+    toggle() {
+        this.accordionItem.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiePermissionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: CookiePermissionItem, isStandalone: true, selector: "ang-cookie-permission-item", inputs: { info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: true, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange" }, host: { properties: { "class.ang-cookie-permission-item--expanded": "expanded" }, classAttribute: "ang-cookie-permission-item" }, hostDirectives: [{ directive: i1$1.CdkAccordionItem, inputs: ["expanded", "expanded"], outputs: ["opened", "opened", "closed", "closed", "expandedChange", "expandedChange"] }], ngImport: i0, template: "<div class=\"ang-cookie-permission-item--header\">\n  <button\n    matButton\n    class=\"ang-cookie-permission-item--toggle\"\n    angEventScope=\"toggle\"\n    angTrackClick\n    [attr.id]=\"toggleId\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"bodyId\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"ang-cookie-permission-item--toggle-icon\" [fontIcon]=\"expanded ? 'remove' : 'add'\" />\n    <span class=\"ang-cookie-permission-item--title\">{{ info().title }}</span>\n  </button>\n\n  <mat-slide-toggle\n    class=\"ang-cookie-permission-item--state\"\n    angEventScope=\"state-toggle\"\n    [aria-label]=\"stateLabel()\"\n    [checked]=\"enabled()\"\n    [disabled]=\"info().required ?? false\"\n    (change)=\"enabled.set($event.checked)\"\n  />\n</div>\n\n<p class=\"ang-cookie-permission-item--description\">{{ info().description }}</p>\n\n<div\n  class=\"ang-cookie-permission-item--body\"\n  [class.ang-cookie-permission-item--body-expanded]=\"expanded\"\n  [attr.inert]=\"expanded ? null : ''\"\n>\n  <div\n    class=\"ang-cookie-permission-item--body-content\"\n    angEventScope=\"providers\"\n    role=\"region\"\n    [attr.id]=\"bodyId\"\n    [attr.aria-labelledby]=\"toggleId\"\n  >\n    <ang-providers-list [providers]=\"providers()\" />\n  </div>\n</div>\n", styles: [":host{display:block}:host .ang-cookie-permission-item--header{display:flex;align-items:center;justify-content:space-between;height:48px;margin:0}:host .ang-cookie-permission-item--toggle{--mat-button-text-container-height: 48px;--mat-button-text-icon-spacing: 20px;--mat-button-text-label-text-color: var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));--mat-button-text-state-layer-color: var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));--mat-button-text-ripple-color: color-mix(in srgb, var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface)) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent);--mat-button-text-label-text-font: var(--ang-ang-cookie-modal-title-font, var(--mat-sys-title-small-font));--mat-button-text-label-text-size: var(--ang-ang-cookie-modal-title-size, var(--mat-sys-title-small-size));--mat-button-text-label-text-weight: var(--ang-ang-cookie-modal-title-weight, var(--mat-sys-title-small-weight));--mat-button-text-label-text-tracking: var(--ang-ang-cookie-modal-title-tracking, var(--mat-sys-title-small-tracking))}:host .ang-cookie-permission-item--toggle-icon{font-size:1.5rem;width:1.5rem;height:1.5rem}:host .ang-cookie-permission-item--description{margin:8px 0 16px;color:var(--ang-ang-cookie-modal-description-color, var(--mat-sys-on-surface-variant));font-family:var(--ang-ang-cookie-modal-description-font, var(--mat-sys-body-medium-font));font-size:var(--ang-ang-cookie-modal-description-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-ang-cookie-modal-description-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-ang-cookie-modal-description-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-ang-cookie-modal-description-tracking, var(--mat-sys-body-medium-tracking))}:host .ang-cookie-permission-item--body{display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);overflow:hidden}:host .ang-cookie-permission-item--body-content{display:flex;flex-direction:column;min-height:0;visibility:hidden;transition:visibility .19s linear}:host .ang-cookie-permission-item--body-expanded{grid-template-rows:1fr}:host .ang-cookie-permission-item--body-expanded .ang-cookie-permission-item--body-content{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ProviderList, selector: "ang-providers-list", inputs: ["providers"] }, { kind: "directive", type: EventScope, selector: "[angEventScope]", inputs: ["angEventScope"], exportAs: ["angEventScope"] }, { kind: "directive", type: TrackClick, selector: "[angTrackClick]", inputs: ["angTrackClick", "angTrackClickOptions", "angTrackClickOn", "angTrackClickDisabled"], exportAs: ["angTrackClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiePermissionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ang-cookie-permission-item', imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, ProviderList, EventScope, TrackClick], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ang-cookie-permission-item',
+                        '[class.ang-cookie-permission-item--expanded]': 'expanded',
+                    }, hostDirectives: [
+                        {
+                            directive: CdkAccordionItem,
+                            inputs: ['expanded'],
+                            outputs: ['opened', 'closed', 'expandedChange'],
+                        },
+                    ], template: "<div class=\"ang-cookie-permission-item--header\">\n  <button\n    matButton\n    class=\"ang-cookie-permission-item--toggle\"\n    angEventScope=\"toggle\"\n    angTrackClick\n    [attr.id]=\"toggleId\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"bodyId\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"ang-cookie-permission-item--toggle-icon\" [fontIcon]=\"expanded ? 'remove' : 'add'\" />\n    <span class=\"ang-cookie-permission-item--title\">{{ info().title }}</span>\n  </button>\n\n  <mat-slide-toggle\n    class=\"ang-cookie-permission-item--state\"\n    angEventScope=\"state-toggle\"\n    [aria-label]=\"stateLabel()\"\n    [checked]=\"enabled()\"\n    [disabled]=\"info().required ?? false\"\n    (change)=\"enabled.set($event.checked)\"\n  />\n</div>\n\n<p class=\"ang-cookie-permission-item--description\">{{ info().description }}</p>\n\n<div\n  class=\"ang-cookie-permission-item--body\"\n  [class.ang-cookie-permission-item--body-expanded]=\"expanded\"\n  [attr.inert]=\"expanded ? null : ''\"\n>\n  <div\n    class=\"ang-cookie-permission-item--body-content\"\n    angEventScope=\"providers\"\n    role=\"region\"\n    [attr.id]=\"bodyId\"\n    [attr.aria-labelledby]=\"toggleId\"\n  >\n    <ang-providers-list [providers]=\"providers()\" />\n  </div>\n</div>\n", styles: [":host{display:block}:host .ang-cookie-permission-item--header{display:flex;align-items:center;justify-content:space-between;height:48px;margin:0}:host .ang-cookie-permission-item--toggle{--mat-button-text-container-height: 48px;--mat-button-text-icon-spacing: 20px;--mat-button-text-label-text-color: var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));--mat-button-text-state-layer-color: var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface));--mat-button-text-ripple-color: color-mix(in srgb, var(--ang-ang-cookie-modal-title-color, var(--mat-sys-on-surface)) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent);--mat-button-text-label-text-font: var(--ang-ang-cookie-modal-title-font, var(--mat-sys-title-small-font));--mat-button-text-label-text-size: var(--ang-ang-cookie-modal-title-size, var(--mat-sys-title-small-size));--mat-button-text-label-text-weight: var(--ang-ang-cookie-modal-title-weight, var(--mat-sys-title-small-weight));--mat-button-text-label-text-tracking: var(--ang-ang-cookie-modal-title-tracking, var(--mat-sys-title-small-tracking))}:host .ang-cookie-permission-item--toggle-icon{font-size:1.5rem;width:1.5rem;height:1.5rem}:host .ang-cookie-permission-item--description{margin:8px 0 16px;color:var(--ang-ang-cookie-modal-description-color, var(--mat-sys-on-surface-variant));font-family:var(--ang-ang-cookie-modal-description-font, var(--mat-sys-body-medium-font));font-size:var(--ang-ang-cookie-modal-description-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-ang-cookie-modal-description-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-ang-cookie-modal-description-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-ang-cookie-modal-description-tracking, var(--mat-sys-body-medium-tracking))}:host .ang-cookie-permission-item--body{display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);overflow:hidden}:host .ang-cookie-permission-item--body-content{display:flex;flex-direction:column;min-height:0;visibility:hidden;transition:visibility .19s linear}:host .ang-cookie-permission-item--body-expanded{grid-template-rows:1fr}:host .ang-cookie-permission-item--body-expanded .ang-cookie-permission-item--body-content{visibility:visible}\n"] }]
+        }], propDecorators: { info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: true }] }, { type: i0.Output, args: ["enabledChange"] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }] } });
+
+/**
+ * Default cookie category descriptions shown in the permissions tab.
+ */
+const DEFAULT_INFO = [
+    {
+        category: AnalyticsEventCategory.Necessary,
+        title: 'Necessary',
+        description: `Necessary cookies and similar technologies make websites
+      usable by enabling basic functions like page navigation.
+      The website cannot function properly without this feature.`,
+        required: true,
+    },
+    {
+        category: AnalyticsEventCategory.Preferences,
+        title: 'Preferences',
+        description: `Preference cookies remember your choices, like your preferred language or display settings.
+      They help the site behave in a way that matches your preferences.`,
+    },
+    {
+        category: AnalyticsEventCategory.Statistics,
+        title: 'Statistics',
+        description: `We use statistics cookies and similar technologies to collect aggregated,
+      anonymous data that help us understand traffic patterns, popular pages, and overall performance.
+      This information supports continuous improvements to our website.`,
+    },
+    {
+        category: AnalyticsEventCategory.Marketing,
+        title: 'Marketing',
+        description: `These cookies are used by third-party services, such as YouTube, to enable embedded video playback.
+      If these cookies are disabled, embedded videos will not play on this site.`,
+    },
+];
+/**
+ * Displays the cookie permission categories and updates selected permission state.
+ */
+class CookiePermissions {
+    /**
+     * Mutable cookie permission state shared with the parent modal.
+     */
+    permissions = model.required(...(ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []));
+    /**
+     * Category metadata rendered as accordion items.
+     */
+    info = input(DEFAULT_INFO, ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    /**
+     * Providers grouped by cookie category.
+     */
+    providers = input({}, ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    /**
+     * Updates a single cookie category permission in the current state.
+     *
+     * @param category The cookie category to update.
+     * @param value The new enabled state for the category.
+     */
+    updatePermissions(category, value) {
+        this.permissions.update((currentPermissions) => ({
+            ...currentPermissions,
+            [category]: value,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiePermissions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CookiePermissions, isStandalone: true, selector: "ang-cookie-permissions", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: true, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { permissions: "permissionsChange" }, host: { classAttribute: "ang-cookie-permissions" }, ngImport: i0, template: "<cdk-accordion class=\"ang-cookie-permissions--list\">\n  @for (item of info(); track item.category) {\n    <ang-cookie-permission-item\n      [angEventScope]=\"item.category.toLowerCase()\"\n      [info]=\"item\"\n      [enabled]=\"permissions()[item.category]\"\n      [providers]=\"providers()[item.category] ?? []\"\n      (enabledChange)=\"updatePermissions(item.category, $event)\"\n    />\n\n    @if (!$last) {\n      <mat-divider class=\"ang-cookie-permissions--divider\" />\n    }\n  }\n</cdk-accordion>\n", styles: [":host{display:block}:host .ang-cookie-permissions--list{display:flex;flex-direction:column;gap:16px}:host .ang-cookie-permissions--divider{--mat-divider-color: var(--ang-ang-cookie-modal-divider-color, var(--mat-sys-outline-variant))}\n"], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$1.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CookiePermissionItem, selector: "ang-cookie-permission-item", inputs: ["info", "enabled", "providers"], outputs: ["enabledChange"] }, { kind: "directive", type: EventScope, selector: "[angEventScope]", inputs: ["angEventScope"], exportAs: ["angEventScope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiePermissions, decorators: [{
+            type: Component,
+            args: [{ selector: 'ang-cookie-permissions', imports: [CdkAccordionModule, MatDividerModule, CookiePermissionItem, EventScope], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ang-cookie-permissions',
+                    }, template: "<cdk-accordion class=\"ang-cookie-permissions--list\">\n  @for (item of info(); track item.category) {\n    <ang-cookie-permission-item\n      [angEventScope]=\"item.category.toLowerCase()\"\n      [info]=\"item\"\n      [enabled]=\"permissions()[item.category]\"\n      [providers]=\"providers()[item.category] ?? []\"\n      (enabledChange)=\"updatePermissions(item.category, $event)\"\n    />\n\n    @if (!$last) {\n      <mat-divider class=\"ang-cookie-permissions--divider\" />\n    }\n  }\n</cdk-accordion>\n", styles: [":host{display:block}:host .ang-cookie-permissions--list{display:flex;flex-direction:column;gap:16px}:host .ang-cookie-permissions--divider{--mat-divider-color: var(--ang-ang-cookie-modal-divider-color, var(--mat-sys-outline-variant))}\n"] }]
+        }], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: true }] }, { type: i0.Output, args: ["permissionsChange"] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }] } });
+
+/**
+ * Dialog component used to review and update cookie permissions.
+ */
+class CookieModal {
+    /**
+     * Reference to the hosting material dialog.
+     */
+    dialogRef = inject(MatDialogRef);
+    /**
+     * Data passed to the dialog when it is opened.
+     */
+    data = inject(MAT_DIALOG_DATA);
+    /**
+     * Active tab index shown in the modal.
+     */
+    activeTab = signal(this.data.activeTab ?? 0, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /**
+     * Mutable permission state edited in the modal.
+     */
+    permissions = signal(this.data.permissions, ...(ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional logo source rendered in the header.
+     */
+    logoSrc = this.data.logoSrc;
+    /**
+     * Accessible label for the optional logo.
+     */
+    logoLabel = this.data.logoLabel;
+    /**
+     * Providers grouped by category for the permissions view.
+     */
+    providers = this.data.providers ?? {};
+    /**
+     * Predefined permission state that enables every category.
+     */
+    allowAllPermissions = ALLOW_ALL_ANALYTICS_EVENT_CATEGORY_PERMISSIONS;
+    /**
+     * Predefined permission state that enables only required categories.
+     */
+    allowNecessaryPermissions = ALLOW_NECESSARY_ANALYTICS_EVENT_CATEGORY_PERMISSIONS;
+    /**
+     * Indicates whether the modal backdrop close action is disabled.
+     */
+    get disableClose() {
+        return this.dialogRef.disableClose ?? false;
+    }
+    /**
+     * Adds a custom panel class for cookie modal-specific dialog styling.
+     */
+    constructor() {
+        this.dialogRef.addPanelClass('ang-cookie-modal--panel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookieModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CookieModal, isStandalone: true, selector: "ang-cookie-modal", host: { classAttribute: "ang-cookie-modal" }, providers: [provideEventScope('cookie-modal')], ngImport: i0, template: "<div matDialogTitle class=\"ang-cookie-modal--header\" angEventScope=\"header\">\n  <div class=\"ang-cookie-modal--logo\">\n    @if (logoSrc) {\n      <img [attr.src]=\"logoSrc\" [attr.alt]=\"logoLabel ?? 'Logo'\" />\n    }\n  </div>\n\n  @if (!disableClose) {\n    <button matIconButton matDialogClose angEventScope=\"close\" angTrackClick aria-label=\"Close cookie consent modal\">\n      <mat-icon fontIcon=\"close\" />\n    </button>\n  }\n</div>\n\n<mat-divider />\n\n<mat-tab-group matDialogContent class=\"ang-cookie-modal--tabs\" angEventScope=\"tabs\" [(selectedIndex)]=\"activeTab\">\n  <mat-tab label=\"Consent\" angEventScope=\"consent-tab\">\n    <div class=\"ang-cookie-modal--content\">\n      <p>This website uses cookies and similar technologies.</p>\n      <p>\n        We use anonymized statistics data insights to improve our website. Marketing cookies are needed to watch videos\n        on this website.\n      </p>\n    </div>\n  </mat-tab>\n\n  <mat-tab label=\"Details\" angEventScope=\"details-tab\">\n    <ang-cookie-permissions class=\"ang-cookie-modal--content\" [providers]=\"providers\" [(permissions)]=\"permissions\" />\n  </mat-tab>\n</mat-tab-group>\n\n<mat-divider />\n\n<div matDialogActions class=\"ang-cookie-modal--actions\" angEventScope=\"actions\" align=\"center\">\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-necessary\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowNecessaryPermissions\"\n  >\n    Allow necessary only\n  </button>\n\n  @if (activeTab() === 0) {\n    <button\n      matButton=\"outlined\"\n      angEventScope=\"customize\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      (click)=\"activeTab.set(1)\"\n    >\n      Customize\n    </button>\n  } @else {\n    <button\n      matButton=\"filled\"\n      angEventScope=\"allow-selection\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      [matDialogClose]=\"permissions()\"\n    >\n      Allow Selection\n    </button>\n  }\n\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-all\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowAllPermissions\"\n  >\n    Allow all\n  </button>\n</div>\n", styles: [".ang-cookie-modal--panel{--mat-dialog-actions-padding: 16px 20px;--mat-dialog-container-color: var(--ang-ang-cookie-modal-container-color, var(--mat-sys-surface-bright));--mat-dialog-container-elevation-shadow: var(--ang-ang-cookie-modal-container-elevation-shadow, 0px 12px 32px 24px color-mix(in srgb, var(--mat-sys-tertiary) 24%, transparent));--mat-dialog-container-shape: var(--ang-ang-cookie-modal-container-shape, var(--mat-sys-corner-small));--mat-dialog-container-max-width: 748px;--mat-dialog-container-min-width: 320px;--mat-dialog-headline-padding: 16px 20px;--mat-dialog-with-actions-content-padding: 0}.ang-cookie-modal{display:flex;flex-direction:column;max-height:100vh}.ang-cookie-modal .ang-cookie-modal--header{display:flex;justify-content:space-between}.ang-cookie-modal .ang-cookie-modal--logo{height:40px}.ang-cookie-modal .ang-cookie-modal--tabs{--mat-tab-divider-color: var(--ang-ang-cookie-modal-divider-color, var(--mat-sys-outline-variant))}.ang-cookie-modal .ang-cookie-modal--content{margin:16px 24px}.ang-cookie-modal .ang-cookie-modal--actions{gap:12px}.ang-cookie-modal .ang-cookie-modal--actions-action{flex:1 1 200px;margin-left:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: CookiePermissions, selector: "ang-cookie-permissions", inputs: ["permissions", "info", "providers"], outputs: ["permissionsChange"] }, { kind: "directive", type: EventScope, selector: "[angEventScope]", inputs: ["angEventScope"], exportAs: ["angEventScope"] }, { kind: "directive", type: TrackClick, selector: "[angTrackClick]", inputs: ["angTrackClick", "angTrackClickOptions", "angTrackClickOn", "angTrackClickDisabled"], exportAs: ["angTrackClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookieModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ang-cookie-modal', imports: [
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatDivider,
+                        MatIconModule,
+                        MatTabsModule,
+                        CookiePermissions,
+                        EventScope,
+                        TrackClick,
+                    ], providers: [provideEventScope('cookie-modal')], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ang-cookie-modal',
+                    }, template: "<div matDialogTitle class=\"ang-cookie-modal--header\" angEventScope=\"header\">\n  <div class=\"ang-cookie-modal--logo\">\n    @if (logoSrc) {\n      <img [attr.src]=\"logoSrc\" [attr.alt]=\"logoLabel ?? 'Logo'\" />\n    }\n  </div>\n\n  @if (!disableClose) {\n    <button matIconButton matDialogClose angEventScope=\"close\" angTrackClick aria-label=\"Close cookie consent modal\">\n      <mat-icon fontIcon=\"close\" />\n    </button>\n  }\n</div>\n\n<mat-divider />\n\n<mat-tab-group matDialogContent class=\"ang-cookie-modal--tabs\" angEventScope=\"tabs\" [(selectedIndex)]=\"activeTab\">\n  <mat-tab label=\"Consent\" angEventScope=\"consent-tab\">\n    <div class=\"ang-cookie-modal--content\">\n      <p>This website uses cookies and similar technologies.</p>\n      <p>\n        We use anonymized statistics data insights to improve our website. Marketing cookies are needed to watch videos\n        on this website.\n      </p>\n    </div>\n  </mat-tab>\n\n  <mat-tab label=\"Details\" angEventScope=\"details-tab\">\n    <ang-cookie-permissions class=\"ang-cookie-modal--content\" [providers]=\"providers\" [(permissions)]=\"permissions\" />\n  </mat-tab>\n</mat-tab-group>\n\n<mat-divider />\n\n<div matDialogActions class=\"ang-cookie-modal--actions\" angEventScope=\"actions\" align=\"center\">\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-necessary\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowNecessaryPermissions\"\n  >\n    Allow necessary only\n  </button>\n\n  @if (activeTab() === 0) {\n    <button\n      matButton=\"outlined\"\n      angEventScope=\"customize\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      (click)=\"activeTab.set(1)\"\n    >\n      Customize\n    </button>\n  } @else {\n    <button\n      matButton=\"filled\"\n      angEventScope=\"allow-selection\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      [matDialogClose]=\"permissions()\"\n    >\n      Allow Selection\n    </button>\n  }\n\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-all\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowAllPermissions\"\n  >\n    Allow all\n  </button>\n</div>\n", styles: [".ang-cookie-modal--panel{--mat-dialog-actions-padding: 16px 20px;--mat-dialog-container-color: var(--ang-ang-cookie-modal-container-color, var(--mat-sys-surface-bright));--mat-dialog-container-elevation-shadow: var(--ang-ang-cookie-modal-container-elevation-shadow, 0px 12px 32px 24px color-mix(in srgb, var(--mat-sys-tertiary) 24%, transparent));--mat-dialog-container-shape: var(--ang-ang-cookie-modal-container-shape, var(--mat-sys-corner-small));--mat-dialog-container-max-width: 748px;--mat-dialog-container-min-width: 320px;--mat-dialog-headline-padding: 16px 20px;--mat-dialog-with-actions-content-padding: 0}.ang-cookie-modal{display:flex;flex-direction:column;max-height:100vh}.ang-cookie-modal .ang-cookie-modal--header{display:flex;justify-content:space-between}.ang-cookie-modal .ang-cookie-modal--logo{height:40px}.ang-cookie-modal .ang-cookie-modal--tabs{--mat-tab-divider-color: var(--ang-ang-cookie-modal-divider-color, var(--mat-sys-outline-variant))}.ang-cookie-modal .ang-cookie-modal--content{margin:16px 24px}.ang-cookie-modal .ang-cookie-modal--actions{gap:12px}.ang-cookie-modal .ang-cookie-modal--actions-action{flex:1 1 200px;margin-left:0!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CookieModal };
+//# sourceMappingURL=atlasng-labs-cookie-modal.mjs.map

package/fesm2022/atlasng-labs-cookie-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atlasng-labs-cookie-modal.mjs","sources":["../../../../libs/labs/cookie-modal/src/lib/provider-list/provider-list.ts","../../../../libs/labs/cookie-modal/src/lib/provider-list/provider-list.html","../../../../libs/labs/cookie-modal/src/lib/cookie-permission-item/cookie-permission-item.ts","../../../../libs/labs/cookie-modal/src/lib/cookie-permission-item/cookie-permission-item.html","../../../../libs/labs/cookie-modal/src/lib/cookie-permissions/cookie-permissions.ts","../../../../libs/labs/cookie-modal/src/lib/cookie-permissions/cookie-permissions.html","../../../../libs/labs/cookie-modal/src/lib/cookie-modal.ts","../../../../libs/labs/cookie-modal/src/lib/cookie-modal.html","../../../../libs/labs/cookie-modal/src/atlasng-labs-cookie-modal.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { EventScope } from '@atlasng/analytics';\nimport { AnalyticsEventCategory } from '@atlasng/analytics/events';\nimport { AnyLink, IdGenerator } from '@atlasng/common';\nimport { TextLink } from '@atlasng/design-system/text-link';\n\n/**\n * Represents a single provider link shown in the cookie permissions list.\n */\nexport interface CookiePermissionProvider {\n  /**\n   * Human-readable provider label.\n   */\n  label: string;\n\n  /**\n   * Absolute or relative URL for the provider's privacy information.\n   */\n  href: string;\n}\n\n/**\n * Groups cookie permission providers by analytics event category.\n */\nexport type CookiePermissionProvidersByCategory = Partial<Record<AnalyticsEventCategory, CookiePermissionProvider[]>>;\n\n/**\n * Renders a list of cookie providers with links to their privacy details.\n */\n@Component({\n  selector: 'ang-providers-list',\n  imports: [MatIconModule, AnyLink, TextLink, EventScope],\n  templateUrl: './provider-list.html',\n  styleUrl: './provider-list.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ang-provider-list',\n    '[class.ang-provider-list--empty]': 'providers().length === 0',\n  },\n})\nexport class ProviderList {\n  /**\n   * Providers displayed in the list.\n   */\n  readonly providers = input<CookiePermissionProvider[]>([]);\n\n  /**\n   * Generates unique IDs for list item accessibility attributes.\n   */\n  protected readonly idGenerator = inject(IdGenerator);\n}\n","@for (provider of providers(); track $index) {\n  @let id = idGenerator.getId('ang-providers-list');\n\n  <div class=\"ang-provider-list--card\" [angEventScope]=\"provider.label.toLowerCase()\">\n    <span class=\"ang-provider-list--label\" [attr.id]=\"id\">{{ provider.label }}</span>\n    <a\n      class=\"ang-provider-list--link\"\n      angTextLink\n      target=\"_blank\"\n      [angAnyLink]=\"provider.href\"\n      [attr.aria-labelledby]=\"id\"\n    >\n      <span>Learn more about this provider</span>\n      <mat-icon fontIcon=\"open_in_new\" />\n    </a>\n  </div>\n} @empty {\n  <div class=\"ang-provider-list--card\">\n    <p class=\"ang-provider-list--empty-text\">We do not use cookies or technology of this type</p>\n  </div>\n}\n","import { CdkAccordionItem } from '@angular/cdk/accordion';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, model } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { EventScope, TrackClick } from '@atlasng/analytics';\nimport { AnalyticsEventCategory } from '@atlasng/analytics/events';\nimport { IdGenerator } from '@atlasng/common';\nimport { CookiePermissionProvider, ProviderList } from '../provider-list/provider-list';\n\n/**\n * UI metadata for a single cookie permission category.\n */\nexport interface CookiePermissionInfo {\n  /**\n   * Category key used to update analytics permissions.\n   */\n  readonly category: AnalyticsEventCategory;\n\n  /**\n   * Visible category title.\n   */\n  readonly title: string;\n\n  /**\n   * Category description shown in the accordion panel.\n   */\n  readonly description: string;\n\n  /**\n   * Marks the category as always enabled.\n   */\n  readonly required?: boolean;\n}\n\n/**\n * Renders a single cookie permission accordion item with toggle and provider links.\n */\n@Component({\n  selector: 'ang-cookie-permission-item',\n  imports: [MatButtonModule, MatIconModule, MatSlideToggleModule, ProviderList, EventScope, TrackClick],\n  templateUrl: './cookie-permission-item.html',\n  styleUrl: './cookie-permission-item.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ang-cookie-permission-item',\n    '[class.ang-cookie-permission-item--expanded]': 'expanded',\n  },\n  hostDirectives: [\n    {\n      directive: CdkAccordionItem,\n      inputs: ['expanded'],\n      outputs: ['opened', 'closed', 'expandedChange'],\n    },\n  ],\n})\nexport class CookiePermissionItem {\n  /**\n   * Display metadata for this cookie category.\n   */\n  readonly info = input.required<CookiePermissionInfo>();\n\n  /**\n   * Two-way model for the category enabled state.\n   */\n  readonly enabled = model.required<boolean>();\n\n  /**\n   * Providers associated with the category.\n   */\n  readonly providers = input<CookiePermissionProvider[]>([]);\n\n  /**\n   * Unique id for the header toggle control.\n   */\n  protected readonly toggleId = inject(IdGenerator).getId('ang-cookie-permission-item--header-toggle');\n\n  /**\n   * Unique id for the expandable body region.\n   */\n  protected readonly bodyId = inject(IdGenerator).getId('ang-cookie-permission-item--body');\n\n  /**\n   * Accessible label for the current toggle action.\n   */\n  protected readonly stateLabel = computed(() => {\n    return `${this.enabled() ? 'Disallow' : 'Allow'} ${this.info().title.toLowerCase()} cookies`;\n  });\n\n  /**\n   * Indicates whether the accordion section is expanded.\n   */\n  protected get expanded(): boolean {\n    return this.accordionItem.expanded;\n  }\n\n  /**\n   * Host accordion item directive controlling expand/collapse behavior.\n   */\n  private readonly accordionItem = inject(CdkAccordionItem);\n\n  /**\n   * Opens this accordion item.\n   */\n  open(): void {\n    this.accordionItem.open();\n  }\n\n  /**\n   * Closes this accordion item.\n   */\n  close(): void {\n    this.accordionItem.close();\n  }\n\n  /**\n   * Toggles this accordion item between open and closed.\n   */\n  toggle(): void {\n    this.accordionItem.toggle();\n  }\n}\n","<div class=\"ang-cookie-permission-item--header\">\n  <button\n    matButton\n    class=\"ang-cookie-permission-item--toggle\"\n    angEventScope=\"toggle\"\n    angTrackClick\n    [attr.id]=\"toggleId\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"bodyId\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"ang-cookie-permission-item--toggle-icon\" [fontIcon]=\"expanded ? 'remove' : 'add'\" />\n    <span class=\"ang-cookie-permission-item--title\">{{ info().title }}</span>\n  </button>\n\n  <mat-slide-toggle\n    class=\"ang-cookie-permission-item--state\"\n    angEventScope=\"state-toggle\"\n    [aria-label]=\"stateLabel()\"\n    [checked]=\"enabled()\"\n    [disabled]=\"info().required ?? false\"\n    (change)=\"enabled.set($event.checked)\"\n  />\n</div>\n\n<p class=\"ang-cookie-permission-item--description\">{{ info().description }}</p>\n\n<div\n  class=\"ang-cookie-permission-item--body\"\n  [class.ang-cookie-permission-item--body-expanded]=\"expanded\"\n  [attr.inert]=\"expanded ? null : ''\"\n>\n  <div\n    class=\"ang-cookie-permission-item--body-content\"\n    angEventScope=\"providers\"\n    role=\"region\"\n    [attr.id]=\"bodyId\"\n    [attr.aria-labelledby]=\"toggleId\"\n  >\n    <ang-providers-list [providers]=\"providers()\" />\n  </div>\n</div>\n","import { CdkAccordionModule } from '@angular/cdk/accordion';\nimport { ChangeDetectionStrategy, Component, input, model } from '@angular/core';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { EventScope } from '@atlasng/analytics';\nimport { AnalyticsEventCategory, AnalyticsEventCategoryPermissions } from '@atlasng/analytics/events';\nimport { CookiePermissionInfo, CookiePermissionItem } from '../cookie-permission-item/cookie-permission-item';\nimport { CookiePermissionProvidersByCategory } from '../provider-list/provider-list';\n\n/**\n * Default cookie category descriptions shown in the permissions tab.\n */\nconst DEFAULT_INFO: CookiePermissionInfo[] = [\n  {\n    category: AnalyticsEventCategory.Necessary,\n    title: 'Necessary',\n    description: `Necessary cookies and similar technologies make websites\n      usable by enabling basic functions like page navigation.\n      The website cannot function properly without this feature.`,\n    required: true,\n  },\n  {\n    category: AnalyticsEventCategory.Preferences,\n    title: 'Preferences',\n    description: `Preference cookies remember your choices, like your preferred language or display settings.\n      They help the site behave in a way that matches your preferences.`,\n  },\n  {\n    category: AnalyticsEventCategory.Statistics,\n    title: 'Statistics',\n    description: `We use statistics cookies and similar technologies to collect aggregated,\n      anonymous data that help us understand traffic patterns, popular pages, and overall performance.\n      This information supports continuous improvements to our website.`,\n  },\n  {\n    category: AnalyticsEventCategory.Marketing,\n    title: 'Marketing',\n    description: `These cookies are used by third-party services, such as YouTube, to enable embedded video playback.\n      If these cookies are disabled, embedded videos will not play on this site.`,\n  },\n];\n\n/**\n * Displays the cookie permission categories and updates selected permission state.\n */\n@Component({\n  selector: 'ang-cookie-permissions',\n  imports: [CdkAccordionModule, MatDividerModule, CookiePermissionItem, EventScope],\n  templateUrl: './cookie-permissions.html',\n  styleUrl: './cookie-permissions.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ang-cookie-permissions',\n  },\n})\nexport class CookiePermissions {\n  /**\n   * Mutable cookie permission state shared with the parent modal.\n   */\n  readonly permissions = model.required<AnalyticsEventCategoryPermissions>();\n\n  /**\n   * Category metadata rendered as accordion items.\n   */\n  readonly info = input(DEFAULT_INFO);\n\n  /**\n   * Providers grouped by cookie category.\n   */\n  readonly providers = input<CookiePermissionProvidersByCategory>({});\n\n  /**\n   * Updates a single cookie category permission in the current state.\n   *\n   * @param category The cookie category to update.\n   * @param value The new enabled state for the category.\n   */\n  protected updatePermissions(category: AnalyticsEventCategory, value: boolean): void {\n    this.permissions.update((currentPermissions) => ({\n      ...currentPermissions,\n      [category]: value,\n    }));\n  }\n}\n","<cdk-accordion class=\"ang-cookie-permissions--list\">\n  @for (item of info(); track item.category) {\n    <ang-cookie-permission-item\n      [angEventScope]=\"item.category.toLowerCase()\"\n      [info]=\"item\"\n      [enabled]=\"permissions()[item.category]\"\n      [providers]=\"providers()[item.category] ?? []\"\n      (enabledChange)=\"updatePermissions(item.category, $event)\"\n    />\n\n    @if (!$last) {\n      <mat-divider class=\"ang-cookie-permissions--divider\" />\n    }\n  }\n</cdk-accordion>\n","import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDivider } from '@angular/material/divider';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { EventScope, provideEventScope, TrackClick } from '@atlasng/analytics';\nimport {\n  ALLOW_ALL_ANALYTICS_EVENT_CATEGORY_PERMISSIONS,\n  ALLOW_NECESSARY_ANALYTICS_EVENT_CATEGORY_PERMISSIONS,\n  AnalyticsEventCategoryPermissions,\n} from '@atlasng/analytics/events';\nimport { CookiePermissions } from './cookie-permissions/cookie-permissions';\nimport { CookiePermissionProvidersByCategory } from './provider-list/provider-list';\n\n/**\n * Input data required to initialize the cookie modal dialog.\n */\nexport interface CookieModalData {\n  /**\n   * Tab index that should be active when the modal opens.\n   */\n  activeTab?: number;\n\n  /**\n   * Initial analytics permissions.\n   */\n  permissions: AnalyticsEventCategoryPermissions;\n\n  /**\n   * Optional logo image source.\n   */\n  logoSrc?: string;\n\n  /**\n   * Accessible label for the optional logo.\n   */\n  logoLabel?: string;\n\n  /**\n   * Optional providers grouped by category for display in the details tab.\n   */\n  providers?: CookiePermissionProvidersByCategory;\n}\n\n/**\n * Result returned when the cookie modal closes.\n */\nexport type CookieModalResult = AnalyticsEventCategoryPermissions | undefined;\n\n/**\n * Dialog component used to review and update cookie permissions.\n */\n@Component({\n  selector: 'ang-cookie-modal',\n  imports: [\n    MatButtonModule,\n    MatDialogModule,\n    MatDivider,\n    MatIconModule,\n    MatTabsModule,\n    CookiePermissions,\n    EventScope,\n    TrackClick,\n  ],\n  templateUrl: './cookie-modal.html',\n  styleUrl: './cookie-modal.scss',\n  providers: [provideEventScope('cookie-modal')],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ang-cookie-modal',\n  },\n})\nexport class CookieModal {\n  /**\n   * Reference to the hosting material dialog.\n   */\n  private readonly dialogRef = inject(MatDialogRef);\n\n  /**\n   * Data passed to the dialog when it is opened.\n   */\n  private readonly data = inject<CookieModalData>(MAT_DIALOG_DATA);\n\n  /**\n   * Active tab index shown in the modal.\n   */\n  protected readonly activeTab = signal(this.data.activeTab ?? 0);\n\n  /**\n   * Mutable permission state edited in the modal.\n   */\n  protected readonly permissions = signal(this.data.permissions);\n\n  /**\n   * Optional logo source rendered in the header.\n   */\n  protected readonly logoSrc = this.data.logoSrc;\n\n  /**\n   * Accessible label for the optional logo.\n   */\n  protected readonly logoLabel = this.data.logoLabel;\n\n  /**\n   * Providers grouped by category for the permissions view.\n   */\n  protected readonly providers = this.data.providers ?? {};\n\n  /**\n   * Predefined permission state that enables every category.\n   */\n  protected readonly allowAllPermissions = ALLOW_ALL_ANALYTICS_EVENT_CATEGORY_PERMISSIONS;\n\n  /**\n   * Predefined permission state that enables only required categories.\n   */\n  protected readonly allowNecessaryPermissions = ALLOW_NECESSARY_ANALYTICS_EVENT_CATEGORY_PERMISSIONS;\n\n  /**\n   * Indicates whether the modal backdrop close action is disabled.\n   */\n  protected get disableClose(): boolean {\n    return this.dialogRef.disableClose ?? false;\n  }\n\n  /**\n   * Adds a custom panel class for cookie modal-specific dialog styling.\n   */\n  constructor() {\n    this.dialogRef.addPanelClass('ang-cookie-modal--panel');\n  }\n}\n","<div matDialogTitle class=\"ang-cookie-modal--header\" angEventScope=\"header\">\n  <div class=\"ang-cookie-modal--logo\">\n    @if (logoSrc) {\n      <img [attr.src]=\"logoSrc\" [attr.alt]=\"logoLabel ?? 'Logo'\" />\n    }\n  </div>\n\n  @if (!disableClose) {\n    <button matIconButton matDialogClose angEventScope=\"close\" angTrackClick aria-label=\"Close cookie consent modal\">\n      <mat-icon fontIcon=\"close\" />\n    </button>\n  }\n</div>\n\n<mat-divider />\n\n<mat-tab-group matDialogContent class=\"ang-cookie-modal--tabs\" angEventScope=\"tabs\" [(selectedIndex)]=\"activeTab\">\n  <mat-tab label=\"Consent\" angEventScope=\"consent-tab\">\n    <div class=\"ang-cookie-modal--content\">\n      <p>This website uses cookies and similar technologies.</p>\n      <p>\n        We use anonymized statistics data insights to improve our website. Marketing cookies are needed to watch videos\n        on this website.\n      </p>\n    </div>\n  </mat-tab>\n\n  <mat-tab label=\"Details\" angEventScope=\"details-tab\">\n    <ang-cookie-permissions class=\"ang-cookie-modal--content\" [providers]=\"providers\" [(permissions)]=\"permissions\" />\n  </mat-tab>\n</mat-tab-group>\n\n<mat-divider />\n\n<div matDialogActions class=\"ang-cookie-modal--actions\" angEventScope=\"actions\" align=\"center\">\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-necessary\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowNecessaryPermissions\"\n  >\n    Allow necessary only\n  </button>\n\n  @if (activeTab() === 0) {\n    <button\n      matButton=\"outlined\"\n      angEventScope=\"customize\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      (click)=\"activeTab.set(1)\"\n    >\n      Customize\n    </button>\n  } @else {\n    <button\n      matButton=\"filled\"\n      angEventScope=\"allow-selection\"\n      angTrackClick\n      class=\"ang-cookie-modal--actions-action\"\n      [matDialogClose]=\"permissions()\"\n    >\n      Allow Selection\n    </button>\n  }\n\n  <button\n    matButton=\"filled\"\n    angEventScope=\"allow-all\"\n    angTrackClick\n    class=\"ang-cookie-modal--actions-action\"\n    [matDialogClose]=\"allowAllPermissions\"\n  >\n    Allow all\n  </button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2"],"mappings":"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"}

package/fesm2022/atlasng-labs-youtube-player.mjs

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { YouTubePlayer } from '@angular/youtube-player';
+
+class YoutubePlayer {
+    /** The ID of the YouTube video to play*/
+    videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : /* istanbul ignore next */ []));
+    /** Label for the video used in accessibility text */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Whether marketing cookies are enabled */
+    hasCookiesEnabled = input(false, ...(ngDevMode ? [{ debugName: "hasCookiesEnabled" }] : /* istanbul ignore next */ []));
+    /** Emits when the user enables cookies */
+    enableCookies = output();
+    /** ViewChild reference to the YouTube player for programmatic control */
+    player = viewChild('player', ...(ngDevMode ? [{ debugName: "player" }] : /* istanbul ignore next */ []));
+    /** Computed thumbnail URL */
+    thumbnailUrl = computed(() => `https://img.youtube.com/vi/${this.videoId()}/sddefault.jpg`, ...(ngDevMode ? [{ debugName: "thumbnailUrl" }] : /* istanbul ignore next */ []));
+    /** YouTube video URL */
+    videoUrl = computed(() => `https://www.youtube.com/watch?v=${this.videoId()}`, ...(ngDevMode ? [{ debugName: "videoUrl" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: YoutubePlayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: YoutubePlayer, isStandalone: true, selector: "ang-youtube-player", inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hasCookiesEnabled: { classPropertyName: "hasCookiesEnabled", publicName: "hasCookiesEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enableCookies: "enableCookies" }, viewQueries: [{ propertyName: "player", first: true, predicate: ["player"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasCookiesEnabled()) {\n  <youtube-player [videoId]=\"videoId()\" [playerVars]=\"{ rel: 0, showinfo: 0 }\" [disableCookies]=\"true\" #player />\n} @else {\n  <div class=\"youtube-thumbnail-container\">\n    <a target=\"_blank\" rel=\"noopener noreferrer\" [attr.href]=\"videoUrl()\">\n      <img class=\"thumbnail-image\" [attr.src]=\"thumbnailUrl()\" [attr.alt]=\"`YouTube video thumbnail for ${label()}`\" />\n    </a>\n    <div class=\"enable-cookies-message\">\n      <button class=\"enable-cookies-button\" (click)=\"enableCookies.emit()\">Enable cookies</button>\n      to watch videos\n    </div>\n  </div>\n}\n", styles: [":host{display:block;position:relative}:host youtube-player{display:block}:host ::ng-deep youtube-player youtube-player-placeholder,:host ::ng-deep youtube-player iframe{width:100%!important;aspect-ratio:16/9!important;height:unset!important}:host .thumbnail-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}:host .enable-cookies-message,:host .enable-cookies-button{font-family:var(--ang-youtube-player-enable-cookies-font-family, var(--mat-sys-body-medium-font));font-size:var(--ang-youtube-player-enable-cookies-font-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-youtube-player-enable-cookies-font-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-youtube-player-enable-cookies-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-youtube-player-enable-cookies-tracking, var(--mat-sys-body-medium-tracking));color:var(--ang-youtube-player-enable-cookies-color, var(--mat-sys-on-surface-variant))}:host .enable-cookies-message{margin-top:.5rem}:host .enable-cookies-button{font-weight:600;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: YoutubePlayer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ang-youtube-player', imports: [YouTubePlayer], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasCookiesEnabled()) {\n  <youtube-player [videoId]=\"videoId()\" [playerVars]=\"{ rel: 0, showinfo: 0 }\" [disableCookies]=\"true\" #player />\n} @else {\n  <div class=\"youtube-thumbnail-container\">\n    <a target=\"_blank\" rel=\"noopener noreferrer\" [attr.href]=\"videoUrl()\">\n      <img class=\"thumbnail-image\" [attr.src]=\"thumbnailUrl()\" [attr.alt]=\"`YouTube video thumbnail for ${label()}`\" />\n    </a>\n    <div class=\"enable-cookies-message\">\n      <button class=\"enable-cookies-button\" (click)=\"enableCookies.emit()\">Enable cookies</button>\n      to watch videos\n    </div>\n  </div>\n}\n", styles: [":host{display:block;position:relative}:host youtube-player{display:block}:host ::ng-deep youtube-player youtube-player-placeholder,:host ::ng-deep youtube-player iframe{width:100%!important;aspect-ratio:16/9!important;height:unset!important}:host .thumbnail-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}:host .enable-cookies-message,:host .enable-cookies-button{font-family:var(--ang-youtube-player-enable-cookies-font-family, var(--mat-sys-body-medium-font));font-size:var(--ang-youtube-player-enable-cookies-font-size, var(--mat-sys-body-medium-size));font-weight:var(--ang-youtube-player-enable-cookies-font-weight, var(--mat-sys-body-medium-weight));line-height:var(--ang-youtube-player-enable-cookies-line-height, var(--mat-sys-body-medium-line-height));letter-spacing:var(--ang-youtube-player-enable-cookies-tracking, var(--mat-sys-body-medium-tracking));color:var(--ang-youtube-player-enable-cookies-color, var(--mat-sys-on-surface-variant))}:host .enable-cookies-message{margin-top:.5rem}:host .enable-cookies-button{font-weight:600;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}\n"] }]
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hasCookiesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCookiesEnabled", required: false }] }], enableCookies: [{ type: i0.Output, args: ["enableCookies"] }], player: [{ type: i0.ViewChild, args: ['player', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YoutubePlayer };
+//# sourceMappingURL=atlasng-labs-youtube-player.mjs.map

package/fesm2022/atlasng-labs-youtube-player.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atlasng-labs-youtube-player.mjs","sources":["../../../../libs/labs/youtube-player/src/lib/youtube-player.ts","../../../../libs/labs/youtube-player/src/lib/youtube-player.html","../../../../libs/labs/youtube-player/src/atlasng-labs-youtube-player.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output, viewChild } from '@angular/core';\nimport { YouTubePlayer as Youtube } from '@angular/youtube-player';\n\n@Component({\n  selector: 'ang-youtube-player',\n  imports: [Youtube],\n  templateUrl: './youtube-player.html',\n  styleUrl: './youtube-player.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class YoutubePlayer {\n  /** The ID of the YouTube video to play*/\n  readonly videoId = input.required<string>();\n\n  /** Label for the video used in accessibility text */\n  readonly label = input.required<string>();\n\n  /** Whether marketing cookies are enabled */\n  readonly hasCookiesEnabled = input(false);\n\n  /** Emits when the user enables cookies */\n  readonly enableCookies = output();\n\n  /** ViewChild reference to the YouTube player for programmatic control */\n  readonly player = viewChild<Youtube>('player');\n\n  /** Computed thumbnail URL */\n  protected readonly thumbnailUrl = computed(() => `https://img.youtube.com/vi/${this.videoId()}/sddefault.jpg`);\n\n  /** YouTube video URL */\n  protected readonly videoUrl = computed(() => `https://www.youtube.com/watch?v=${this.videoId()}`);\n}\n","@if (hasCookiesEnabled()) {\n  <youtube-player [videoId]=\"videoId()\" [playerVars]=\"{ rel: 0, showinfo: 0 }\" [disableCookies]=\"true\" #player />\n} @else {\n  <div class=\"youtube-thumbnail-container\">\n    <a target=\"_blank\" rel=\"noopener noreferrer\" [attr.href]=\"videoUrl()\">\n      <img class=\"thumbnail-image\" [attr.src]=\"thumbnailUrl()\" [attr.alt]=\"`YouTube video thumbnail for ${label()}`\" />\n    </a>\n    <div class=\"enable-cookies-message\">\n      <button class=\"enable-cookies-button\" (click)=\"enableCookies.emit()\">Enable cookies</button>\n      to watch videos\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Youtube"],"mappings":";;;;MAUa,aAAa,CAAA;;AAEf,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAU;;AAGlC,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,IAAA,iBAAiB,GAAG,KAAK,CAAC,KAAK,wFAAC;;IAGhC,aAAa,GAAG,MAAM,EAAE;;AAGxB,IAAA,MAAM,GAAG,SAAS,CAAU,QAAQ,6EAAC;;AAG3B,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAA,2BAAA,EAA8B,IAAI,CAAC,OAAO,EAAE,CAAA,cAAA,CAAgB,mFAAC;;AAG3F,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAA,gCAAA,EAAmC,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,+EAAC;uGApBtF,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV1B,inBAaA,EAAA,MAAA,EAAA,CAAA,qoCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRYA,aAAO,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,OAAA,EAAA,cAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,0BAAA,EAAA,wBAAA,EAAA,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKN,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,WACrB,CAACA,aAAO,CAAC,EAAA,eAAA,EAGD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,inBAAA,EAAA,MAAA,EAAA,CAAA,qoCAAA,CAAA,EAAA;2aAgBV,QAAQ,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AExB/C;;AAEG;;;;"}

package/fesm2022/atlasng-labs.mjs

@@ -0,0 +1,6 @@
+var index = {};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=atlasng-labs.mjs.map

package/fesm2022/atlasng-labs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atlasng-labs.mjs","sources":["../../../../libs/labs/src/index.ts","../../../../libs/labs/src/atlasng-labs.ts"],"sourcesContent":["export default {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA,YAAe,EAAE;;ACAjB;;AAEG"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@atlasng/labs",
+  "version": "0.0.2",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./sass/_index.scss",
+      "types": "./types/atlasng-labs.d.ts",
+      "default": "./fesm2022/atlasng-labs.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./cookie-modal": {
+      "types": "./types/atlasng-labs-cookie-modal.d.ts",
+      "default": "./fesm2022/atlasng-labs-cookie-modal.mjs"
+    },
+    "./youtube-player": {
+      "types": "./types/atlasng-labs-youtube-player.d.ts",
+      "default": "./fesm2022/atlasng-labs-youtube-player.mjs"
+    }
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^21.2.6",
+    "@angular/core": "^21.2.6",
+    "@angular/material": "^21.2.6",
+    "@angular/youtube-player": "^21.2.6",
+    "@atlasng/analytics": "0.0.2",
+    "@atlasng/common": "0.0.2",
+    "@atlasng/design-system": "0.0.2"
+  },
+  "module": "fesm2022/atlasng-labs.mjs",
+  "typings": "types/atlasng-labs.d.ts",
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/sass/_index.scss

@@ -0,0 +1,2 @@
+@forward '../../cookie-modal/src/lib/tokens' as cookie-modal-* show cookie-modal-overrides;
+@forward '../../youtube-player/src/lib/tokens' as youtube-player-* show youtube-player-overrides;

package/sass/internal/_breakpoints.scss

@@ -0,0 +1,150 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+$_breakpoint-min: 0px;
+$_breakpoint-max: 1000000px;
+$_breakpoint-keywords: ('boundary');
+$_breakpoint-boundary-modes: ('open', 'open-start', 'open-end', 'closed');
+
+$breakpoints: (
+  x-small: (
+    $_breakpoint-min,
+    599.98px,
+  ),
+  small: (
+    600px,
+    959.98px,
+  ),
+  medium: (
+    960px,
+    1279.98px,
+  ),
+  large: (
+    1280px,
+    1919.98px,
+  ),
+  x-large: (
+    1920px,
+    $_breakpoint-max,
+  ),
+);
+
+// Create a media query for the given breakpoint(s) and boundary mode (default: 'closed').
+@mixin breakpoint($breakpoint, $args...) {
+  $keywords: meta.keywords($args);
+  $invalid-keywords: map.remove($keywords, $_breakpoint-keywords...);
+  $breakpoint-keys: list.join(($breakpoint), $args);
+  $boundary-mode: map.get($keywords, 'boundary') or 'closed';
+
+  @if list.length($invalid-keywords) != 0 {
+    @error 'Invalid keyword arguments: #{map.keys($invalid-keywords)}.';
+  }
+
+  @if not list.index($_breakpoint-boundary-modes, $boundary-mode) {
+    @error 'Invalid boundary mode: #{$boundary-mode}. Valid boundary modes are: #{$_breakpoint-boundary-modes}.';
+  }
+
+  @each $key in $breakpoint-keys {
+    @if not map.has-key($breakpoints, $key) {
+      @error 'Invalid breakpoint: #{$key}. Valid breakpoints are: #{map.keys($breakpoints)}.';
+    }
+  }
+
+  $ranges: _select-ranges($breakpoint-keys);
+  $ranges: _merge-adjacent-ranges($ranges);
+  $ranges: _trim-boundaries($ranges, $boundary-mode);
+  $queries: ();
+  @each $range in $ranges {
+    $queries: list.append($queries, _range-to-query($range), $separator: comma);
+  }
+
+  @if list.length($queries) != 0 {
+    @media #{$queries} {
+      @content;
+    }
+  } @else {
+    @warn 'Breakpoints cover the entire range of possible widths. This is likely a mistake, please check the specified breakpoints and boundary mode.';
+    @content;
+  }
+}
+
+@function _select-ranges($keys) {
+  $ranges: ();
+  @each $key, $range in $breakpoints {
+    @if list.index($keys, $key) {
+      $ranges: list.append($ranges, $range);
+    }
+  }
+
+  @return $ranges;
+}
+
+@function _merge-adjacent-ranges($ranges, $tolerance: 1px) {
+  $merged: ();
+  $current: null;
+  @each $range in $ranges {
+    @if $current == null {
+      $current: $range;
+    } @else {
+      $currentMax: list.nth($current, 2);
+      $min: list.nth($range, 1);
+      $max: list.nth($range, 2);
+      $diff: $min - $currentMax;
+
+      @if $diff <= $tolerance {
+        $current: list.set-nth($current, 2, $max);
+      } @else {
+        $merged: list.append($merged, $current);
+        $current: $range;
+      }
+    }
+  }
+
+  @if $current != null {
+    $merged: list.append($merged, $current);
+  }
+
+  @return $merged;
+}
+
+@function _trim-boundaries($ranges, $boundary-mode) {
+  $length: list.length($ranges);
+  $first: list.nth($ranges, 1);
+  $last: list.nth($ranges, $length);
+
+  @if list.index(('open', 'open-start'), $boundary-mode) or list.nth($first, 1) == $_breakpoint-min {
+    $first: list.set-nth($first, 1, null);
+  }
+
+  @if list.index(('open', 'open-end'), $boundary-mode) or list.nth($last, 2) == $_breakpoint-max {
+    $last: list.set-nth($last, 2, null);
+  }
+
+  @if $length == 1 {
+    $min: list.nth($first, 1);
+    $max: list.nth($last, 2);
+    @if $min == null and $max == null {
+      @return ();
+    }
+
+    @return list.append((), ($min, $max));
+  }
+
+  $ranges: list.set-nth($ranges, 1, $first);
+  $ranges: list.set-nth($ranges, $length, $last);
+  @return $ranges;
+}
+
+@function _range-to-query($range) {
+  $min: list.nth($range, 1);
+  $max: list.nth($range, 2);
+
+  @if $min == null {
+    @return '(max-width: #{$max})';
+  } @else if $max == null {
+    @return '(min-width: #{$min})';
+  } @else {
+    @return '(min-width: #{$min}) and (max-width: #{$max})';
+  }
+}

package/sass/internal/_sass-utils.scss

@@ -0,0 +1,45 @@
+@use 'sass:meta';
+@use 'sass:string';
+
+// Apply style to current selector if exists, otherwise apply to root (html)
+@mixin current-selector-or-root($root: html) {
+  @if & {
+    @content;
+  } @else {
+    #{$root} {
+      @content;
+    }
+  }
+}
+
+// Checks if a value is a CSS variable name, e.g. --mat-sys-primary
+@function is-css-var-name($value) {
+  @return meta.type-of($value) == string and string.index($value, '--') == 1;
+}
+
+// Creates a CSS variable with an optional fallback,
+// e.g. create-var(--mat-sys-primary, #fff) => var(--mat-sys-primary, #fff)
+@function create-var($name, $fallback: null) {
+  @if ($fallback) {
+    @return var($name, $fallback);
+  } @else {
+    @return var($name);
+  }
+}
+
+// Creates a color with opacity,
+// e.g. color-with-opacity(--mat-sys-primary, 50%) => color-mix(in srgb, var(--mat-sys-primary) 50%, transparent)
+@function color-with-opacity($color, $opacity) {
+  @if (is-css-var-name($color)) {
+    $color: var($color);
+  }
+
+  @if (is-css-var-name($opacity)) {
+    $opacity: 'calc(var(#{$opacity}) * 100%)';
+  } @else if (meta.type-of($opacity) == number and $opacity < 1) {
+    @warn 'Opacity value #{$opacity} is less than 1. Prefer using a percentage (e.g. "50%").';
+    $opacity: '#{$opacity * 100}%';
+  }
+
+  @return color-mix(in srgb, #{$color} #{$opacity}, transparent);
+}

package/sass/internal/_token-utils.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use './sass-utils';
+
+// Returns an angular material system token as a CSS variable name, e.g. sys-token(primary) => --mat-sys-primary
+@function sys-token($token) {
+  // TODO: Validate token exists in angular material tokens
+  @return --mat-sys-#{$token};
+}
+
+// Returns an angular material system token as a CSS variable,
+// e.g. sys-slot(primary) => var(--mat-sys-primary)
+@function sys-slot($token, $fallback: null) {
+  @return sass-utils.create-var(sys-token($token), $fallback);
+}
+
+// Returns a CSS variable name for a given token and namespace,
+// e.g. token(primary, button) => --atlasng-button-primary
+@function token($token, $namespace-or-config) {
+  $namespace: $namespace-or-config;
+  @if meta.type-of($namespace-or-config) == 'map' {
+    $namespace: map.get($namespace-or-config, namespace);
+  }
+
+  @return --ang-#{$namespace}-#{$token};
+}
+
+// Returns a CSS variable for a given token and namespace,
+// e.g. slot(primary, button) => var(--atlasng-button-primary, var(--mat-sys-primary))
+@function slot($token, $tokens-config, $fallback: null) {
+  $tokens: map.get($tokens-config, tokens);
+  @if not map.has-key($tokens, $token) {
+    @error "Token '#{$token}' does not exist. Configured tokens are: #{map.keys($tokens)}";
+  }
+
+  $sys-fallback: map.get($tokens, $token);
+  @if (sass-utils.is-css-var-name($sys-fallback)) {
+    $sys-fallback: sass-utils.create-var($sys-fallback, $fallback);
+  }
+
+  @return sass-utils.create-var(token($token, $tokens-config), $sys-fallback);
+}
+
+// Mixin to apply a map of token overrides as CSS variables to the current selector.
+@mixin apply-overrides($overrides, $tokens-config) {
+  $tokens: map.get($tokens-config, tokens);
+
+  @include sass-utils.current-selector-or-root() {
+    @each $token, $value in $overrides {
+      @if not map.has-key($tokens, $token) {
+        @error "Token '#{$token}' does not exist. Configured tokens are: #{map.keys($tokens)}";
+      }
+
+      @if $value != null {
+        #{token($token, $tokens-config)}: #{$value};
+      }
+    }
+  }
+}

package/types/atlasng-labs-cookie-modal.d.ts

@@ -0,0 +1,106 @@
+import * as _atlasng_labs_cookie_modal from '@atlasng/labs/cookie-modal';
+import * as _atlasng_analytics_events from '@atlasng/analytics/events';
+import { AnalyticsEventCategory, AnalyticsEventCategoryPermissions } from '@atlasng/analytics/events';
+import * as i0 from '@angular/core';
+
+/**
+ * Represents a single provider link shown in the cookie permissions list.
+ */
+interface CookiePermissionProvider {
+    /**
+     * Human-readable provider label.
+     */
+    label: string;
+    /**
+     * Absolute or relative URL for the provider's privacy information.
+     */
+    href: string;
+}
+/**
+ * Groups cookie permission providers by analytics event category.
+ */
+type CookiePermissionProvidersByCategory = Partial<Record<AnalyticsEventCategory, CookiePermissionProvider[]>>;
+
+/**
+ * Input data required to initialize the cookie modal dialog.
+ */
+interface CookieModalData {
+    /**
+     * Tab index that should be active when the modal opens.
+     */
+    activeTab?: number;
+    /**
+     * Initial analytics permissions.
+     */
+    permissions: AnalyticsEventCategoryPermissions;
+    /**
+     * Optional logo image source.
+     */
+    logoSrc?: string;
+    /**
+     * Accessible label for the optional logo.
+     */
+    logoLabel?: string;
+    /**
+     * Optional providers grouped by category for display in the details tab.
+     */
+    providers?: CookiePermissionProvidersByCategory;
+}
+/**
+ * Result returned when the cookie modal closes.
+ */
+type CookieModalResult = AnalyticsEventCategoryPermissions | undefined;
+/**
+ * Dialog component used to review and update cookie permissions.
+ */
+declare class CookieModal {
+    /**
+     * Reference to the hosting material dialog.
+     */
+    private readonly dialogRef;
+    /**
+     * Data passed to the dialog when it is opened.
+     */
+    private readonly data;
+    /**
+     * Active tab index shown in the modal.
+     */
+    protected readonly activeTab: i0.WritableSignal<number>;
+    /**
+     * Mutable permission state edited in the modal.
+     */
+    protected readonly permissions: i0.WritableSignal<AnalyticsEventCategoryPermissions>;
+    /**
+     * Optional logo source rendered in the header.
+     */
+    protected readonly logoSrc: string | undefined;
+    /**
+     * Accessible label for the optional logo.
+     */
+    protected readonly logoLabel: string | undefined;
+    /**
+     * Providers grouped by category for the permissions view.
+     */
+    protected readonly providers: Partial<Record<_atlasng_analytics_events.AnalyticsEventCategory, _atlasng_labs_cookie_modal.CookiePermissionProvider[]>>;
+    /**
+     * Predefined permission state that enables every category.
+     */
+    protected readonly allowAllPermissions: AnalyticsEventCategoryPermissions;
+    /**
+     * Predefined permission state that enables only required categories.
+     */
+    protected readonly allowNecessaryPermissions: AnalyticsEventCategoryPermissions;
+    /**
+     * Indicates whether the modal backdrop close action is disabled.
+     */
+    protected get disableClose(): boolean;
+    /**
+     * Adds a custom panel class for cookie modal-specific dialog styling.
+     */
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CookieModal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CookieModal, "ang-cookie-modal", never, {}, {}, never, never, true, never>;
+}
+
+export { CookieModal };
+export type { CookieModalData, CookieModalResult, CookiePermissionProvider, CookiePermissionProvidersByCategory };

package/types/atlasng-labs-youtube-player.d.ts

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+import { YouTubePlayer } from '@angular/youtube-player';
+
+declare class YoutubePlayer {
+    /** The ID of the YouTube video to play*/
+    readonly videoId: _angular_core.InputSignal<string>;
+    /** Label for the video used in accessibility text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Whether marketing cookies are enabled */
+    readonly hasCookiesEnabled: _angular_core.InputSignal<boolean>;
+    /** Emits when the user enables cookies */
+    readonly enableCookies: _angular_core.OutputEmitterRef<void>;
+    /** ViewChild reference to the YouTube player for programmatic control */
+    readonly player: _angular_core.Signal<YouTubePlayer | undefined>;
+    /** Computed thumbnail URL */
+    protected readonly thumbnailUrl: _angular_core.Signal<string>;
+    /** YouTube video URL */
+    protected readonly videoUrl: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YoutubePlayer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YoutubePlayer, "ang-youtube-player", never, { "videoId": { "alias": "videoId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "hasCookiesEnabled": { "alias": "hasCookiesEnabled"; "required": false; "isSignal": true; }; }, { "enableCookies": "enableCookies"; }, never, never, true, never>;
+}
+
+export { YoutubePlayer };

package/types/atlasng-labs.d.ts

@@ -0,0 +1,2 @@
+
+export { };

package/youtube-player/src/lib/tokens.scss

@@ -0,0 +1,17 @@
+@use 'internal/token-utils';
+
+$config: (
+  namespace: 'youtube-player',
+  tokens: (
+    enable-cookies-color: token-utils.sys-token(on-surface-variant),
+    enable-cookies-font-family: token-utils.sys-token(body-medium-font),
+    enable-cookies-font-size: token-utils.sys-token(body-medium-size),
+    enable-cookies-font-weight: token-utils.sys-token(body-medium-weight),
+    enable-cookies-line-height: token-utils.sys-token(body-medium-line-height),
+    enable-cookies-tracking: token-utils.sys-token(body-medium-tracking),
+  ),
+);
+
+@mixin overrides($overrides) {
+  @include token-utils.apply-overrides($overrides, $config);
+}