@eui/eds 22.0.0-alpha.26 → 22.0.0-alpha.28

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-26T11:20:02.308Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-28T07:20:59.044Z, llm-md export.
 
 ## Components
 
@@ -427,6 +427,7 @@ Description: Individual breadcrumb item representing a single segment in the nav
 
 Inputs:
 - `ariaLabel: string = 'Breadcrumb item'` — ARIA label for accessibility (especially useful for icon-only items).
+- `e2eAttr: string = 'eds-breadcrumb-item'` — Data attribute value for end-to-end testing identification. 'eds-breadcrumb-item'
 - `icon: string = ''` — Icon name (EDS icon) displayed instead of or alongside the label.
 - `label: string = ''` — Text label for the breadcrumb item.
 - `link: string | any[] | undefined = undefined` — Navigation target — string URL or Router commands array. Undefined makes item non-clickable.
@@ -2252,6 +2253,7 @@ Change detection: `ChangeDetectionStrategy.OnPush`
 
 Inputs:
 - `fixedWidth: string = ''` — Fixed width value (overrides responsive width).
+- `hasBackdrop: boolean = false` — Shows a dimmed backdrop behind the overlay panel. Off by default.
 - `hasClosedOnClickOutside: boolean = false` — Enables automatic closing when clicking outside the overlay.
 - `isActive: boolean = false` — Controls the visibility and active state of the overlay.
 - `isHighlighted: boolean = false` — Applies highlighted visual styling.
@@ -5006,7 +5008,7 @@ Properties:
 - `type EdsButtonSize = "s" | "m" | "l"` — Sizes the button styles (SCSS :host(\[size="…"\]) branches).
 - `type EdsButtonType = "primary" | "secondary" | "tertiary"` — Local narrowed unions — the button's variant contract. No shared-token import.
 - `type EdsChartType = "line" | "area" | "bar" | "stacked-bar" | "horizontal-bar" | "pie" | "radar" | "heatmap" | "treemap" | "funnel" | "waterfall"` — Chart type variants.
-- `type EdsChipColor = "neutral" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
+- `type EdsChipColor = "neutral" | "primary" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
 - `type EdsChipSize = "s" | "m" | "l"` — Local narrowed size union — the chip's size contract.
 - `type EdsColorToken = "primary" | "brand" | "neutral" | "neutral-subtle" | "neutral-subtler" | "highlight" | "info" | "success" | "warning" | "critical" | "disabled"` — Supported color tokens across EDS components.
 - `type EdsDialogVerticalPosition = "top" | "center" | "bottom"`

package/docs/miscellaneous/typealiases.html

@@ -910,7 +910,7 @@ SCSS branches; <code>warning</code> is accepted for parity but has no styled bra
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;neutral&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;neutral&quot; | &quot;primary&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
 </code>
                 </td>
             </tr>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.26</li>
+            <b>Version</b> : 22.0.0-alpha.28</li>
     </ul>
 
 

package/fesm2022/eui-eds-eds-breadcrumb.mjs

