@eui/eds 22.0.0-alpha.30 → 22.0.0-alpha.31

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-29T06:56:47.304Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-29T14:41:33.365Z, llm-md export.
 
 ## Components
 
@@ -977,6 +977,7 @@ Change detection: `ChangeDetectionStrategy.OnPush`
 
 Inputs:
 - `ariaLabel: string = 'Date input'` — Aria label for the input.
+- `clearable: boolean = false` — Whether to show a clear button that resets the selected date.
 - `dateFormat: string = 'dd/mm/yyyy'` — Date format for display (default: dd/mm/yyyy).
 - `disabled: boolean = false` — Whether the datepicker is disabled.
 - `e2eAttr: string = 'eds-datepicker'` — Data attribute for e2e testing.
@@ -1342,7 +1343,7 @@ File: `packages/eds/eds-feedback-message/eds-feedback-message.ts`
 Selector: `eds-feedback-message`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
-Description: A feedback message component that displays contextual feedback to users. Supports different color variants (primary, neutral, info, success, warning, critical) and a muted mode. Basic feedback message Example : \<eds-feedback-message color="success"\> Operation completed successfully \</eds-feedback-message\> Muted variant (no icon) Example : \<eds-feedback-message color="warning" isMuted\> This is a subtle warning message \</eds-feedback-message\>
+Description: A feedback message component that displays contextual feedback to users. Supports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode. Basic feedback message Example : \<eds-feedback-message color="success"\> Operation completed successfully \</eds-feedback-message\> Muted variant (no icon) Example : \<eds-feedback-message color="warning" isMuted\> This is a subtle warning message \</eds-feedback-message\>
 
 Inputs:
 - `color: EdsFeedbackMessageColor = 'info'` — Semantic color of the feedback message. 'info'
@@ -1709,6 +1710,18 @@ Outputs:
 Properties:
 - `hostClasses: unknown = computed(() => ['eds-icon-toggle', this.internalChecked() ? 'eds-icon-toggle--on' : 'eds-icon-toggle--off', this.isReadOnly() ? 'eds-icon-toggle--readonly' : ''…`
 
+### EdsInputAddon
+
+File: `packages/eds/eds-input-addon/eds-input-addon.ts`
+Selector: `eds-input-addon`
+Change detection: `ChangeDetectionStrategy.OnPush`
+
+Description: A layout component that positions a non-actionable static addon (fixed text and/or an icon) flush against an input field — e.g. a currency symbol, a https:// prefix, a unit suffix. Visually it mirrors EdsInputButton's footprint but reads as a recessed extension of the field , not a control: sunken surface, muted (subtler) foreground, cursor: default , no hover / focus states, and it is not in the tab order. Use eds-input-button when the trailing/leading element must be clickable; use eds-input-addon when it is purely contextual text/icon. Addon at start of input (default) Example : \<eds-input-addon\> \<span\>https://\</span\> \<input edsInputText placeholder="example.com" /\> \</eds-input-addon\> Addon at end of input Example : \<eds-input-addon position="end"\> \<input edsInputText placeholder="0.00" /\> \<span\>EUR\</span\> \</eds-input-addon\> With an icon Example : \<eds-input-addon\> \<eds-icon icon="magnifying-glass" ariaHidden /\> \<input edsInputText placeholder="Search..." /\> \</eds-input-addon\> Accessibility The addon is presentational context, not a control — it has no role and is not focusable. When the addon gives the input meaning (currency, prefix, unit), give the projected text an id and reference it from the input via aria-describedby so assistive tech announces it. When it is purely decorative (repeats the label), mark it aria-hidden="true" . Notes Default position is start (left in LTR, right in RTL); set position="end" for the other side. Projects plain text, an \<eds-icon\> , or both.
+
+Inputs:
+- `e2eAttr: string = 'eds-input-addon'` — Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element. 'eds-input-addon'
+- `position: EdsInputAddonPosition = 'start'` — Which side of the input the addon sits on, reflected as the position host attribute. start = left in LTR (right in RTL); end = the opposite side. 'start'
+
 ### EdsInputButton
 
 File: `packages/eds/eds-input-button/eds-input-button.ts`
