@eui/eds 22.0.0-alpha.22 → 22.0.0-alpha.24

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

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-alert.mjs","sources":["../../eds-alert/eds-alert.ts","../../eds-alert/eds-alert.html","../../eds-alert/eds-alert-title.ts","../../eds-alert/index.ts","../../eds-alert/eui-eds-eds-alert.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    booleanAttribute,\n    model,\n} from '@angular/core';\n\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EDS_ICON_STATE } from '@eui/eds/utilities/eds-icon-state';\n\n/**\n * Local narrowed color union — the alert's color contract.\n */\nexport type EdsAlertColor = 'info' | 'success' | 'warning' | 'critical';\n\n@Component({\n    templateUrl: './eds-alert.html',\n    selector: 'div[edsAlert], eds-alert',\n    styleUrl: './eds-alert.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON_BUTTON,\n        ...EDS_ICON_STATE,\n    ],\n    host: {\n        role: 'alert',\n        '[attr.color]': 'color()',\n        '[attr.hidden]': '!isVisible() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsAlert {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * Applied as data-e2e attribute on the host element.\n     * @default 'eds-alert'\n     */\n    e2eAttr = input('eds-alert');\n\n    /**\n     * Semantic color of the alert.\n     * @default 'info'\n     */\n    color = input<EdsAlertColor>('info');\n\n    /**\n     * Enables a close button allowing users to dismiss the alert.\n     * When true, displays a close icon button that hides the alert and emits closeAlert event.\n     * @default false\n     */\n    isCloseable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the visibility state of the alert.\n     * Two-way bindable model that can be programmatically controlled or updated by user dismissal.\n     * @default true\n     */\n    isVisible = model(true);\n\n    /**\n     * Emitted when the alert is closed via the close button.\n     * Payload: boolean - always emits false to indicate alert is hidden\n     * Triggered when user clicks the close button (when isCloseable is true).\n     */\n    closeAlert = output<boolean>();\n\n    /**\n     * ARIA label for the close button, allowing localization.\n     * @default 'Close alert'\n     */\n    closeAriaLabel = input('Close alert');\n\n    /**\n     * Hide the alert and emits the `closeAlert` event when the close button is clicked.\n     */\n    onCloseClick(): void {\n        this.isVisible.set(false);\n        this.closeAlert.emit(false);\n    }\n}\n","<eds-icon-state class=\"eds-alert__icon\" [color]=\"color()\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\"\n        [ariaLabel]=\"closeAriaLabel()\"\n        icon=\"x:core\" rounded size=\"s\" color=\"neutral\"\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\n@Component({\n    template: '<ng-content/>',\n    selector: 'eds-alert-title',\n    styleUrl: './eds-alert-title.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsAlertTitle {\n}\n","import { EdsAlert } from './eds-alert';\nimport { EdsAlertTitle } from './eds-alert-title';\n\nexport * from './eds-alert';\nexport * from './eds-alert-title';\n\nexport const EDS_ALERT = [\n    EdsAlert,\n    EdsAlertTitle,\n] as const;","/**\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-alert.mjs","sources":["../../eds-alert/eds-alert.ts","../../eds-alert/eds-alert.html","../../eds-alert/eds-alert-title.ts","../../eds-alert/index.ts","../../eds-alert/eui-eds-eds-alert.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    booleanAttribute,\n    model,\n} from '@angular/core';\n\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the alert's color contract.\n */\nexport type EdsAlertColor = 'info' | 'success' | 'warning' | 'critical';\n\n@Component({\n    templateUrl: './eds-alert.html',\n    selector: 'div[edsAlert], eds-alert',\n    styleUrl: './eds-alert.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON_BUTTON,\n        ...EDS_ICON_STATE,\n    ],\n    host: {\n        role: 'alert',\n        '[attr.color]': 'color()',\n        '[attr.hidden]': '!isVisible() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsAlert {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * Applied as data-e2e attribute on the host element.\n     * @default 'eds-alert'\n     */\n    e2eAttr = input('eds-alert');\n\n    /**\n     * Semantic color of the alert.\n     * @default 'info'\n     */\n    color = input<EdsAlertColor>('info');\n\n    /**\n     * Enables a close button allowing users to dismiss the alert.\n     * When true, displays a close icon button that hides the alert and emits closeAlert event.\n     * @default false\n     */\n    isCloseable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the visibility state of the alert.\n     * Two-way bindable model that can be programmatically controlled or updated by user dismissal.\n     * @default true\n     */\n    isVisible = model(true);\n\n    /**\n     * Emitted when the alert is closed via the close button.\n     * Payload: boolean - always emits false to indicate alert is hidden\n     * Triggered when user clicks the close button (when isCloseable is true).\n     */\n    closeAlert = output<boolean>();\n\n    /**\n     * ARIA label for the close button, allowing localization.\n     * @default 'Close alert'\n     */\n    closeAriaLabel = input('Close alert');\n\n    /**\n     * Hide the alert and emits the `closeAlert` event when the close button is clicked.\n     */\n    onCloseClick(): void {\n        this.isVisible.set(false);\n        this.closeAlert.emit(false);\n    }\n}\n","<eds-icon-state class=\"eds-alert__icon\" [color]=\"color()\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\"\n        [ariaLabel]=\"closeAriaLabel()\"\n        icon=\"x:core\" rounded size=\"s\" color=\"neutral\"\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n} from '@angular/core';\n\n@Component({\n    template: '<ng-content/>',\n    selector: 'eds-alert-title',\n    styleUrl: './eds-alert-title.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsAlertTitle {\n}\n","import { EdsAlert } from './eds-alert';\nimport { EdsAlertTitle } from './eds-alert-title';\n\nexport * from './eds-alert';\nexport * from './eds-alert-title';\n\nexport const EDS_ALERT = [\n    EdsAlert,\n    EdsAlertTitle,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@eui/eds/shared';
-import { EdsSizeDirective, EdsColorDirective } from '@eui/eds/shared';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * EDS Button — a directive-style button component applied on native `<button>` elements.
  *
- * Supports multiple visual types (primary, secondary, tertiary), color variants
- * (primary, neutral, highlight, critical), and sizes (s, m, l) via host directives.
+ * Supports multiple visual types (primary, secondary, tertiary), semantic color variants
+ * (primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected
+ * as host attributes.
  *
  * Usage:
  * ```html
- * <button edsButton edsSizeM edsPrimary>Label</button>
- * <button edsButton edsButtonSecondary edsNeutral edsSizeS>Cancel</button>
- * <button edsButton edsButtonTertiary edsCritical [edsDisabled]="isLoading">Delete</button>
+ * <button edsButton size="m" color="primary">Label</button>
+ * <button edsButton type="secondary" color="neutral" size="s">Cancel</button>
+ * <button edsButton type="tertiary" color="critical" [disabled]="isLoading">Delete</button>
  * ```
  */
 class EdsButton {
@@ -27,43 +26,59 @@ class EdsButton {
         /** @description ID attribute for the button element */
         this.id = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Visual type of the button. `primary` = solid surface; `secondary` = bordered;
+         * `tertiary` = text/ghost. Named `variant` (not `type`) on the Angular side to avoid
+         * clashing with the native `<button type>` attribute; reflected as `[attr.type-variant]`
+         * (the React projection exposes this axis as its `type` prop).
+         * @default 'primary'
+         */
+        this.variant = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Semantic color of the button.
+         * @default 'primary'
+         */
+        this.color = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * Size of the button.
+         * @default 'm'
+         */
+        this.size = input('m', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * @description Controls the disabled state of the button.
          * When true, adds the disabled attribute and prevents interaction.
          * @default false
          */
-        this.edsDisabled = input(false, { ...(ngDevMode ? { debugName: "edsDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description When true, makes the button full-width (block-level).
          * @default false
          */
-        this.edsBlockButton = input(false, { ...(ngDevMode ? { debugName: "edsBlockButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description When true, styles the button for icon-only content.
          * @default false
          */
-        this.edsIconButton = input(false, { ...(ngDevMode ? { debugName: "edsIconButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.iconButton = input(false, { ...(ngDevMode ? { debugName: "iconButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar).
+         * @description When true, styles the button when used in an avatar trigger
+         * (e.g. dropdown trigger, see actionable avatar).
          * @default false
          */
-        this.edsAvatarButton = input(false, { ...(ngDevMode ? { debugName: "edsAvatarButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.avatarButton = input(false, { ...(ngDevMode ? { debugName: "avatarButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description When true, allows text content to wrap.
          * @default false
          */
-        this.edsLineWrap = input(false, { ...(ngDevMode ? { debugName: "edsLineWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Boolean shorthand: primary type (default). */
-        this.edsButtonPrimary = input(false, { ...(ngDevMode ? { debugName: "edsButtonPrimary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Boolean shorthand: secondary type. */
-        this.edsButtonSecondary = input(false, { ...(ngDevMode ? { debugName: "edsButtonSecondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Boolean shorthand: tertiary type. */
-        this.edsButtonTertiary = input(false, { ...(ngDevMode ? { debugName: "edsButtonTertiary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Boolean shorthand: fully rounded border-radius. */
-        this.edsButtonRounded = input(false, { ...(ngDevMode ? { debugName: "edsButtonRounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** String-based type variant for dynamic binding. */
-        this.edsTypeVariant = input('primary', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "edsTypeVariant" }] : /* istanbul ignore next */ []));
+        this.lineWrap = input(false, { ...(ngDevMode ? { debugName: "lineWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description When true, applies a fully rounded border-radius.
+         * @default false
+         */
+        this.rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description
          * When true, marks the button as initially checked/selected within an eds-button-group.
@@ -71,74 +86,27 @@ class EdsButton {
          * @default false
          */
         this.isChecked = input(false, { ...(ngDevMode ? { debugName: "isChecked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.sizeDirective = inject(EdsSizeDirective);
-        this.colorDirective = inject(EdsColorDirective);
-        /** Resolved button type: first boolean that is true wins, otherwise edsTypeVariant. */
-        this.resolvedType = computed(() => {
-            if (this.edsButtonTertiary())
-                return 'tertiary';
-            if (this.edsButtonSecondary())
-                return 'secondary';
-            if (this.edsButtonPrimary())
-                return 'primary';
-            return this.edsTypeVariant();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
-        /**
-         * @description
-         * Computes and returns the CSS classes for the button based on its current state.
-         */
-        this.hostClasses = computed(() => {
-            const sizeClass = this.sizeDirective.getCssClass('eds-button');
-            const colorClass = this.colorDirective.getCssClass('eds-button');
-            return [
-                'eds-button',
-                sizeClass || 'eds-button--size-m',
-                colorClass || 'eds-button--primary',
-                `eds-button--type-${this.resolvedType()}`,
-                this.edsButtonRounded() ? 'eds-button--rounded' : '',
-                this.edsBlockButton() ? 'eds-button--block' : '',
-                this.edsIconButton() ? 'eds-button--icon-only' : '',
-                this.edsAvatarButton() ? 'eds-button--avatar' : '',
-                this.edsLineWrap() ? 'eds-button--line-wrap' : '',
-            ]
-                .join(' ')
-                .trim();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null }, edsBlockButton: { classPropertyName: "edsBlockButton", publicName: "edsBlockButton", isSignal: true, isRequired: false, transformFunction: null }, edsIconButton: { classPropertyName: "edsIconButton", publicName: "edsIconButton", isSignal: true, isRequired: false, transformFunction: null }, edsAvatarButton: { classPropertyName: "edsAvatarButton", publicName: "edsAvatarButton", isSignal: true, isRequired: false, transformFunction: null }, edsLineWrap: { classPropertyName: "edsLineWrap", publicName: "edsLineWrap", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPrimary: { classPropertyName: "edsButtonPrimary", publicName: "edsButtonPrimary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonSecondary: { classPropertyName: "edsButtonSecondary", publicName: "edsButtonSecondary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonTertiary: { classPropertyName: "edsButtonTertiary", publicName: "edsButtonTertiary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonRounded: { classPropertyName: "edsButtonRounded", publicName: "edsButtonRounded", isSignal: true, isRequired: false, transformFunction: null }, edsTypeVariant: { classPropertyName: "edsTypeVariant", publicName: "edsTypeVariant", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.disabled": "edsDisabled() || null" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsHighlight", "edsHighlight", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);--_eds-icon-on-surface: var(--_on-surface)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover);--_eds-icon-on-surface: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);--_eds-icon-on-surface: var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, avatarButton: { classPropertyName: "avatarButton", publicName: "avatarButton", isSignal: true, isRequired: false, transformFunction: null }, lineWrap: { classPropertyName: "lineWrap", publicName: "lineWrap", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type-variant": "variant()", "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.block": "block() || null", "attr.icon-only": "iconButton() || null", "attr.avatar": "avatarButton() || null", "attr.line-wrap": "lineWrap() || null", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.disabled": "disabled() || null" }, classAttribute: "eds-button" }, ngImport: i0, template: "<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button[type-variant=primary]:disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary]:disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=critical]{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=tertiary]:disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);--_eds-icon-on-surface: var(--_on-surface)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover);--_eds-icon-on-surface: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);--_eds-icon-on-surface: var(--_on-surface-active)}.eui-21 :host.eds-button[rounded]{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button[rounded]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, decorators: [{
             type: Component,
             args: [{ selector: 'button[edsButton]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': 'hostClasses()',
+                        class: 'eds-button',
+                        '[attr.type-variant]': 'variant()',
+                        '[attr.color]': 'color()',
+                        '[attr.size]': 'size()',
+                        '[attr.rounded]': 'rounded() || null',
+                        '[attr.block]': 'block() || null',
+                        '[attr.icon-only]': 'iconButton() || null',
+                        '[attr.avatar]': 'avatarButton() || null',
+                        '[attr.line-wrap]': 'lineWrap() || null',
                         '[attr.data-e2e]': 'e2eAttr()',
                         '[attr.id]': 'id()',
-                        '[attr.disabled]': 'edsDisabled() || null',
-                    }, hostDirectives: [
-                        {
-                            directive: EdsSizeDirective,
-                            inputs: [
-                                'edsSizeS',
-                                'edsSizeM',
-                                'edsSizeL',
-                                'edsSizeVariant',
-                            ],
-                        },
-                        {
-                            directive: EdsColorDirective,
-                            inputs: [
-                                'edsPrimary',
-                                'edsNeutral',
-                                'edsHighlight',
-                                'edsCritical',
-                                'edsColorVariant',
-                            ],
-                        },
-                    ], template: "<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);--_eds-icon-on-surface: var(--_on-surface)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover);--_eds-icon-on-surface: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);--_eds-icon-on-surface: var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"] }]
-        }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], edsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsDisabled", required: false }] }], edsBlockButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsBlockButton", required: false }] }], edsIconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsIconButton", required: false }] }], edsAvatarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsAvatarButton", required: false }] }], edsLineWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsLineWrap", required: false }] }], edsButtonPrimary: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsButtonPrimary", required: false }] }], edsButtonSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsButtonSecondary", required: false }] }], edsButtonTertiary: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsButtonTertiary", required: false }] }], edsButtonRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsButtonRounded", required: false }] }], edsTypeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsTypeVariant", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }] } });
+                        '[attr.disabled]': 'disabled() || null',
+                    }, template: "<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button[type-variant=primary]:disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary]:disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=critical]{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=tertiary]:disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);--_eds-icon-on-surface: var(--_on-surface)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover);--_eds-icon-on-surface: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);--_eds-icon-on-surface: var(--_on-surface-active)}.eui-21 :host.eds-button[rounded]{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button[rounded]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"] }]
+        }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconButton", required: false }] }], avatarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarButton", required: false }] }], lineWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWrap", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }] } });
 
 /** Convenience array for importing all eds-button components. */
 const EDS_BUTTON = [

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

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-button.mjs","sources":["../../eds-button/eds-button.ts","../../eds-button/eds-button.html","../../eds-button/index.ts","../../eds-button/eui-eds-eds-button.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    computed,\n    effect,\n    ElementRef,\n} from '@angular/core';\n\nimport { EdsColorDirective, EdsSizeDirective } from '@eui/eds/shared';\n\nexport type EdsButtonType = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * EDS Button — a directive-style button component applied on native `<button>` elements.\n *\n * Supports multiple visual types (primary, secondary, tertiary), color variants\n * (primary, neutral, highlight, critical), and sizes (s, m, l) via host directives.\n *\n * Usage:\n * ```html\n * <button edsButton edsSizeM edsPrimary>Label</button>\n * <button edsButton edsButtonSecondary edsNeutral edsSizeS>Cancel</button>\n * <button edsButton edsButtonTertiary edsCritical [edsDisabled]=\"isLoading\">Delete</button>\n * ```\n */\n@Component({\n    templateUrl: './eds-button.html',\n    // eslint-disable-next-line\n    selector: 'button[edsButton]',\n    styleUrl: './eds-button.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[class]': 'hostClasses()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.id]': 'id()',\n        '[attr.disabled]': 'edsDisabled() || null',\n    },\n    hostDirectives: [\n        {\n            directive: EdsSizeDirective,\n            inputs: [\n                'edsSizeS',\n                'edsSizeM',\n                'edsSizeL',\n                'edsSizeVariant',\n            ],\n        },\n        {\n            directive: EdsColorDirective,\n            inputs: [\n                'edsPrimary',\n                'edsNeutral',\n                'edsHighlight',\n                'edsCritical',\n                'edsColorVariant',\n            ],\n        },\n    ],\n})\nexport class EdsButton {\n    /**\n     * @description Data attribute for e2e testing\n     * @default eds-button\n     */\n    e2eAttr = input('eds-button');\n\n    /** @description ID attribute for the button element */\n    id = input<string | undefined>(undefined);\n\n    /**\n     * @description Controls the disabled state of the button.\n     * When true, adds the disabled attribute and prevents interaction.\n     * @default false\n     */\n    edsDisabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, makes the button full-width (block-level).\n     * @default false\n     */\n    edsBlockButton = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, styles the button for icon-only content.\n     * @default false\n     */\n    edsIconButton = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar).\n     * @default false\n     */\n    edsAvatarButton = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, allows text content to wrap.\n     * @default false\n     */\n    edsLineWrap = input(false, { transform: booleanAttribute });\n\n    /** Boolean shorthand: primary type (default). */\n    edsButtonPrimary = input(false, { transform: booleanAttribute });\n\n    /** Boolean shorthand: secondary type. */\n    edsButtonSecondary = input(false, { transform: booleanAttribute });\n\n    /** Boolean shorthand: tertiary type. */\n    edsButtonTertiary = input(false, { transform: booleanAttribute });\n\n    /** Boolean shorthand: fully rounded border-radius. */\n    edsButtonRounded = input(false, { transform: booleanAttribute });\n\n    /** String-based type variant for dynamic binding. */\n    edsTypeVariant = input<EdsButtonType>('primary');\n\n    /**\n     * @description\n     * When true, marks the button as initially checked/selected within an eds-button-group.\n     * The button-group reads this value during initialization to determine the initial selection state.\n     * @default false\n     */\n    isChecked = input(false, { transform: booleanAttribute });\n\n    protected sizeDirective = inject(EdsSizeDirective);\n    protected colorDirective = inject(EdsColorDirective);\n\n    /** Resolved button type: first boolean that is true wins, otherwise edsTypeVariant. */\n    protected resolvedType = computed((): EdsButtonType => {\n        if (this.edsButtonTertiary()) return 'tertiary';\n        if (this.edsButtonSecondary()) return 'secondary';\n        if (this.edsButtonPrimary()) return 'primary';\n        return this.edsTypeVariant();\n    });\n\n    /**\n     * @description\n     * Computes and returns the CSS classes for the button based on its current state.\n     */\n    hostClasses = computed(() => {\n        const sizeClass = this.sizeDirective.getCssClass('eds-button');\n        const colorClass = this.colorDirective.getCssClass('eds-button');\n\n        return [\n            'eds-button',\n            sizeClass || 'eds-button--size-m',\n            colorClass || 'eds-button--primary',\n            `eds-button--type-${this.resolvedType()}`,\n            this.edsButtonRounded() ? 'eds-button--rounded' : '',\n            this.edsBlockButton() ? 'eds-button--block' : '',\n            this.edsIconButton() ? 'eds-button--icon-only' : '',\n            this.edsAvatarButton() ? 'eds-button--avatar' : '',\n            this.edsLineWrap() ? 'eds-button--line-wrap' : '',\n        ]\n            .join(' ')\n            .trim();\n    });\n}\n","<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n","import { EdsButton } from './eds-button';\n\nexport { EdsButton };\n\n/** Convenience array for importing all eds-button components. */\nexport const EDS_BUTTON = [\n    EdsButton,\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-button.mjs","sources":["../../eds-button/eds-button.ts","../../eds-button/eds-button.html","../../eds-button/index.ts","../../eds-button/eui-eds-eds-button.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    input,\n} from '@angular/core';\n\n/**\n * Local narrowed unions — the button's variant contract. No shared-token import.\n */\nexport type EdsButtonType = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Colors the button accepts. `primary` / `neutral` / `highlight` / `critical` have dedicated\n * SCSS branches; `warning` is accepted for parity but has no styled branch.\n */\nexport type EdsButtonColor = 'primary' | 'neutral' | 'highlight' | 'critical' | 'warning';\n\n/** Sizes the button styles (SCSS `:host([size=\"…\"])` branches). */\nexport type EdsButtonSize = 's' | 'm' | 'l';\n\n/**\n * EDS Button — a directive-style button component applied on native `<button>` elements.\n *\n * Supports multiple visual types (primary, secondary, tertiary), semantic color variants\n * (primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected\n * as host attributes.\n *\n * Usage:\n * ```html\n * <button edsButton size=\"m\" color=\"primary\">Label</button>\n * <button edsButton type=\"secondary\" color=\"neutral\" size=\"s\">Cancel</button>\n * <button edsButton type=\"tertiary\" color=\"critical\" [disabled]=\"isLoading\">Delete</button>\n * ```\n */\n@Component({\n    templateUrl: './eds-button.html',\n    // eslint-disable-next-line\n    selector: 'button[edsButton]',\n    styleUrl: './eds-button.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-button',\n        '[attr.type-variant]': 'variant()',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.rounded]': 'rounded() || null',\n        '[attr.block]': 'block() || null',\n        '[attr.icon-only]': 'iconButton() || null',\n        '[attr.avatar]': 'avatarButton() || null',\n        '[attr.line-wrap]': 'lineWrap() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.id]': 'id()',\n        '[attr.disabled]': 'disabled() || null',\n    },\n})\nexport class EdsButton {\n    /**\n     * @description Data attribute for e2e testing\n     * @default eds-button\n     */\n    e2eAttr = input('eds-button');\n\n    /** @description ID attribute for the button element */\n    id = input<string | undefined>(undefined);\n\n    /**\n     * Visual type of the button. `primary` = solid surface; `secondary` = bordered;\n     * `tertiary` = text/ghost. Named `variant` (not `type`) on the Angular side to avoid\n     * clashing with the native `<button type>` attribute; reflected as `[attr.type-variant]`\n     * (the React projection exposes this axis as its `type` prop).\n     * @default 'primary'\n     */\n    variant = input<EdsButtonType>('primary');\n\n    /**\n     * Semantic color of the button.\n     * @default 'primary'\n     */\n    color = input<EdsButtonColor>('primary');\n\n    /**\n     * Size of the button.\n     * @default 'm'\n     */\n    size = input<EdsButtonSize>('m');\n\n    /**\n     * @description Controls the disabled state of the button.\n     * When true, adds the disabled attribute and prevents interaction.\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, makes the button full-width (block-level).\n     * @default false\n     */\n    block = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, styles the button for icon-only content.\n     * @default false\n     */\n    iconButton = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, styles the button when used in an avatar trigger\n     * (e.g. dropdown trigger, see actionable avatar).\n     * @default false\n     */\n    avatarButton = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, allows text content to wrap.\n     * @default false\n     */\n    lineWrap = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description When true, applies a fully rounded border-radius.\n     * @default false\n     */\n    rounded = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description\n     * When true, marks the button as initially checked/selected within an eds-button-group.\n     * The button-group reads this value during initialization to determine the initial selection state.\n     * @default false\n     */\n    isChecked = input(false, { transform: booleanAttribute });\n}\n","<span class=\"eds-button__container\">\n    <ng-content></ng-content>\n</span>\n","import { EdsButton } from './eds-button';\n\nexport { EdsButton };\n\n/** Convenience array for importing all eds-button components. */\nexport const EDS_BUTTON = [\n    EdsButton,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAqBA;;;;;;;;;;;;;AAaG;MAsBU,SAAS,CAAA;AArBtB,IAAA,WAAA,GAAA;AAsBI;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,YAAY;oFAAC;;QAG7B,IAAA,CAAA,EAAE,GAAG,KAAK,CAAqB,SAAS;+EAAC;AAEzC;;;;;;AAMG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAgB,SAAS;oFAAC;AAEzC;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAiB,SAAS;kFAAC;AAExC;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,GAAG;iFAAC;AAEhC;;;;AAIG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAErD;;;AAGG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1D;;;;AAIG;QACH,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,KAAK,oFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE5D;;;AAGG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvD;;;;;AAKG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC5D,IAAA;8GA5EY,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,o+DCxDtB,kFAGA,EAAA,MAAA,EAAA,CAAA,+hPAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDqDa,SAAS,EAAA,UAAA,EAAA,CAAA;kBArBrB,SAAS;AAGI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,eAAA,EAEZ,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,gBAAgB,EAAE,mBAAmB;AACrC,wBAAA,cAAc,EAAE,iBAAiB;AACjC,wBAAA,kBAAkB,EAAE,sBAAsB;AAC1C,wBAAA,eAAe,EAAE,wBAAwB;AACzC,wBAAA,kBAAkB,EAAE,oBAAoB;AACxC,wBAAA,iBAAiB,EAAE,WAAW;AAC9B,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,iBAAiB,EAAE,oBAAoB;AAC1C,qBAAA,EAAA,QAAA,EAAA,kFAAA,EAAA,MAAA,EAAA,CAAA,+hPAAA,CAAA,EAAA;;;AElDL;AACO,MAAM,UAAU,GAAG;IACtB,SAAS;;;ACNb;;AAEG;;;;"}

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

@@ -306,7 +306,7 @@ class EdsCalendarHeader {
         return { start, end };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsCalendarHeader, isStandalone: true, selector: "eds-calendar-header", inputs: { containWeekends: { classPropertyName: "containWeekends", publicName: "containWeekends", isSignal: true, isRequired: false, transformFunction: null }, dateFormatOptions: { classPropertyName: "dateFormatOptions", publicName: "dateFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showNavigationButtons: { classPropertyName: "showNavigationButtons", publicName: "showNavigationButtons", isSignal: true, isRequired: false, transformFunction: null }, startingDay: { classPropertyName: "startingDay", publicName: "startingDay", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentDate: "currentDateChange", navigationClicked: "navigationClicked", todayClicked: "todayClicked" }, host: { classAttribute: "eds-calendar-header" }, ngImport: i0, template: "@if (customTemplate(); as template) {\n    <ng-container [ngTemplateOutletContext]=\"headerContext()\" [ngTemplateOutlet]=\"template\" />\n} @else {\n    <div class=\"eds-calendar-header__nav\">\n        <div class=\"eds-calendar-header__left\">\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-left:core\" ariaLabel=\"Go to previous\" (click)=\"navigatePrevious()\"></button>\n            }\n            <div class=\"eds-calendar-header__label\" [style.min-width]=\"maxMonthWidth()\">\n                <span class=\"eds-calendar-header__date\">{{ formattedDate() }}</span>\n                @if (subLabel()) {\n                    <span class=\"eds-calendar-header__sublabel\">{{ subLabel() }}</span>\n                }\n            </div>\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-right:core\" ariaLabel=\"Go to next\" (click)=\"navigateNext()\"></button>\n            }\n        </div>\n        @if (showTodayButton()) {\n            <button edsButton edsNeutral [disabled]=\"isCurrentDateToday()\" (click)=\"goToToday()\">Today</button>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-calendar-header__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__left{display:flex;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__label{display:flex;flex-direction:column;align-items:flex-start}.eui-21 :host .eds-calendar-header__date{font:var(--eds-f-label-l-semibold)}.eui-21 :host .eds-calendar-header__sublabel{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "edsDisabled", "edsBlockButton", "edsIconButton", "edsAvatarButton", "edsLineWrap", "edsButtonPrimary", "edsButtonSecondary", "edsButtonTertiary", "edsButtonRounded", "edsTypeVariant", "isChecked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsCalendarHeader, isStandalone: true, selector: "eds-calendar-header", inputs: { containWeekends: { classPropertyName: "containWeekends", publicName: "containWeekends", isSignal: true, isRequired: false, transformFunction: null }, dateFormatOptions: { classPropertyName: "dateFormatOptions", publicName: "dateFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showNavigationButtons: { classPropertyName: "showNavigationButtons", publicName: "showNavigationButtons", isSignal: true, isRequired: false, transformFunction: null }, startingDay: { classPropertyName: "startingDay", publicName: "startingDay", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentDate: "currentDateChange", navigationClicked: "navigationClicked", todayClicked: "todayClicked" }, host: { classAttribute: "eds-calendar-header" }, ngImport: i0, template: "@if (customTemplate(); as template) {\n    <ng-container [ngTemplateOutletContext]=\"headerContext()\" [ngTemplateOutlet]=\"template\" />\n} @else {\n    <div class=\"eds-calendar-header__nav\">\n        <div class=\"eds-calendar-header__left\">\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-left:core\" ariaLabel=\"Go to previous\" (click)=\"navigatePrevious()\"></button>\n            }\n            <div class=\"eds-calendar-header__label\" [style.min-width]=\"maxMonthWidth()\">\n                <span class=\"eds-calendar-header__date\">{{ formattedDate() }}</span>\n                @if (subLabel()) {\n                    <span class=\"eds-calendar-header__sublabel\">{{ subLabel() }}</span>\n                }\n            </div>\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-right:core\" ariaLabel=\"Go to next\" (click)=\"navigateNext()\"></button>\n            }\n        </div>\n        @if (showTodayButton()) {\n            <button edsButton color=\"neutral\" [disabled]=\"isCurrentDateToday()\" (click)=\"goToToday()\">Today</button>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-calendar-header__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__left{display:flex;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__label{display:flex;flex-direction:column;align-items:flex-start}.eui-21 :host .eds-calendar-header__date{font:var(--eds-f-label-l-semibold)}.eui-21 :host .eds-calendar-header__sublabel{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "block", "iconButton", "avatarButton", "lineWrap", "rounded", "isChecked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCalendarHeader, decorators: [{
             type: Component,
@@ -316,7 +316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ...EDS_BUTTON,
                     ], host: {
                         class: 'eds-calendar-header',
-                    }, template: "@if (customTemplate(); as template) {\n    <ng-container [ngTemplateOutletContext]=\"headerContext()\" [ngTemplateOutlet]=\"template\" />\n} @else {\n    <div class=\"eds-calendar-header__nav\">\n        <div class=\"eds-calendar-header__left\">\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-left:core\" ariaLabel=\"Go to previous\" (click)=\"navigatePrevious()\"></button>\n            }\n            <div class=\"eds-calendar-header__label\" [style.min-width]=\"maxMonthWidth()\">\n                <span class=\"eds-calendar-header__date\">{{ formattedDate() }}</span>\n                @if (subLabel()) {\n                    <span class=\"eds-calendar-header__sublabel\">{{ subLabel() }}</span>\n                }\n            </div>\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-right:core\" ariaLabel=\"Go to next\" (click)=\"navigateNext()\"></button>\n            }\n        </div>\n        @if (showTodayButton()) {\n            <button edsButton edsNeutral [disabled]=\"isCurrentDateToday()\" (click)=\"goToToday()\">Today</button>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-calendar-header__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__left{display:flex;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__label{display:flex;flex-direction:column;align-items:flex-start}.eui-21 :host .eds-calendar-header__date{font:var(--eds-f-label-l-semibold)}.eui-21 :host .eds-calendar-header__sublabel{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler)}\n"] }]
+                    }, template: "@if (customTemplate(); as template) {\n    <ng-container [ngTemplateOutletContext]=\"headerContext()\" [ngTemplateOutlet]=\"template\" />\n} @else {\n    <div class=\"eds-calendar-header__nav\">\n        <div class=\"eds-calendar-header__left\">\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-left:core\" ariaLabel=\"Go to previous\" (click)=\"navigatePrevious()\"></button>\n            }\n            <div class=\"eds-calendar-header__label\" [style.min-width]=\"maxMonthWidth()\">\n                <span class=\"eds-calendar-header__date\">{{ formattedDate() }}</span>\n                @if (subLabel()) {\n                    <span class=\"eds-calendar-header__sublabel\">{{ subLabel() }}</span>\n                }\n            </div>\n            @if (showNavigationButtons()) {\n                <button edsIconButton color=\"neutral\" size=\"s\" icon=\"caret-right:core\" ariaLabel=\"Go to next\" (click)=\"navigateNext()\"></button>\n            }\n        </div>\n        @if (showTodayButton()) {\n            <button edsButton color=\"neutral\" [disabled]=\"isCurrentDateToday()\" (click)=\"goToToday()\">Today</button>\n        }\n    </div>\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-calendar-header__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__left{display:flex;align-items:center;gap:var(--eds-sp-s)}.eui-21 :host .eds-calendar-header__label{display:flex;flex-direction:column;align-items:flex-start}.eui-21 :host .eds-calendar-header__date{font:var(--eds-f-label-l-semibold)}.eui-21 :host .eds-calendar-header__sublabel{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler)}\n"] }]
         }], propDecorators: { containWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "containWeekends", required: false }] }], dateFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatOptions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }, { type: i0.Output, args: ["currentDateChange"] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showNavigationButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigationButtons", required: false }] }], startingDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingDay", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], navigationClicked: [{ type: i0.Output, args: ["navigationClicked"] }], todayClicked: [{ type: i0.Output, args: ["todayClicked"] }] } });
 
 class EdsCalendarDayCellDef {
@@ -413,7 +413,7 @@ class EdsCalendarDay {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCalendarDay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsCalendarDay, isStandalone: true, selector: "eds-calendar-day", inputs: { edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayOfTheMonth: { classPropertyName: "dayOfTheMonth", publicName: "dayOfTheMonth", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfEventsToShow: { classPropertyName: "maxNumberOfEventsToShow", publicName: "maxNumberOfEventsToShow", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventTemplate: { classPropertyName: "eventTemplate", publicName: "eventTemplate", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addNewItemEvent: "addNewItemEvent" }, host: { listeners: { "mouseenter": "onMouseOver()", "mouseleave": "onMouseOut()" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "eventTemplateDef", first: true, predicate: EdsCalendarEventCellDef, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (dayOfTheMonth()) {\n    <div class=\"eds-calendar-day__header\">\n        <button edsButton\n                [edsButtonRounded]=\"isSelected()\"\n                [edsPrimary]=\"isSelected()\"\n                [edsNeutral]=\"!isSelected()\">\n            {{ dayOfTheMonth() }}\n        </button>\n        @if (renderNewEvent()) {\n            <button edsIconButton color=\"info\" size=\"s\" icon=\"plus:core\" ariaLabel=\"Add new event\" (click)=\"addNewItemClicked()\"></button>\n        }\n    </div>\n}\n\n<div class=\"eds-calendar-day__events\">\n    @for (event of events(); track event.id; let idx = $index, l = $last) {\n        @if (idx < maxNumberOfEventsToShow()) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n\n        @if (l) {\n            @if (events().length > maxNumberOfEventsToShow()) {\n                <span class=\"eds-calendar-day__show-more\" (click)=\"showMoreEvents($event)\">\n                    +{{ events().length - maxNumberOfEventsToShow() }} more\n                </span>\n            }\n        }\n    }\n</div>\n\n<eds-popover #popover [title]=\"'Events'\">\n    <div class=\"eds-calendar-day__popover-events\">\n        @for (event of events(); track event.id) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n    </div>\n</eds-popover>\n", styles: [".eui-21 :host{height:8rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--eds-sp-2xs);overflow:hidden;width:100%;padding:var(--eds-sp-xs)}.eui-21 :host.eds-calendar-day--disabled{opacity:.5;pointer-events:none}.eui-21 :host .eds-calendar-day__header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.eui-21 :host .eds-calendar-day__show-more{cursor:pointer;font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-calendar-day__show-more:hover{text-decoration:underline}.eui-21 :host .eds-calendar-day__events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-2xs);margin-top:auto}.eui-21 :host .eds-calendar-day__popover-events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "edsDisabled", "edsBlockButton", "edsIconButton", "edsAvatarButton", "edsLineWrap", "edsButtonPrimary", "edsButtonSecondary", "edsButtonTertiary", "edsButtonRounded", "edsTypeVariant", "isChecked"] }, { kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EdsTag, selector: "eds-tag, span[edsTag]", inputs: ["color", "size", "e2eAttr", "aria-label"] }, { kind: "component", type: i4.EdsPopover, selector: "eds-popover", inputs: ["title", "position", "width", "hasBackDrop", "hasCloseButton", "isDismissable", "hasNoContentPadding"], outputs: ["outsideClick", "popoverOpen", "popoverClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsCalendarDay, isStandalone: true, selector: "eds-calendar-day", inputs: { edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayOfTheMonth: { classPropertyName: "dayOfTheMonth", publicName: "dayOfTheMonth", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfEventsToShow: { classPropertyName: "maxNumberOfEventsToShow", publicName: "maxNumberOfEventsToShow", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventTemplate: { classPropertyName: "eventTemplate", publicName: "eventTemplate", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addNewItemEvent: "addNewItemEvent" }, host: { listeners: { "mouseenter": "onMouseOver()", "mouseleave": "onMouseOut()" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "eventTemplateDef", first: true, predicate: EdsCalendarEventCellDef, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (dayOfTheMonth()) {\n    <div class=\"eds-calendar-day__header\">\n        <button edsButton [rounded]=\"isSelected()\" [color]=\"isSelected() ? 'primary' : 'neutral'\">\n            {{ dayOfTheMonth() }}\n        </button>\n        @if (renderNewEvent()) {\n            <button edsIconButton color=\"info\" size=\"s\" icon=\"plus:core\" ariaLabel=\"Add new event\" (click)=\"addNewItemClicked()\"></button>\n        }\n    </div>\n}\n\n<div class=\"eds-calendar-day__events\">\n    @for (event of events(); track event.id; let idx = $index, l = $last) {\n        @if (idx < maxNumberOfEventsToShow()) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n\n        @if (l) {\n            @if (events().length > maxNumberOfEventsToShow()) {\n                <span class=\"eds-calendar-day__show-more\" (click)=\"showMoreEvents($event)\">\n                    +{{ events().length - maxNumberOfEventsToShow() }} more\n                </span>\n            }\n        }\n    }\n</div>\n\n<eds-popover #popover [title]=\"'Events'\">\n    <div class=\"eds-calendar-day__popover-events\">\n        @for (event of events(); track event.id) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n    </div>\n</eds-popover>\n", styles: [".eui-21 :host{height:8rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--eds-sp-2xs);overflow:hidden;width:100%;padding:var(--eds-sp-xs)}.eui-21 :host.eds-calendar-day--disabled{opacity:.5;pointer-events:none}.eui-21 :host .eds-calendar-day__header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.eui-21 :host .eds-calendar-day__show-more{cursor:pointer;font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-calendar-day__show-more:hover{text-decoration:underline}.eui-21 :host .eds-calendar-day__events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-2xs);margin-top:auto}.eui-21 :host .eds-calendar-day__popover-events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "block", "iconButton", "avatarButton", "lineWrap", "rounded", "isChecked"] }, { kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EdsTag, selector: "eds-tag, span[edsTag]", inputs: ["color", "size", "e2eAttr", "aria-label"] }, { kind: "component", type: i4.EdsPopover, selector: "eds-popover", inputs: ["title", "position", "width", "hasBackDrop", "hasCloseButton", "isDismissable", "hasNoContentPadding"], outputs: ["outsideClick", "popoverOpen", "popoverClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCalendarDay, decorators: [{
             type: Component,
@@ -428,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'hostClasses()',
                         '(mouseenter)': 'onMouseOver()',
                         '(mouseleave)': 'onMouseOut()',
-                    }, template: "@if (dayOfTheMonth()) {\n    <div class=\"eds-calendar-day__header\">\n        <button edsButton\n                [edsButtonRounded]=\"isSelected()\"\n                [edsPrimary]=\"isSelected()\"\n                [edsNeutral]=\"!isSelected()\">\n            {{ dayOfTheMonth() }}\n        </button>\n        @if (renderNewEvent()) {\n            <button edsIconButton color=\"info\" size=\"s\" icon=\"plus:core\" ariaLabel=\"Add new event\" (click)=\"addNewItemClicked()\"></button>\n        }\n    </div>\n}\n\n<div class=\"eds-calendar-day__events\">\n    @for (event of events(); track event.id; let idx = $index, l = $last) {\n        @if (idx < maxNumberOfEventsToShow()) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n\n        @if (l) {\n            @if (events().length > maxNumberOfEventsToShow()) {\n                <span class=\"eds-calendar-day__show-more\" (click)=\"showMoreEvents($event)\">\n                    +{{ events().length - maxNumberOfEventsToShow() }} more\n                </span>\n            }\n        }\n    }\n</div>\n\n<eds-popover #popover [title]=\"'Events'\">\n    <div class=\"eds-calendar-day__popover-events\">\n        @for (event of events(); track event.id) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n    </div>\n</eds-popover>\n", styles: [".eui-21 :host{height:8rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--eds-sp-2xs);overflow:hidden;width:100%;padding:var(--eds-sp-xs)}.eui-21 :host.eds-calendar-day--disabled{opacity:.5;pointer-events:none}.eui-21 :host .eds-calendar-day__header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.eui-21 :host .eds-calendar-day__show-more{cursor:pointer;font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-calendar-day__show-more:hover{text-decoration:underline}.eui-21 :host .eds-calendar-day__events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-2xs);margin-top:auto}.eui-21 :host .eds-calendar-day__popover-events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-xs)}\n"] }]
+                    }, template: "@if (dayOfTheMonth()) {\n    <div class=\"eds-calendar-day__header\">\n        <button edsButton [rounded]=\"isSelected()\" [color]=\"isSelected() ? 'primary' : 'neutral'\">\n            {{ dayOfTheMonth() }}\n        </button>\n        @if (renderNewEvent()) {\n            <button edsIconButton color=\"info\" size=\"s\" icon=\"plus:core\" ariaLabel=\"Add new event\" (click)=\"addNewItemClicked()\"></button>\n        }\n    </div>\n}\n\n<div class=\"eds-calendar-day__events\">\n    @for (event of events(); track event.id; let idx = $index, l = $last) {\n        @if (idx < maxNumberOfEventsToShow()) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n\n        @if (l) {\n            @if (events().length > maxNumberOfEventsToShow()) {\n                <span class=\"eds-calendar-day__show-more\" (click)=\"showMoreEvents($event)\">\n                    +{{ events().length - maxNumberOfEventsToShow() }} more\n                </span>\n            }\n        }\n    }\n</div>\n\n<eds-popover #popover [title]=\"'Events'\">\n    <div class=\"eds-calendar-day__popover-events\">\n        @for (event of events(); track event.id) {\n            @if (resolvedEventTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"resolvedEventTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: event, label: event.label(), type: event.type?.() }\">\n                </ng-container>\n            } @else if (event.type?.()) {\n                <eds-tag [color]=\"tagColor(event.type?.())\">\n                    {{ event.label() }}\n                </eds-tag>\n            } @else {\n                <eds-tag>{{ event.label() }}</eds-tag>\n            }\n        }\n    </div>\n</eds-popover>\n", styles: [".eui-21 :host{height:8rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--eds-sp-2xs);overflow:hidden;width:100%;padding:var(--eds-sp-xs)}.eui-21 :host.eds-calendar-day--disabled{opacity:.5;pointer-events:none}.eui-21 :host .eds-calendar-day__header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.eui-21 :host .eds-calendar-day__show-more{cursor:pointer;font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-calendar-day__show-more:hover{text-decoration:underline}.eui-21 :host .eds-calendar-day__events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-2xs);margin-top:auto}.eui-21 :host .eds-calendar-day__popover-events{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eds-sp-xs)}\n"] }]
         }], propDecorators: { edsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsDisabled", required: false }] }], dayOfTheMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayOfTheMonth", required: false }] }], maxNumberOfEventsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxNumberOfEventsToShow", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], eventTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventTemplate", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], addNewItemEvent: [{ type: i0.Output, args: ["addNewItemEvent"] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], eventTemplateDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EdsCalendarEventCellDef), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 class EdsCalendarMonthly {