@@ -27,6 +27,12 @@ class EdsBreadcrumbItem {
         /** ARIA label for accessibility (especially useful for icon-only items). */
         this.ariaLabel = input('Breadcrumb item', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Data attribute value for end-to-end testing identification.
+         * @default 'eds-breadcrumb-item'
+         */
+        this.e2eAttr = input('eds-breadcrumb-item', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
         /** Navigation target — string URL or Router commands array. Undefined makes item non-clickable. */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.link = input(undefined, /* @ts-ignore */
@@ -56,20 +62,21 @@ class EdsBreadcrumbItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBreadcrumbItem, isStandalone: true, selector: "eds-breadcrumb-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, navigationExtras: { classPropertyName: "navigationExtras", publicName: "navigationExtras", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()" }, properties: { "class.eds-breadcrumb-item--clickable": "!!link()", "class.eds-breadcrumb-item--current": "_isLast", "attr.aria-current": "_isLast ? \"page\" : null", "attr.tabindex": "!!link() && !_isLast ? 0 : null", "attr.role": "!!link() ? \"link\" : null" } }, ngImport: i0, template: "@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n", styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-3xs);white-space:nowrap;font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host(.eds-breadcrumb-item--clickable){cursor:pointer;color:var(--eds-c-foreground-primary)}.eui-21 :host(.eds-breadcrumb-item--clickable):hover .eds-breadcrumb-item__label{text-decoration:underline}.eui-21 :host(.eds-breadcrumb-item--current){color:var(--eds-c-foreground);cursor:default}.eui-21 .eds-breadcrumb-item__separator{color:var(--eds-c-foreground-subtler)}.eui-21 .eds-breadcrumb-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBreadcrumbItem, isStandalone: true, selector: "eds-breadcrumb-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, navigationExtras: { classPropertyName: "navigationExtras", publicName: "navigationExtras", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()" }, properties: { "attr.clickable": "!!link() || null", "attr.current": "_isLast || null", "attr.aria-current": "_isLast ? \"page\" : null", "attr.tabindex": "!!link() && !_isLast ? 0 : null", "attr.role": "!!link() ? \"link\" : null", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--eds-sp-3xs);white-space:nowrap;font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler)}:host([clickable]){cursor:pointer;color:var(--eds-c-foreground-primary)}:host([clickable]):hover .eds-breadcrumb-item__label{text-decoration:underline}:host([current]){color:var(--eds-c-foreground);cursor:default}:host .eds-breadcrumb-item__separator{color:var(--eds-c-foreground-subtler)}:host .eds-breadcrumb-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumbItem, decorators: [{
             type: Component,
             args: [{ selector: 'eds-breadcrumb-item', imports: [...EDS_ICON], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(click)': 'onClick()',
                         '(keydown.enter)': 'onClick()',
-                        '[class.eds-breadcrumb-item--clickable]': '!!link()',
-                        '[class.eds-breadcrumb-item--current]': '_isLast',
+                        '[attr.clickable]': '!!link() || null',
+                        '[attr.current]': '_isLast || null',
                         '[attr.aria-current]': '_isLast ? "page" : null',
                         '[attr.tabindex]': '!!link() && !_isLast ? 0 : null',
                         '[attr.role]': '!!link() ? "link" : null',
-                    }, template: "@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n", styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-3xs);white-space:nowrap;font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host(.eds-breadcrumb-item--clickable){cursor:pointer;color:var(--eds-c-foreground-primary)}.eui-21 :host(.eds-breadcrumb-item--clickable):hover .eds-breadcrumb-item__label{text-decoration:underline}.eui-21 :host(.eds-breadcrumb-item--current){color:var(--eds-c-foreground);cursor:default}.eui-21 .eds-breadcrumb-item__separator{color:var(--eds-c-foreground-subtler)}.eui-21 .eds-breadcrumb-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], navigationExtras: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationExtras", required: false }] }] } });
+                        '[attr.data-e2e]': 'e2eAttr()',
+                    }, template: "@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--eds-sp-3xs);white-space:nowrap;font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler)}:host([clickable]){cursor:pointer;color:var(--eds-c-foreground-primary)}:host([clickable]):hover .eds-breadcrumb-item__label{text-decoration:underline}:host([current]){color:var(--eds-c-foreground);cursor:default}:host .eds-breadcrumb-item__separator{color:var(--eds-c-foreground-subtler)}:host .eds-breadcrumb-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], navigationExtras: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationExtras", required: false }] }] } });
 
 /**
  * @description
@@ -110,7 +117,7 @@ class EdsBreadcrumb {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsBreadcrumb, isStandalone: true, selector: "eds-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "items", predicate: EdsBreadcrumbItem, isSignal: true }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--eds-sp-3xs);font:var(--eds-f-label-m);color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){.eui-21 :host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsBreadcrumb, isStandalone: true, selector: "eds-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "items", predicate: EdsBreadcrumbItem, isSignal: true }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--eds-sp-3xs);font:var(--eds-f-label-m);color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){:host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumb, decorators: [{
             type: Component,
@@ -118,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.data-e2e]': 'e2eAttr()',
-                    }, styles: [".eui-21 :host{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--eds-sp-3xs);font:var(--eds-f-label-m);color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){.eui-21 :host{display:none}}\n"] }]
+                    }, styles: [":host{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--eds-sp-3xs);font:var(--eds-f-label-m);color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){:host{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EdsBreadcrumbItem), { isSignal: true }] }] } });
 
 /** Convenience array for importing all eds-breadcrumb components. */