@@ -1758,24 +1771,6 @@ Inputs:
 Properties:
 - `hostClasses: unknown = computed(() => 'eds-input-group')` — Computed host CSS classes.
 
-### EdsInputGroupAddon
-
-File: `packages/eds/eds-input-group/eds-input-group-addon.ts`
-Selector: `div[edsInputGroupAddon], eds-input-group-addon`
-Change detection: `ChangeDetectionStrategy.OnPush`
-
-Inputs:
-- `e2eAttr: string = 'eds-input-group-addon'`
-
-### EdsInputGroupAddonItem
-
-File: `packages/eds/eds-input-group/eds-input-group-addon-item.ts`
-Selector: `div[edsInputGroupAddonItem], eds-input-group-addon-item`
-Change detection: `ChangeDetectionStrategy.OnPush`
-
-Inputs:
-- `e2eAttr: string = 'eds-input-group-addon-item'`
-
 ### EdsInputIcon
 
 File: `packages/eds/eds-input-icon/eds-input-icon.ts`
@@ -1924,6 +1919,8 @@ Description: A form label applied to label , span , or div elements via the edsL
 Inputs:
 - `color: EdsLabelColor = 'neutral'` — Semantic color of the label. 'neutral'
 - `edsRequired: boolean = false` — Marks the label as required (appends a red asterisk). false
+- `hasOptionalLabel: boolean = false` — Appends an (optional) text label to the label. false
+- `hasRequiredLabel: boolean = false` — When edsRequired is set, appends a (required) text label instead of the asterisk. false
 
 ### EdsLanguageSelector
 
@@ -2875,9 +2872,13 @@ Selector: `eds-shell-toolbar-start`
 
 File: `packages/eds/eds-shell/eds-shell-top-message.ts`
 Selector: `eds-shell-top-message`
+Change detection: `ChangeDetectionStrategy.OnPush`
 
 Inputs:
+- `color: EdsShellTopMessageColor = 'info'` — Semantic color variant of the message.
+- `e2eAttr: string = 'eds-shell-top-message'` — Test hook.
 - `isDismissible: boolean = true` — Whether the close button is shown.
+- `variant: EdsShellTopMessageVariant = 'default'` — Surface treatment. default = subtler surface, filled = full color surface.
 
 Outputs:
 - `dismissed: void` — Emits when the message is dismissed.
@@ -5058,7 +5059,7 @@ Properties:
 - `type EdsEmptyStateSize = "s" | "m" | "l"` — Size of the empty state. Local narrowed union — the variant contract.
 - `type EdsFabDirection = "up" | "down" | "left" | "right"` — Direction in which the speed dial items expand (resolved internally).
 - `type EdsFabType = "linear" | "circle" | "semi-circle"` — Layout type for the speed dial items (resolved internally).
-- `type EdsFeedbackMessageColor = "primary" | "neutral" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the feedback message's variant contract. No shared-token import.
+- `type EdsFeedbackMessageColor = "primary" | "neutral" | "info" | "success" | "warning" | "critical" | "disabled"` — Local narrowed color union — the feedback message's variant contract. No shared-token import.
 - `type EdsFlexAlign = "start" | "end" | "center" | "stretch" | "baseline"` — Valid align-items options.
 - `type EdsFlexColSpan = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto"` — Valid column span values (1–12) or 'auto'.
 - `type EdsFlexDirection = "row" | "row-reverse" | "column" | "column-reverse"` — Valid flex direction options.
@@ -5077,6 +5078,7 @@ Properties:
 - `type EdsIconSize = "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` — Local narrowed size union — the icon's size contract.
 - `type EdsIconStateColor = "info" | "success" | "warning" | "critical"` — Local narrowed color union — the icon-state's color contract. Each value maps to a specific status icon.
 - `type EdsIconStateSize = "2xs" | "xs" | "s" | "m" | "l" | "xl"` — Local narrowed size union — the icon-state's size contract.
+- `type EdsInputAddonPosition = "start" | "end"` — Local narrowed union — the addon's position contract.
 - `type EdsInputPromptSendPosition = "toolbar" | "top"` — Placement options for the built-in send button.
 - `type EdsInputPromptSize = "s" | "m" | "l"` — Local narrowed size union — the prompt input's size contract.
 - `type EdsLabelColor = "neutral" | "critical"` — Local narrowed color union — the label's color contract. neutral is the default; critical colors the label for error context.
