@eui/eds 23.0.0-alpha.11 → 23.0.0-alpha.13

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

@@ -108,10 +108,10 @@ class EdsFieldset {
             this.expandChange.emit(this.id());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsFieldset, isStandalone: true, selector: "eds-fieldset", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, isFirst: { classPropertyName: "isFirst", publicName: "isFirst", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<div class=\"eds-fieldset__header\">\n    <div class=\"eds-fieldset__header-start\">\n        @if (isExpandable()) {\n            <button edsIconButton\n                edsSizeS\n                edsNeutral\n                [icon]=\"expandIcon()\"\n                [ariaLabel]=\"expandAriaLabel()\"\n                (buttonClick)=\"onToggle()\">\n            </button>\n        }\n        <ng-content select=\"eds-fieldset-icon\"/>\n        <ng-content select=\"eds-fieldset-title\"/>\n    </div>\n    <div class=\"eds-fieldset__header-end\">\n        <ng-content select=\"eds-fieldset-action\"/>\n    </div>\n</div>\n<ng-content select=\"eds-fieldset-description\"/>\n\n@if (isContentVisible()) {\n    <div class=\"eds-fieldset__content\">\n        <ng-content/>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;width:100%;flex-direction:column}.eui-21 :host .eds-fieldset__header{display:flex;align-items:center;width:100%;padding:var(--eds-sp-s) 0;border-bottom:1px solid var(--eds-c-border-divider)}.eui-21 :host .eds-fieldset__header-start{display:flex;align-items:center;gap:var(--eds-sp-xs)}.eui-21 :host .eds-fieldset__header-end{display:flex;align-items:center;margin-left:auto}.eui-21 :host .eds-fieldset__content{display:block;padding:var(--eds-sp-m) 0}.eui-21 :host.eds-fieldset--first{margin-top:var(--eds-sp-s)}.eui-21 :host.eds-fieldset--no-border .eds-fieldset__header{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFieldset, isStandalone: true, selector: "eds-fieldset", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, isFirst: { classPropertyName: "isFirst", publicName: "isFirst", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<div class=\"eds-fieldset__header\">\n    <div class=\"eds-fieldset__header-start\">\n        @if (isExpandable()) {\n            <button edsIconButton\n                edsSizeS\n                edsNeutral\n                [icon]=\"expandIcon()\"\n                [ariaLabel]=\"expandAriaLabel()\"\n                (buttonClick)=\"onToggle()\">\n            </button>\n        }\n        <ng-content select=\"eds-fieldset-icon\"/>\n        <ng-content select=\"eds-fieldset-title\"/>\n    </div>\n    <div class=\"eds-fieldset__header-end\">\n        <ng-content select=\"eds-fieldset-action\"/>\n    </div>\n</div>\n<ng-content select=\"eds-fieldset-description\"/>\n\n@if (isContentVisible()) {\n    <div class=\"eds-fieldset__content\">\n        <ng-content/>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;width:100%;flex-direction:column}.eui-21 :host .eds-fieldset__header{display:flex;align-items:center;width:100%;padding:var(--eds-sp-s) 0;border-bottom:1px solid var(--eds-c-border-divider)}.eui-21 :host .eds-fieldset__header-start{display:flex;align-items:center;gap:var(--eds-sp-xs)}.eui-21 :host .eds-fieldset__header-end{display:flex;align-items:center;margin-left:auto}.eui-21 :host .eds-fieldset__content{display:block;padding:var(--eds-sp-m) 0}.eui-21 :host.eds-fieldset--first{margin-top:var(--eds-sp-s)}.eui-21 :host.eds-fieldset--no-border .eds-fieldset__header{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldset, decorators: [{
             type: Component,
             args: [{ selector: 'eds-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON_BUTTON], host: {
                         '[class]': 'hostClasses()',
@@ -128,10 +128,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class EdsFieldsetTitle {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsFieldsetTitle, isStandalone: true, selector: "eds-fieldset-title", host: { classAttribute: "eds-fieldset-title" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;font:var(--eds-f-label-l-semi-bold);color:var(--eds-c-foreground-default);gap:var(--eds-sp-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsFieldsetTitle, isStandalone: true, selector: "eds-fieldset-title", host: { classAttribute: "eds-fieldset-title" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;font:var(--eds-f-label-l-semi-bold);color:var(--eds-c-foreground-default);gap:var(--eds-sp-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetTitle, decorators: [{
             type: Component,
             args: [{ selector: 'eds-fieldset-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-fieldset-title',
@@ -154,10 +154,10 @@ class EdsFieldsetIcon {
         this.icon = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsFieldsetIcon, isStandalone: true, selector: "eds-fieldset-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eds-fieldset-icon" }, ngImport: i0, template: '<eds-icon [icon]="icon()" edsSizeS/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;align-items:center;justify-content:center;padding:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:1px solid var(--eds-c-border-divider);border-radius:var(--eds-br-xs)}\n"], dependencies: [{ kind: "component", type: i1$1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsFieldsetIcon, isStandalone: true, selector: "eds-fieldset-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eds-fieldset-icon" }, ngImport: i0, template: '<eds-icon [icon]="icon()" edsSizeS/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;align-items:center;justify-content:center;padding:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:1px solid var(--eds-c-border-divider);border-radius:var(--eds-br-xs)}\n"], dependencies: [{ kind: "component", type: i1$1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetIcon, decorators: [{
             type: Component,
             args: [{ selector: 'eds-fieldset-icon', template: '<eds-icon [icon]="icon()" edsSizeS/>', imports: [...EDS_ICON], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-fieldset-icon',
@@ -175,10 +175,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class EdsFieldsetAction {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetAction, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsFieldsetAction, isStandalone: true, selector: "eds-fieldset-action", host: { classAttribute: "eds-fieldset-action" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetAction, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsFieldsetAction, isStandalone: true, selector: "eds-fieldset-action", host: { classAttribute: "eds-fieldset-action" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetAction, decorators: [{
             type: Component,
             args: [{ selector: 'eds-fieldset-action', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-fieldset-action',
@@ -194,10 +194,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class EdsFieldsetDescription {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsFieldsetDescription, isStandalone: true, selector: "eds-fieldset-description", host: { classAttribute: "eds-fieldset-description" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding-top:var(--eds-sp-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsFieldsetDescription, isStandalone: true, selector: "eds-fieldset-description", host: { classAttribute: "eds-fieldset-description" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding-top:var(--eds-sp-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFieldsetDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFieldsetDescription, decorators: [{
             type: Component,
             args: [{ selector: 'eds-fieldset-description', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-fieldset-description',

package/fesm2022/eui-eds-eds-file-upload.mjs

@@ -40,10 +40,10 @@ class EdsFilesizePipe {
         }
         return bytes.toFixed(+precision) + ' ' + this.units[unit];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFilesizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: EdsFilesizePipe, isStandalone: true, name: "edsFilesize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFilesizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: EdsFilesizePipe, isStandalone: true, name: "edsFilesize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFilesizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFilesizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'edsFilesize',
@@ -171,10 +171,10 @@ class EdsFileUploadPreview {
         const f = fileExtension.toLowerCase();
         return ICON_MAP[f] ?? 'file';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUploadPreview, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsFileUploadPreview, isStandalone: true, selector: "eds-file-upload-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, uploadedFileTemplate: { classPropertyName: "uploadedFileTemplate", publicName: "uploadedFileTemplate", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsImage: { classPropertyName: "hasPreviewAsImage", publicName: "hasPreviewAsImage", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsIcon: { classPropertyName: "hasPreviewAsIcon", publicName: "hasPreviewAsIcon", isSignal: true, isRequired: false, transformFunction: null }, isItemsClickable: { classPropertyName: "isItemsClickable", publicName: "isItemsClickable", isSignal: true, isRequired: false, transformFunction: null }, isFileObject: { classPropertyName: "isFileObject", publicName: "isFileObject", isSignal: true, isRequired: false, transformFunction: null }, isFilenameDisplayed: { classPropertyName: "isFilenameDisplayed", publicName: "isFilenameDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isFilesizeDisplayed: { classPropertyName: "isFilesizeDisplayed", publicName: "isFilesizeDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isFiletypeDisplayed: { classPropertyName: "isFiletypeDisplayed", publicName: "isFiletypeDisplayed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeFromList: "removeFromList", itemClick: "itemClick" }, host: { properties: { "attr.data-e2e": "\"eds-file-upload-preview\"" }, classAttribute: "eds-file-upload-preview" }, ngImport: i0, template: "@if (uploadedFileTemplate()) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file().id, name: file().name, url: file().url || previewData?.display, size: file().size, type: file().type }, index: index(), isFileObject: isFileObject() } }\" />\n} @else {\n    <div class=\"eds-file-upload-preview__content\">\n        <div class=\"eds-file-upload-preview__left\">\n            @if (hasPreview() && hasPreviewAsImage() && !hasPreviewAsIcon()) {\n                <div class=\"eds-file-upload-preview__image\">\n                    @if (url && previewData?.image) {\n                        <img [src]=\"previewData.display\" alt=\"File preview image\" />\n                    }\n                    @if (previewData && !previewData.image) {\n                        <eds-icon [icon]=\"previewData.display\" />\n                    }\n                    @if (isLoading) {\n                        <div class=\"eds-file-upload-preview__loading\">\n                            <eds-icon icon=\"spinner:core\" />\n                        </div>\n                    }\n                </div>\n            }\n            @if (hasPreview() && hasPreviewAsIcon()) {\n                <div class=\"eds-file-upload-preview__icon\">\n                    <eds-icon [icon]=\"icon\" />\n                </div>\n            }\n            @if (isFilenameDisplayed()) {\n                <div class=\"eds-file-upload-preview__filename\">\n                    @if (!isItemsClickable()) {\n                        {{ fileName() }}\n                    }\n                    @if (isItemsClickable()) {\n                        <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eds-file-upload-preview__link\">{{ fileName() }}</a>\n                    }\n                </div>\n            }\n        </div>\n        <div class=\"eds-file-upload-preview__right\">\n            @if (isFilesizeDisplayed()) {\n                <span class=\"eds-file-upload-preview__size\">{{ fileSize() | edsFilesize }}</span>\n            }\n            @if (isFiletypeDisplayed() && fileType()) {\n                <span class=\"eds-file-upload-preview__type\">{{ fileType() }}</span>\n            }\n            <button edsIconButton\n                edsCritical\n                icon=\"trash:core\"\n                [ariaLabel]=\"'Remove ' + fileName() + ' from the list'\"\n                (buttonClick)=\"onRemoveFromList()\">\n            </button>\n        </div>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;margin-bottom:var(--eds-sp-2xs)}.eui-21 :host .eds-file-upload-preview__content{display:flex;align-items:center;justify-content:space-between;padding:var(--eds-sp-2xs) 0}.eui-21 :host .eds-file-upload-preview__left{display:flex;align-items:center;gap:var(--eds-sp-xs);overflow:hidden}.eui-21 :host .eds-file-upload-preview__image{flex-shrink:0}.eui-21 :host .eds-file-upload-preview__image img{width:80px;height:auto;border-radius:var(--eds-br-xs);object-fit:cover}.eui-21 :host .eds-file-upload-preview__loading{display:flex;align-items:center;justify-content:center;width:80px}.eui-21 :host .eds-file-upload-preview__icon{flex-shrink:0;color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload-preview__filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-file-upload-preview__link{color:var(--eds-c-foreground-link);text-decoration:underline;cursor:pointer}.eui-21 :host .eds-file-upload-preview__link:hover{color:var(--eds-c-foreground-link-hover)}.eui-21 :host .eds-file-upload-preview__right{display:flex;align-items:center;gap:var(--eds-sp-xs);margin-left:auto;padding-left:var(--eds-sp-xs);flex-shrink:0}.eui-21 :host .eds-file-upload-preview__size,.eui-21 :host .eds-file-upload-preview__type{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: EdsFilesizePipe, name: "edsFilesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUploadPreview, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFileUploadPreview, isStandalone: true, selector: "eds-file-upload-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, uploadedFileTemplate: { classPropertyName: "uploadedFileTemplate", publicName: "uploadedFileTemplate", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsImage: { classPropertyName: "hasPreviewAsImage", publicName: "hasPreviewAsImage", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsIcon: { classPropertyName: "hasPreviewAsIcon", publicName: "hasPreviewAsIcon", isSignal: true, isRequired: false, transformFunction: null }, isItemsClickable: { classPropertyName: "isItemsClickable", publicName: "isItemsClickable", isSignal: true, isRequired: false, transformFunction: null }, isFileObject: { classPropertyName: "isFileObject", publicName: "isFileObject", isSignal: true, isRequired: false, transformFunction: null }, isFilenameDisplayed: { classPropertyName: "isFilenameDisplayed", publicName: "isFilenameDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isFilesizeDisplayed: { classPropertyName: "isFilesizeDisplayed", publicName: "isFilesizeDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isFiletypeDisplayed: { classPropertyName: "isFiletypeDisplayed", publicName: "isFiletypeDisplayed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeFromList: "removeFromList", itemClick: "itemClick" }, host: { properties: { "attr.data-e2e": "\"eds-file-upload-preview\"" }, classAttribute: "eds-file-upload-preview" }, ngImport: i0, template: "@if (uploadedFileTemplate()) {\n    <ng-template\n        [ngTemplateOutlet]=\"uploadedFileTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file().id, name: file().name, url: file().url || previewData?.display, size: file().size, type: file().type }, index: index(), isFileObject: isFileObject() } }\" />\n} @else {\n    <div class=\"eds-file-upload-preview__content\">\n        <div class=\"eds-file-upload-preview__left\">\n            @if (hasPreview() && hasPreviewAsImage() && !hasPreviewAsIcon()) {\n                <div class=\"eds-file-upload-preview__image\">\n                    @if (url && previewData?.image) {\n                        <img [src]=\"previewData.display\" alt=\"File preview image\" />\n                    }\n                    @if (previewData && !previewData.image) {\n                        <eds-icon [icon]=\"previewData.display\" />\n                    }\n                    @if (isLoading) {\n                        <div class=\"eds-file-upload-preview__loading\">\n                            <eds-icon icon=\"spinner:core\" />\n                        </div>\n                    }\n                </div>\n            }\n            @if (hasPreview() && hasPreviewAsIcon()) {\n                <div class=\"eds-file-upload-preview__icon\">\n                    <eds-icon [icon]=\"icon\" />\n                </div>\n            }\n            @if (isFilenameDisplayed()) {\n                <div class=\"eds-file-upload-preview__filename\">\n                    @if (!isItemsClickable()) {\n                        {{ fileName() }}\n                    }\n                    @if (isItemsClickable()) {\n                        <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eds-file-upload-preview__link\">{{ fileName() }}</a>\n                    }\n                </div>\n            }\n        </div>\n        <div class=\"eds-file-upload-preview__right\">\n            @if (isFilesizeDisplayed()) {\n                <span class=\"eds-file-upload-preview__size\">{{ fileSize() | edsFilesize }}</span>\n            }\n            @if (isFiletypeDisplayed() && fileType()) {\n                <span class=\"eds-file-upload-preview__type\">{{ fileType() }}</span>\n            }\n            <button edsIconButton\n                edsCritical\n                icon=\"trash:core\"\n                [ariaLabel]=\"'Remove ' + fileName() + ' from the list'\"\n                (buttonClick)=\"onRemoveFromList()\">\n            </button>\n        </div>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;margin-bottom:var(--eds-sp-2xs)}.eui-21 :host .eds-file-upload-preview__content{display:flex;align-items:center;justify-content:space-between;padding:var(--eds-sp-2xs) 0}.eui-21 :host .eds-file-upload-preview__left{display:flex;align-items:center;gap:var(--eds-sp-xs);overflow:hidden}.eui-21 :host .eds-file-upload-preview__image{flex-shrink:0}.eui-21 :host .eds-file-upload-preview__image img{width:80px;height:auto;border-radius:var(--eds-br-xs);object-fit:cover}.eui-21 :host .eds-file-upload-preview__loading{display:flex;align-items:center;justify-content:center;width:80px}.eui-21 :host .eds-file-upload-preview__icon{flex-shrink:0;color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload-preview__filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-default)}.eui-21 :host .eds-file-upload-preview__link{color:var(--eds-c-foreground-link);text-decoration:underline;cursor:pointer}.eui-21 :host .eds-file-upload-preview__link:hover{color:var(--eds-c-foreground-link-hover)}.eui-21 :host .eds-file-upload-preview__right{display:flex;align-items:center;gap:var(--eds-sp-xs);margin-left:auto;padding-left:var(--eds-sp-xs);flex-shrink:0}.eui-21 :host .eds-file-upload-preview__size,.eui-21 :host .eds-file-upload-preview__type{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: EdsFilesizePipe, name: "edsFilesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUploadPreview, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUploadPreview, decorators: [{
             type: Component,
             args: [{ selector: 'eds-file-upload-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -471,8 +471,8 @@ class EdsFileUpload {
     onItemClick(e) {
         this.itemClick.emit(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsFileUpload, isStandalone: true, selector: "eds-file-upload", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, hasProgressBar: { classPropertyName: "hasProgressBar", publicName: "hasProgressBar", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsImage: { classPropertyName: "hasPreviewAsImage", publicName: "hasPreviewAsImage", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsIcon: { classPropertyName: "hasPreviewAsIcon", publicName: "hasPreviewAsIcon", isSignal: true, isRequired: false, transformFunction: null }, hasTotalSizeDisplayed: { classPropertyName: "hasTotalSizeDisplayed", publicName: "hasTotalSizeDisplayed", isSignal: true, isRequired: false, transformFunction: null }, hasResetButton: { classPropertyName: "hasResetButton", publicName: "hasResetButton", isSignal: true, isRequired: false, transformFunction: null }, hasDragArea: { classPropertyName: "hasDragArea", publicName: "hasDragArea", isSignal: true, isRequired: false, transformFunction: null }, isItemsClickable: { classPropertyName: "isItemsClickable", publicName: "isItemsClickable", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, dragLabel: { classPropertyName: "dragLabel", publicName: "dragLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, totalSizeLabel: { classPropertyName: "totalSizeLabel", publicName: "totalSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectedFileLabel: { classPropertyName: "rejectedFileLabel", publicName: "rejectedFileLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop", itemClick: "itemClick" }, host: { listeners: { "change": "emitFiles($any($event.target).files)" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFileUpload, isStandalone: true, selector: "eds-file-upload", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, hasProgressBar: { classPropertyName: "hasProgressBar", publicName: "hasProgressBar", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsImage: { classPropertyName: "hasPreviewAsImage", publicName: "hasPreviewAsImage", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewAsIcon: { classPropertyName: "hasPreviewAsIcon", publicName: "hasPreviewAsIcon", isSignal: true, isRequired: false, transformFunction: null }, hasTotalSizeDisplayed: { classPropertyName: "hasTotalSizeDisplayed", publicName: "hasTotalSizeDisplayed", isSignal: true, isRequired: false, transformFunction: null }, hasResetButton: { classPropertyName: "hasResetButton", publicName: "hasResetButton", isSignal: true, isRequired: false, transformFunction: null }, hasDragArea: { classPropertyName: "hasDragArea", publicName: "hasDragArea", isSignal: true, isRequired: false, transformFunction: null }, isItemsClickable: { classPropertyName: "isItemsClickable", publicName: "isItemsClickable", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, dragLabel: { classPropertyName: "dragLabel", publicName: "dragLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, totalSizeLabel: { classPropertyName: "totalSizeLabel", publicName: "totalSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectedFileLabel: { classPropertyName: "rejectedFileLabel", publicName: "rejectedFileLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop", itemClick: "itemClick" }, host: { listeners: { "change": "emitFiles($any($event.target).files)" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: EdsFileUpload,
@@ -480,7 +480,7 @@ class EdsFileUpload {
             },
         ], viewQueries: [{ propertyName: "fileInputs", predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDragArea()) {\n    <div\n        class=\"eds-file-upload__drop-area\"\n        [class.eds-file-upload__drop-area--active]=\"dragEntered()\"\n        [class.eds-file-upload__drop-area--disabled]=\"isDropAreaDisabled()\">\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" class=\"eds-file-upload__browse-btn\">{{ browseLabel() }}</button>\n        <span class=\"eds-file-upload__drag-hint\">{{ dragLabel() }}</span>\n        <input\n            #input\n            class=\"eds-file-upload__file-input\"\n            [attr.aria-label]=\"browseLabel() + ' ' + dragLabel()\"\n            type=\"file\"\n            [accept]=\"accept()\"\n            [attr.disabled]=\"isDropAreaDisabled() ? 'disabled' : null\"\n            [multiple]=\"isMultiple()\"\n            (dragenter)=\"onDragEnter()\"\n            (dragleave)=\"onDragLeave()\" />\n    </div>\n} @else {\n    <div class=\"eds-file-upload__simple-input\">\n        <label [attr.for]=\"'eds-file-' + randomNumberId\">\n            <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"openBrowseWindow()\">{{ browseLabel() }}</button>\n        </label>\n        @if (isMultiple()) {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose multiple files'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\"\n                multiple />\n        } @else {\n            <input\n                #input\n                [attr.aria-label]=\"'Choose a single file'\"\n                class=\"eds-file-upload__hidden-input\"\n                [id]=\"'eds-file-' + randomNumberId\"\n                type=\"file\"\n                [accept]=\"accept()\" />\n        }\n    </div>\n}\n\n@if (hasProgressBar() && internalProgress() > 0) {\n    <eds-progress-bar\n        class=\"eds-file-upload__progress\"\n        [progress]=\"internalProgress()\"\n        [label]=\"internalProgress() + '%'\" />\n}\n\n@if (rejectedFileMessage()) {\n    <eds-feedback-message edsCritical class=\"eds-file-upload__error\">\n        {{ rejectedFileLabel() }}: {{ rejectedFileMessage() }}\n    </eds-feedback-message>\n}\n\n@for (uploadedFile of internalUploadedFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"uploadedFile\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromUploadedList($event)\" />\n}\n\n@for (file of internalFiles(); let i = $index; track i) {\n    <eds-file-upload-preview\n        isFileObject\n        [isItemsClickable]=\"isItemsClickable()\"\n        [index]=\"i\"\n        [file]=\"file\"\n        [hasPreview]=\"hasPreview()\"\n        [hasPreviewAsImage]=\"effectiveHasPreviewAsImage()\"\n        [hasPreviewAsIcon]=\"hasPreviewAsIcon()\"\n        [uploadedFileTemplate]=\"uploadedFileTemplate\"\n        (itemClick)=\"onItemClick($event)\"\n        (removeFromList)=\"removeFromList($event)\" />\n}\n\n@if (filesTotalSize() && hasTotalSizeDisplayed()) {\n    <div class=\"eds-file-upload__total-size\">\n        {{ filesTotalSize() | edsFilesize }} {{ totalSizeLabel() }}\n    </div>\n}\n\n<div class=\"eds-u-flex eds-u-flex-gap-s\">\n    <ng-content />\n    \n    @if (showResetBtn()) {\n        <button edsButton edsButtonSecondary edsSizeS type=\"button\" (click)=\"resetList()\">\n            {{ resetLabel() }}\n        </button>\n    }\n</div>\n\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block}.eui-21 :host .eds-file-upload__drop-area{outline:1px dashed var(--eds-c-border-primary);border-radius:var(--eds-br-m);padding:var(--eds-sp-xl);position:relative;transition:background-color .2s ease,outline-width .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__drop-area--active{background-color:var(--eds-c-surface-elevation);outline-width:3px}.eui-21 :host .eds-file-upload__drop-area--disabled{opacity:.5;cursor:not-allowed}.eui-21 :host .eds-file-upload__drop-area--disabled .eds-file-upload__file-input{cursor:default}.eui-21 :host .eds-file-upload__drag-hint{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-21 :host .eds-file-upload__file-input:not(:disabled){cursor:pointer}.eui-21 :host .eds-file-upload__simple-input{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__simple-input .eds-file-upload__hidden-input{display:none}.eui-21 :host .eds-file-upload__progress{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__error{margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-file-upload__total-size{margin-top:var(--eds-sp-xs);margin-bottom:var(--eds-sp-xs);font:var(--eds-f-label-m-semi-bold)}.eui-21 :host .eds-file-upload__reset-btn{margin-top:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "component", type: i1$1.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "edsBlockButton", "edsIconButton", "edsAvatarButton", "edsLineWrap", "edsButtonPrimary", "edsButtonSecondary", "edsButtonTertiary", "edsButtonRounded", "edsTypeVariant", "isChecked", "edsDisabled"] }, { kind: "component", type: i2$1.EdsFeedbackMessage, selector: "eds-feedback-message", inputs: ["isMuted", "e2eAttr"] }, { kind: "component", type: i3.EdsProgressBar, selector: "eds-progress-bar", inputs: ["label", "valueText", "progress", "isIndeterminate", "hasStatusIcon"] }, { kind: "component", type: EdsFileUploadPreview, selector: "eds-file-upload-preview", inputs: ["file", "index", "uploadedFileTemplate", "hasPreview", "hasPreviewAsImage", "hasPreviewAsIcon", "isItemsClickable", "isFileObject", "isFilenameDisplayed", "isFilesizeDisplayed", "isFiletypeDisplayed"], outputs: ["removeFromList", "itemClick"] }, { kind: "pipe", type: EdsFilesizePipe, name: "edsFilesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUpload, decorators: [{
             type: Component,
             args: [{ selector: 'eds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -620,10 +620,10 @@ class EdsFileUploadUtils {
         }
         return formData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUploadUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUploadUtils }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUploadUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUploadUtils }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsFileUploadUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFileUploadUtils, decorators: [{
             type: Injectable
         }] });
 

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

@@ -161,10 +161,10 @@ class EdsGrowl {
             msg.timeout = setTimeout(() => this.remove(msg), msg.life || this.life());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsGrowl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsGrowl, isStandalone: true, selector: "eds-growl", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, closeAllSticky: { classPropertyName: "closeAllSticky", publicName: "closeAllSticky", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", growlClick: "growlClick", growlClose: "growlClose" }, host: { attributes: { "aria-atomic": "true" }, listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.role": "hostRole()", "attr.aria-live": "ariaLive()", "attr.aria-labelledby": "value().length ? titleId : null", "attr.aria-describedby": "value().length ? contentId : null" } }, ngImport: i0, template: "@for (msg of value(); track msg) {\n    <div class=\"eds-growl__item\"\n         [class.eds-growl__item--info]=\"msg.severity === 'info'\"\n         [class.eds-growl__item--success]=\"msg.severity === 'success'\"\n         [class.eds-growl__item--warning]=\"msg.severity === 'warning'\"\n         [class.eds-growl__item--critical]=\"msg.severity === 'critical'\"\n         [class.eds-growl__item--slide-up]=\"position() === 'bottom-left' || position() === 'bottom-center' || position() === 'bottom-right'\"\n         [class.eds-growl__item--slide-down]=\"position() === 'top-left' || position() === 'top-center' || position() === 'top-right'\">\n\n        <div class=\"eds-growl__header\">\n            <eds-icon-state [edsColorVariant]=\"severityToColor(msg.severity)\" edsSizeS [ariaLabel]=\"msg.severity\" />\n            <span [id]=\"titleId\" class=\"eds-growl__title\">{{ msg.summary }}</span>\n        </div>\n\n        @if (msg.detail) {\n            <div [id]=\"contentId\" class=\"eds-growl__content\" [innerHTML]=\"msg.detail\"></div>\n        }\n\n        <button edsIconButton\n                icon=\"x\"\n                edsNeutral\n                edsSizeXS\n                edsRounded\n                ariaLabel=\"Dismiss notification\"\n                class=\"eds-growl__close\"\n                type=\"button\"\n                (buttonClick)=\"remove(msg)\"></button>\n    </div>\n}\n\n@if (closeAllSticky() && isMoreThanTwo()) {\n    <div class=\"eds-growl__item eds-growl__item--dismiss-all\">\n        <div class=\"eds-growl__header\">\n            <eds-icon icon=\"checks\" />\n            <span class=\"eds-growl__title\">Dismiss all</span>\n        </div>\n\n        <button edsIconButton\n                icon=\"x\"\n                edsNeutral\n                edsSizeXS\n                edsRounded\n                ariaLabel=\"Dismiss all notifications\"\n                class=\"eds-growl__close\"\n                type=\"button\"\n                (buttonClick)=\"removeAll()\"></button>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{position:fixed;display:flex;flex-direction:column;width:22rem;z-index:9000;gap:var(--eds-sp-xs);pointer-events:none}.eui-21 :host.eds-growl--bottom-left{bottom:var(--eds-sp-l);left:var(--eds-sp-l)}.eui-21 :host.eds-growl--bottom-center{bottom:var(--eds-sp-l);left:50%;transform:translate(-50%)}.eui-21 :host.eds-growl--bottom-right{bottom:var(--eds-sp-l);right:var(--eds-sp-l)}.eui-21 :host.eds-growl--top-left{top:var(--eds-sp-l);left:var(--eds-sp-l)}.eui-21 :host.eds-growl--top-center{top:var(--eds-sp-l);left:50%;transform:translate(-50%)}.eui-21 :host.eds-growl--top-right{top:var(--eds-sp-l);right:var(--eds-sp-l)}.eui-21 :host .eds-growl__item{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info);display:flex;flex-direction:column;position:relative;padding:var(--eds-sp-m);background-color:var(--_surface);color:var(--_on-surface);border-left:var(--eds-bw-m) solid var(--_border-color);border-radius:var(--eds-br-s);box-shadow:var(--eds-sh-3);pointer-events:auto;animation:eds-growl-fade-in .2s ease-out}.eui-21 :host .eds-growl__item--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host .eds-growl__item--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host .eds-growl__item--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host .eds-growl__item--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host .eds-growl__item--dismiss-all{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-foreground-default);--_border-color: var(--eds-c-border-divider)}.eui-21 :host .eds-growl__item--slide-up{animation-name:eds-growl-slide-up}.eui-21 :host .eds-growl__item--slide-down{animation-name:eds-growl-slide-down}.eui-21 :host .eds-growl__header{display:flex;align-items:center;gap:var(--eds-sp-xs);padding-right:var(--eds-sp-xl)}.eui-21 :host .eds-growl__title{font:var(--eds-f-label-m-semi-bold);color:var(--_on-surface)}.eui-21 :host .eds-growl__content{margin-top:var(--eds-sp-2xs);padding-left:calc(var(--eds-sp-xs) + 1.25rem);font:var(--eds-f-paragraph-s);color:var(--_on-surface);max-height:60vh;overflow-y:auto;overflow-wrap:break-word}.eui-21 :host .eds-growl__content a{text-decoration:underline}.eui-21 :host .eds-growl__close{position:absolute;top:var(--eds-sp-xs);right:var(--eds-sp-xs)}@keyframes eds-growl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes eds-growl-slide-up{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes eds-growl-slide-down{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width:767px){.eui-21 :host{width:calc(100vw - 2 * var(--eds-sp-m))}.eui-21 :host.eds-growl--bottom-left,.eui-21 :host.eds-growl--bottom-center,.eui-21 :host.eds-growl--bottom-right{bottom:var(--eds-sp-m);left:var(--eds-sp-m);right:var(--eds-sp-m);transform:none}.eui-21 :host.eds-growl--top-left,.eui-21 :host.eds-growl--top-center,.eui-21 :host.eds-growl--top-right{top:var(--eds-sp-m);left:var(--eds-sp-m);right:var(--eds-sp-m);transform:none}}\n"], dependencies: [{ kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EdsIconState, selector: "eds-icon-state", inputs: ["ariaLabel"] }, { kind: "component", type: i3.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGrowl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsGrowl, isStandalone: true, selector: "eds-growl", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, closeAllSticky: { classPropertyName: "closeAllSticky", publicName: "closeAllSticky", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", growlClick: "growlClick", growlClose: "growlClose" }, host: { attributes: { "aria-atomic": "true" }, listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.role": "hostRole()", "attr.aria-live": "ariaLive()", "attr.aria-labelledby": "value().length ? titleId : null", "attr.aria-describedby": "value().length ? contentId : null" } }, ngImport: i0, template: "@for (msg of value(); track msg) {\n    <div class=\"eds-growl__item\"\n         [class.eds-growl__item--info]=\"msg.severity === 'info'\"\n         [class.eds-growl__item--success]=\"msg.severity === 'success'\"\n         [class.eds-growl__item--warning]=\"msg.severity === 'warning'\"\n         [class.eds-growl__item--critical]=\"msg.severity === 'critical'\"\n         [class.eds-growl__item--slide-up]=\"position() === 'bottom-left' || position() === 'bottom-center' || position() === 'bottom-right'\"\n         [class.eds-growl__item--slide-down]=\"position() === 'top-left' || position() === 'top-center' || position() === 'top-right'\">\n\n        <div class=\"eds-growl__header\">\n            <eds-icon-state [edsColorVariant]=\"severityToColor(msg.severity)\" edsSizeS [ariaLabel]=\"msg.severity\" />\n            <span [id]=\"titleId\" class=\"eds-growl__title\">{{ msg.summary }}</span>\n        </div>\n\n        @if (msg.detail) {\n            <div [id]=\"contentId\" class=\"eds-growl__content\" [innerHTML]=\"msg.detail\"></div>\n        }\n\n        <button edsIconButton\n                icon=\"x\"\n                edsNeutral\n                edsSizeXS\n                edsRounded\n                ariaLabel=\"Dismiss notification\"\n                class=\"eds-growl__close\"\n                type=\"button\"\n                (buttonClick)=\"remove(msg)\"></button>\n    </div>\n}\n\n@if (closeAllSticky() && isMoreThanTwo()) {\n    <div class=\"eds-growl__item eds-growl__item--dismiss-all\">\n        <div class=\"eds-growl__header\">\n            <eds-icon icon=\"checks\" />\n            <span class=\"eds-growl__title\">Dismiss all</span>\n        </div>\n\n        <button edsIconButton\n                icon=\"x\"\n                edsNeutral\n                edsSizeXS\n                edsRounded\n                ariaLabel=\"Dismiss all notifications\"\n                class=\"eds-growl__close\"\n                type=\"button\"\n                (buttonClick)=\"removeAll()\"></button>\n    </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{position:fixed;display:flex;flex-direction:column;width:22rem;z-index:9000;gap:var(--eds-sp-xs);pointer-events:none}.eui-21 :host.eds-growl--bottom-left{bottom:var(--eds-sp-l);left:var(--eds-sp-l)}.eui-21 :host.eds-growl--bottom-center{bottom:var(--eds-sp-l);left:50%;transform:translate(-50%)}.eui-21 :host.eds-growl--bottom-right{bottom:var(--eds-sp-l);right:var(--eds-sp-l)}.eui-21 :host.eds-growl--top-left{top:var(--eds-sp-l);left:var(--eds-sp-l)}.eui-21 :host.eds-growl--top-center{top:var(--eds-sp-l);left:50%;transform:translate(-50%)}.eui-21 :host.eds-growl--top-right{top:var(--eds-sp-l);right:var(--eds-sp-l)}.eui-21 :host .eds-growl__item{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info);display:flex;flex-direction:column;position:relative;padding:var(--eds-sp-m);background-color:var(--_surface);color:var(--_on-surface);border-left:var(--eds-bw-m) solid var(--_border-color);border-radius:var(--eds-br-s);box-shadow:var(--eds-sh-3);pointer-events:auto;animation:eds-growl-fade-in .2s ease-out}.eui-21 :host .eds-growl__item--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host .eds-growl__item--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host .eds-growl__item--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host .eds-growl__item--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host .eds-growl__item--dismiss-all{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-foreground-default);--_border-color: var(--eds-c-border-divider)}.eui-21 :host .eds-growl__item--slide-up{animation-name:eds-growl-slide-up}.eui-21 :host .eds-growl__item--slide-down{animation-name:eds-growl-slide-down}.eui-21 :host .eds-growl__header{display:flex;align-items:center;gap:var(--eds-sp-xs);padding-right:var(--eds-sp-xl)}.eui-21 :host .eds-growl__title{font:var(--eds-f-label-m-semi-bold);color:var(--_on-surface)}.eui-21 :host .eds-growl__content{margin-top:var(--eds-sp-2xs);padding-left:calc(var(--eds-sp-xs) + 1.25rem);font:var(--eds-f-paragraph-s);color:var(--_on-surface);max-height:60vh;overflow-y:auto;overflow-wrap:break-word}.eui-21 :host .eds-growl__content a{text-decoration:underline}.eui-21 :host .eds-growl__close{position:absolute;top:var(--eds-sp-xs);right:var(--eds-sp-xs)}@keyframes eds-growl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes eds-growl-slide-up{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes eds-growl-slide-down{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width:767px){.eui-21 :host{width:calc(100vw - 2 * var(--eds-sp-m))}.eui-21 :host.eds-growl--bottom-left,.eui-21 :host.eds-growl--bottom-center,.eui-21 :host.eds-growl--bottom-right{bottom:var(--eds-sp-m);left:var(--eds-sp-m);right:var(--eds-sp-m);transform:none}.eui-21 :host.eds-growl--top-left,.eui-21 :host.eds-growl--top-center,.eui-21 :host.eds-growl--top-right{top:var(--eds-sp-m);left:var(--eds-sp-m);right:var(--eds-sp-m);transform:none}}\n"], dependencies: [{ kind: "component", type: i1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EdsIconState, selector: "eds-icon-state", inputs: ["ariaLabel"] }, { kind: "component", type: i3.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsGrowl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGrowl, decorators: [{
             type: Component,
             args: [{ selector: 'eds-growl', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_ICON_BUTTON,
@@ -276,10 +276,10 @@ class EdsGrowlService {
     growlInfo(msg, position) {
         this.growl({ severity: 'info', summary: 'Info', detail: msg }, { isSticky: false, isMultiple: false, position });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsGrowlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsGrowlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGrowlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGrowlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsGrowlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGrowlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

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

@@ -45,10 +45,10 @@ class EdsIconButton {
     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: "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.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, 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]=\"colorDirective.resolvedColor()\" [edsSizeVariant]=\"sizeDirective.resolvedSize()\">\n    <ng-content select=\"eds-badge\"/>\n</eds-icon>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.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", "edsRounded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", 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.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, 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]=\"colorDirective.resolvedColor()\" [edsSizeVariant]=\"sizeDirective.resolvedSize()\">\n    <ng-content select=\"eds-badge\"/>\n</eds-icon>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.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", "edsRounded"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconButton, decorators: [{
             type: Component,
             args: [{ selector: 'button[edsIconButton]', imports: [...EDS_ICON], host: {
                         '[class]': 'hostClasses()',

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

@@ -24,10 +24,10 @@ class EdsIconState {
         this.sizeDirective = inject(EdsSizeDirective);
         this.colorDirective = inject(EdsColorDirective);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconState, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsIconState, isStandalone: true, selector: "eds-icon-state", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (colorDirective.resolvedColor() === 'success') {\n    <eds-icon icon=\"check-circle:core\" aria-label=\"EDS success icon\" edsSuccess [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'warning') {\n    <eds-icon icon=\"warning:core\" aria-label=\"EDS warning icon\" edsWarning [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'critical') {\n    <eds-icon icon=\"warning-circle:core\" aria-label=\"EDS danger icon\" edsCritical [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'info') {\n    <eds-icon icon=\"info:core\" aria-label=\"EDS info icon\" edsInfo [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n}\n", styles: [".eui-21 :host{display:flex}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconState, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIconState, isStandalone: true, selector: "eds-icon-state", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (colorDirective.resolvedColor() === 'success') {\n    <eds-icon icon=\"check-circle:core\" aria-label=\"EDS success icon\" edsSuccess [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'warning') {\n    <eds-icon icon=\"warning:core\" aria-label=\"EDS warning icon\" edsWarning [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'critical') {\n    <eds-icon icon=\"warning-circle:core\" aria-label=\"EDS danger icon\" edsCritical [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n} @else if (colorDirective.resolvedColor() === 'info') {\n    <eds-icon icon=\"info:core\" aria-label=\"EDS info icon\" edsInfo [edsSizeVariant]=\"sizeDirective.resolvedSize()\" />\n}\n", styles: [".eui-21 :host{display:flex}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconState, decorators: [{
             type: Component,
             args: [{ selector: 'eds-icon-state', imports: [
                         ...EDS_ICON,

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

@@ -137,10 +137,10 @@ class EdsIconToggle {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsIconToggle, isStandalone: true, selector: "eds-icon-toggle", inputs: { isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, colorOn: { classPropertyName: "colorOn", publicName: "colorOn", isSignal: true, isRequired: false, transformFunction: null }, colorOff: { classPropertyName: "colorOff", publicName: "colorOff", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCheckedChange: "isCheckedChange", toggle: "toggle" }, host: { attributes: { "role": "switch" }, listeners: { "click": "onToggle()", "keydown": "onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.aria-checked": "internalChecked()", "attr.readonly": "isReadOnly() || null", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.tabindex": "computedTabindex()", "attr.aria-label": "computedAriaLabel()" } }, ngImport: i0, template: "<eds-icon [icon]=\"currentIcon()\" [edsColorVariant]=\"currentColor()\" />\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-icon-toggle{display:inline-flex;position:relative;cursor:pointer;padding:var(--eds-sp-2xs);border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-toggle: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-icon-toggle:not(.eds-icon-toggle--readonly):hover{background-color:var(--eds-c-surface-neutral-subtle)}.eui-21 :host.eds-icon-toggle--on{color:var(--eds-c-foreground-primary)}.eui-21 :host.eds-icon-toggle--readonly{cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsIconToggle, isStandalone: true, selector: "eds-icon-toggle", inputs: { isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, colorOn: { classPropertyName: "colorOn", publicName: "colorOn", isSignal: true, isRequired: false, transformFunction: null }, colorOff: { classPropertyName: "colorOff", publicName: "colorOff", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCheckedChange: "isCheckedChange", toggle: "toggle" }, host: { attributes: { "role": "switch" }, listeners: { "click": "onToggle()", "keydown": "onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.aria-checked": "internalChecked()", "attr.readonly": "isReadOnly() || null", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.tabindex": "computedTabindex()", "attr.aria-label": "computedAriaLabel()" } }, ngImport: i0, template: "<eds-icon [icon]=\"currentIcon()\" [edsColorVariant]=\"currentColor()\" />\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-icon-toggle{display:inline-flex;position:relative;cursor:pointer;padding:var(--eds-sp-2xs);border-radius:var(--eds-br-full)}.eui-21 :host.eds-icon-toggle: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-icon-toggle:not(.eds-icon-toggle--readonly):hover{background-color:var(--eds-c-surface-neutral-subtle)}.eui-21 :host.eds-icon-toggle--on{color:var(--eds-c-foreground-primary)}.eui-21 :host.eds-icon-toggle--readonly{cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconToggle, decorators: [{
             type: Component,
             args: [{ selector: 'eds-icon-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ...EDS_ICON,

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

@@ -73,10 +73,10 @@ class EdsIcon {
             this.assetsBaseUrl = assetsBaseUrl;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, edsRounded: { classPropertyName: "edsRounded", publicName: "edsRounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaHidden()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSize2XL", "edsSize2XL", "edsSize3XL", "edsSize3XL", "edsSize4XL", "edsSize4XL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsHighlight", "edsHighlight", "edsInfo", "edsInfo", "edsSuccess", "edsSuccess", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsDisabled", "edsDisabled", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<svg\n    class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n    aria-hidden=\"true\">\n    <use [attr.href]=\"assetsBaseUrl + '/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n</svg>\n<ng-content />\n", styles: [".eui-21 :host.eds-icon{--_size: var(--_icon-size, var(--eds-is-m));--_color: var(--_on-surface)}.eui-21 :host.eds-icon.eds-icon--size-2xs{--_size: var(--eds-is-2xs)}.eui-21 :host.eds-icon.eds-icon--size-xs{--_size: var(--eds-is-xs)}.eui-21 :host.eds-icon.eds-icon--size-s{--_size: var(--eds-is-s)}.eui-21 :host.eds-icon.eds-icon--size-m{--_size: var(--eds-is-m)}.eui-21 :host.eds-icon.eds-icon--size-l{--_size: var(--eds-is-l)}.eui-21 :host.eds-icon.eds-icon--size-xl{--_size: var(--eds-is-xl)}.eui-21 :host.eds-icon.eds-icon--size-2xl{--_size: var(--eds-is-2xl)}.eui-21 :host.eds-icon.eds-icon--size-3xl{--_size: var(--eds-is-3xl)}.eui-21 :host.eds-icon.eds-icon--size-4xl{--_size: var(--eds-is-4xl)}.eui-21 :host.eds-icon.eds-icon--neutral{--_color: var(--eds-c-foreground)}.eui-21 :host.eds-icon.eds-icon--neutral-subtle{--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon.eds-icon--neutral-subtler{--_color: var(--eds-c-foreground-subtler)}.eui-21 :host.eds-icon.eds-icon--primary{--_color: var(--eds-c-foreground-primary)}.eui-21 :host.eds-icon.eds-icon--highlight{--_color: var(--eds-c-foreground-highlight)}.eui-21 :host.eds-icon.eds-icon--info{--_color: var(--eds-c-foreground-info)}.eui-21 :host.eds-icon.eds-icon--success{--_color: var(--eds-c-foreground-success)}.eui-21 :host.eds-icon.eds-icon--warning{--_color: var(--eds-c-foreground-warning)}.eui-21 :host.eds-icon.eds-icon--critical{--_color: var(--eds-c-foreground-critical)}.eui-21 :host.eds-icon.eds-icon--disabled{--_color: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-icon{display:inline-flex;position:relative}.eui-21 :host.eds-icon .eds-icon-svg{height:var(--_size);width:var(--_size);fill:var(--_color);color:var(--_color)}.eui-21 :host.eds-icon .eds-icon-svg.eds-icon-set-flags-1x1,.eui-21 :host.eds-icon .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}.eui-21 :host.eds-icon.eds-icon--rounded{border-radius:50%;overflow:hidden}.eui-21 :host.eds-icon.eds-icon--rounded .eds-icon-svg{border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, edsRounded: { classPropertyName: "edsRounded", publicName: "edsRounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaHidden()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSize2XL", "edsSize2XL", "edsSize3XL", "edsSize3XL", "edsSize4XL", "edsSize4XL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsHighlight", "edsHighlight", "edsInfo", "edsInfo", "edsSuccess", "edsSuccess", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsDisabled", "edsDisabled", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<svg\n    class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n    aria-hidden=\"true\">\n    <use [attr.href]=\"assetsBaseUrl + '/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n</svg>\n<ng-content />\n", styles: [".eui-21 :host.eds-icon{--_size: var(--_icon-size, var(--eds-is-m));--_color: var(--_on-surface)}.eui-21 :host.eds-icon.eds-icon--size-2xs{--_size: var(--eds-is-2xs)}.eui-21 :host.eds-icon.eds-icon--size-xs{--_size: var(--eds-is-xs)}.eui-21 :host.eds-icon.eds-icon--size-s{--_size: var(--eds-is-s)}.eui-21 :host.eds-icon.eds-icon--size-m{--_size: var(--eds-is-m)}.eui-21 :host.eds-icon.eds-icon--size-l{--_size: var(--eds-is-l)}.eui-21 :host.eds-icon.eds-icon--size-xl{--_size: var(--eds-is-xl)}.eui-21 :host.eds-icon.eds-icon--size-2xl{--_size: var(--eds-is-2xl)}.eui-21 :host.eds-icon.eds-icon--size-3xl{--_size: var(--eds-is-3xl)}.eui-21 :host.eds-icon.eds-icon--size-4xl{--_size: var(--eds-is-4xl)}.eui-21 :host.eds-icon.eds-icon--neutral{--_color: var(--eds-c-foreground)}.eui-21 :host.eds-icon.eds-icon--neutral-subtle{--_color: var(--eds-c-foreground-subtle)}.eui-21 :host.eds-icon.eds-icon--neutral-subtler{--_color: var(--eds-c-foreground-subtler)}.eui-21 :host.eds-icon.eds-icon--primary{--_color: var(--eds-c-foreground-primary)}.eui-21 :host.eds-icon.eds-icon--highlight{--_color: var(--eds-c-foreground-highlight)}.eui-21 :host.eds-icon.eds-icon--info{--_color: var(--eds-c-foreground-info)}.eui-21 :host.eds-icon.eds-icon--success{--_color: var(--eds-c-foreground-success)}.eui-21 :host.eds-icon.eds-icon--warning{--_color: var(--eds-c-foreground-warning)}.eui-21 :host.eds-icon.eds-icon--critical{--_color: var(--eds-c-foreground-critical)}.eui-21 :host.eds-icon.eds-icon--disabled{--_color: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-icon{display:inline-flex;position:relative}.eui-21 :host.eds-icon .eds-icon-svg{height:var(--_size);width:var(--_size);fill:var(--_color);color:var(--_color)}.eui-21 :host.eds-icon .eds-icon-svg.eds-icon-set-flags-1x1,.eui-21 :host.eds-icon .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}.eui-21 :host.eds-icon.eds-icon--rounded{border-radius:50%;overflow:hidden}.eui-21 :host.eds-icon.eds-icon--rounded .eds-icon-svg{border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, decorators: [{
             type: Component,
             args: [{ selector: 'eds-icon, span[edsIcon]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
@@ -143,10 +143,10 @@ class EdsIconImage {
             this.assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EdsIconImage, isStandalone: true, selector: "eds-icon-image, span[edsIconImage]", inputs: { iconUrl: "iconUrl", ariaLabel: "ariaLabel", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute] }, host: { properties: { "attr.role": "this.ariaRole", "class": "this.cssClasses", "attr.aria-label": "this.ariaLabel", "ariaHidden": "this.ariaHidden" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSize2XL", "edsSize2XL", "edsSize3XL", "edsSize3XL", "edsSize4XL", "edsSize4XL", "edsSizeVariant", "edsSizeVariant"] }], ngImport: i0, template: "<svg class=\"eds-icon-svg-image\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.role]=\"'img'\">\n    <image [attr.href]=\"iconUrl\" [class]=\"'eds-icon-svg-image'\"></image>\n</svg>\n", styles: [".eui-21 :host.eds-icon-image{--_size: var(--_icon-size, var(--eds-is-m));--_color: var(--_on-surface)}.eui-21 :host.eds-icon-image.eds-icon-image--size-2xs{--_size: var(--eds-is-2xs)}.eui-21 :host.eds-icon-image.eds-icon-image--size-xs{--_size: var(--eds-is-xs)}.eui-21 :host.eds-icon-image.eds-icon-image--size-s{--_size: var(--eds-is-s)}.eui-21 :host.eds-icon-image.eds-icon-image--size-m{--_size: var(--eds-is-m)}.eui-21 :host.eds-icon-image.eds-icon-image--size-l{--_size: var(--eds-is-l)}.eui-21 :host.eds-icon-image.eds-icon-image--size-xl{--_size: var(--eds-is-xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-2xl{--_size: var(--eds-is-2xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-3xl{--_size: var(--eds-is-3xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-4xl{--_size: var(--eds-is-4xl)}.eui-21 :host.eds-icon-image{display:inline-flex;position:relative}.eui-21 :host.eds-icon-image .eds-icon-svg-image{height:var(--_size);width:var(--_size)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.2", type: EdsIconImage, isStandalone: true, selector: "eds-icon-image, span[edsIconImage]", inputs: { iconUrl: "iconUrl", ariaLabel: "ariaLabel", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute] }, host: { properties: { "attr.role": "this.ariaRole", "class": "this.cssClasses", "attr.aria-label": "this.ariaLabel", "ariaHidden": "this.ariaHidden" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSize2XS", "edsSize2XS", "edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeXL", "edsSizeXL", "edsSize2XL", "edsSize2XL", "edsSize3XL", "edsSize3XL", "edsSize4XL", "edsSize4XL", "edsSizeVariant", "edsSizeVariant"] }], ngImport: i0, template: "<svg class=\"eds-icon-svg-image\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.role]=\"'img'\">\n    <image [attr.href]=\"iconUrl\" [class]=\"'eds-icon-svg-image'\"></image>\n</svg>\n", styles: [".eui-21 :host.eds-icon-image{--_size: var(--_icon-size, var(--eds-is-m));--_color: var(--_on-surface)}.eui-21 :host.eds-icon-image.eds-icon-image--size-2xs{--_size: var(--eds-is-2xs)}.eui-21 :host.eds-icon-image.eds-icon-image--size-xs{--_size: var(--eds-is-xs)}.eui-21 :host.eds-icon-image.eds-icon-image--size-s{--_size: var(--eds-is-s)}.eui-21 :host.eds-icon-image.eds-icon-image--size-m{--_size: var(--eds-is-m)}.eui-21 :host.eds-icon-image.eds-icon-image--size-l{--_size: var(--eds-is-l)}.eui-21 :host.eds-icon-image.eds-icon-image--size-xl{--_size: var(--eds-is-xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-2xl{--_size: var(--eds-is-2xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-3xl{--_size: var(--eds-is-3xl)}.eui-21 :host.eds-icon-image.eds-icon-image--size-4xl{--_size: var(--eds-is-4xl)}.eui-21 :host.eds-icon-image{display:inline-flex;position:relative}.eui-21 :host.eds-icon-image .eds-icon-svg-image{height:var(--_size);width:var(--_size)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsIconImage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIconImage, decorators: [{
             type: Component,
             args: [{ selector: 'eds-icon-image, span[edsIconImage]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {

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

@@ -64,10 +64,10 @@ class EdsInputButton {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsInputButton, isStandalone: true, selector: "eds-input-button", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPositionStart: { classPropertyName: "edsButtonPositionStart", publicName: "edsButtonPositionStart", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPositionEnd: { classPropertyName: "edsButtonPositionEnd", publicName: "edsButtonPositionEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<ng-content />\n<ng-content select=\"button\"/>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;width:100%;border-radius:var(--eds-br-s)}.eui-21 :host ::ng-deep .eds-button{border:var(--eds-bw-1) solid var(--eds-c-border-divider);background-color:var(--eds-c-surface-elevation);position:relative}.eui-21 :host.eds-input-button--start{flex-direction:row-reverse}.eui-21 :host.eds-input-button--start ::ng-deep .eds-button{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.eui-21 :host.eds-input-button--start ::ng-deep .eds-button:after{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;right:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}.eui-21 :host.eds-input-button--start ::ng-deep .eds-input-text{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.eui-21 :host.eds-input-button--end ::ng-deep .eds-button{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.eui-21 :host.eds-input-button--end ::ng-deep .eds-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}.eui-21 :host.eds-input-button--end ::ng-deep .eds-input-text{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputButton, isStandalone: true, selector: "eds-input-button", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPositionStart: { classPropertyName: "edsButtonPositionStart", publicName: "edsButtonPositionStart", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPositionEnd: { classPropertyName: "edsButtonPositionEnd", publicName: "edsButtonPositionEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<ng-content />\n<ng-content select=\"button\"/>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;width:100%;border-radius:var(--eds-br-s)}.eui-21 :host ::ng-deep .eds-button{border:var(--eds-bw-1) solid var(--eds-c-border-divider);background-color:var(--eds-c-surface-elevation);position:relative}.eui-21 :host.eds-input-button--start{flex-direction:row-reverse}.eui-21 :host.eds-input-button--start ::ng-deep .eds-button{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.eui-21 :host.eds-input-button--start ::ng-deep .eds-button:after{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;right:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}.eui-21 :host.eds-input-button--start ::ng-deep .eds-input-text{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.eui-21 :host.eds-input-button--end ::ng-deep .eds-button{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.eui-21 :host.eds-input-button--end ::ng-deep .eds-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}.eui-21 :host.eds-input-button--end ::ng-deep .eds-input-text{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputButton, decorators: [{
             type: Component,
             args: [{ selector: 'eds-input-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',

package/fesm2022/eui-eds-eds-input-checkbox.mjs

@@ -95,8 +95,8 @@ class EdsInputCheckbox {
             event.stopPropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsInputCheckbox, isStandalone: true, selector: "input[edsInputCheckbox]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "checkbox" }, listeners: { "click": "onHostClick($event)", "change": "onHostChange($event)", "blur": "onTouched()", "keydown.space": "onSpacePressed($any($event))" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "checked": "checked()", "disabled": "disabled()", "attr.readonly": "readonly() || null" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputCheckbox, isStandalone: true, selector: "input[edsInputCheckbox]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "checkbox" }, listeners: { "click": "onHostClick($event)", "change": "onHostChange($event)", "blur": "onTouched()", "keydown.space": "onSpacePressed($any($event))" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "checked": "checked()", "disabled": "disabled()", "attr.readonly": "readonly() || null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EdsInputCheckbox),
@@ -104,7 +104,7 @@ class EdsInputCheckbox {
             },
         ], ngImport: i0, template: '', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-checkbox{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;vertical-align:middle;cursor:pointer;width:var(--eds-si-xl);height:var(--eds-si-xl);border-radius:var(--eds-br-xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-s) solid var(--eds-c-border-neutral)}.eui-21 :host.eds-input-checkbox:before{content:\"\";display:block;width:var(--eds-si-xl);height:var(--eds-si-xl);background-size:contain;background-repeat:no-repeat;background-position:center}.eui-21 :host.eds-input-checkbox:checked{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-input-checkbox:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E\")}.eui-21 :host.eds-input-checkbox:indeterminate{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-input-checkbox:indeterminate:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 11h12v2H6z'/%3E%3C/svg%3E\")}.eui-21 :host.eds-input-checkbox:disabled{background-color:var(--eds-c-suface-disabled);border-color:var(--eds-c-border-disabled);pointer-events:none;cursor:default}.eui-21 :host.eds-input-checkbox:disabled:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a0a0b1' d='M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E\")}.eui-21 :host.eds-input-checkbox[readonly]{pointer-events:none;cursor:default}.eui-21 :host.eds-input-checkbox[readonly]:checked{background-color:var(--eds-c-surface-neutral-subtle);border-color:var(--eds-c-border-neutral)}.eui-21 :host.eds-input-checkbox[readonly]:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E\")}.eui-21 :host.eds-input-checkbox.eds-input-checkbox--invalid:not(:disabled):not([readonly]){border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-input-checkbox.eds-input-checkbox--invalid:not(:disabled):not([readonly]):checked{background-color:var(--eds-c-surface-critical);border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-input-checkbox.eds-input-checkbox--invalid:not(:disabled):not([readonly]):checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E\")}.eui-21 :host.eds-input-checkbox:focus-visible{outline:2px solid var(--eds-c-focus-default, #0e47cb);outline-offset:2px}.eui-21 :host.eds-input-checkbox.eds-input-checkbox--invalid:focus-visible{outline-color:var(--eds-c-border-critical, #d32f2f)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'input[edsInputCheckbox]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

package/fesm2022/eui-eds-eds-input-group.mjs

@@ -15,10 +15,10 @@ class EdsInputGroup {
         this.hostClasses = computed(() => 'eds-input-group', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsInputGroup, isStandalone: true, selector: "div[edsInputGroup]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group{align-items:flex-start;display:flex;flex-direction:column;gap:var(--eds-sp-3xs);margin-bottom:var(--eds-sp-m);position:relative;width:100%}@media screen and (max-width:767px){.eui-21 :host.eds-input-group.row{flex-direction:column}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputGroup, isStandalone: true, selector: "div[edsInputGroup]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group{align-items:flex-start;display:flex;flex-direction:column;gap:var(--eds-sp-3xs);margin-bottom:var(--eds-sp-m);position:relative;width:100%}@media screen and (max-width:767px){.eui-21 :host.eds-input-group.row{flex-direction:column}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroup, decorators: [{
             type: Component,
             args: [{ selector: 'div[edsInputGroup]', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
@@ -31,10 +31,10 @@ class EdsInputGroupAddon {
         this.e2eAttr = input('eds-input-group-addon', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsInputGroupAddon, isStandalone: true, selector: "div[edsInputGroupAddon], eds-input-group-addon", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-group-addon" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-21 :host.eds-input-group-addon ::ng-deep>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-21 :host.eds-input-group-addon ::ng-deep>:not(:last-child){border-bottom-left-radius:var(--eds-br-s);border-top-left-radius:var(--eds-br-s);border-bottom-right-radius:0;border-top-right-radius:0}.eui-21 :host.eds-input-group-addon ::ng-deep>:last-child:not(:first-child){border-radius:0 var(--eds-br-s) var(--eds-br-s) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputGroupAddon, isStandalone: true, selector: "div[edsInputGroupAddon], eds-input-group-addon", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-group-addon" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-21 :host.eds-input-group-addon ::ng-deep>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-21 :host.eds-input-group-addon ::ng-deep>:not(:last-child){border-bottom-left-radius:var(--eds-br-s);border-top-left-radius:var(--eds-br-s);border-bottom-right-radius:0;border-top-right-radius:0}.eui-21 :host.eds-input-group-addon ::ng-deep>:last-child:not(:first-child){border-radius:0 var(--eds-br-s) var(--eds-br-s) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroupAddon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroupAddon, decorators: [{
             type: Component,
             args: [{ selector: 'div[edsInputGroupAddon], eds-input-group-addon', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-input-group-addon',
@@ -47,10 +47,10 @@ class EdsInputGroupAddonItem {
         this.e2eAttr = input('eds-input-group-addon-item', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroupAddonItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsInputGroupAddonItem, isStandalone: true, selector: "div[edsInputGroupAddonItem], eds-input-group-addon-item", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-group-addon-item" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eds-c-surface-neutral-subtler);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);box-shadow:none;color:var(--eds-c-foreground-default);display:flex;flex-shrink:0;font:var(--eds-f-paragraph-m);height:auto;justify-content:center;min-height:var(--eds-si-3xl);min-width:var(--eds-si-3xl);padding:0 var(--eds-sp-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroupAddonItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputGroupAddonItem, isStandalone: true, selector: "div[edsInputGroupAddonItem], eds-input-group-addon-item", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-group-addon-item" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eds-c-surface-neutral-subtler);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);box-shadow:none;color:var(--eds-c-foreground-default);display:flex;flex-shrink:0;font:var(--eds-f-paragraph-m);height:auto;justify-content:center;min-height:var(--eds-si-3xl);min-width:var(--eds-si-3xl);padding:0 var(--eds-sp-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsInputGroupAddonItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputGroupAddonItem, decorators: [{
             type: Component,
             args: [{ selector: 'div[edsInputGroupAddonItem], eds-input-group-addon-item', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-input-group-addon-item',