@eui/eds 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,115 +1,151 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, Renderer2, ElementRef, booleanAttribute, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { computed, input, booleanAttribute, output, viewChild, inject, Renderer2, ElementRef, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@eui/eds/shared';
-import { EuiBaseSizeVariantsDirective, EuiBaseColorVariantsDirective } from '@eui/eds/shared';
+import { EdsBaseSizeVariantsDirective, EdsBaseColorVariantsDirective } from '@eui/eds/shared';
+import * as i2 from '@eui/eds/eds-icon';
 import { EDS_ICON } from '@eui/eds/eds-icon';
-import { EDS_BUTTON } from '@eui/eds/eds-button';
-import * as i2 from '@eui/eds/eds-icon-button';
 import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class EdsChip {
     constructor() {
         /**
-         * Sets the `role` attribute for the host element.
+         * @description
+         * Computes and returns the CSS classes for the component based on its current state.
          *
-         * @default 'status'
+         * @returns {string} Space-separated string of CSS class names
          */
-        this.role = 'status';
+        this.hostClasses = computed(() => {
+            return [
+                'eds-chip',
+                this.sizeVariantsBase.getCssClasses('eds-chip'),
+                this.colorVariantsBase.getCssClasses('eds-chip'),
+                this.isRemovable() ? 'eds-chip--removable' : '',
+                this.isActive() ? 'eds-chip--active' : '',
+                this.edsDisabled ? 'eds-chip--disabled' : '',
+            ].join(' ').trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
         /**
          * Sets the `aria-label` attribute for the host element.
          *
          * @default 'Chip content'
          */
-        this.ariaLabel = 'Chip content';
+        this.ariaLabel = input('Chip content', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the `role` attribute for the host element.
+         *
+         * @default 'status'
+         */
+        this.role = 'status';
         /**
          * Sets the `data-e2e` attribute for the host element.
          *
-         * @default 'eui-chip'
+         * @default 'eds-chip'
          */
-        this.e2eAttr = 'eui-chip';
+        this.e2eAttr = input('eds-chip', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the edsInternalId of the chip.
+         *
+         * @default null
+         */
+        this.edsInternalId = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsInternalId" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the label of the tooltip to diaply on hover.
+         */
+        this.tooltipMessage = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipMessage" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the id of the chip.
+         */
+        this.id = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Sets the data of the chip like tooltip configuration.
          */
         // TODO: type should be specific
         // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.data = {
+        this.data = input({
             id: crypto.randomUUID(),
             tooltip: {
-                color: 'euiTooltipPrimary',
+                color: 'edsTooltipPrimary',
                 contentAlignment: null,
                 position: 'above',
             },
-        };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         /**
          * Wether the chip can be removed.
          *
          * @default false
          */
-        this.isChipRemovable = false;
-        this.isActive = false;
+        this.isRemovable = input(false, { ...(ngDevMode ? { debugName: "isRemovable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Event emitted when the chip is removed.
          */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.remove = new EventEmitter();
-        this.sizeVariantsBase = inject(EuiBaseSizeVariantsDirective);
-        this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
+        this.chipRemove = output();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.chipClick = output();
+        /**
+         * Icon declares by user in the chip
+         */
+        this.chipLabel = viewChild.required('chipLabel');
+        this.sizeVariantsBase = inject(EdsBaseSizeVariantsDirective);
+        this.colorVariantsBase = inject(EdsBaseColorVariantsDirective);
         this._renderer = inject(Renderer2);
         this._elementRef = inject(ElementRef);
-        this._euiDisabled = false;
-    }
-    /**
-     * @description
-     * Computes and returns the CSS classes for the component based on its current state.
-     *
-     * @returns {string} Space-separated string of CSS class names
-     */
-    get cssClasses() {
-        return [
-            'eds-chip',
-            this.sizeVariantsBase.getCssClasses('eds-chip'),
-            this.colorVariantsBase.getCssClasses('eds-chip'),
-            this.isChipRemovable ? 'eds-chip--removable' : '',
-            this.isActive ? 'eds-chip--active' : '',
-            this.euiDisabled ? 'eds-chip--disabled' : '',
-        ].join(' ').trim();
-    }
-    get tabindexAttr() {
-        return (this.isChipRemovable || this.euiDisabled) ? '-1' : '0';
+        this._edsDisabled = false;
     }
     /**
      * @description
      * Controls the disabled state of the button
      * When true, adds the disabled attribute and prevents interaction
      */
-    get euiDisabled() {
-        return this._euiDisabled;
+    get edsDisabled() {
+        return this._edsDisabled;
     }
-    set euiDisabled(value) {
-        this._euiDisabled = coerceBooleanProperty(value);
-        if (this._euiDisabled) {
+    set edsDisabled(value) {
+        this._edsDisabled = coerceBooleanProperty(value);
+        if (this._edsDisabled) {
             this._renderer.setAttribute(this._elementRef.nativeElement, 'disabled', 'true');
         }
         else {
             this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');
         }
     }
+    onHostClick(event) {
+        if (this.edsDisabled) {
+            return;
+        }
+        if (this.isRemovable()) {
+            this.onRemove(event);
+        }
+        else {
+            this.onClick(event);
+        }
+    }
     ngOnInit() {
-        if (!this.sizeVariantsBase.euiSizeVariant) {
-            this.sizeVariantsBase.euiSizeM = true;
+        if (!this.sizeVariantsBase.edsSizeVariant) {
+            this.sizeVariantsBase.edsSizeM = true;
         }
-        if (!this.colorVariantsBase.euiColorVariant) {
-            this.colorVariantsBase.euiNeutral = true;
+        if (!this.colorVariantsBase.edsColorVariant) {
+            this.colorVariantsBase.edsNeutral = true;
         }
     }
     ngAfterContentInit() {
-        if (!this.data.id && this.id) {
-            this.data = Object.assign(this.data, { id: this.id });
+        if (!this.data().id && this.id()) {
+            // Note: input signals are read-only, so we work with the value
+            const currentData = this.data();
+            Object.assign(currentData, { id: this.id() });
         }
-        // checks if the parent element is an eui-chip-list to set role listitem or if a parent above in case cdkdroplist interferes
-        if (this._elementRef.nativeElement.parentElement?.classList.contains('eui-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eui-chip-list__chip-container')) {
+        // checks if the parent element is an eds-chip-list to set role listitem or if a parent above in case cdkdroplist interferes
+        if (this._elementRef.nativeElement.parentElement?.classList.contains('eds-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eds-chip-list__chip-container')) {
             this.role = 'listitem';
         }
     }
@@ -120,83 +156,54 @@ class EdsChip {
      */
     onRemove(event) {
         if (event instanceof KeyboardEvent && event.code === 'Backspace') {
-            this.remove.emit({ chip: this.data, event });
+            this.chipRemove.emit({ chip: this.data(), event });
         }
         else {
-            this.remove.emit(this.data);
+            this.chipRemove.emit(this.data());
         }
     }
+    onClick(event) {
+        this.chipClick.emit(this.data());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { ariaLabel: "ariaLabel", e2eAttr: "e2eAttr", euiInternalId: "euiInternalId", tooltipMessage: "tooltipMessage", id: "id", data: "data", isChipRemovable: ["isChipRemovable", "isChipRemovable", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute], euiDisabled: "euiDisabled" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabindexAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true }], hostDirectives: [{ directive: i1.EuiBaseSizeVariantsDirective, inputs: ["euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant"] }, { directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiNeutral", "euiNeutral", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiCritical", "euiCritical", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isChipRemovable) {\n    <button edsIconButton class=\"eds-chip__close\"\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\n        icon=\"x\" euiSizeXS euiRounded>\n    </button>\n}\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-m{--_font-size: var(--eds-f-s-s);--_chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s);--_height: var(--eds-sp-xl)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font-size: var(--eds-f-s-m);--_chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m);--_height: var(--eds-sp-2xl)}.eui-21 :host.eds-chip.eds-chip{--_surface: transparent;--_on-surface: var(--eds-c-foreground-primary);--_border-color: var(--eds-c-border-primary-subtle);--_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-chip.eds-chip--active{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_border-color: transparent;--_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-chip.eds-chip--disabled{--_surface: var(--eds-c-surface-disabled-subtle);--_on-surface: var(--eds-c-foreground-disabled);--_border-color: var(--eds-c-border-disabled);--_surface-hover: var(--eds-c-surface-disabled-subtle);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled-subtle);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-chip{border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_chip-padding);font-size:var(--_font-size);background-color:var(--_surface);color:var(--_on-surface);height:var(--_height);cursor:pointer}.eui-21 :host.eds-chip:not(.eds-chip--disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}.eui-21 :host.eds-chip.eds-chip--disabled{cursor:default}.eui-21 :host.eds-chip:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-chip:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-chip .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-chip .eds-chip__close{padding-left:var(--eds-sp-3xs);--_button-padding: var(--eds-sp-4xs);--_surface-hover: var(--_surface-hover)}\n"], dependencies: [{ kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsInternalId: { classPropertyName: "edsInternalId", publicName: "edsInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isRemovable: { classPropertyName: "isRemovable", publicName: "isRemovable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { chipRemove: "chipRemove", chipClick: "chipClick" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "hostClasses()", "attr.tabindex": "edsDisabled ? \"-1\" : \"0\"", "attr.role": "role", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.EdsBaseSizeVariantsDirective, inputs: ["edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsBaseColorVariantsDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x\" edsSizeXS/>\n}\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-m{--_font: var(--eds-f-paragraph-s);--_chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s);--_height: var(--eds-sp-xl)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font: var(--eds-f-paragraph-s);--_chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m);--_height: var(--eds-sp-2xl)}.eui-21 :host.eds-chip.eds-chip{--_surface: transparent;--_on-surface: var(--eds-c-foreground-primary);--_border-color: var(--eds-c-border-primary-subtle);--_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-chip.eds-chip--active{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_border-color: transparent;--_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-chip.eds-chip--disabled{--_surface: var(--eds-c-surface-disabled-subtle);--_on-surface: var(--eds-c-foreground-disabled);--_border-color: var(--eds-c-border-disabled);--_surface-hover: var(--eds-c-surface-disabled-subtle);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled-subtle);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-chip{border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_chip-padding);font:var(--_font);background-color:var(--_surface);color:var(--_on-surface);height:var(--_height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}.eui-21 :host.eds-chip:not(.eds-chip--disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}.eui-21 :host.eds-chip.eds-chip--disabled{cursor:default}.eui-21 :host.eds-chip:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-chip:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-chip .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-chip .eds-chip__close{margin-left:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsChip, decorators: [{
             type: Component,
             args: [{ selector: 'eds-chip, span[edsChip], li[edsChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_ICON,
                         ...EDS_ICON_BUTTON,
-                        ...EDS_BUTTON,
-                    ], hostDirectives: [
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.tabindex]': 'edsDisabled ? "-1" : "0"',
+                        '[attr.role]': 'role',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-e2e]': 'e2eAttr()',
+                        '(click)': 'onHostClick($event)',
+                    }, hostDirectives: [
                         {
-                            directive: EuiBaseSizeVariantsDirective,
+                            directive: EdsBaseSizeVariantsDirective,
                             inputs: [
-                                'euiSizeM',
-                                'euiSizeL',
-                                'euiSizeVariant',
+                                'edsSizeM',
+                                'edsSizeL',
+                                'edsSizeVariant',
                             ],
                         },
                         {
-                            directive: EuiBaseColorVariantsDirective,
+                            directive: EdsBaseColorVariantsDirective,
                             inputs: [
-                                'euiNeutral',
-                                'euiSuccess',
-                                'euiInfo',
-                                'euiWarning',
-                                'euiCritical',
-                                'euiColorVariant',
+                                'edsNeutral',
+                                'edsSuccess',
+                                'edsInfo',
+                                'edsWarning',
+                                'edsCritical',
+                                'edsColorVariant',
                             ],
                         },
-                    ], template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isChipRemovable) {\n    <button edsIconButton class=\"eds-chip__close\"\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\n        icon=\"x\" euiSizeXS euiRounded>\n    </button>\n}\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-m{--_font-size: var(--eds-f-s-s);--_chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s);--_height: var(--eds-sp-xl)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font-size: var(--eds-f-s-m);--_chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m);--_height: var(--eds-sp-2xl)}.eui-21 :host.eds-chip.eds-chip{--_surface: transparent;--_on-surface: var(--eds-c-foreground-primary);--_border-color: var(--eds-c-border-primary-subtle);--_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-chip.eds-chip--active{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_border-color: transparent;--_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-chip.eds-chip--disabled{--_surface: var(--eds-c-surface-disabled-subtle);--_on-surface: var(--eds-c-foreground-disabled);--_border-color: var(--eds-c-border-disabled);--_surface-hover: var(--eds-c-surface-disabled-subtle);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled-subtle);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-chip{border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_chip-padding);font-size:var(--_font-size);background-color:var(--_surface);color:var(--_on-surface);height:var(--_height);cursor:pointer}.eui-21 :host.eds-chip:not(.eds-chip--disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}.eui-21 :host.eds-chip.eds-chip--disabled{cursor:default}.eui-21 :host.eds-chip:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-chip:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-chip .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-chip .eds-chip__close{padding-left:var(--eds-sp-3xs);--_button-padding: var(--eds-sp-4xs);--_surface-hover: var(--_surface-hover)}\n"] }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], tabindexAttr: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], ariaLabel: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], e2eAttr: [{
-                type: HostBinding,
-                args: ['attr.data-e2e']
-            }, {
-                type: Input
-            }], euiInternalId: [{
-                type: Input
-            }], tooltipMessage: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], isChipRemovable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isActive: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], euiDisabled: [{
+                    ], template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x\" edsSizeXS/>\n}\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-m{--_font: var(--eds-f-paragraph-s);--_chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s);--_height: var(--eds-sp-xl)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font: var(--eds-f-paragraph-s);--_chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m);--_height: var(--eds-sp-2xl)}.eui-21 :host.eds-chip.eds-chip{--_surface: transparent;--_on-surface: var(--eds-c-foreground-primary);--_border-color: var(--eds-c-border-primary-subtle);--_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-chip.eds-chip--active{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_border-color: transparent;--_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-chip.eds-chip--disabled{--_surface: var(--eds-c-surface-disabled-subtle);--_on-surface: var(--eds-c-foreground-disabled);--_border-color: var(--eds-c-border-disabled);--_surface-hover: var(--eds-c-surface-disabled-subtle);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled-subtle);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-chip{border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_chip-padding);font:var(--_font);background-color:var(--_surface);color:var(--_on-surface);height:var(--_height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}.eui-21 :host.eds-chip:not(.eds-chip--disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}.eui-21 :host.eds-chip.eds-chip--disabled{cursor:default}.eui-21 :host.eds-chip:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-chip:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-chip .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-chip .eds-chip__close{margin-left:var(--eds-sp-xs)}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], edsInternalId: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsInternalId", required: false }] }], tooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRemovable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], edsDisabled: [{
                 type: Input
-            }], remove: [{
-                type: Output
-            }], chipLabel: [{
-                type: ViewChild,
-                args: ['chipLabel']
-            }] } });
+            }], chipRemove: [{ type: i0.Output, args: ["chipRemove"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }], chipLabel: [{ type: i0.ViewChild, args: ['chipLabel', { isSignal: true }] }] } });
 
 class EdsChipModel {
     constructor(values = {}) {
@@ -205,11 +212,11 @@ class EdsChipModel {
         this.isRounded = false;
         this.isDisabled = false;
         this.variant = 'primary';
-        this.tooltip = new EuiChipTooltip();
+        this.tooltip = new EdsChipTooltip();
         Object.assign(this, values);
     }
 }
-class EuiChipTooltip {
+class EdsChipTooltip {
     constructor(values = {}) {
         this.position = 'above';
         this.contentAlignment = 'center';
@@ -226,5 +233,5 @@ const EDS_CHIP = [
  * Generated bundle index. Do not edit.
  */
 
-export { EDS_CHIP, EdsChip, EdsChipModel, EuiChipTooltip };
+export { EDS_CHIP, EdsChip, EdsChipModel, EdsChipTooltip };
 //# sourceMappingURL=eui-eds-eds-chip.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    HostBinding,\n    Input,\n    ChangeDetectionStrategy,\n    AfterContentInit,\n    Output,\n    EventEmitter,\n    ViewChild,\n    ElementRef,\n    booleanAttribute,\n    inject,\n    OnInit,\n    Renderer2,\n} from '@angular/core';\n\nimport { EuiBaseColorVariantsDirective, EuiBaseSizeVariantsDirective } from '@eui/eds/shared';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    hostDirectives: [\n        {\n            directive: EuiBaseSizeVariantsDirective,\n            inputs: [\n                'euiSizeM',\n                'euiSizeL',\n                'euiSizeVariant',\n            ],\n        },        \n        {\n            directive: EuiBaseColorVariantsDirective,\n            inputs: [\n                'euiNeutral',\n                'euiSuccess',\n                'euiInfo',\n                'euiWarning',\n                'euiCritical',\n                'euiColorVariant',\n            ],\n        },\n    ],\n})\nexport class EdsChip implements OnInit, AfterContentInit {\n    /**\n     * @description\n     * Computes and returns the CSS classes for the component based on its current state.\n     *\n     * @returns {string} Space-separated string of CSS class names\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            'eds-chip',\n            this.sizeVariantsBase.getCssClasses('eds-chip'),\n            this.colorVariantsBase.getCssClasses('eds-chip'),\n            this.isChipRemovable ? 'eds-chip--removable' : '',\n            this.isActive ? 'eds-chip--active': '',\n            this.euiDisabled ? 'eds-chip--disabled': '',\n        ].join(' ').trim();\n    }\n    @HostBinding('attr.tabindex') get tabindexAttr(): string | null {\n        return (this.isChipRemovable || this.euiDisabled) ? '-1' : '0';\n    }    \n\n    /**\n     * Sets the `role` attribute for the host element.\n     *\n     * @default 'status'\n     */\n    @HostBinding('attr.role') role = 'status';\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     *\n     * @default 'Chip content'\n     */\n    @Input() @HostBinding('attr.aria-label') ariaLabel = 'Chip content';\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eui-chip'\n     */\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-chip';\n\n    /**\n     * Sets the euiInternalId of the chip.\n     *\n     * @default null\n     */\n    @Input() euiInternalId!: string;\n    /**\n     * Sets the label of the tooltip to diaply on hover.\n     */\n    @Input() tooltipMessage!: string;\n    /**\n     * Sets the id of the chip.\n     */\n    @Input() id!: string | number;\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    // TODO: type should be specific\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() data: any = {\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'euiTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    };\n\n    /**\n     * Wether the chip can be removed.\n     *\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) isChipRemovable = false;\n\n    @Input({ transform: booleanAttribute }) isActive = false;\n\n    /**\n     * @description\n     * Controls the disabled state of the button\n     * When true, adds the disabled attribute and prevents interaction\n     */\n    @Input()\n    public get euiDisabled(): boolean {\n        return this._euiDisabled;\n    }\n    public set euiDisabled(value: BooleanInput) {\n        this._euiDisabled = coerceBooleanProperty(value);\n        if (this._euiDisabled) {\n            this._renderer.setAttribute(this._elementRef.nativeElement, 'disabled', 'true');\n        } else {\n            this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');\n        }\n    }\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Output() remove = new EventEmitter<any>();\n\n    /**\n     * Icon declares by user in the chip\n     */\n    @ViewChild('chipLabel') chipLabel!: ElementRef<HTMLInputElement>;\n    \n    protected sizeVariantsBase: EuiBaseSizeVariantsDirective = inject(EuiBaseSizeVariantsDirective);\n    protected colorVariantsBase: EuiBaseColorVariantsDirective = inject(EuiBaseColorVariantsDirective);\n\n    protected _renderer: Renderer2 = inject(Renderer2);\n    private _elementRef = inject(ElementRef);\n    private _euiDisabled = false;\n\n    ngOnInit(): void {\n        if (!this.sizeVariantsBase.euiSizeVariant) {\n            this.sizeVariantsBase.euiSizeM = true;\n        }\n        if (!this.colorVariantsBase.euiColorVariant) {\n            this.colorVariantsBase.euiNeutral = true;\n        }        \n    }\n\n    ngAfterContentInit(): void {\n        if (!this.data.id && this.id) {\n            this.data = Object.assign(this.data, { id: this.id });\n        }\n        // checks if the parent element is an eui-chip-list to set role listitem or if a parent above in case cdkdroplist interferes\n        if (this._elementRef.nativeElement.parentElement?.classList.contains('eui-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eui-chip-list__chip-container')) {\n            this.role = 'listitem'\n        }\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    public onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.remove.emit({ chip: this.data, event });\n        } else {\n            this.remove.emit(this.data);\n        }\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isChipRemovable) {\n    <button edsIconButton class=\"eds-chip__close\"\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\n        icon=\"x\" euiSizeXS euiRounded>\n    </button>\n}\n","export class EdsChipModel {\n    id!: string | number;\n    euiInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EuiChipTooltip = new EuiChipTooltip();\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n\nexport class EuiChipTooltip {\n    tooltipMessage!: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after' = 'above';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' = 'center';\n    delay? = 0;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    Input,\n    ChangeDetectionStrategy,\n    AfterContentInit,\n    viewChild,\n    ElementRef,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n    OnInit,\n    Renderer2,\n} from '@angular/core';\n\nimport { EdsBaseColorVariantsDirective, EdsBaseSizeVariantsDirective } from '@eui/eds/shared';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n    ],\n    host: {\n        '[class]': 'hostClasses()',\n        '[attr.tabindex]': 'edsDisabled ? \"-1\" : \"0\"',\n        '[attr.role]': 'role',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n    },\n    hostDirectives: [\n        {\n            directive: EdsBaseSizeVariantsDirective,\n            inputs: [\n                'edsSizeM',\n                'edsSizeL',\n                'edsSizeVariant',\n            ],\n        },\n        {\n            directive: EdsBaseColorVariantsDirective,\n            inputs: [\n                'edsNeutral',\n                'edsSuccess',\n                'edsInfo',\n                'edsWarning',\n                'edsCritical',\n                'edsColorVariant',\n            ],\n        },\n    ],\n})\nexport class EdsChip implements OnInit, AfterContentInit {\n    /**\n     * @description\n     * Computes and returns the CSS classes for the component based on its current state.\n     *\n     * @returns {string} Space-separated string of CSS class names\n     */\n    hostClasses = computed(() => {\n        return [\n            'eds-chip',\n            this.sizeVariantsBase.getCssClasses('eds-chip'),\n            this.colorVariantsBase.getCssClasses('eds-chip'),\n            this.isRemovable() ? 'eds-chip--removable' : '',\n            this.isActive() ? 'eds-chip--active': '',\n            this.edsDisabled ? 'eds-chip--disabled': '',\n        ].join(' ').trim();\n    });\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     *\n     * @default 'Chip content'\n     */\n    ariaLabel = input('Chip content');\n\n    /**\n     * Sets the `role` attribute for the host element.\n     *\n     * @default 'status'\n     */\n    role = 'status';\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default null\n     */\n    edsInternalId = input<string>('');\n    /**\n     * Sets the label of the tooltip to diaply on hover.\n     */\n    tooltipMessage = input<string>('');\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    // TODO: type should be specific\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    data = input<any>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Wether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * @description\n     * Controls the disabled state of the button\n     * When true, adds the disabled attribute and prevents interaction\n     */\n    @Input()\n    public get edsDisabled(): boolean {\n        return this._edsDisabled;\n    }\n    public set edsDisabled(value: BooleanInput) {\n        this._edsDisabled = coerceBooleanProperty(value);\n        if (this._edsDisabled) {\n            this._renderer.setAttribute(this._elementRef.nativeElement, 'disabled', 'true');\n        } else {\n            this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');\n        }\n    }\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    chipRemove = output<any>();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    chipClick = output<any>();\n\n    /**\n     * Icon declares by user in the chip\n     */\n    readonly chipLabel = viewChild.required<ElementRef<HTMLInputElement>>('chipLabel');\n\n    onHostClick(event?: Event): void {\n        if (this.edsDisabled) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    protected sizeVariantsBase: EdsBaseSizeVariantsDirective = inject(EdsBaseSizeVariantsDirective);\n    protected colorVariantsBase: EdsBaseColorVariantsDirective = inject(EdsBaseColorVariantsDirective);\n\n    protected _renderer: Renderer2 = inject(Renderer2);\n    private _elementRef = inject(ElementRef);\n    private _edsDisabled = false;\n\n    ngOnInit(): void {\n        if (!this.sizeVariantsBase.edsSizeVariant) {\n            this.sizeVariantsBase.edsSizeM = true;\n        }\n        if (!this.colorVariantsBase.edsColorVariant) {\n            this.colorVariantsBase.edsNeutral = true;\n        }\n    }\n\n    ngAfterContentInit(): void {\n        if (!this.data().id && this.id()) {\n            // Note: input signals are read-only, so we work with the value\n            const currentData = this.data();\n            Object.assign(currentData, { id: this.id() });\n        }\n        // checks if the parent element is an eds-chip-list to set role listitem or if a parent above in case cdkdroplist interferes\n        if (this._elementRef.nativeElement.parentElement?.classList.contains('eds-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eds-chip-list__chip-container')) {\n            this.role = 'listitem'\n        }\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ chip: this.data(), event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x\" edsSizeXS/>\n}\n","export class EdsChipModel {\n    id!: string | number;\n    edsInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EdsChipTooltip = new EdsChipTooltip();\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n\nexport class EdsChipTooltip {\n    tooltipMessage!: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after' = 'above';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' = 'center';\n    delay? = 0;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,93 +1,87 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, booleanAttribute, Output, Input, HostBinding, Component } from '@angular/core';
+import { computed, input, booleanAttribute, inject, output, Component } from '@angular/core';
 import * as i2 from '@eui/eds/eds-icon';
 import { EDS_ICON } from '@eui/eds/eds-icon';
 import * as i1 from '@eui/eds/shared';
-import { EuiBaseSizeVariantsDirective, EuiBaseColorVariantsDirective } from '@eui/eds/shared';
+import { EdsBaseSizeVariantsDirective, EdsBaseColorVariantsDirective } from '@eui/eds/shared';
 
 class EdsIconButton {
     constructor() {
+        this.hostClasses = computed(() => {
+            return [
+                'eds-icon-button',
+                this.sizeVariantsBase.getCssClasses('eds-icon-button'),
+                this.colorVariantsBase.getCssClasses('eds-icon-button'),
+                this.edsRounded() ? 'eds-icon-button--rounded' : '',
+                this.edsDisabled() ? 'eds-icon-button--disabled' : '',
+            ]
+                .join(' ')
+                .trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * The name of the icon to display from the eUI icon library.
+         */
+        this.icon = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Accessible label for screen readers describing the button's purpose.
-         * @default 'eUI Icon button'
+         * @default 'EDS Icon button'
          */
-        this.ariaLabel = 'eUI Icon button';
+        this.ariaLabel = input('EDS Icon button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /**
          * Applies rounded corners to the button shape instead of default square corners. Default: false
          */
-        this.euiRounded = false;
-        this.euiDisabled = false;
-        this.sizeVariantsBase = inject(EuiBaseSizeVariantsDirective);
-        this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
+        this.edsRounded = input(false, { ...(ngDevMode ? { debugName: "edsRounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.edsDisabled = input(false, { ...(ngDevMode ? { debugName: "edsDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.sizeVariantsBase = inject(EdsBaseSizeVariantsDirective);
+        this.colorVariantsBase = inject(EdsBaseColorVariantsDirective);
         /**
          * Emitted when the button is clicked. Payload contains the native click Event object.
          */
-        this.buttonClick = new EventEmitter();
-    }
-    get cssClasses() {
-        return [
-            'eds-icon-button',
-            this.sizeVariantsBase.getCssClasses('eds-icon-button'),
-            this.colorVariantsBase.getCssClasses('eds-icon-button'),
-            this.euiRounded ? 'eds-icon-button--rounded' : '',
-            this.euiDisabled ? 'eds-icon-button--disabled' : '',
-        ]
-            .join(' ')
-            .trim();
+        this.buttonClick = output();
     }
     onClick(event) {
         this.buttonClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EdsIconButton, isStandalone: true, selector: "button[edsIconButton]", inputs: { icon: "icon", ariaLabel: "ariaLabel", euiRounded: ["euiRounded", "euiRounded", booleanAttribute], euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "click": "onClick($any($event))" }, properties: { "tabIndex": "euiDisabled ? -1 : 0", "attr.ariaLabel": "ariaLabel", "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.EuiBaseSizeVariantsDirective, inputs: ["euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant"] }, { directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiNeutral", "euiNeutral", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiCritical", "euiCritical", "euiDisabled", "euiDisabled", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "<eds-icon [icon]=\"icon\" [euiColorVariant]=\"colorVariantsBase.euiColorVariant\" [euiSizeVariant]=\"sizeVariantsBase.euiSizeVariant\">\n    <ng-content select=\"eui-badge\"/>\n</eds-icon>\n", styles: [".eui-21 :host.eds-icon-button{--_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));--_padding: var(--_button-padding, var(--eds-sp-3xs));--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon-button.eds-icon-button--neutral{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--info{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--success{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--warning{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--critical{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{--_color: var(--_button-color, var(--eds-c-foreground-disabled));--_surface-hover: transparent;--_on-surface-hover: var(--_color)}.eui-21 :host.eds-icon-button.eds-icon-button--size-2xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-s{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-m{--_padding: var(--_button-padding, var(--eds-sp-xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-l{--_padding: var(--_button-padding, var(--eds-sp-s))}.eui-21 :host.eds-icon-button{display:inline-flex;border:none;cursor:pointer;background-color:inherit;padding:var(--_padding);position:relative}.eui-21 :host.eds-icon-button:hover,.eui-21 :host.eds-icon-button:active{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-icon-button.eds-icon-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{cursor:default}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled).eds-icon-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"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsIconButton, isStandalone: true, selector: "button[edsIconButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, edsRounded: { classPropertyName: "edsRounded", publicName: "edsRounded", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "click": "onClick($any($event))" }, properties: { "class": "hostClasses()", "tabIndex": "edsDisabled() ? -1 : 0", "attr.ariaLabel": "ariaLabel()" } }, hostDirectives: [{ directive: i1.EdsBaseSizeVariantsDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsBaseColorVariantsDirective, inputs: ["edsBrand", "edsBrand", "edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsDisabled", "edsDisabled", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<eds-icon [icon]=\"icon()\" [edsColorVariant]=\"colorVariantsBase.edsColorVariant\" [edsSizeVariant]=\"sizeVariantsBase.edsSizeVariant\">\n    <ng-content select=\"eds-badge\"/>\n</eds-icon>\n", styles: [".eui-21 :host.eds-icon-button{--_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));--_padding: var(--_button-padding, var(--eds-sp-3xs));--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon-button.eds-icon-button--brand{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-brand--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-brand--hover));--_color: var(--_button-color, var(--eds-c-on-surface-brand))}.eui-21 :host.eds-icon-button.eds-icon-button--neutral{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--info{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--success{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--warning{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--critical{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{--_color: var(--_button-color, var(--eds-c-foreground-disabled));--_surface-hover: transparent;--_on-surface-hover: var(--_color)}.eui-21 :host.eds-icon-button.eds-icon-button--size-2xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-s{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-m{--_padding: var(--_button-padding, var(--eds-sp-xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-l{--_padding: var(--_button-padding, var(--eds-sp-s))}.eui-21 :host.eds-icon-button{display:inline-flex;border:none;cursor:pointer;background-color:inherit;padding:var(--_padding);position:relative;color:var(--_color)}.eui-21 :host.eds-icon-button:hover,.eui-21 :host.eds-icon-button:active{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-icon-button.eds-icon-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{cursor:default}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled).eds-icon-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"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconButton, decorators: [{
             type: Component,
             args: [{ selector: 'button[edsIconButton]', imports: [...EDS_ICON], host: {
-                        '[tabIndex]': 'euiDisabled ? -1 : 0',
-                        '[attr.ariaLabel]': 'ariaLabel',
+                        '[class]': 'hostClasses()',
+                        '[tabIndex]': 'edsDisabled() ? -1 : 0',
+                        '[attr.ariaLabel]': 'ariaLabel()',
                         '(click)': 'onClick($any($event))',
                     }, hostDirectives: [
                         {
-                            directive: EuiBaseSizeVariantsDirective,
+                            directive: EdsBaseSizeVariantsDirective,
                             inputs: [
-                                'euiSize2XS',
-                                'euiSizeXS',
-                                'euiSizeS',
-                                'euiSizeM',
-                                'euiSizeL',
-                                'euiSizeVariant',
+                                'edsSize2XS',
+                                'edsSizeXS',
+                                'edsSizeS',
+                                'edsSizeM',
+                                'edsSizeL',
+                                'edsSizeVariant',
                             ],
                         },
                         {
-                            directive: EuiBaseColorVariantsDirective,
+                            directive: EdsBaseColorVariantsDirective,
                             inputs: [
-                                'euiNeutral',
-                                'euiSuccess',
-                                'euiInfo',
-                                'euiWarning',
-                                'euiCritical',
-                                'euiDisabled',
-                                'euiColorVariant',
+                                'edsBrand',
+                                'edsNeutral',
+                                'edsSuccess',
+                                'edsInfo',
+                                'edsWarning',
+                                'edsCritical',
+                                'edsDisabled',
+                                'edsColorVariant',
                             ],
                         },
-                    ], template: "<eds-icon [icon]=\"icon\" [euiColorVariant]=\"colorVariantsBase.euiColorVariant\" [euiSizeVariant]=\"sizeVariantsBase.euiSizeVariant\">\n    <ng-content select=\"eui-badge\"/>\n</eds-icon>\n", styles: [".eui-21 :host.eds-icon-button{--_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));--_padding: var(--_button-padding, var(--eds-sp-3xs));--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon-button.eds-icon-button--neutral{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--info{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--success{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--warning{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--critical{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{--_color: var(--_button-color, var(--eds-c-foreground-disabled));--_surface-hover: transparent;--_on-surface-hover: var(--_color)}.eui-21 :host.eds-icon-button.eds-icon-button--size-2xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-s{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-m{--_padding: var(--_button-padding, var(--eds-sp-xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-l{--_padding: var(--_button-padding, var(--eds-sp-s))}.eui-21 :host.eds-icon-button{display:inline-flex;border:none;cursor:pointer;background-color:inherit;padding:var(--_padding);position:relative}.eui-21 :host.eds-icon-button:hover,.eui-21 :host.eds-icon-button:active{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-icon-button.eds-icon-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{cursor:default}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled).eds-icon-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: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], icon: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], euiRounded: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], euiDisabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], buttonClick: [{
-                type: Output
-            }] } });
+                    ], template: "<eds-icon [icon]=\"icon()\" [edsColorVariant]=\"colorVariantsBase.edsColorVariant\" [edsSizeVariant]=\"sizeVariantsBase.edsSizeVariant\">\n    <ng-content select=\"eds-badge\"/>\n</eds-icon>\n", styles: [".eui-21 :host.eds-icon-button{--_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));--_padding: var(--_button-padding, var(--eds-sp-3xs));--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon-button.eds-icon-button--brand{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-brand--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-brand--hover));--_color: var(--_button-color, var(--eds-c-on-surface-brand))}.eui-21 :host.eds-icon-button.eds-icon-button--neutral{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--info{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--success{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--warning{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--critical{--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover))}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{--_color: var(--_button-color, var(--eds-c-foreground-disabled));--_surface-hover: transparent;--_on-surface-hover: var(--_color)}.eui-21 :host.eds-icon-button.eds-icon-button--size-2xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-xs{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-s{--_padding: var(--_button-padding, var(--eds-sp-2xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-m{--_padding: var(--_button-padding, var(--eds-sp-xs))}.eui-21 :host.eds-icon-button.eds-icon-button--size-l{--_padding: var(--_button-padding, var(--eds-sp-s))}.eui-21 :host.eds-icon-button{display:inline-flex;border:none;cursor:pointer;background-color:inherit;padding:var(--_padding);position:relative;color:var(--_color)}.eui-21 :host.eds-icon-button:hover,.eui-21 :host.eds-icon-button:active{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-icon-button.eds-icon-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-button.eds-icon-button--disabled{cursor:default}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-icon-button:not(.eds-icon-button:disabled).eds-icon-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: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], edsRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsRounded", required: false }] }], edsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsDisabled", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 const EDS_ICON_BUTTON = [
     EdsIconButton,