@@ -5090,6 +5092,8 @@ Properties:
 - `type EdsProgressCircleColorType = "info" | "success" | "warning" | "critical"` — Supported color types for automatic color step transitions.
 - `type EdsResizablePosition = "left" | "right"` — Handle placement side.
 - `type EdsSegmentedControlSize = "s" | "m" | "l"` — Sizes the segmented control styles (SCSS :host(\[size="…"\]) branches).
+- `type EdsShellTopMessageColor = "info" | "success" | "warning" | "critical"` — Local narrowed color union — the top message's color contract.
+- `type EdsShellTopMessageVariant = "default" | "filled"` — Surface treatment: default uses the subtler surface, filled the full color surface.
 - `type EdsSidebarCollapseMode = "hidden" | "icons" | "icons-labels"`
 - `type EdsSizeToken = "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "auto"` — Supported size tokens across EDS components.
 - `type EdsSparklineType = "line" | "area"` — Type of sparkline visualization.
@@ -5239,11 +5243,13 @@ Properties:
   Defined in `packages/eds/eds-icon-state/index.ts`
 - `EDS_ICON_TOGGLE: unknown = [ EdsIconToggle, ] as const` — Convenience array for importing all eds-icon-toggle components.
   Defined in `packages/eds/eds-icon-toggle/index.ts`
+- `EDS_INPUT_ADDON: unknown = [ EdsInputAddon, ] as const` — Convenience array for importing all eds-input-addon components.
+  Defined in `packages/eds/eds-input-addon/index.ts`
 - `EDS_INPUT_BUTTON: unknown = [ EdsInputButton, ] as const` — Convenience array for importing all eds-input-button components.
   Defined in `packages/eds/eds-input-button/index.ts`
 - `EDS_INPUT_CHECKBOX: unknown = [ EdsInputCheckbox, ] as const` — Convenience array for importing eds-input-checkbox.
   Defined in `packages/eds/eds-input-checkbox/index.ts`
-- `EDS_INPUT_GROUP: unknown = [ EdsInputGroup, EdsInputGroupAddon, EdsInputGroupAddonItem, ] as const` — Convenience array for importing all eds-input-group components.
+- `EDS_INPUT_GROUP: unknown = [ EdsInputGroup, ] as const` — Convenience array for importing all eds-input-group components.
   Defined in `packages/eds/eds-input-group/index.ts`
 - `EDS_INPUT_ICON: unknown = [ EdsInputIcon, ] as const` — Convenience array for importing all eds-input-icon components.
   Defined in `packages/eds/eds-input-icon/index.ts`

package/docs/miscellaneous/typealiases.html

@@ -278,6 +278,9 @@
                         <li>
                             <a href="#EdsIconStateSize" title="packages/eds/eds-icon-state/eds-icon-state.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsIconStateSize</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-icon-state.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EdsInputAddonPosition" title="packages/eds/eds-input-addon/eds-input-addon.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsInputAddonPosition</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-input-addon.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EdsInputPromptSendPosition" title="packages/eds/eds-input-prompt/eds-input-prompt.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsInputPromptSendPosition</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-input-prompt.ts)</span></a>
                         </li>
@@ -317,6 +320,12 @@
                         <li>
                             <a href="#EdsSegmentedControlSize" title="packages/eds/eds-segmented-control/eds-segmented-control.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsSegmentedControlSize</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-segmented-control.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EdsShellTopMessageColor" title="packages/eds/eds-shell/eds-shell-top-message.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsShellTopMessageColor</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-shell-top-message.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#EdsShellTopMessageVariant" title="packages/eds/eds-shell/eds-shell-top-message.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsShellTopMessageVariant</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-shell-top-message.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EdsSidebarCollapseMode" title="packages/eds/eds-shell/eds-shell.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsSidebarCollapseMode</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-shell.ts)</span></a>
                         </li>
@@ -1192,7 +1201,7 @@ SCSS branches; <code>warning</code> is accepted for parity but has no styled bra
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;primary&quot; | &quot;neutral&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;primary&quot; | &quot;neutral&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot; | &quot;disabled&quot;</code>
 </code>
                 </td>
             </tr>