package/fesm2022/eui-eds-eds-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-breadcrumb.mjs","sources":["../../eds-breadcrumb/eds-breadcrumb-item.ts","../../eds-breadcrumb/eds-breadcrumb-item.html","../../eds-breadcrumb/eds-breadcrumb.ts","../../eds-breadcrumb/index.ts","../../eds-breadcrumb/eui-eds-eds-breadcrumb.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    inject,\n} from '@angular/core';\nimport { Router, NavigationExtras } from '@angular/router';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * Individual breadcrumb item representing a single segment in the navigation path.\n * Supports Angular Router navigation, icons, and labels.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item link=\"/section\" label=\"Section\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'eds-breadcrumb-item',\n    templateUrl: './eds-breadcrumb-item.html',\n    styleUrl: './eds-breadcrumb-item.scss',\n    imports: [...EDS_ICON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '(click)': 'onClick()',\n        '(keydown.enter)': 'onClick()',\n        '[class.eds-breadcrumb-item--clickable]': '!!link()',\n        '[class.eds-breadcrumb-item--current]': '_isLast',\n        '[attr.aria-current]': '_isLast ? \"page\" : null',\n        '[attr.tabindex]': '!!link() && !_isLast ? 0 : null',\n        '[attr.role]': '!!link() ? \"link\" : null',\n    },\n})\nexport class EdsBreadcrumbItem {\n    /** Text label for the breadcrumb item. */\n    label = input<string>('');\n\n    /** Icon name (EDS icon) displayed instead of or alongside the label. */\n    icon = input<string>('');\n\n    /** ARIA label for accessibility (especially useful for icon-only items). */\n    ariaLabel = input('Breadcrumb item');\n\n    /** Navigation target — string URL or Router commands array. Undefined makes item non-clickable. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    link = input<string | any[] | undefined>(undefined);\n\n    /** Additional navigation options passed to Angular Router. */\n    navigationExtras = input<NavigationExtras | undefined>(undefined);\n\n    /** @internal Set by parent EdsBreadcrumb. */\n    _isFirst = false;\n\n    /** @internal Set by parent EdsBreadcrumb. */\n    _isLast = false;\n\n    private _router = inject(Router);\n\n    onClick(): void {\n        const linkValue = this.link();\n        if (!linkValue) return;\n\n        if (typeof linkValue === 'string') {\n            if (linkValue.startsWith('http')) {\n                window.location.href = linkValue;\n                return;\n            }\n            this._router.navigateByUrl(linkValue, this.navigationExtras() || {});\n        } else {\n            this._router.navigate(linkValue, this.navigationExtras());\n        }\n    }\n}\n","@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    contentChildren,\n    effect,\n    input,\n} from '@angular/core';\nimport { EdsBreadcrumbItem } from './eds-breadcrumb-item';\n\n/**\n * @description\n * Breadcrumb navigation component displaying hierarchical page location with linked path segments.\n * Automatically manages separator rendering between child items.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb>\n *   <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n *   <eds-breadcrumb-item link=\"/products\" label=\"Products\"></eds-breadcrumb-item>\n *   <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * </eds-breadcrumb>\n * ```\n */\n@Component({\n    selector: 'eds-breadcrumb',\n    template: '<ng-content/>',\n    styleUrl: './eds-breadcrumb.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        role: 'navigation',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsBreadcrumb {\n    /**\n     * Accessible label for the breadcrumb navigation landmark.\n     * @default 'Breadcrumb'\n     */\n    ariaLabel = input('Breadcrumb');\n\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-breadcrumb'\n     */\n    e2eAttr = input('eds-breadcrumb');\n\n    private items = contentChildren(EdsBreadcrumbItem);\n\n    constructor() {\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, index) => {\n                item._isFirst = index === 0;\n                item._isLast = index === items.length - 1;\n            });\n        });\n    }\n}\n","import { EdsBreadcrumb } from './eds-breadcrumb';\nimport { EdsBreadcrumbItem } from './eds-breadcrumb-item';\n\nexport { EdsBreadcrumb, EdsBreadcrumbItem };\n\n/** Convenience array for importing all eds-breadcrumb components. */\nexport const EDS_BREADCRUMB = [\n    EdsBreadcrumb,\n    EdsBreadcrumbItem,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-breadcrumb.mjs","sources":["../../eds-breadcrumb/eds-breadcrumb-item.ts","../../eds-breadcrumb/eds-breadcrumb-item.html","../../eds-breadcrumb/eds-breadcrumb.ts","../../eds-breadcrumb/index.ts","../../eds-breadcrumb/eui-eds-eds-breadcrumb.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    inject,\n} from '@angular/core';\nimport { Router, NavigationExtras } from '@angular/router';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * Individual breadcrumb item representing a single segment in the navigation path.\n * Supports Angular Router navigation, icons, and labels.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item link=\"/section\" label=\"Section\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'eds-breadcrumb-item',\n    templateUrl: './eds-breadcrumb-item.html',\n    styleUrl: './eds-breadcrumb-item.scss',\n    imports: [...EDS_ICON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '(click)': 'onClick()',\n        '(keydown.enter)': 'onClick()',\n        '[attr.clickable]': '!!link() || null',\n        '[attr.current]': '_isLast || null',\n        '[attr.aria-current]': '_isLast ? \"page\" : null',\n        '[attr.tabindex]': '!!link() && !_isLast ? 0 : null',\n        '[attr.role]': '!!link() ? \"link\" : null',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsBreadcrumbItem {\n    /** Text label for the breadcrumb item. */\n    label = input<string>('');\n\n    /** Icon name (EDS icon) displayed instead of or alongside the label. */\n    icon = input<string>('');\n\n    /** ARIA label for accessibility (especially useful for icon-only items). */\n    ariaLabel = input('Breadcrumb item');\n\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-breadcrumb-item'\n     */\n    e2eAttr = input('eds-breadcrumb-item');\n\n    /** Navigation target — string URL or Router commands array. Undefined makes item non-clickable. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    link = input<string | any[] | undefined>(undefined);\n\n    /** Additional navigation options passed to Angular Router. */\n    navigationExtras = input<NavigationExtras | undefined>(undefined);\n\n    /** @internal Set by parent EdsBreadcrumb. */\n    _isFirst = false;\n\n    /** @internal Set by parent EdsBreadcrumb. */\n    _isLast = false;\n\n    private _router = inject(Router);\n\n    onClick(): void {\n        const linkValue = this.link();\n        if (!linkValue) return;\n\n        if (typeof linkValue === 'string') {\n            if (linkValue.startsWith('http')) {\n                window.location.href = linkValue;\n                return;\n            }\n            this._router.navigateByUrl(linkValue, this.navigationExtras() || {});\n        } else {\n            this._router.navigate(linkValue, this.navigationExtras());\n        }\n    }\n}\n","@if (!_isFirst) {\n    <eds-icon icon=\"caret-right:core\" size=\"xs\" class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n    <eds-icon [icon]=\"icon()\" size=\"s\" [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n    <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    contentChildren,\n    effect,\n    input,\n} from '@angular/core';\nimport { EdsBreadcrumbItem } from './eds-breadcrumb-item';\n\n/**\n * @description\n * Breadcrumb navigation component displaying hierarchical page location with linked path segments.\n * Automatically manages separator rendering between child items.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb>\n *   <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n *   <eds-breadcrumb-item link=\"/products\" label=\"Products\"></eds-breadcrumb-item>\n *   <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * </eds-breadcrumb>\n * ```\n */\n@Component({\n    selector: 'eds-breadcrumb',\n    template: '<ng-content/>',\n    styleUrl: './eds-breadcrumb.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        role: 'navigation',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsBreadcrumb {\n    /**\n     * Accessible label for the breadcrumb navigation landmark.\n     * @default 'Breadcrumb'\n     */\n    ariaLabel = input('Breadcrumb');\n\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-breadcrumb'\n     */\n    e2eAttr = input('eds-breadcrumb');\n\n    private items = contentChildren(EdsBreadcrumbItem);\n\n    constructor() {\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, index) => {\n                item._isFirst = index === 0;\n                item._isLast = index === items.length - 1;\n            });\n        });\n    }\n}\n","import { EdsBreadcrumb } from './eds-breadcrumb';\nimport { EdsBreadcrumbItem } from './eds-breadcrumb-item';\n\nexport { EdsBreadcrumb, EdsBreadcrumbItem };\n\n/** Convenience array for importing all eds-breadcrumb components. */\nexport const EDS_BREADCRUMB = [\n    EdsBreadcrumb,\n    EdsBreadcrumbItem,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-eds-eds-chip.mjs

@@ -154,7 +154,7 @@ class EdsChip {
         this.chipClick.emit(this.data());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsInternalId: { classPropertyName: "edsInternalId", publicName: "edsInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isRemovable: { classPropertyName: "isRemovable", publicName: "isRemovable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipRemove: "chipRemove", chipClick: "chipClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)", "keydown.space": "onHostKeyActivate($event)", "keydown.delete": "onKeyRemove($event)", "keydown.backspace": "onKeyRemove($event)" }, properties: { "attr.color": "color()", "attr.size": "size()", "attr.removable": "isRemovable() || null", "attr.active": "isActive() || null", "attr.disabled": "disabled() || null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.role": "hostRole()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-pressed": "isActive() ? \"true\" : null", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-chip" }, ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([disabled]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsInternalId: { classPropertyName: "edsInternalId", publicName: "edsInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isRemovable: { classPropertyName: "isRemovable", publicName: "isRemovable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipRemove: "chipRemove", chipClick: "chipClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)", "keydown.space": "onHostKeyActivate($event)", "keydown.delete": "onKeyRemove($event)", "keydown.backspace": "onKeyRemove($event)" }, properties: { "attr.color": "color()", "attr.size": "size()", "attr.removable": "isRemovable() || null", "attr.active": "isActive() || null", "attr.disabled": "disabled() || null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.role": "hostRole()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-pressed": "isActive() ? \"true\" : null", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-chip" }, ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__content ::ng-deep eds-icon:first-child{margin-left:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__content ::ng-deep eds-icon:last-child{margin-right:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle)}:host([color=primary]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]),:host([active][color=neutral]){--_eds-chip-surface: var(--eds-c-surface-inverted);--_eds-chip-on-surface: var(--eds-c-on-surface-inverted);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);--_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed)}:host([active][color=primary]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([active][color=info]){--_eds-chip-surface: var(--eds-c-surface-info);--_eds-chip-on-surface: var(--eds-c-on-surface-info);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-info--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);--_eds-chip-surface-active: var(--eds-c-surface-info--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed)}:host([active][color=success]){--_eds-chip-surface: var(--eds-c-surface-success);--_eds-chip-on-surface: var(--eds-c-on-surface-success);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-success--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);--_eds-chip-surface-active: var(--eds-c-surface-success--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed)}:host([active][color=warning]){--_eds-chip-surface: var(--eds-c-surface-warning);--_eds-chip-on-surface: var(--eds-c-on-surface-warning);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);--_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed)}:host([active][color=critical]){--_eds-chip-surface: var(--eds-c-surface-critical);--_eds-chip-on-surface: var(--eds-c-on-surface-critical);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);--_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed)}:host([disabled]),:host([disabled][active]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChip, decorators: [{
             type: Component,
@@ -180,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '(keydown.space)': 'onHostKeyActivate($event)',
                         '(keydown.delete)': 'onKeyRemove($event)',
                         '(keydown.backspace)': 'onKeyRemove($event)',
-                    }, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([disabled]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"] }]
+                    }, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__content ::ng-deep eds-icon:first-child{margin-left:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__content ::ng-deep eds-icon:last-child{margin-right:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle)}:host([color=primary]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]),:host([active][color=neutral]){--_eds-chip-surface: var(--eds-c-surface-inverted);--_eds-chip-on-surface: var(--eds-c-on-surface-inverted);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);--_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed)}:host([active][color=primary]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([active][color=info]){--_eds-chip-surface: var(--eds-c-surface-info);--_eds-chip-on-surface: var(--eds-c-on-surface-info);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-info--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);--_eds-chip-surface-active: var(--eds-c-surface-info--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed)}:host([active][color=success]){--_eds-chip-surface: var(--eds-c-surface-success);--_eds-chip-on-surface: var(--eds-c-on-surface-success);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-success--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);--_eds-chip-surface-active: var(--eds-c-surface-success--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed)}:host([active][color=warning]){--_eds-chip-surface: var(--eds-c-surface-warning);--_eds-chip-on-surface: var(--eds-c-on-surface-warning);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);--_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed)}:host([active][color=critical]){--_eds-chip-surface: var(--eds-c-surface-critical);--_eds-chip-on-surface: var(--eds-c-on-surface-critical);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);--_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed)}:host([disabled]),:host([disabled][active]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], edsInternalId: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsInternalId", required: false }] }], tooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRemovable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chipRemove: [{ type: i0.Output, args: ["chipRemove"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }] } });
 
 /**

package/fesm2022/eui-eds-eds-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n","/** Data structure for chip tooltip configuration. */\nexport interface EdsChipTooltip {\n    tooltipMessage?: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;\n    delay?: number;\n    color?: string;\n}\n\n/** Data payload emitted by chip events and passed via the `data` input. */\nexport interface EdsChipData {\n    id?: string | number;\n    tooltip?: EdsChipTooltip;\n    /** Internal event reference, present when triggered via keyboard. */\n    _event?: Event;\n    [key: string]: unknown;\n}\n\n/**\n * @deprecated Use `EdsChipData` interface instead.\n * Legacy class-based model kept for backward compatibility.\n */\nexport class EdsChipModel implements EdsChipData {\n    [key: string]: unknown;\n    id!: string | number;\n    edsInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EdsChipTooltip = {};\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n","/** Data structure for chip tooltip configuration. */\nexport interface EdsChipTooltip {\n    tooltipMessage?: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;\n    delay?: number;\n    color?: string;\n}\n\n/** Data payload emitted by chip events and passed via the `data` input. */\nexport interface EdsChipData {\n    id?: string | number;\n    tooltip?: EdsChipTooltip;\n    /** Internal event reference, present when triggered via keyboard. */\n    _event?: Event;\n    [key: string]: unknown;\n}\n\n/**\n * @deprecated Use `EdsChipData` interface instead.\n * Legacy class-based model kept for backward compatibility.\n */\nexport class EdsChipModel implements EdsChipData {\n    [key: string]: unknown;\n    id!: string | number;\n    edsInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EdsChipTooltip = {};\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-eds-eds-datepicker.mjs

@@ -5,8 +5,8 @@ import * as i1 from '@eui/eds/eds-icon';
 import { EDS_ICON } from '@eui/eds/eds-icon';
 import * as i2 from '@eui/eds/eds-input-text';
 import { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';
-import * as i3 from '@eui/eds/eds-input-group';
-import { EDS_INPUT_GROUP } from '@eui/eds/eds-input-group';
+import * as i3 from '@eui/eds/eds-input-button';
+import { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';
 import * as i4 from '@eui/eds/eds-button';
 import { EDS_BUTTON } from '@eui/eds/eds-button';
 import * as i5 from '@eui/eds/eds-timepicker';
@@ -326,13 +326,13 @@ class EdsDatepicker {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsDatepicker, isStandalone: true, selector: "eds-datepicker", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isDatetimepicker: { classPropertyName: "isDatetimepicker", publicName: "isDatetimepicker", isSignal: true, isRequired: false, transformFunction: null }, hasSeconds: { classPropertyName: "hasSeconds", publicName: "hasSeconds", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", value: "valueChange" }, host: { properties: { "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<div edsInputGroup class=\"eds-datepicker__group\">\n    <div edsInputGroupAddon>\n        <input edsInputText\n            [edsClearable]=\"false\"\n            [id]=\"inputId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"displayValue()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            (input)=\"onInputChange($event)\"\n            (blur)=\"onTouched()\"\n            (click)=\"onInputClick()\"/>\n        @if (!readonly() && !disabled()) {\n            <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n                <eds-icon icon=\"calendar-blank:core\"/>\n            </button>\n        }\n    </div>\n</div>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i3.EdsInputGroup, selector: "div[edsInputGroup]", inputs: ["e2eAttr"] }, { kind: "component", type: i3.EdsInputGroupAddon, selector: "div[edsInputGroupAddon], eds-input-group-addon", inputs: ["e2eAttr"] }, { kind: "component", type: i4.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "block", "iconButton", "avatarButton", "lineWrap", "rounded", "isChecked"] }, { kind: "component", type: i5.EdsTimepicker, selector: "eds-timepicker", inputs: ["e2eAttr", "stepHours", "stepMinutes", "stepSeconds", "hasSeconds", "disabled", "readonly"], outputs: ["timeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsDatepicker, isStandalone: true, selector: "eds-datepicker", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isDatetimepicker: { classPropertyName: "isDatetimepicker", publicName: "isDatetimepicker", isSignal: true, isRequired: false, transformFunction: null }, hasSeconds: { classPropertyName: "hasSeconds", publicName: "hasSeconds", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", value: "valueChange" }, host: { properties: { "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<eds-input-button class=\"eds-datepicker__group\">\n    <input edsInputText\n        [edsClearable]=\"false\"\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onTouched()\"\n        (click)=\"onInputClick()\"/>\n    @if (!readonly() && !disabled()) {\n        <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n            <eds-icon icon=\"calendar-blank:core\"/>\n        </button>\n    }\n</eds-input-button>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i3.EdsInputButton, selector: "eds-input-button", inputs: ["e2eAttr", "edsButtonPositionStart", "edsButtonPositionEnd"] }, { kind: "component", type: i4.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "block", "iconButton", "avatarButton", "lineWrap", "rounded", "isChecked"] }, { kind: "component", type: i5.EdsTimepicker, selector: "eds-timepicker", inputs: ["e2eAttr", "stepHours", "stepMinutes", "stepSeconds", "hasSeconds", "disabled", "readonly"], outputs: ["timeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_GROUP, ...EDS_BUTTON, ...EDS_TIMEPICKER], host: {
+            args: [{ selector: 'eds-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER], host: {
                         '[attr.data-e2e]': 'e2eAttr()',
-                    }, template: "<div edsInputGroup class=\"eds-datepicker__group\">\n    <div edsInputGroupAddon>\n        <input edsInputText\n            [edsClearable]=\"false\"\n            [id]=\"inputId()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"displayValue()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            (input)=\"onInputChange($event)\"\n            (blur)=\"onTouched()\"\n            (click)=\"onInputClick()\"/>\n        @if (!readonly() && !disabled()) {\n            <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n                <eds-icon icon=\"calendar-blank:core\"/>\n            </button>\n        }\n    </div>\n</div>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"] }]
+                    }, template: "<eds-input-button class=\"eds-datepicker__group\">\n    <input edsInputText\n        [edsClearable]=\"false\"\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onTouched()\"\n        (click)=\"onInputClick()\"/>\n    @if (!readonly() && !disabled()) {\n        <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n            <eds-icon icon=\"calendar-blank:core\"/>\n        </button>\n    }\n</eds-input-button>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], isDatetimepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDatetimepicker", required: false }] }], hasSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeconds", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 // Luxon is expected to be available as a peer dependency