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

package/docs/json/EdsBreadcrumbItem.md

@@ -18,6 +18,7 @@ Supports Angular Router navigation, icons, and labels.
 
 ## Inputs
 - **ariaLabel**: `string` - ARIA label for accessibility (especially useful for icon-only items).
+- **e2eAttr**: `string` - 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` - Navigation target — string URL or Router commands array. Undefined makes item non-clickable.

package/docs/json/documentation.json

@@ -21553,7 +21553,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        gap: var(--eds-sp-3xs);\n        font: var(--eds-f-label-m);\n        color: var(--eds-c-foreground-subtler);\n    }\n\n    @include base.media(base.$eds-bkp-mobile) {\n        :host {\n            display: none;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: var(--eds-sp-3xs);\n    font: var(--eds-f-label-m);\n    color: var(--eds-c-foreground-subtler);\n}\n\n@include base.media(base.$eds-bkp-mobile) {\n    :host {\n        display: none;\n    }\n}\n",
                     "styleUrl": "./eds-breadcrumb.scss"
                 }
             ],
@@ -21615,7 +21615,7 @@
         },
         {
             "name": "EdsBreadcrumbItem",
-            "id": "component-EdsBreadcrumbItem-299b18928e241169373c4cb8ab6cd8e2ea26f18ad08f748752b7b0ab97af74cb29ed65b3c4e3a1e99ffb251bdcf7a45bf8481489e9fd8bea453f072d4a26643c",
+            "id": "component-EdsBreadcrumbItem-6a7050af7c66f6304f9fe8f8e0dd2da0247b1fac078b1fe0a13641829d80d85585562a22575b4fbbee1e36cb7accbf957ff05106e060c899da68579ce97c6d0a",
             "file": "packages/eds/eds-breadcrumb/eds-breadcrumb-item.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -21646,10 +21646,45 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ARIA label for accessibility (especially useful for icon-only items).</p>\n",
-                    "line": 46,
+                    "line": 47,
                     "rawdescription": "\nARIA label for accessibility (especially useful for icon-only items).",
                     "required": false
                 },
+                {
+                    "name": "e2eAttr",
+                    "coverageIgnore": false,
+                    "defaultValue": "'eds-breadcrumb-item'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Data attribute value for end-to-end testing identification.\n&#39;eds-breadcrumb-item&#39;</p>\n",
+                    "line": 53,
+                    "rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-breadcrumb-item'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 1688,
+                            "end": 1724,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1689,
+                                "end": 1696,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;eds-breadcrumb-item&#39;</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
                 {
                     "name": "icon",
                     "coverageIgnore": false,
@@ -21660,7 +21695,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Icon name (EDS icon) displayed instead of or alongside the label.</p>\n",
-                    "line": 43,
+                    "line": 44,
                     "rawdescription": "\nIcon name (EDS icon) displayed instead of or alongside the label.",
                     "required": false
                 },
@@ -21674,7 +21709,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Text label for the breadcrumb item.</p>\n",
-                    "line": 40,
+                    "line": 41,
                     "rawdescription": "\nText label for the breadcrumb item.",
                     "required": false
                 },
@@ -21688,7 +21723,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Navigation target — string URL or Router commands array. Undefined makes item non-clickable.</p>\n",
-                    "line": 50,
+                    "line": 57,
                     "rawdescription": "\nNavigation target — string URL or Router commands array. Undefined makes item non-clickable.",
                     "required": false
                 },
@@ -21702,7 +21737,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Additional navigation options passed to Angular Router.</p>\n",
-                    "line": 53,
+                    "line": 60,
                     "rawdescription": "\nAdditional navigation options passed to Angular Router.",
                     "required": false
                 }
@@ -21717,7 +21752,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 63,
+                    "line": 70,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -21738,12 +21773,12 @@
             "description": "<p>Individual breadcrumb item representing a single segment in the navigation path.\nSupports Angular Router navigation, icons, and labels.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-breadcrumb-item link=&quot;/&quot; icon=&quot;house&quot; ariaLabel=&quot;Home&quot;&gt;&lt;/eds-breadcrumb-item&gt;\n&lt;eds-breadcrumb-item link=&quot;/section&quot; label=&quot;Section&quot;&gt;&lt;/eds-breadcrumb-item&gt;\n&lt;eds-breadcrumb-item label=&quot;Current page&quot;&gt;&lt;/eds-breadcrumb-item&gt;</code></pre></div>",
             "rawdescription": "\n\nIndividual breadcrumb item representing a single segment in the navigation path.\nSupports Angular Router navigation, icons, and labels.\n\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",
             "type": "component",
-            "sourceCode": "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",
+            "sourceCode": "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",
             "styleUrl": "./eds-breadcrumb-item.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-3xs);\n        white-space: nowrap;\n        font: var(--eds-f-label-s);\n        color: var(--eds-c-foreground-subtler);\n    }\n\n    :host(.eds-breadcrumb-item--clickable) {\n        cursor: pointer;\n        color: var(--eds-c-foreground-primary);\n\n        &:hover .eds-breadcrumb-item__label {\n            text-decoration: underline;\n        }\n    }\n\n    :host(.eds-breadcrumb-item--current) {\n        color: var(--eds-c-foreground);\n        cursor: default;\n    }\n\n    .eds-breadcrumb-item__separator {\n        color: var(--eds-c-foreground-subtler);\n    }\n\n    .eds-breadcrumb-item__label {\n        @include base.eds-ellipsis();\n        max-width: 200px;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: flex;\n    align-items: center;\n    gap: var(--eds-sp-3xs);\n    white-space: nowrap;\n    font: var(--eds-f-label-s);\n    color: var(--eds-c-foreground-subtler);\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    color: var(--eds-c-foreground-primary);\n\n    &:hover .eds-breadcrumb-item__label {\n        text-decoration: underline;\n    }\n}\n\n:host([current]) {\n    color: var(--eds-c-foreground);\n    cursor: default;\n}\n\n:host .eds-breadcrumb-item__separator {\n    color: var(--eds-c-foreground-subtler);\n}\n\n:host .eds-breadcrumb-item__label {\n    @include base.eds-ellipsis();\n    max-width: 200px;\n}\n",
                     "styleUrl": "./eds-breadcrumb-item.scss"
                 }
             ],
@@ -29134,7 +29169,7 @@
         },
         {
             "name": "EdsDatepicker",
-            "id": "component-EdsDatepicker-3d3380f70902b924d9f2fb035e87c1a5ead6b779426295a7a46a556b5fe5479b794201e148cbfcfabb37eae154e0c7bc143b890ebc41561809770d4f6d4255c3",
+            "id": "component-EdsDatepicker-940e727f076eb85335162e5ecc2ea7a930e9583dc4d0e64e9ea764804ba795c0bb53e559e4cbb063910e2568b51aed5b08b02c5e5056106a42d350940bab6674",
             "file": "packages/eds/eds-datepicker/eds-datepicker.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -29941,7 +29976,7 @@
                     "name": "EDS_INPUT_TEXT"
                 },
                 {
-                    "name": "EDS_INPUT_GROUP"
+                    "name": "EDS_INPUT_BUTTON"
                 },
                 {
                     "name": "EDS_BUTTON"
@@ -29953,7 +29988,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    model,\n    signal,\n    computed,\n    booleanAttribute,\n    inject,\n    ElementRef,\n    HostListener,\n    OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_GROUP } from '@eui/eds/eds-input-group';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n    selector: 'eds-datepicker',\n    templateUrl: './eds-datepicker.html',\n    styleUrl: './eds-datepicker.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_GROUP, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n    host: {\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n    /** Data attribute for e2e testing. */\n    e2eAttr = input('eds-datepicker');\n\n    /** Input element id. */\n    inputId = input('eds-datepicker-input');\n\n    /** Placeholder text. */\n    placeholder = input('dd/mm/yyyy');\n\n    /** Aria label for the input. */\n    ariaLabel = input('Date input');\n\n    /** Date format for display (default: dd/mm/yyyy). */\n    dateFormat = input('dd/mm/yyyy');\n\n    /** Minimum selectable date. */\n    minDate = input<Date | null>(null);\n\n    /** Maximum selectable date. */\n    maxDate = input<Date | null>(null);\n\n    /** Whether the datepicker is disabled. */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /** Whether the datepicker is readonly. */\n    readonly = input(false, { transform: booleanAttribute });\n\n    /** Whether to show a timepicker alongside the calendar. */\n    isDatetimepicker = input(false, { transform: booleanAttribute });\n\n    /** Whether the timepicker shows seconds. */\n    hasSeconds = input(false, { transform: booleanAttribute });\n\n    /** Emitted when a date is selected. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    dateChange = output<any>();\n\n    /** The selected date value. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value = model<any>(null);\n\n    /** Whether the calendar dropdown is open. */\n    isOpen = signal(false);\n\n    /** Whether the dropdown should open above the input. */\n    dropUp = signal(false);\n\n    /** Current viewed month/year for the calendar. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    viewDate = signal<any>(null);\n\n    /** Weekday header labels. */\n    weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n    /** Current time selection (for datetime mode). */\n    selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n    /** The date adapter (native Date or Luxon). */\n    adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n    /** Computed display value for the input. */\n    displayValue = computed(() => {\n        const date = this.value();\n        if (!date || !this.adapter.isValid(date)) {\n            return '';\n        }\n        const dateStr = this.adapter.format(date);\n        if (this.isDatetimepicker()) {\n            const time = this.selectedTime();\n            const h = String(time.hours).padStart(2, '0');\n            const m = String(time.minutes).padStart(2, '0');\n            if (this.hasSeconds() && time.seconds !== undefined) {\n                const s = String(time.seconds).padStart(2, '0');\n                return `${dateStr} ${h}:${m}:${s}`;\n            }\n            return `${dateStr} ${h}:${m}`;\n        }\n        return dateStr;\n    });\n\n    /** Computed month/year label for the header. */\n    monthLabel = computed(() => {\n        const d = this.viewDate() || this.adapter.today();\n        const months = ['January', 'February', 'March', 'April', 'May', 'June',\n            'July', 'August', 'September', 'October', 'November', 'December'];\n        return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n    });\n\n    /** Computed calendar day grid. */\n    calendarDays = computed(() => {\n        const vd = this.viewDate() || this.adapter.today();\n        const year = this.adapter.getYear(vd);\n        const month = this.adapter.getMonth(vd);\n        const firstDay = this.adapter.create(year, month, 1);\n        // Monday-based: 1=Mon, 7=Sun\n        const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n        const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const days: (any | null)[] = [];\n\n        // Empty slots before first day\n        for (let i = 0; i < startDay; i++) {\n            days.push(null);\n        }\n        // Actual days\n        for (let i = 1; i <= daysInMonth; i++) {\n            days.push(this.adapter.create(year, month, i));\n        }\n        return days;\n    });\n\n    private _elementRef = inject(ElementRef);\n    private _ngControl = inject(NgControl, { optional: true, self: true });\n    private _documentClickListener: ((e: Event) => void) | null = null;\n\n    constructor() {\n        if (this._ngControl) {\n            this._ngControl.valueAccessor = this;\n        }\n        this.viewDate.set(this.adapter.today());\n    }\n\n    ngOnDestroy(): void {\n        this._removeDocumentListener();\n    }\n\n    // --- Public API ---\n\n    toggle(): void {\n        if (this.disabled() || this.readonly()) {\n            return;\n        }\n        this.isOpen.set(!this.isOpen());\n        if (this.isOpen()) {\n            // Set view to selected date or today\n            this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n            // Check if there's enough space below — if not, open above\n            const rect = this._elementRef.nativeElement.getBoundingClientRect();\n            const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n            const spaceBelow = window.innerHeight - rect.bottom;\n            this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n            this._addDocumentListener();\n        } else {\n            this._removeDocumentListener();\n        }\n    }\n\n    onInputClick(): void {\n        if (!this.isOpen()) {\n            this.toggle();\n        }\n    }\n\n    prevMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n    }\n\n    nextMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    selectDay(date: any): void {\n        this.value.set(date);\n        this._onChange(date);\n        this.dateChange.emit(date);\n        this.isOpen.set(false);\n        this._removeDocumentListener();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isToday(date: any): boolean {\n        return this.adapter.isSameDay(date, this.adapter.today());\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isSelected(date: any): boolean {\n        const sel = this.value();\n        if (!sel || !this.adapter.isValid(sel)) {\n            return false;\n        }\n        return this.adapter.isSameDay(date, sel);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isOutsideRange(date: any): boolean {\n        const min = this.minDate();\n        const max = this.maxDate();\n        if (min && this.adapter.isBefore(date, min)) {\n            return true;\n        }\n        if (max && this.adapter.isAfter(date, max)) {\n            return true;\n        }\n        return false;\n    }\n\n    onInputChange(event: Event): void {\n        const val = (event.target as HTMLInputElement).value;\n        if (val === '') {\n            this.value.set(null);\n            this._onChange(null);\n            this.dateChange.emit(null);\n            return;\n        }\n        const parsed = this.adapter.parse(val);\n        if (parsed) {\n            this.value.set(parsed);\n            this._onChange(parsed);\n            this.dateChange.emit(parsed);\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onTimeChange(time: any): void {\n        this.selectedTime.set(time);\n        // If a date is already selected, re-emit with the time applied\n        // (consumer is responsible for combining date + time as needed)\n    }\n\n    // --- ControlValueAccessor ---\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.value.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (value: any) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(_isDisabled: boolean): void {\n        // Handled via input signal\n    }\n\n    // ControlValueAccessor\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    protected onTouched: () => void = () => { /* noop */ };\n\n    // --- Private ---\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n    private _onChange: (value: any) => void = () => { /* noop */ };\n\n    private _addDocumentListener(): void {\n        if (!this._documentClickListener) {\n            this._documentClickListener = (e: Event): void => {\n                if (!this._elementRef.nativeElement.contains(e.target)) {\n                    this.isOpen.set(false);\n                    this._removeDocumentListener();\n                }\n            };\n            document.addEventListener('click', this._documentClickListener);\n        }\n    }\n\n    private _removeDocumentListener(): void {\n        if (this._documentClickListener) {\n            document.removeEventListener('click', this._documentClickListener);\n            this._documentClickListener = null;\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    model,\n    signal,\n    computed,\n    booleanAttribute,\n    inject,\n    ElementRef,\n    HostListener,\n    OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n    selector: 'eds-datepicker',\n    templateUrl: './eds-datepicker.html',\n    styleUrl: './eds-datepicker.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n    host: {\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n    /** Data attribute for e2e testing. */\n    e2eAttr = input('eds-datepicker');\n\n    /** Input element id. */\n    inputId = input('eds-datepicker-input');\n\n    /** Placeholder text. */\n    placeholder = input('dd/mm/yyyy');\n\n    /** Aria label for the input. */\n    ariaLabel = input('Date input');\n\n    /** Date format for display (default: dd/mm/yyyy). */\n    dateFormat = input('dd/mm/yyyy');\n\n    /** Minimum selectable date. */\n    minDate = input<Date | null>(null);\n\n    /** Maximum selectable date. */\n    maxDate = input<Date | null>(null);\n\n    /** Whether the datepicker is disabled. */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /** Whether the datepicker is readonly. */\n    readonly = input(false, { transform: booleanAttribute });\n\n    /** Whether to show a timepicker alongside the calendar. */\n    isDatetimepicker = input(false, { transform: booleanAttribute });\n\n    /** Whether the timepicker shows seconds. */\n    hasSeconds = input(false, { transform: booleanAttribute });\n\n    /** Emitted when a date is selected. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    dateChange = output<any>();\n\n    /** The selected date value. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value = model<any>(null);\n\n    /** Whether the calendar dropdown is open. */\n    isOpen = signal(false);\n\n    /** Whether the dropdown should open above the input. */\n    dropUp = signal(false);\n\n    /** Current viewed month/year for the calendar. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    viewDate = signal<any>(null);\n\n    /** Weekday header labels. */\n    weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n    /** Current time selection (for datetime mode). */\n    selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n    /** The date adapter (native Date or Luxon). */\n    adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n    /** Computed display value for the input. */\n    displayValue = computed(() => {\n        const date = this.value();\n        if (!date || !this.adapter.isValid(date)) {\n            return '';\n        }\n        const dateStr = this.adapter.format(date);\n        if (this.isDatetimepicker()) {\n            const time = this.selectedTime();\n            const h = String(time.hours).padStart(2, '0');\n            const m = String(time.minutes).padStart(2, '0');\n            if (this.hasSeconds() && time.seconds !== undefined) {\n                const s = String(time.seconds).padStart(2, '0');\n                return `${dateStr} ${h}:${m}:${s}`;\n            }\n            return `${dateStr} ${h}:${m}`;\n        }\n        return dateStr;\n    });\n\n    /** Computed month/year label for the header. */\n    monthLabel = computed(() => {\n        const d = this.viewDate() || this.adapter.today();\n        const months = ['January', 'February', 'March', 'April', 'May', 'June',\n            'July', 'August', 'September', 'October', 'November', 'December'];\n        return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n    });\n\n    /** Computed calendar day grid. */\n    calendarDays = computed(() => {\n        const vd = this.viewDate() || this.adapter.today();\n        const year = this.adapter.getYear(vd);\n        const month = this.adapter.getMonth(vd);\n        const firstDay = this.adapter.create(year, month, 1);\n        // Monday-based: 1=Mon, 7=Sun\n        const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n        const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const days: (any | null)[] = [];\n\n        // Empty slots before first day\n        for (let i = 0; i < startDay; i++) {\n            days.push(null);\n        }\n        // Actual days\n        for (let i = 1; i <= daysInMonth; i++) {\n            days.push(this.adapter.create(year, month, i));\n        }\n        return days;\n    });\n\n    private _elementRef = inject(ElementRef);\n    private _ngControl = inject(NgControl, { optional: true, self: true });\n    private _documentClickListener: ((e: Event) => void) | null = null;\n\n    constructor() {\n        if (this._ngControl) {\n            this._ngControl.valueAccessor = this;\n        }\n        this.viewDate.set(this.adapter.today());\n    }\n\n    ngOnDestroy(): void {\n        this._removeDocumentListener();\n    }\n\n    // --- Public API ---\n\n    toggle(): void {\n        if (this.disabled() || this.readonly()) {\n            return;\n        }\n        this.isOpen.set(!this.isOpen());\n        if (this.isOpen()) {\n            // Set view to selected date or today\n            this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n            // Check if there's enough space below — if not, open above\n            const rect = this._elementRef.nativeElement.getBoundingClientRect();\n            const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n            const spaceBelow = window.innerHeight - rect.bottom;\n            this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n            this._addDocumentListener();\n        } else {\n            this._removeDocumentListener();\n        }\n    }\n\n    onInputClick(): void {\n        if (!this.isOpen()) {\n            this.toggle();\n        }\n    }\n\n    prevMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n    }\n\n    nextMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    selectDay(date: any): void {\n        this.value.set(date);\n        this._onChange(date);\n        this.dateChange.emit(date);\n        this.isOpen.set(false);\n        this._removeDocumentListener();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isToday(date: any): boolean {\n        return this.adapter.isSameDay(date, this.adapter.today());\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isSelected(date: any): boolean {\n        const sel = this.value();\n        if (!sel || !this.adapter.isValid(sel)) {\n            return false;\n        }\n        return this.adapter.isSameDay(date, sel);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isOutsideRange(date: any): boolean {\n        const min = this.minDate();\n        const max = this.maxDate();\n        if (min && this.adapter.isBefore(date, min)) {\n            return true;\n        }\n        if (max && this.adapter.isAfter(date, max)) {\n            return true;\n        }\n        return false;\n    }\n\n    onInputChange(event: Event): void {\n        const val = (event.target as HTMLInputElement).value;\n        if (val === '') {\n            this.value.set(null);\n            this._onChange(null);\n            this.dateChange.emit(null);\n            return;\n        }\n        const parsed = this.adapter.parse(val);\n        if (parsed) {\n            this.value.set(parsed);\n            this._onChange(parsed);\n            this.dateChange.emit(parsed);\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onTimeChange(time: any): void {\n        this.selectedTime.set(time);\n        // If a date is already selected, re-emit with the time applied\n        // (consumer is responsible for combining date + time as needed)\n    }\n\n    // --- ControlValueAccessor ---\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.value.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (value: any) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(_isDisabled: boolean): void {\n        // Handled via input signal\n    }\n\n    // ControlValueAccessor\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    protected onTouched: () => void = () => { /* noop */ };\n\n    // --- Private ---\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n    private _onChange: (value: any) => void = () => { /* noop */ };\n\n    private _addDocumentListener(): void {\n        if (!this._documentClickListener) {\n            this._documentClickListener = (e: Event): void => {\n                if (!this._elementRef.nativeElement.contains(e.target)) {\n                    this.isOpen.set(false);\n                    this._removeDocumentListener();\n                }\n            };\n            document.addEventListener('click', this._documentClickListener);\n        }\n    }\n\n    private _removeDocumentListener(): void {\n        if (this._documentClickListener) {\n            document.removeEventListener('click', this._documentClickListener);\n            this._documentClickListener = null;\n        }\n    }\n}\n",
             "styleUrl": "./eds-datepicker.scss",
             "assetsDirs": [],
             "styleUrlsData": [
@@ -29989,7 +30024,7 @@
                         "type": "module"
                     },
                     {
-                        "name": "EDS_INPUT_GROUP",
+                        "name": "EDS_INPUT_BUTTON",
                         "type": "module"
                     },
                     {
@@ -30010,7 +30045,7 @@
                     }
                 ]
             },
-            "templateData": "<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\">‹</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\">›</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"
+            "templateData": "<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\">‹</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\">›</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"
         },
         {
             "name": "EdsDialog",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-27T12:18:02.375Z, 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.

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.27</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-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