@@ -1623,6 +1632,31 @@ Each value maps to a specific status icon.</p>
             </tr>
         </tbody>
     </table>
+</section>
+    <h3>packages/eds/eds-input-addon/eds-input-addon.ts</h3>
+    <section data-compodoc="block-typealias">
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EdsInputAddonPosition"></a>
+                    <span class="name "><b>EdsInputAddonPosition</b><a href="#EdsInputAddonPosition"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Local narrowed union — the addon&#39;s position contract.</p>
+</div>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;start&quot; | &quot;end&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </section>
     <h3>packages/eds/eds-input-prompt/eds-input-prompt.ts</h3>
     <section data-compodoc="block-typealias">
@@ -1937,6 +1971,53 @@ Each value maps to a specific status icon.</p>
             </tr>
         </tbody>
     </table>
+</section>
+    <h3>packages/eds/eds-shell/eds-shell-top-message.ts</h3>
+    <section data-compodoc="block-typealias">
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EdsShellTopMessageColor"></a>
+                    <span class="name "><b>EdsShellTopMessageColor</b><a href="#EdsShellTopMessageColor"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Local narrowed color union — the top message&#39;s color contract.</p>
+</div>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EdsShellTopMessageVariant"></a>
+                    <span class="name "><b>EdsShellTopMessageVariant</b><a href="#EdsShellTopMessageVariant"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Surface treatment: <code>default</code> uses the subtler surface, <code>filled</code> the full color surface.</p>
+</div>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;default&quot; | &quot;filled&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </section>
     <h3>packages/eds/eds-shell/eds-shell.ts</h3>
     <section data-compodoc="block-typealias">

package/docs/miscellaneous/variables.html

@@ -290,6 +290,9 @@
                         <li>
                             <a href="#EDS_ICON_TOGGLE" title="packages/eds/eds-icon-toggle/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_ICON_TOGGLE</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EDS_INPUT_ADDON" title="packages/eds/eds-input-addon/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_INPUT_ADDON</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EDS_INPUT_BUTTON" title="packages/eds/eds-input-button/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_INPUT_BUTTON</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
@@ -2739,6 +2742,43 @@ Format: [x, y, width, height] matching the embedded world SVG coordinate system.
         </tbody>
     </table>
 </section>
+    <h3>packages/eds/eds-input-addon/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_INPUT_ADDON"></a>
+                    <span class="name">
+                        <span ><b>EDS_INPUT_ADDON</b></span>
+                        <a href="#EDS_INPUT_ADDON"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+    EdsInputAddon,
+] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing all eds-input-addon components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
     <h3>packages/eds/eds-input-button/index.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
@@ -2836,8 +2876,6 @@ Format: [x, y, width, height] matching the embedded world SVG coordinate system.
                     <td class="col-md-4">
                         <i>Default value : </i><code>[
     EdsInputGroup,
-    EdsInputGroupAddon,
-    EdsInputGroupAddonItem,
 ] as const</code>
                     </td>
                 </tr>

package/docs/overview.html

@@ -119,7 +119,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">220 Components</p>
+                    <p class="card-text">219 Components</p>
                 </div>
             </div>
         </div>

package/docs/properties.html

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

package/eds-input-addon/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-input-addon.mjs",
+  "typings": "../types/eui-eds-eds-input-addon.d.ts"
+}

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

@@ -114,6 +114,8 @@ class EdsDatepicker {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the datepicker is readonly. */
         this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether to show a clear button that resets the selected date. */
+        this.clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether to show a timepicker alongside the calendar. */
         this.isDatetimepicker = input(false, { ...(ngDevMode ? { debugName: "isDatetimepicker" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the timepicker shows seconds. */
@@ -326,14 +328,14 @@ 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: "<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", "isBlock", "hasLineWrap", "isRounded", "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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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]=\"clearable()\"\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", "isBlock", "hasLineWrap", "isRounded", "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_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER], host: {
                         '[attr.data-e2e]': 'e2eAttr()',
-                    }, 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"] }] } });
+                    }, template: "<eds-input-button class=\"eds-datepicker__group\">\n    <input edsInputText\n        [edsClearable]=\"clearable()\"\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 }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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
 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any