@eui/mobile-core 17.0.0-next.1 → 17.0.0-next.10

package/fesm2022/eui-mobile-core.mjs

@@ -1,21 +1,27 @@
 import { coerceBoolean } from '@eui/base';
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, EventEmitter, Output, ContentChildren, ViewChild, HostListener, ContentChild } from '@angular/core';
+import { Injectable, booleanAttribute, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, EventEmitter, Output, ContentChildren, ViewChild, HostListener, ContentChild } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { __decorate } from 'tslib';
-import * as i2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
-import * as i1$2 from '@angular/router';
-import { RouterModule, NavigationEnd } from '@angular/router';
 import { EclLanguageService, EclDefaultLanguageService } from '@eui/ecl';
-import * as i2$1 from '@eui/core';
+import * as i2 from '@eui/core';
 import { EuiEuLanguages } from '@eui/core';
 import { takeUntil, distinctUntilKeyChanged } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import * as i1$2 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import * as i2$2 from 'ng2-pdf-viewer';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import * as i3 from '@meddv/ngx-pinch-zoom';
+import { PinchZoomModule } from '@meddv/ngx-pinch-zoom';
+import { __decorate } from 'tslib';
+import * as i2$3 from 'angularx-qrcode';
+import { QRCodeModule } from 'angularx-qrcode';
 
 const initialState = {
     isLanguageListVisible: false,
@@ -51,67 +57,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
 
 class BaseStatesDirective {
     constructor() {
-        // COLORS
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimPrimary = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimSecondary = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimInfo = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimSuccess = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimWarning = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimDanger = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimAccent = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimDefault = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimDark = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimWhite = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimLight = false;
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.euimClear = false;
         // STATES
         this.euimDisabled = false;
         // POSITION
@@ -134,70 +79,14 @@ class BaseStatesDirective {
         this.euimSize4XL = false;
         this.euimSize5XL = false;
         this._euimSizeVariant = '';
-        this._euimVariant = '';
-        this._variant = '';
         this._color = '';
     }
-    /**
-     * @deprecated Will be removed in v17.
-     * Please use {@link color} property instead
-     */
-    get euimVariant() {
-        return this._euimVariant;
-    }
-    set euimVariant(value) {
-        this.euimPrimary = value === 'primary';
-        this.euimSecondary = value === 'secondary';
-        this.euimWarning = value === 'warning';
-        this.euimInfo = value === 'info';
-        this.euimSuccess = value === 'success';
-        this.euimDanger = value === 'danger';
-        this.euimAccent = value === 'accent';
-        this.euimDefault = value === 'default';
-        this.euimDark = value === 'dark';
-        this.euimWhite = value === 'white';
-        this._euimVariant = value;
-        this.euimLight = value === 'light';
-        this.euimClear = value === 'clear';
-    }
-    /**
-     * @deprecated will be removed in eUIMobile17. Please use {@link euimVariant} instead
-     */
-    get variant() {
-        return this._variant;
-    }
-    set variant(value) {
-        this.euimPrimary = value === 'primary';
-        this.euimSecondary = value === 'secondary';
-        this.euimWarning = value === 'warning';
-        this.euimInfo = value === 'info';
-        this.euimSuccess = value === 'success';
-        this.euimDanger = value === 'danger';
-        this.euimAccent = value === 'accent';
-        this.euimDefault = value === 'default';
-        this.euimDark = value === 'dark';
-        this.euimWhite = value === 'white';
-        this._variant = value;
-        this.euimLight = value === 'light';
-        this.euimClear = value === 'clear';
-    }
+    // COLORS
     get color() {
         return this._color;
     }
     set color(value) {
-        this.euimPrimary = value === 'primary';
-        this.euimSecondary = value === 'secondary';
-        this.euimWarning = value === 'warning';
-        this.euimInfo = value === 'info';
-        this.euimSuccess = value === 'success';
-        this.euimDanger = value === 'danger';
-        this.euimAccent = value === 'accent';
-        this.euimDefault = value === 'default';
-        this.euimDark = value === 'dark';
-        this.euimWhite = value === 'white';
         this._color = value;
-        this.euimLight = value === 'light';
-        this.euimClear = value === 'clear';
     }
     get euimSizeVariant() {
         return this._euimSizeVariant;
@@ -218,16 +107,7 @@ class BaseStatesDirective {
     getCssClasses(rootClass) {
         return [
             rootClass,
-            this.euimPrimary ? `${rootClass}--primary` : '',
-            this.euimSecondary ? `${rootClass}--secondary` : '',
-            this.euimInfo ? `${rootClass}--info` : '',
-            this.euimSuccess ? `${rootClass}--success` : '',
-            this.euimWarning ? `${rootClass}--warning` : '',
-            this.euimDanger ? `${rootClass}--danger` : '',
-            this.euimAccent ? `${rootClass}--accent` : '',
-            this.euimDefault ? `${rootClass}--default` : '',
-            this.euimDark ? `${rootClass}--dark` : '',
-            this.euimWhite ? `${rootClass}--white` : '',
+            this.color ? `${rootClass}--${this.color}` : '',
             this.euimSize2XS ? `${rootClass}--size-2xs` : '',
             this.euimSizeXS ? `${rootClass}--size-xs` : '',
             this.euimSizeS ? `${rootClass}--size-s` : '',
@@ -250,95 +130,8 @@ class BaseStatesDirective {
             .trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: BaseStatesDirective, isStandalone: true, selector: "[euimBase]", inputs: { euimPrimary: "euimPrimary", euimSecondary: "euimSecondary", euimInfo: "euimInfo", euimSuccess: "euimSuccess", euimWarning: "euimWarning", euimDanger: "euimDanger", euimAccent: "euimAccent", euimDefault: "euimDefault", euimDark: "euimDark", euimWhite: "euimWhite", euimLight: "euimLight", euimClear: "euimClear", euimVariant: "euimVariant", variant: "variant", color: "color", euimDisabled: "euimDisabled", euimPositionTopEnd: "euimPositionTopEnd", euimFontBold: "euimFontBold", euimFontRegular: "euimFontRegular", euimFontBoldItalic: "euimFontBoldItalic", euimFontItalic: "euimFontItalic", euimFontLight: "euimFontLight", euimSize2XS: "euimSize2XS", euimSizeXS: "euimSizeXS", euimSizeS: "euimSizeS", euimSizeM: "euimSizeM", euimSizeL: "euimSizeL", euimSizeXL: "euimSizeXL", euimSize2XL: "euimSize2XL", euimSize3XL: "euimSize3XL", euimSize4XL: "euimSize4XL", euimSize5XL: "euimSize5XL", euimSizeVariant: "euimSizeVariant" }, host: { properties: { "attr.aria-disabled": "this.euimDisabled.toString()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: BaseStatesDirective, isStandalone: true, selector: "[euimBase]", inputs: { color: "color", euimDisabled: ["euimDisabled", "euimDisabled", booleanAttribute], euimPositionTopEnd: ["euimPositionTopEnd", "euimPositionTopEnd", booleanAttribute], euimFontBold: ["euimFontBold", "euimFontBold", booleanAttribute], euimFontRegular: ["euimFontRegular", "euimFontRegular", booleanAttribute], euimFontBoldItalic: ["euimFontBoldItalic", "euimFontBoldItalic", booleanAttribute], euimFontItalic: ["euimFontItalic", "euimFontItalic", booleanAttribute], euimFontLight: ["euimFontLight", "euimFontLight", booleanAttribute], euimSize2XS: ["euimSize2XS", "euimSize2XS", booleanAttribute], euimSizeXS: ["euimSizeXS", "euimSizeXS", booleanAttribute], euimSizeS: ["euimSizeS", "euimSizeS", booleanAttribute], euimSizeM: ["euimSizeM", "euimSizeM", booleanAttribute], euimSizeL: ["euimSizeL", "euimSizeL", booleanAttribute], euimSizeXL: ["euimSizeXL", "euimSizeXL", booleanAttribute], euimSize2XL: ["euimSize2XL", "euimSize2XL", booleanAttribute], euimSize3XL: ["euimSize3XL", "euimSize3XL", booleanAttribute], euimSize4XL: ["euimSize4XL", "euimSize4XL", booleanAttribute], euimSize5XL: ["euimSize5XL", "euimSize5XL", booleanAttribute], euimSizeVariant: "euimSizeVariant" }, host: { properties: { "attr.aria-disabled": "this.euimDisabled.toString()" } }, ngImport: i0 }); }
 }
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimPrimary", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSecondary", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimInfo", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSuccess", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimWarning", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimDanger", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimAccent", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimDefault", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimDark", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimWhite", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimLight", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimClear", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimDisabled", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimPositionTopEnd", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimFontBold", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimFontRegular", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimFontBoldItalic", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimFontItalic", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimFontLight", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSize2XS", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSizeXS", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSizeS", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSizeM", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSizeL", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSizeXL", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSize2XL", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSize3XL", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSize4XL", void 0);
-__decorate([
-    coerceBoolean
-], BaseStatesDirective.prototype, "euimSize5XL", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BaseStatesDirective, decorators: [{
             type: Directive,
             args: [{
@@ -350,70 +143,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         '[attr.aria-disabled]': 'this.euimDisabled.toString()',
                     },
                 }]
-        }], propDecorators: { euimPrimary: [{
-                type: Input
-            }], euimSecondary: [{
-                type: Input
-            }], euimInfo: [{
-                type: Input
-            }], euimSuccess: [{
-                type: Input
-            }], euimWarning: [{
-                type: Input
-            }], euimDanger: [{
-                type: Input
-            }], euimAccent: [{
-                type: Input
-            }], euimDefault: [{
-                type: Input
-            }], euimDark: [{
-                type: Input
-            }], euimWhite: [{
-                type: Input
-            }], euimLight: [{
-                type: Input
-            }], euimClear: [{
-                type: Input
-            }], euimVariant: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], color: [{
+        }], propDecorators: { color: [{
                 type: Input
             }], euimDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimPositionTopEnd: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimFontBold: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimFontRegular: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimFontBoldItalic: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimFontItalic: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimFontLight: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSize2XS: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeXS: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeS: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeM: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeXL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSize2XL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSize3XL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSize4XL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSize5XL: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimSizeVariant: [{
                 type: Input
             }] } });
@@ -440,35 +222,14 @@ class EuimLabelComponent {
         ].join(' ');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLabelComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: { euimLabelTruncateWithLines: "euimLabelTruncateWithLines", euimLabelTitle: "euimLabelTitle", euimLabelSubTitle: "euimLabelSubTitle", euimLabelMeta: "euimLabelMeta", euimLabelTruncate: "euimLabelTruncate" }, host: { properties: { "style.--euimLabelTruncateWithLines": "this.euimLabelTruncateWithLines", "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimPrimary", "euimPrimary", "euimSecondary", "euimSecondary", "euimDefault", "euimDefault", "euimDark", "euimDark", "euimAccent", "euimAccent", "euimSize2XS", "euimSize2XS", "euimSizeXS", "euimSizeXS", "euimSizeS", "euimSizeS", "euimSizeM", "euimSizeM", "euimSizeL", "euimSizeL", "euimSizeXL", "euimSizeXL", "euimSize2XL", "euimSize2XL", "euimSize3XL", "euimSize3XL", "euimSize4XL", "euimSize4XL", "color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-base-color-grey-100)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-base-spacing-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-base-spacing-2xs)}.euim-label__title{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-text)}.euim-label__title ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__sub-title,.euim-label__meta{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-base-spacing-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-base-color-primary-100)}.euim-label--secondary{color:var(--eui-base-color-grey-50)}.euim-label--default{color:var(--eui-base-color-grey-75)}.euim-label--dark{color:var(--eui-base-color-grey-100)}.euim-label--info{color:var(--eui-base-color-info-100)}.euim-label--success{color:var(--eui-base-color-success-100)}.euim-label--warning{color:var(--eui-base-color-warning-100)}.euim-label--danger{color:var(--eui-base-color-danger-100)}.euim-label--accent{color:var(--eui-base-color-accent-100)}.euim-label--size-2xs{font:var(--eui-base-font-size-2xs)}.euim-label--size-xs{font:var(--eui-base-font-size-xs)}.euim-label--size-s{font:var(--eui-base-font-size-s)}.euim-label--size-m{font:var(--eui-base-font-size-m)}.euim-label--size-l{font:var(--eui-base-font-size-l)}.euim-label--size-xl{font:var(--eui-base-font-size-xl)}.euim-label--size-2xl{font:var(--eui-base-font-size-2xl)}.euim-label--size-3xl{font:var(--eui-base-font-size-3xl)}.euim-label--size-4xl{font:var(--eui-base-font-size-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: { euimLabelTruncateWithLines: "euimLabelTruncateWithLines", euimLabelTitle: ["euimLabelTitle", "euimLabelTitle", booleanAttribute], euimLabelSubTitle: ["euimLabelSubTitle", "euimLabelSubTitle", booleanAttribute], euimLabelMeta: ["euimLabelMeta", "euimLabelMeta", booleanAttribute], euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute] }, host: { properties: { "style.--euimLabelTruncateWithLines": "this.euimLabelTruncateWithLines", "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XS", "euimSize2XS", "euimSizeXS", "euimSizeXS", "euimSizeS", "euimSizeS", "euimSizeM", "euimSizeM", "euimSizeL", "euimSizeL", "euimSizeXL", "euimSizeXL", "euimSize2XL", "euimSize2XL", "euimSize3XL", "euimSize3XL", "euimSize4XL", "euimSize4XL", "color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-base-color-grey-100)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-base-spacing-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-base-spacing-2xs)}.euim-label__title{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-text)}.euim-label__title ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__sub-title,.euim-label__meta{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-base-spacing-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-base-color-primary-100)}.euim-label--secondary{color:var(--eui-base-color-grey-50)}.euim-label--default{color:var(--eui-base-color-grey-75)}.euim-label--dark{color:var(--eui-base-color-grey-100)}.euim-label--info{color:var(--eui-base-color-info-100)}.euim-label--success{color:var(--eui-base-color-success-100)}.euim-label--warning{color:var(--eui-base-color-warning-130)}.euim-label--warning ion-icon{color:var(--eui-base-color-warning-130)}.euim-label--danger{color:var(--eui-base-color-danger-100)}.euim-label--accent{color:var(--eui-base-color-accent-100)}.euim-label--size-2xs{font:var(--eui-base-font-size-2xs)}.euim-label--size-xs{font:var(--eui-base-font-size-xs)}.euim-label--size-s{font:var(--eui-base-font-size-s)}.euim-label--size-m{font:var(--eui-base-font-size-m)}.euim-label--size-l{font:var(--eui-base-font-size-l)}.euim-label--size-xl{font:var(--eui-base-font-size-xl)}.euim-label--size-2xl{font:var(--eui-base-font-size-2xl)}.euim-label--size-3xl{font:var(--eui-base-font-size-3xl)}.euim-label--size-4xl{font:var(--eui-base-font-size-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimLabelComponent.prototype, "euimLabelTitle", void 0);
-__decorate([
-    coerceBoolean
-], EuimLabelComponent.prototype, "euimLabelSubTitle", void 0);
-__decorate([
-    coerceBoolean
-], EuimLabelComponent.prototype, "euimLabelMeta", void 0);
-__decorate([
-    coerceBoolean
-], EuimLabelComponent.prototype, "euimLabelTruncate", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[euimLabel], p[euimLabel], span[euimLabel], euim-label', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimWarning',
-                                'euimDanger',
-                                'euimPrimary',
-                                'euimSecondary',
-                                'euimDefault',
-                                'euimDark',
-                                'euimAccent',
                                 'euimSize2XS',
                                 'euimSizeXS',
                                 'euimSizeS',
@@ -481,20 +242,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                                 'color',
                             ],
                         },
-                    ], styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-base-color-grey-100)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-base-spacing-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-base-spacing-2xs)}.euim-label__title{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-text)}.euim-label__title ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__sub-title,.euim-label__meta{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-base-spacing-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-base-color-primary-100)}.euim-label--secondary{color:var(--eui-base-color-grey-50)}.euim-label--default{color:var(--eui-base-color-grey-75)}.euim-label--dark{color:var(--eui-base-color-grey-100)}.euim-label--info{color:var(--eui-base-color-info-100)}.euim-label--success{color:var(--eui-base-color-success-100)}.euim-label--warning{color:var(--eui-base-color-warning-100)}.euim-label--danger{color:var(--eui-base-color-danger-100)}.euim-label--accent{color:var(--eui-base-color-accent-100)}.euim-label--size-2xs{font:var(--eui-base-font-size-2xs)}.euim-label--size-xs{font:var(--eui-base-font-size-xs)}.euim-label--size-s{font:var(--eui-base-font-size-s)}.euim-label--size-m{font:var(--eui-base-font-size-m)}.euim-label--size-l{font:var(--eui-base-font-size-l)}.euim-label--size-xl{font:var(--eui-base-font-size-xl)}.euim-label--size-2xl{font:var(--eui-base-font-size-2xl)}.euim-label--size-3xl{font:var(--eui-base-font-size-3xl)}.euim-label--size-4xl{font:var(--eui-base-font-size-4xl)}\n"] }]
+                    ], styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-base-color-grey-100)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-base-spacing-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-base-spacing-2xs)}.euim-label__title{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-text)}.euim-label__title ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__sub-title,.euim-label__meta{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-base-font-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-base-spacing-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-base-color-primary-100)}.euim-label--secondary{color:var(--eui-base-color-grey-50)}.euim-label--default{color:var(--eui-base-color-grey-75)}.euim-label--dark{color:var(--eui-base-color-grey-100)}.euim-label--info{color:var(--eui-base-color-info-100)}.euim-label--success{color:var(--eui-base-color-success-100)}.euim-label--warning{color:var(--eui-base-color-warning-130)}.euim-label--warning ion-icon{color:var(--eui-base-color-warning-130)}.euim-label--danger{color:var(--eui-base-color-danger-100)}.euim-label--accent{color:var(--eui-base-color-accent-100)}.euim-label--size-2xs{font:var(--eui-base-font-size-2xs)}.euim-label--size-xs{font:var(--eui-base-font-size-xs)}.euim-label--size-s{font:var(--eui-base-font-size-s)}.euim-label--size-m{font:var(--eui-base-font-size-m)}.euim-label--size-l{font:var(--eui-base-font-size-l)}.euim-label--size-xl{font:var(--eui-base-font-size-xl)}.euim-label--size-2xl{font:var(--eui-base-font-size-2xl)}.euim-label--size-3xl{font:var(--eui-base-font-size-3xl)}.euim-label--size-4xl{font:var(--eui-base-font-size-4xl)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimLabelTruncateWithLines: [{
                 type: HostBinding,
                 args: ['style.--euimLabelTruncateWithLines']
             }, {
                 type: Input
             }], euimLabelTitle: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimLabelSubTitle: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimLabelMeta: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimLabelTruncate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -523,64 +288,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
-class EuimControlFeedbackComponent {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    constructor(baseStatesDirective) {
-        this.baseStatesDirective = baseStatesDirective;
-    }
-    getCssClasses() {
-        return [
-            this.baseStatesDirective.getCssClasses('euim-control-feedback'),
-        ].join(' ');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimControlFeedbackComponent, selector: "euim-control-feedback", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimVariant", "euimVariant", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-control-feedback{display:block;font-size:var(--eui-base-font-size-xs);padding-left:var(--eui-base-spacing-m)}.euim-control-feedback--info{color:var(--eui-base-color-info-100)}.euim-control-feedback--success{color:var(--eui-base-color-success-100)}.euim-control-feedback--warning{color:var(--eui-base-color-warning-100)}.euim-control-feedback--danger{color:var(--eui-base-color-danger-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-control-feedback', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: BaseStatesDirective,
-                            inputs: [
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimWarning',
-                                'euimDanger',
-                                'euimVariant',
-                                'color',
-                            ],
-                        },
-                    ], template: "<ng-content></ng-content>\n", styles: [".euim-control-feedback{display:block;font-size:var(--eui-base-font-size-xs);padding-left:var(--eui-base-spacing-m)}.euim-control-feedback--info{color:var(--eui-base-color-info-100)}.euim-control-feedback--success{color:var(--eui-base-color-success-100)}.euim-control-feedback--warning{color:var(--eui-base-color-warning-100)}.euim-control-feedback--danger{color:var(--eui-base-color-danger-100)}\n"] }]
-        }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimControlFeedbackModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackModule, declarations: [EuimControlFeedbackComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimControlFeedbackComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimControlFeedbackModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimControlFeedbackComponent,
-                    ],
-                    declarations: [
-                        EuimControlFeedbackComponent,
-                    ],
-                }]
-        }] });
-
 class EuimNotificationItemComponent {
     get cssClasses() {
         return this.getCssClasses();
@@ -594,7 +301,7 @@ class EuimNotificationItemComponent {
         ].join(' ');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimNotificationItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimNotificationItemComponent, selector: "euim-notification-item", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimPrimary", "euimPrimary", "euimSecondary", "euimSecondary", "euimAccent", "euimAccent", "color", "color"] }], ngImport: i0, template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-base-spacing-xs);height:var(--eui-base-spacing-xs)}.euim-notification-item--primary{background:var(--eui-base-color-primary-100)}.euim-notification-item--secondary{background:var(--eui-base-color-grey-50)}.euim-notification-item--info{background:var(--eui-base-color-info-100)}.euim-notification-item--success{background:var(--eui-base-color-success-100)}.euim-notification-item--warning{background:var(--eui-base-color-warning-100)}.euim-notification-item--danger{background:var(--eui-base-color-danger-100)}.euim-notification-item--accent{background:var(--eui-base-color-accent-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimNotificationItemComponent, selector: "euim-notification-item", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-base-spacing-xs);height:var(--eui-base-spacing-xs)}.euim-notification-item--primary{background:var(--eui-base-color-primary-100)}.euim-notification-item--secondary{background:var(--eui-base-color-grey-50)}.euim-notification-item--info{background:var(--eui-base-color-info-100)}.euim-notification-item--success{background:var(--eui-base-color-success-100)}.euim-notification-item--warning{background:var(--eui-base-color-warning-100)}.euim-notification-item--danger{background:var(--eui-base-color-danger-100)}.euim-notification-item--accent{background:var(--eui-base-color-accent-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimNotificationItemComponent, decorators: [{
             type: Component,
@@ -602,13 +309,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimWarning',
-                                'euimDanger',
-                                'euimPrimary',
-                                'euimSecondary',
-                                'euimAccent',
                                 'color',
                             ],
                         },
@@ -698,200 +398,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-/**
-*  @deprecated It is removed. Use {@link euim-sidebar} instead.
-*/
-class EuimMenuComponent {
-    constructor(navCtrl) {
-        this.navCtrl = navCtrl;
-        this.isChanged = false;
-        this.itemClick = new EventEmitter();
-        this.items = [];
-    }
-    onItemClick(event, idx, item) {
-        if (item && item.url) {
-            if (item.url.indexOf('http') > -1) {
-                window.open(item.url, '_blank');
-            }
-            else {
-                this.navCtrl.navigateRoot(item.url).then();
-            }
-        }
-        this.itemClick.emit(item);
-    }
-    isColorDirectiveShown(item, color) {
-        return item.notification?.color === color;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuComponent, deps: [{ token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMenuComponent, selector: "euim-menu", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ion-list>\n    <ng-container *ngFor=\"let section of items\">\n        <li class=\"euim-menu__section\">\n            <ion-item-divider *ngIf=\"section.sectionName\">\n                <p euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{section.sectionName}}</p>\n            </ion-item-divider>\n            <ion-menu-toggle auto-hide=\"true\" *ngFor=\"let item of section.items; let j = index\">\n                <ion-item (click)=\"onItemClick($event, j, item)\" *ngIf=\"item.label\"\n                          [lines]=\"item.lines ? item.lines : 'none'\" button [detail]=\"item.detailArrow\"\n                          class=\"euim-menu__section-item\">\n                    <euim-avatar-icon *ngIf=\"item.avatarColor\" size=\"s\" variant=\"rounded\" [color]=\"item.avatarColor\">\n                        <ion-icon *ngIf=\"item.icon\"\n                                  [color]=\"item.iconColor\"\n                                  [name]=\"item.icon\"></ion-icon>\n                    </euim-avatar-icon>\n                    <ion-icon *ngIf=\"item.icon && !item.avatarColor\"\n                              [color]=\"item.iconColor\"\n                              [name]=\"item.icon\"></ion-icon>\n                    <div>\n                        <p class=\"euim-menu__section-item-label\" euimLabel [euimSizeM]=\"true\" [euimDark]=\"true\">{{item.label}}</p>\n                        <p class=\"euim-menu__section-item-sublabel\" euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{item.sublabel}}</p>\n                    </div>\n\n                    <ion-badge *ngIf=\"item.badge\" [color]=\"item.badge.color\" slot=\"end\">\n                        {{item.badge.value}}</ion-badge>\n                    <euim-notification-item *ngIf=\"item.notification && !item.notification.count\"\n                                            slot=\"end\"\n                                            [euimSuccess]=\"isColorDirectiveShown(item, 'success')\"\n                                            [euimWarning]=\"isColorDirectiveShown(item, 'warning')\"\n                                            [euimDanger]=\"isColorDirectiveShown(item, 'danger')\"\n                                            [euimInfo]=\"isColorDirectiveShown(item, 'info')\"\n                                            [euimPrimary]=\"isColorDirectiveShown(item, 'primary')\"\n                                            [euimSecondary]=\"isColorDirectiveShown(item, 'secondary')\"\n                                            [euimAccent]=\"isColorDirectiveShown(item, 'accent')\"\n                    ></euim-notification-item>\n                    <ion-note class=\"euim-menu__metadata\" slot=\"end\" *ngIf=\"item.metadata\">\n                        <p euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{item.metadata}}</p>\n                    </ion-note>\n                </ion-item>\n            </ion-menu-toggle>\n        </li>\n    </ng-container>\n</ion-list>\n", styles: [".euim-menu__section-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-m)}.euim-menu__section-item::part(detail-icon){color:var(--eui-base-color-grey-50);font-size:var(--eui-base-font-size-2xl);opacity:1;margin-left:var(--eui-base-spacing-xs)}.euim-menu__section-item-label,.euim-menu__section-item-sublabel{margin-left:var(--eui-base-spacing-m)}.euim-menu__metadata{margin:auto 0 auto var(--eui-base-spacing-s);padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i1.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }, { kind: "component", type: EuimNotificationItemComponent, selector: "euim-notification-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-__decorate([
-    coerceBoolean
-], EuimMenuComponent.prototype, "isChanged", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-list>\n    <ng-container *ngFor=\"let section of items\">\n        <li class=\"euim-menu__section\">\n            <ion-item-divider *ngIf=\"section.sectionName\">\n                <p euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{section.sectionName}}</p>\n            </ion-item-divider>\n            <ion-menu-toggle auto-hide=\"true\" *ngFor=\"let item of section.items; let j = index\">\n                <ion-item (click)=\"onItemClick($event, j, item)\" *ngIf=\"item.label\"\n                          [lines]=\"item.lines ? item.lines : 'none'\" button [detail]=\"item.detailArrow\"\n                          class=\"euim-menu__section-item\">\n                    <euim-avatar-icon *ngIf=\"item.avatarColor\" size=\"s\" variant=\"rounded\" [color]=\"item.avatarColor\">\n                        <ion-icon *ngIf=\"item.icon\"\n                                  [color]=\"item.iconColor\"\n                                  [name]=\"item.icon\"></ion-icon>\n                    </euim-avatar-icon>\n                    <ion-icon *ngIf=\"item.icon && !item.avatarColor\"\n                              [color]=\"item.iconColor\"\n                              [name]=\"item.icon\"></ion-icon>\n                    <div>\n                        <p class=\"euim-menu__section-item-label\" euimLabel [euimSizeM]=\"true\" [euimDark]=\"true\">{{item.label}}</p>\n                        <p class=\"euim-menu__section-item-sublabel\" euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{item.sublabel}}</p>\n                    </div>\n\n                    <ion-badge *ngIf=\"item.badge\" [color]=\"item.badge.color\" slot=\"end\">\n                        {{item.badge.value}}</ion-badge>\n                    <euim-notification-item *ngIf=\"item.notification && !item.notification.count\"\n                                            slot=\"end\"\n                                            [euimSuccess]=\"isColorDirectiveShown(item, 'success')\"\n                                            [euimWarning]=\"isColorDirectiveShown(item, 'warning')\"\n                                            [euimDanger]=\"isColorDirectiveShown(item, 'danger')\"\n                                            [euimInfo]=\"isColorDirectiveShown(item, 'info')\"\n                                            [euimPrimary]=\"isColorDirectiveShown(item, 'primary')\"\n                                            [euimSecondary]=\"isColorDirectiveShown(item, 'secondary')\"\n                                            [euimAccent]=\"isColorDirectiveShown(item, 'accent')\"\n                    ></euim-notification-item>\n                    <ion-note class=\"euim-menu__metadata\" slot=\"end\" *ngIf=\"item.metadata\">\n                        <p euimLabel [euimSizeS]=\"true\" [euimDefault]=\"true\">{{item.metadata}}</p>\n                    </ion-note>\n                </ion-item>\n            </ion-menu-toggle>\n        </li>\n    </ng-container>\n</ion-list>\n", styles: [".euim-menu__section-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-m)}.euim-menu__section-item::part(detail-icon){color:var(--eui-base-color-grey-50);font-size:var(--eui-base-font-size-2xl);opacity:1;margin-left:var(--eui-base-spacing-xs)}.euim-menu__section-item-label,.euim-menu__section-item-sublabel{margin-left:var(--eui-base-spacing-m)}.euim-menu__metadata{margin:auto 0 auto var(--eui-base-spacing-s);padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NavController }], propDecorators: { isChanged: [], itemClick: [{
-                type: Output
-            }], items: [{
-                type: Input
-            }] } });
-
-class EuimAvatarIconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, declarations: [EuimAvatarIconComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimAvatarIconComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimAvatarIconComponent,
-                    ],
-                    declarations: [
-                        EuimAvatarIconComponent,
-                    ],
-                }]
-        }] });
-
-class EuimMenuModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuModule, declarations: [EuimMenuComponent], imports: [CommonModule,
-            RouterModule,
-            IonicModule,
-            EuimAvatarIconModule,
-            EuimLabelModule,
-            EuimNotificationItemModule], exports: [EuimMenuComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuModule, imports: [CommonModule,
-            RouterModule,
-            IonicModule,
-            EuimAvatarIconModule,
-            EuimLabelModule,
-            EuimNotificationItemModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        IonicModule,
-                        EuimAvatarIconModule,
-                        EuimLabelModule,
-                        EuimNotificationItemModule,
-                    ],
-                    declarations: [
-                        EuimMenuComponent,
-                    ],
-                    exports: [
-                        EuimMenuComponent,
-                    ],
-                }]
-        }] });
-
-class EuimAppSidebarComponent {
-    constructor() {
-        this.ionMenuId = 'main';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAppSidebarComponent, selector: "euim-app-sidebar", inputs: { ionMenuId: "ionMenuId", sidebarItems: "sidebarItems" }, ngImport: i0, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" side=\"start\">\n    <ion-toolbar>\n        <ng-content select=\"euim-app-sidebar-header\"></ng-content>\n    </ion-toolbar>\n    <ion-content>\n        <ng-content select=\"euim-app-sidebar-menu\"></ng-content>\n    </ion-content>\n    <ion-footer>\n        <ng-content select=\"euim-app-sidebar-footer\"></ng-content>\n    </ion-footer>\n</ion-menu>\n", dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-app-sidebar', template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" side=\"start\">\n    <ion-toolbar>\n        <ng-content select=\"euim-app-sidebar-header\"></ng-content>\n    </ion-toolbar>\n    <ion-content>\n        <ng-content select=\"euim-app-sidebar-menu\"></ng-content>\n    </ion-content>\n    <ion-footer>\n        <ng-content select=\"euim-app-sidebar-footer\"></ng-content>\n    </ion-footer>\n</ion-menu>\n" }]
-        }], propDecorators: { ionMenuId: [{
-                type: Input
-            }], sidebarItems: [{
-                type: Input
-            }] } });
-
-class EuimAppSidebarHeaderComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAppSidebarHeaderComponent, selector: "euim-app-sidebar-header", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-app-sidebar-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }] });
-
-class EuimAppSidebarMenuComponent {
-    constructor() {
-        this.itemClick = new EventEmitter();
-    }
-    onItemClick(item) {
-        this.itemClick.emit(item);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAppSidebarMenuComponent, selector: "euim-app-sidebar-menu", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<euim-menu (itemClick)=\"onItemClick($event)\"\n           [items]=\"items\"></euim-menu>\n", dependencies: [{ kind: "component", type: EuimMenuComponent, selector: "euim-menu", inputs: ["items"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-app-sidebar-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<euim-menu (itemClick)=\"onItemClick($event)\"\n           [items]=\"items\"></euim-menu>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }] } });
-
-class EuimAppSidebarFooterComponent {
-    constructor() {
-        this.className = 'euim-app-sidebar-footer';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAppSidebarFooterComponent, selector: "euim-app-sidebar-footer", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-app-sidebar-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENTS$e = [
-    EuimAppSidebarComponent,
-    EuimAppSidebarHeaderComponent,
-    EuimAppSidebarFooterComponent,
-    EuimAppSidebarMenuComponent,
-];
-class EuimAppSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarModule, declarations: [EuimAppSidebarComponent,
-            EuimAppSidebarHeaderComponent,
-            EuimAppSidebarFooterComponent,
-            EuimAppSidebarMenuComponent], imports: [CommonModule, RouterModule,
-            EuimMenuModule,
-            IonicModule], exports: [EuimAppSidebarComponent,
-            EuimAppSidebarHeaderComponent,
-            EuimAppSidebarFooterComponent,
-            EuimAppSidebarMenuComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarModule, imports: [CommonModule, RouterModule,
-            EuimMenuModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppSidebarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule, RouterModule,
-                        EuimMenuModule,
-                        IonicModule,
-                    ],
-                    declarations: [
-                        ...COMPONENTS$e,
-                    ],
-                    exports: [
-                        ...COMPONENTS$e,
-                    ],
-                }]
-        }] });
-
 class EuimEmptyListPlaceholderComponent {
     get cssClasses() {
         return this.getCssClasses();
@@ -905,20 +411,11 @@ class EuimEmptyListPlaceholderComponent {
         ].join(' ');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimEmptyListPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: { message: "message", icon: "icon", description: "description", button: "button", euimMarginTopLarge: "euimMarginTopLarge", euimMarginTopSmall: "euimMarginTopSmall", euimMarginBottomSmall: "euimMarginBottomSmall" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ion-icon *ngIf=\"icon\" [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n<ion-icon *ngIf=\"(!icon && !message && !description)\" name=\"search-sharp\" size=\"large\"\n    class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n<div class=\"euim-empty-list-placeholder__message\" *ngIf=\"message || (!icon && !message && !description)\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n</div>\n<div class=\"euim-empty-list-placeholder__description\" *ngIf=\"description || (!icon && !message && !description)\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n</div>\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-base-spacing-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-base-spacing-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-base-spacing-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-base-spacing-m)}.euim-empty-list-placeholder__icon{color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: { message: "message", icon: "icon", description: "description", button: "button", euimMarginTopLarge: ["euimMarginTopLarge", "euimMarginTopLarge", booleanAttribute], euimMarginTopSmall: ["euimMarginTopSmall", "euimMarginTopSmall", booleanAttribute], euimMarginBottomSmall: ["euimMarginBottomSmall", "euimMarginBottomSmall", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\" size=\"large\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-base-spacing-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-base-spacing-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-base-spacing-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-base-spacing-m)}.euim-empty-list-placeholder__icon{color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimEmptyListPlaceholderComponent.prototype, "euimMarginTopLarge", void 0);
-__decorate([
-    coerceBoolean
-], EuimEmptyListPlaceholderComponent.prototype, "euimMarginTopSmall", void 0);
-__decorate([
-    coerceBoolean
-], EuimEmptyListPlaceholderComponent.prototype, "euimMarginBottomSmall", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimEmptyListPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-empty-list-placeholder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-icon *ngIf=\"icon\" [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n<ion-icon *ngIf=\"(!icon && !message && !description)\" name=\"search-sharp\" size=\"large\"\n    class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n<div class=\"euim-empty-list-placeholder__message\" *ngIf=\"message || (!icon && !message && !description)\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n</div>\n<div class=\"euim-empty-list-placeholder__description\" *ngIf=\"description || (!icon && !message && !description)\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n</div>\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-base-spacing-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-base-spacing-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-base-spacing-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-base-spacing-m)}.euim-empty-list-placeholder__icon{color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}\n"] }]
+            args: [{ selector: 'euim-empty-list-placeholder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\" size=\"large\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-base-spacing-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-base-spacing-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-base-spacing-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-base-spacing-m)}.euim-empty-list-placeholder__icon{color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-75)}.euim-empty-list-placeholder__description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);color:var(--eui-base-color-grey-75)}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], icon: [{
@@ -928,11 +425,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], button: [{
                 type: Input
             }], euimMarginTopLarge: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimMarginTopSmall: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], euimMarginBottomSmall: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1014,13 +514,13 @@ class EuimLanguageListComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2$1.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimLanguageListComponent, selector: "euim-language-list", ngImport: i0, template: "<ion-header>\n    <ion-toolbar color=\"primary\">\n        <ion-buttons slot=\"start\">\n            <ion-button (click)=\"onClose()\">\n                <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n        <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n    </ion-toolbar>\n    <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n        <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n    </ion-toolbar>\n</ion-header>\n<ion-content>\n    <ion-list *ngIf=\"results.length > 0\">\n        <ng-container *ngFor=\"let item of results\">\n            <ion-item-divider *ngIf=\"firstElementFromEUList?.code === item.code\n                              || firstElementFromNonEUList?.code === item.code\">\n                {{ (firstElementFromEUList?.code === item.code)\n                    ? ('euim.language-list.EU-LANGUAGES' | translate)\n                    : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n            </ion-item-divider>\n            <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n                <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                    <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n                <ion-label>\n                    <div euimLabel euimLabelTitle>{{item.label}}</div>\n                    <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n                        {{item.code}}\n                    </div>\n                </ion-label>\n               <ion-buttons *ngIf=\"selectedLanguage?.code===item.code\">\n                    <ion-button  fill=\"clear\" >\n                        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n                    </ion-button>\n                </ion-buttons>\n            </ion-item>\n        </ng-container>\n    </ion-list>\n    <euim-empty-list-placeholder euimMarginTopLarge *ngIf=\"results.length < 1\"\n                                 class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n</ion-content>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }, { kind: "component", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: ["message", "icon", "description", "button", "euimMarginTopLarge", "euimMarginTopSmall", "euimMarginBottomSmall"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimLanguageListComponent, selector: "euim-language-list", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code\n          || firstElementFromNonEUList?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n          <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n            <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n          </euim-avatar-icon>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }, { kind: "component", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: ["message", "icon", "description", "button", "euimMarginTopLarge", "euimMarginTopSmall", "euimMarginBottomSmall"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-language-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n    <ion-toolbar color=\"primary\">\n        <ion-buttons slot=\"start\">\n            <ion-button (click)=\"onClose()\">\n                <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n        <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n    </ion-toolbar>\n    <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n        <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n    </ion-toolbar>\n</ion-header>\n<ion-content>\n    <ion-list *ngIf=\"results.length > 0\">\n        <ng-container *ngFor=\"let item of results\">\n            <ion-item-divider *ngIf=\"firstElementFromEUList?.code === item.code\n                              || firstElementFromNonEUList?.code === item.code\">\n                {{ (firstElementFromEUList?.code === item.code)\n                    ? ('euim.language-list.EU-LANGUAGES' | translate)\n                    : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n            </ion-item-divider>\n            <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n                <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                    <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n                <ion-label>\n                    <div euimLabel euimLabelTitle>{{item.label}}</div>\n                    <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n                        {{item.code}}\n                    </div>\n                </ion-label>\n               <ion-buttons *ngIf=\"selectedLanguage?.code===item.code\">\n                    <ion-button  fill=\"clear\" >\n                        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n                    </ion-button>\n                </ion-buttons>\n            </ion-item>\n        </ng-container>\n    </ion-list>\n    <euim-empty-list-placeholder euimMarginTopLarge *ngIf=\"results.length < 1\"\n                                 class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n</ion-content>\n\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: i1.Platform }] });
+            args: [{ selector: 'euim-language-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code\n          || firstElementFromNonEUList?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n          <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n            <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n          </euim-avatar-icon>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: i1.Platform }] });
 
 class EuimLanguageSelectorComponent {
     constructor(cd, translateService, appShellService, appService, modalCtrl, baseStatesDirective) {
@@ -1030,7 +530,7 @@ class EuimLanguageSelectorComponent {
         this.appService = appService;
         this.modalCtrl = modalCtrl;
         this.baseStatesDirective = baseStatesDirective;
-        this._euimPrimary = this.baseStatesDirective.euimPrimary;
+        this._euimPrimary = this.baseStatesDirective.color === 'primary';
         this.destroy$ = new Subject();
     }
     get cssClasses() {
@@ -1040,213 +540,61 @@ class EuimLanguageSelectorComponent {
         this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
             this.languages = (state.languages) ?
                 EuiEuLanguages.getOrderedLanguages(state.languages) :
-                EuiEuLanguages.getLanguages();
-            this.cd.detectChanges();
-        });
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
-            this.selectedLanguage = {
-                code: state.activeLanguage,
-                label: this.getLanguageLabel(state.activeLanguage),
-            };
-            this.cd.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
-    async onShowLanguageList() {
-        const modal = await this.modalCtrl.create({
-            component: EuimLanguageListComponent,
-        });
-        await modal.present();
-    }
-    getLanguageLabel(languageCode) {
-        for (const language of this.languages) {
-            if (language.code === languageCode) {
-                return language.label;
-            }
-        }
-        return;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2$1.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary", "color", "color"] }], ngImport: i0, template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:normal normal 400 .75rem/1rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs);position:absolute;color:var(--eui-base-color-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-base-color-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-base-color-grey-15)}.euim-language-selector__internal-icon{color:var(--eui-base-color-grey-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-base-spacing-m))}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: BaseStatesDirective,
-                            inputs: [
-                                'euimPrimary',
-                                'color',
-                            ],
-                        },
-                    ], template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:normal normal 400 .75rem/1rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs);position:absolute;color:var(--eui-base-color-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-base-color-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-base-color-grey-15)}.euim-language-selector__internal-icon{color:var(--eui-base-color-grey-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-base-spacing-m))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: BaseStatesDirective }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
-* @deprecated It will be removed on v17 release. Use {@link ion-list-header} instead.
-*/
-class EuimListHeaderDirective {
-    constructor() {
-        this.className = 'euim-list-divider';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimListHeaderDirective, selector: "[euimListHeader]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimListHeader]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimListHeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderModule, declarations: [EuimListHeaderDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimListHeaderDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimListHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimListHeaderDirective,
-                    ],
-                    declarations: [
-                        EuimListHeaderDirective,
-                    ],
-                }]
-        }] });
-
-/**
-* @deprecated It will be removed on v17 release. Use {@link euimDivider} instead if there is a case with no separator. For all othere cases ion-item-divider will be used.
-*/
-class EuimItemDividerDirective {
-    constructor() {
-        this.className = 'euim-item-divider';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimItemDividerDirective, selector: "[euimItemDivider]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimItemDivider]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimItemDividerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerModule, declarations: [EuimItemDividerDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimItemDividerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimItemDividerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimItemDividerDirective,
-                    ],
-                    declarations: [
-                        EuimItemDividerDirective,
-                    ],
-                }]
-        }] });
-
-class EuimDividerDirective {
-    get cssClasses() {
-        return this.getCssClasses('euim-divider');
-    }
-    getCssClasses(rootClass) {
-        return [
-            rootClass,
-            this.lines ? `${rootClass}--lines-${this.lines}` : '',
-        ].join(' ').trim();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimDividerDirective, selector: "[euimDivider]", inputs: { lines: "lines" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimDivider]',
-                }]
-        }], propDecorators: { lines: [{
-                type: Input
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimDividerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, declarations: [EuimDividerDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimDividerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimDividerDirective,
-                    ],
-                    declarations: [
-                        EuimDividerDirective,
-                    ],
-                }]
-        }] });
-
-class EuimSkeletonTextAvatarDirective {
-    constructor() {
-        this.className = 'euim-skeleton-text-avatar';
+                EuiEuLanguages.getLanguages();
+            this.cd.detectChanges();
+        });
+        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
+            this.selectedLanguage = {
+                code: state.activeLanguage,
+                label: this.getLanguageLabel(state.activeLanguage),
+            };
+            this.cd.detectChanges();
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimSkeletonTextAvatarDirective, selector: "[euimSkeletonTextAvatar]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    async onShowLanguageList() {
+        const modal = await this.modalCtrl.create({
+            component: EuimLanguageListComponent,
+        });
+        await modal.present();
+    }
+    getLanguageLabel(languageCode) {
+        for (const language of this.languages) {
+            if (language.code === languageCode) {
+                return language.label;
+            }
+        }
+        return;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:normal normal 400 .75rem/1rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs);position:absolute;color:var(--eui-base-color-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-base-color-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-base-color-grey-15)}.euim-language-selector__internal-icon{color:var(--eui-base-color-grey-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-base-spacing-m))}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimSkeletonTextAvatar]',
-                }]
-        }], propDecorators: { className: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'color',
+                            ],
+                        },
+                    ], template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:normal normal 400 .75rem/1rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs);position:absolute;color:var(--eui-base-color-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-base-color-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-base-color-grey-15)}.euim-language-selector__internal-icon{color:var(--eui-base-color-grey-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-base-spacing-m))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimSkeletonTextAvatarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, declarations: [EuimSkeletonTextAvatarDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimSkeletonTextAvatarDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, imports: [CommonModule,
+class EuimAvatarIconModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, declarations: [EuimAvatarIconComponent], imports: [CommonModule,
+            IonicModule], exports: [EuimAvatarIconComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1254,10 +602,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        EuimSkeletonTextAvatarDirective,
+                        EuimAvatarIconComponent,
                     ],
                     declarations: [
-                        EuimSkeletonTextAvatarDirective,
+                        EuimAvatarIconComponent,
                     ],
                 }]
         }] });
@@ -1295,7 +643,6 @@ class EuimLanguageSelectorModule {
             IonicModule,
             EuimAvatarIconModule,
             EuimLabelModule,
-            EuimItemDividerModule,
             EuimEmptyListPlaceholderModule,
             TranslateModule], exports: [EuimLanguageSelectorComponent,
             EuimLanguageListComponent] }); }
@@ -1305,7 +652,6 @@ class EuimLanguageSelectorModule {
             IonicModule,
             EuimAvatarIconModule,
             EuimLabelModule,
-            EuimItemDividerModule,
             EuimEmptyListPlaceholderModule,
             TranslateModule] }); }
 }
@@ -1317,7 +663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                         EuimAvatarIconModule,
                         EuimLabelModule,
-                        EuimItemDividerModule,
                         EuimEmptyListPlaceholderModule,
                         TranslateModule,
                     ],
@@ -1339,11 +684,9 @@ class EuimAppModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAppModule, declarations: [EuimAppComponent], imports: [CommonModule,
             IonicModule,
-            EuimAppSidebarModule,
             EuimLanguageSelectorModule], exports: [EuimAppComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppModule, imports: [CommonModule,
             IonicModule,
-            EuimAppSidebarModule,
             EuimLanguageSelectorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAppModule, decorators: [{
@@ -1352,7 +695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     imports: [
                         CommonModule,
                         IonicModule,
-                        EuimAppSidebarModule,
                         EuimLanguageSelectorModule,
                     ],
                     exports: [
@@ -1435,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: HostBinding
             }] } });
 
-const COMPONENTS$d = [
+const COMPONENTS$c = [
     EuimUserProfileComponent,
     EuiMUserProfileAvatarComponent,
     EuiMUserProfileInfosComponent,
@@ -1465,10 +807,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$d,
+                        ...COMPONENTS$c,
                     ],
                     declarations: [
-                        ...COMPONENTS$d,
+                        ...COMPONENTS$c,
                     ],
                 }]
         }] });
@@ -1491,28 +833,22 @@ class EuimToolbarComponent {
         this.backButtonClick.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: { hasBackButton: "hasBackButton", backButtonDefaultHref: "backButtonDefaultHref", hasSidebarTrigger: "hasSidebarTrigger", hasLanguageSelector: "hasLanguageSelector" }, outputs: { backButtonClick: "backButtonClick" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: EuimLanguageSelectorComponent, selector: "euim-language-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: { hasBackButton: ["hasBackButton", "hasBackButton", booleanAttribute], backButtonDefaultHref: "backButtonDefaultHref", hasSidebarTrigger: ["hasSidebarTrigger", "hasSidebarTrigger", booleanAttribute], hasLanguageSelector: ["hasLanguageSelector", "hasLanguageSelector", booleanAttribute] }, outputs: { backButtonClick: "backButtonClick" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: EuimLanguageSelectorComponent, selector: "euim-language-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimToolbarComponent.prototype, "hasBackButton", void 0);
-__decorate([
-    coerceBoolean
-], EuimToolbarComponent.prototype, "hasSidebarTrigger", void 0);
-__decorate([
-    coerceBoolean
-], EuimToolbarComponent.prototype, "hasLanguageSelector", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}\n"] }]
         }], propDecorators: { hasBackButton: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], backButtonDefaultHref: [{
                 type: Input
             }], hasSidebarTrigger: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hasLanguageSelector: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], backButtonClick: [{
                 type: Output
             }], className: [{
@@ -1705,7 +1041,7 @@ class EuimHeaderDetailsComponent {
         ].join(' ');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimHeaderDetailsComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimHeaderDetailsComponent, selector: "euim-header-details", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-base-spacing-m);display:block;text-align:center;background-color:var(--eui-base-color-grey-5);border-bottom:1px solid var(--eui-base-color-grey-20)}.euim-header-details--primary{background-color:var(--eui-base-color-primary-100);border-bottom:none}.euim-header-details--primary .euim-header-details__title,.euim-header-details--primary .euim-header-details__meta{color:var(--eui-base-color-white)}.euim-header-details__title{font:var(--eui-base-font-m);margin-bottom:var(--eui-base-spacing-2xs);color:var(--eui-base-color-grey-100)}.euim-header-details__meta{color:var(--eui-base-color-grey-75);font:var(--eui-base-font-s)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-base-spacing-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimHeaderDetailsComponent, selector: "euim-header-details", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-base-spacing-m);display:block;text-align:center;background-color:var(--eui-base-color-grey-5);border-bottom:1px solid var(--eui-base-color-grey-20)}.euim-header-details--primary{background-color:var(--eui-base-color-primary-100);border-bottom:none}.euim-header-details--primary .euim-header-details__title,.euim-header-details--primary .euim-header-details__meta{color:var(--eui-base-color-white)}.euim-header-details__title{font:var(--eui-base-font-m);margin-bottom:var(--eui-base-spacing-2xs);color:var(--eui-base-color-grey-100)}.euim-header-details__meta{color:var(--eui-base-color-grey-75);font:var(--eui-base-font-s)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-base-spacing-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimHeaderDetailsComponent, decorators: [{
             type: Component,
@@ -1713,7 +1049,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimPrimary',
                                 'color',
                             ],
                         },
@@ -1774,7 +1109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$b = [
     EuimHeaderDetailsComponent,
     EuimHeaderDetailsTitleDirective,
     EuimHeaderDetailsMetaDirective,
@@ -1794,110 +1129,6 @@ class EuimHeaderDetailsModule {
             IonicModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimHeaderDetailsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        ...COMPONENTS$c,
-                    ],
-                    declarations: [
-                        ...COMPONENTS$c,
-                    ],
-                }]
-        }] });
-
-/**
-*  @deprecated It was removed in v16. Use {@link euim-slider-info-screen} instead.
-*/
-class EuimInfoScreenComponent {
-    constructor() {
-        this.className = 'euim-info-screen';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimInfoScreenComponent, selector: "euim-info-screen", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{@eui-font (3xl);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-info-screen__title+.euim-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-info-screen__sub-title+.euim-info-screen__content,title+.euim-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-info-screen', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-info-screen__title{@eui-font (3xl);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-info-screen__title+.euim-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-info-screen__sub-title+.euim-info-screen__content,title+.euim-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimInfoScreenContentDirective {
-    constructor() {
-        this.className = 'euim-info-screen__content';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimInfoScreenContentDirective, selector: "[euimInfoScreenContent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimInfoScreenContent]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimInfoScreenTitleDirective {
-    constructor() {
-        this.className = 'euim-info-screen__title';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimInfoScreenTitleDirective, selector: "[euimInfoScreenTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimInfoScreenTitle]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimInfoScreenSubTitleDirective {
-    constructor() {
-        this.className = 'euim-info-screen__sub-title';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimInfoScreenSubTitleDirective, selector: "[euimInfoScreenSubTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenSubTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimInfoScreenSubTitle]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENTS$b = [
-    EuimInfoScreenComponent,
-    EuimInfoScreenTitleDirective,
-    EuimInfoScreenContentDirective,
-    EuimInfoScreenSubTitleDirective,
-];
-class EuimInfoScreenModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenModule, declarations: [EuimInfoScreenComponent,
-            EuimInfoScreenTitleDirective,
-            EuimInfoScreenContentDirective,
-            EuimInfoScreenSubTitleDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimInfoScreenComponent,
-            EuimInfoScreenTitleDirective,
-            EuimInfoScreenContentDirective,
-            EuimInfoScreenSubTitleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimInfoScreenModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1926,7 +1157,7 @@ class EuimBadgeComponent {
         ].join(' ').trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimBadgeComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimBadgeComponent, selector: "euim-badge", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimDanger", "euimDanger", "euimWarning", "euimWarning", "euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimDefault", "euimDefault", "euimPositionTopEnd", "euimPositionTopEnd", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);color:var(--eui-base-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;box-sizing:border-box;letter-spacing:normal}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button::part(native){overflow:visible}ion-button .euim-badge--position-top-end{position:absolute;left:12px;top:-12px}.euim-badge--info{background:var(--eui-base-color-info-100)}.euim-badge--success{background:var(--eui-base-color-success-100)}.euim-badge--warning{background:var(--eui-base-color-warning-100)}.euim-badge--danger{background:var(--eui-base-color-danger-100)}.euim-badge--default{background:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimBadgeComponent, selector: "euim-badge", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPositionTopEnd", "euimPositionTopEnd", "euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);color:var(--eui-base-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;box-sizing:border-box;letter-spacing:normal}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-s));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-s));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-xs));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-2xs));left:var(--eui-base-spacing-s)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-base-font-size-2xl)}.euim-badge--info{background:var(--eui-base-color-info-100)}.euim-badge--success{background:var(--eui-base-color-success-100)}.euim-badge--warning{background:var(--eui-base-color-warning-100)}.euim-badge--danger{background:var(--eui-base-color-danger-100)}.euim-badge--default{background:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-100)}.euim-badge--size-s{min-width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);padding:0 var(--eui-base-spacing-2xs);font-size:var(--eui-base-font-size-xs)!important;line-height:var(--eui-base-font-size-m)!important}.euim-badge--size-m{min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));padding:calc(var(--eui-base-spacing-2xs) / 2) calc(var(--eui-base-spacing-s) / 2);font-size:var(--eui-base-font-size-xs)!important;line-height:var(--eui-base-font-size-m)!important}.euim-badge--size-l{height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimBadgeComponent, decorators: [{
             type: Component,
@@ -1934,16 +1165,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimDanger',
-                                'euimWarning',
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimDefault',
                                 'euimPositionTopEnd',
+                                'euimSizeM',
+                                'euimSizeS',
+                                'euimSizeL',
                                 'color',
                             ],
                         },
-                    ], template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);color:var(--eui-base-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;box-sizing:border-box;letter-spacing:normal}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button::part(native){overflow:visible}ion-button .euim-badge--position-top-end{position:absolute;left:12px;top:-12px}.euim-badge--info{background:var(--eui-base-color-info-100)}.euim-badge--success{background:var(--eui-base-color-success-100)}.euim-badge--warning{background:var(--eui-base-color-warning-100)}.euim-badge--danger{background:var(--eui-base-color-danger-100)}.euim-badge--default{background:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-100)}\n"] }]
+                    ], template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);color:var(--eui-base-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;box-sizing:border-box;letter-spacing:normal}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-s));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-s));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-xs));left:var(--eui-base-spacing-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-base-spacing-2xs));left:var(--eui-base-spacing-s)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-base-font-size-2xl)}.euim-badge--info{background:var(--eui-base-color-info-100)}.euim-badge--success{background:var(--eui-base-color-success-100)}.euim-badge--warning{background:var(--eui-base-color-warning-100)}.euim-badge--danger{background:var(--eui-base-color-danger-100)}.euim-badge--default{background:var(--eui-base-color-grey-20);color:var(--eui-base-color-grey-100)}.euim-badge--size-s{min-width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);padding:0 var(--eui-base-spacing-2xs);font-size:var(--eui-base-font-size-xs)!important;line-height:var(--eui-base-font-size-m)!important}.euim-badge--size-m{min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));padding:calc(var(--eui-base-spacing-2xs) / 2) calc(var(--eui-base-spacing-s) / 2);font-size:var(--eui-base-font-size-xs)!important;line-height:var(--eui-base-font-size-m)!important}.euim-badge--size-l{height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);font-size:var(--eui-base-font-size-s)!important;line-height:var(--eui-base-font-size-m)!important}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1974,16 +1203,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
 
 class EuimMessageComponent {
     get icon() {
-        if (this.baseStatesDirective.euimWarning) {
+        if (this.baseStatesDirective.color === 'warning') {
             return 'alert-circle';
         }
-        if (this.baseStatesDirective.euimDanger) {
+        if (this.baseStatesDirective.color === 'danger') {
             return 'close-circle';
         }
-        if (this.baseStatesDirective.euimSuccess) {
+        if (this.baseStatesDirective.color === 'success') {
             return 'checkmark-circle';
         }
-        if (this.baseStatesDirective.euimInfo || !this.baseStatesDirective.euimWarning && !this.baseStatesDirective.euimDanger && !this.baseStatesDirective.euimSuccess && !this.baseStatesDirective.euimInfo) {
+        if (this.baseStatesDirective.color === 'info' || (this.baseStatesDirective.color !== 'warning' && this.baseStatesDirective.color !== 'danger' && this.baseStatesDirective.color !== 'success' && this.baseStatesDirective.color !== 'info')) {
             return 'information-circle';
         }
     }
@@ -1996,14 +1225,14 @@ class EuimMessageComponent {
     getCssClasses() {
         return [
             this.baseStatesDirective.getCssClasses('euim-message'),
-            !this.baseStatesDirective.euimWarning &&
-                !this.baseStatesDirective.euimDanger &&
-                !this.baseStatesDirective.euimSuccess &&
-                !this.baseStatesDirective.euimInfo ? 'euim-message--info' : '',
+            this.baseStatesDirective.color !== 'warning' &&
+                this.baseStatesDirective.color !== 'danger' &&
+                this.baseStatesDirective.color !== 'success' &&
+                this.baseStatesDirective.color !== 'info' ? 'euim-message--info' : '',
         ].join(' ');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMessageComponent, selector: "euim-message", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimVariant", "euimVariant", "color", "color", "variant", "variant"] }], ngImport: i0, template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-base-spacing-m)}.euim-message__wrappericon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-message__wrapper{margin-left:var(--eui-base-spacing-xs)}.euim-message--danger{border-color:var(--eui-base-color-danger-100)}.euim-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-message--info{border-color:var(--eui-base-color-info-100)}.euim-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-message--success{border-color:var(--eui-base-color-success-100)}.euim-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-message--warning{border-color:var(--eui-base-color-warning-100)}.euim-message--warning ion-icon{color:var(--eui-base-color-warning-100)}.euim-message-title{display:flex;align-items:center;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;padding:0;margin:0 0 var(--eui-base-spacing-xs)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMessageComponent, selector: "euim-message", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-base-spacing-m)}.euim-message__wrappericon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-message__wrapper{margin-left:var(--eui-base-spacing-xs)}.euim-message--danger{border-color:var(--eui-base-color-danger-100)}.euim-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-message--info{border-color:var(--eui-base-color-info-100)}.euim-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-message--success{border-color:var(--eui-base-color-success-100)}.euim-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-message--warning{border-color:var(--eui-base-color-warning-100)}.euim-message--warning ion-icon{color:var(--eui-base-color-warning-100)}.euim-message-title{display:flex;align-items:center;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;padding:0;margin:0 0 var(--eui-base-spacing-xs)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMessageComponent, decorators: [{
             type: Component,
@@ -2011,13 +1240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimWarning',
-                                'euimDanger',
-                                'euimVariant',
                                 'color',
-                                'variant',
                             ],
                         },
                     ], template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-base-spacing-m)}.euim-message__wrappericon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-message__wrapper{margin-left:var(--eui-base-spacing-xs)}.euim-message--danger{border-color:var(--eui-base-color-danger-100)}.euim-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-message--info{border-color:var(--eui-base-color-info-100)}.euim-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-message--success{border-color:var(--eui-base-color-success-100)}.euim-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-message--warning{border-color:var(--eui-base-color-warning-100)}.euim-message--warning ion-icon{color:var(--eui-base-color-warning-100)}.euim-message-title{display:flex;align-items:center;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;padding:0;margin:0 0 var(--eui-base-spacing-xs)}\n"] }]
@@ -2069,177 +1292,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
-class EuimStepperChangeEvent {
-    constructor(currentStep) {
-        this.currentStep = currentStep;
-    }
-}
-class EuimStepperComponent {
-    constructor() {
-        this.currentStep = 1;
-        this.stepsCount = 5;
-        this.isPreviousDisabled = true;
-        this.isNextDisabled = false;
-        this.previous = new EventEmitter();
-        this.next = new EventEmitter();
-    }
-    onPrevious() {
-        if (this.currentStep > 1) {
-            this.currentStep -= 1;
-        }
-        this.updateActionsState();
-        this.previous.emit(new EuimStepperChangeEvent(this.currentStep));
-    }
-    onNext() {
-        if (this.currentStep < this.stepsCount) {
-            this.currentStep += 1;
-        }
-        this.updateActionsState();
-        this.next.emit(new EuimStepperChangeEvent(this.currentStep));
-    }
-    updateActionsState() {
-        this.isPreviousDisabled = this.currentStep <= 1;
-        this.isNextDisabled = this.currentStep >= this.stepsCount;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimStepperComponent, selector: "euim-stepper", inputs: { currentStep: "currentStep", stepsCount: "stepsCount", isPreviousDisabled: "isPreviousDisabled", isNextDisabled: "isNextDisabled" }, outputs: { previous: "previous", next: "next" }, ngImport: i0, template: "<ion-footer>\n    <ion-footer fill=\"clear\">\n        <ion-toolbar color=\"light\">\n            <ion-row class=\"ion-align-items-center\">\n                <ion-col class=\"ion-text-start\">\n                    <ion-button\n                        (click)=\"onPrevious()\"\n                        [disabled]=\"isPreviousDisabled\"\n                        fill=\"clear\"\n                        size=\"small\">\n                        <ion-icon name=\"chevron-back-outline\" slot=\"start\"></ion-icon>\n                        <ion-label>{{ 'euim.stepper.previous' | translate }}</ion-label>\n                    </ion-button>\n                </ion-col>\n\n                <ion-col class=\"ion-text-center\">\n                    <ion-label color=\"primary\">\n                        {{ currentStep }} {{ 'euim.stepper.of' | translate }} {{stepsCount }}\n                    </ion-label>\n                </ion-col>\n\n                <ion-col class=\"ion-text-end\">\n                    <ion-button\n                        (click)=\"onNext()\"\n                        [disabled]=\"isNextDisabled\"\n                        fill=\"clear\"\n                        size=\"small\">\n                        <ion-label>{{ 'euim.stepper.next' | translate }}</ion-label>\n                        <ion-icon name=\"chevron-forward-outline\" slot=\"end\"></ion-icon>\n                    </ion-button>\n                </ion-col>\n            </ion-row>\n        </ion-toolbar>\n    </ion-footer>\n</ion-footer>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    coerceBoolean
-], EuimStepperComponent.prototype, "isPreviousDisabled", void 0);
-__decorate([
-    coerceBoolean
-], EuimStepperComponent.prototype, "isNextDisabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n    <ion-footer fill=\"clear\">\n        <ion-toolbar color=\"light\">\n            <ion-row class=\"ion-align-items-center\">\n                <ion-col class=\"ion-text-start\">\n                    <ion-button\n                        (click)=\"onPrevious()\"\n                        [disabled]=\"isPreviousDisabled\"\n                        fill=\"clear\"\n                        size=\"small\">\n                        <ion-icon name=\"chevron-back-outline\" slot=\"start\"></ion-icon>\n                        <ion-label>{{ 'euim.stepper.previous' | translate }}</ion-label>\n                    </ion-button>\n                </ion-col>\n\n                <ion-col class=\"ion-text-center\">\n                    <ion-label color=\"primary\">\n                        {{ currentStep }} {{ 'euim.stepper.of' | translate }} {{stepsCount }}\n                    </ion-label>\n                </ion-col>\n\n                <ion-col class=\"ion-text-end\">\n                    <ion-button\n                        (click)=\"onNext()\"\n                        [disabled]=\"isNextDisabled\"\n                        fill=\"clear\"\n                        size=\"small\">\n                        <ion-label>{{ 'euim.stepper.next' | translate }}</ion-label>\n                        <ion-icon name=\"chevron-forward-outline\" slot=\"end\"></ion-icon>\n                    </ion-button>\n                </ion-col>\n            </ion-row>\n        </ion-toolbar>\n    </ion-footer>\n</ion-footer>\n" }]
-        }], propDecorators: { currentStep: [{
-                type: Input
-            }], stepsCount: [{
-                type: Input
-            }], isPreviousDisabled: [{
-                type: Input
-            }], isNextDisabled: [{
-                type: Input
-            }], previous: [{
-                type: Output
-            }], next: [{
-                type: Output
-            }] } });
-
-class EuimStepperComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponentModule, declarations: [EuimStepperComponent], imports: [CommonModule,
-            IonicModule,
-            TranslateModule], exports: [EuimStepperComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponentModule, imports: [CommonModule,
-            IonicModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimStepperComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                        TranslateModule,
-                    ],
-                    exports: [
-                        EuimStepperComponent,
-                    ],
-                    declarations: [
-                        EuimStepperComponent,
-                    ],
-                }]
-        }] });
-
-class EuimFieldSetComponent {
-    constructor() {
-        this.className = 'euim-fieldset';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimFieldSetComponent, selector: "euim-fieldset", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div>\n    <div class=\"euim-fieldset__header\">\n        <ng-content select=\"euim-fieldset-legend\"></ng-content>\n        <ng-content select=\"euim-fieldset-actions\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-fieldset{display:block}.euim-fieldset__header{display:flex;align-items:center;justify-content:space-between;padding-top:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-20);width:100%}.euim-fieldset-legend{display:flex;align-items:center;@eui-font (xl);margin-bottom:var(--eui-base-spacing-xs)}.euim-fieldset-legend ion-icon{margin-right:var(--eui-base-spacing-xs)}.euim-fieldset-actions{display:flex;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n    <div class=\"euim-fieldset__header\">\n        <ng-content select=\"euim-fieldset-legend\"></ng-content>\n        <ng-content select=\"euim-fieldset-actions\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-fieldset{display:block}.euim-fieldset__header{display:flex;align-items:center;justify-content:space-between;padding-top:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-20);width:100%}.euim-fieldset-legend{display:flex;align-items:center;@eui-font (xl);margin-bottom:var(--eui-base-spacing-xs)}.euim-fieldset-legend ion-icon{margin-right:var(--eui-base-spacing-xs)}.euim-fieldset-actions{display:flex;align-items:center}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimFieldsetLegendComponent {
-    constructor() {
-        this.className = 'euim-fieldset-legend';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimFieldsetLegendComponent, selector: "euim-fieldset-legend", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetLegendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-fieldset-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimFieldsetActionsComponent {
-    constructor() {
-        this.className = 'euim-fieldset-actions';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimFieldsetActionsComponent, selector: "euim-fieldset-actions", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-fieldset-actions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENTS$9 = [
-    EuimFieldSetComponent,
-    EuimFieldsetLegendComponent,
-    EuimFieldsetActionsComponent,
-];
-class EuimFieldsetModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetModule, declarations: [EuimFieldSetComponent,
-            EuimFieldsetLegendComponent,
-            EuimFieldsetActionsComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimFieldSetComponent,
-            EuimFieldsetLegendComponent,
-            EuimFieldsetActionsComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimFieldsetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        ...COMPONENTS$9,
-                    ],
-                    declarations: [
-                        ...COMPONENTS$9,
-                    ],
-                }]
-        }] });
-
 class EuimSpinnerComponent {
     constructor() {
         this.className = 'euim-spinner';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSpinnerComponent, selector: "euim-spinner", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-base-spacing-2xl);color:var(--eui-base-color-primary)}.euim-spinner--size-2xs{font-size:var(--eui-base-font-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-base-font-size-xs)}.euim-spinner--size-s{font-size:var(--eui-base-font-size-s)}.euim-spinner--size-m{font-size:var(--eui-base-font-size-m)}.euim-spinner--size-l{font-size:var(--eui-base-font-size-l)}.euim-spinner--size-xl{font-size:var(--eui-base-font-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-base-font-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-base-font-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-base-font-size-4xl)}.euim-spinner--primary{color:var(--eui-base-color-primary-100)}.euim-spinner--secondary{color:var(--eui-base-color-grey-50)}.euim-spinner--info{color:var(--eui-base-color-info-100)}.euim-spinner--success{color:var(--eui-base-color-success-100)}.euim-spinner--warning{color:var(--eui-base-color-warning-100)}.euim-spinner--danger{color:var(--eui-base-color-danger-100)}.euim-spinner--accent{color:var(--eui-base-color-accent-100)}.euim-spinner-message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;display:flex;justify-content:center;color:var(--eui-base-color-grey-75)}.euim-spinner-description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);display:flex;justify-content:center;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSpinnerComponent, selector: "euim-spinner", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-base-spacing-2xl);color:var(--eui-base-color-primary-100)}.euim-spinner--size-2xs{font-size:var(--eui-base-font-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-base-font-size-xs)}.euim-spinner--size-s{font-size:var(--eui-base-font-size-s)}.euim-spinner--size-m{font-size:var(--eui-base-font-size-m)}.euim-spinner--size-l{font-size:var(--eui-base-font-size-l)}.euim-spinner--size-xl{font-size:var(--eui-base-font-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-base-font-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-base-font-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-base-font-size-4xl)}.euim-spinner--primary{color:var(--eui-base-color-primary-100)}.euim-spinner--secondary{color:var(--eui-base-color-grey-50)}.euim-spinner--info{color:var(--eui-base-color-info-100)}.euim-spinner--success{color:var(--eui-base-color-success-100)}.euim-spinner--warning{color:var(--eui-base-color-warning-100)}.euim-spinner--danger{color:var(--eui-base-color-danger-100)}.euim-spinner--accent{color:var(--eui-base-color-accent-100)}.euim-spinner-message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;display:flex;justify-content:center;color:var(--eui-base-color-grey-75)}.euim-spinner-description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);display:flex;justify-content:center;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-spinner', encapsulation: ViewEncapsulation.None, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-base-spacing-2xl);color:var(--eui-base-color-primary)}.euim-spinner--size-2xs{font-size:var(--eui-base-font-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-base-font-size-xs)}.euim-spinner--size-s{font-size:var(--eui-base-font-size-s)}.euim-spinner--size-m{font-size:var(--eui-base-font-size-m)}.euim-spinner--size-l{font-size:var(--eui-base-font-size-l)}.euim-spinner--size-xl{font-size:var(--eui-base-font-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-base-font-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-base-font-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-base-font-size-4xl)}.euim-spinner--primary{color:var(--eui-base-color-primary-100)}.euim-spinner--secondary{color:var(--eui-base-color-grey-50)}.euim-spinner--info{color:var(--eui-base-color-info-100)}.euim-spinner--success{color:var(--eui-base-color-success-100)}.euim-spinner--warning{color:var(--eui-base-color-warning-100)}.euim-spinner--danger{color:var(--eui-base-color-danger-100)}.euim-spinner--accent{color:var(--eui-base-color-accent-100)}.euim-spinner-message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;display:flex;justify-content:center;color:var(--eui-base-color-grey-75)}.euim-spinner-description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);display:flex;justify-content:center;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs)}\n"] }]
+            args: [{ selector: 'euim-spinner', encapsulation: ViewEncapsulation.None, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-base-spacing-2xl);color:var(--eui-base-color-primary-100)}.euim-spinner--size-2xs{font-size:var(--eui-base-font-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-base-font-size-xs)}.euim-spinner--size-s{font-size:var(--eui-base-font-size-s)}.euim-spinner--size-m{font-size:var(--eui-base-font-size-m)}.euim-spinner--size-l{font-size:var(--eui-base-font-size-l)}.euim-spinner--size-xl{font-size:var(--eui-base-font-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-base-font-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-base-font-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-base-font-size-4xl)}.euim-spinner--primary{color:var(--eui-base-color-primary-100)}.euim-spinner--secondary{color:var(--eui-base-color-grey-50)}.euim-spinner--info{color:var(--eui-base-color-info-100)}.euim-spinner--success{color:var(--eui-base-color-success-100)}.euim-spinner--warning{color:var(--eui-base-color-warning-100)}.euim-spinner--danger{color:var(--eui-base-color-danger-100)}.euim-spinner--accent{color:var(--eui-base-color-accent-100)}.euim-spinner-message{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;display:flex;justify-content:center;color:var(--eui-base-color-grey-75)}.euim-spinner-description{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);display:flex;justify-content:center;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs)}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -2336,11 +1398,8 @@ class EuimMediaHeaderComponent {
         ].join(' ').trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMediaHeaderComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: "euimNoGradient" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-base-spacing-m);color:#fff;padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-m)}.euim-media-header__text h4{margin-bottom:var(--eui-base-spacing-2xs);@eui-font (xl);font-weight:700;margin-top:0}.euim-media-header__text div{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__text .euim-media-header__title{@eui-font (xl);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--eui-base-color-black) 100%);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{@eui-font (xl);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: ["euimNoGradient", "euimNoGradient", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div class=\"euim-media-header__gradient\">\n  </div>\n}\n<div class=\"euim-media-header__text\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-base-spacing-m);color:#fff;padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-m)}.euim-media-header__text .euim-media-header__title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimMediaHeaderComponent.prototype, "euimNoGradient", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMediaHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
@@ -2352,9 +1411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                                 'euimSizeL',
                             ],
                         },
-                    ], template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n<div *ngIf=\"!euimNoGradient\" class=\"euim-media-header__gradient\">\n</div>\n<div class=\"euim-media-header__text\">\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-base-spacing-m);color:#fff;padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-m)}.euim-media-header__text h4{margin-bottom:var(--eui-base-spacing-2xs);@eui-font (xl);font-weight:700;margin-top:0}.euim-media-header__text div{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__text .euim-media-header__title{@eui-font (xl);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--eui-base-color-black) 100%);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{@eui-font (xl);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"] }]
+                    ], template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div class=\"euim-media-header__gradient\">\n  </div>\n}\n<div class=\"euim-media-header__text\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-base-spacing-m);color:#fff;padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-m)}.euim-media-header__text .euim-media-header__title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-white)}.euim-media-header__sub-title{color:var(--eui-base-color-white);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-media-header__size-s{height:calc(var(--eui-base-spacing-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-base-spacing-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-base-spacing-m) * 25)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimNoGradient: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -2411,7 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$8 = [
+const COMPONENTS$9 = [
     EuimMediaHeaderComponent,
     EuimMediaHeaderTitleDirective,
     EuimMediaHeaderSubTitleDirective,
@@ -2438,10 +1498,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$8,
+                        ...COMPONENTS$9,
                     ],
                     declarations: [
-                        ...COMPONENTS$8,
+                        ...COMPONENTS$9,
                     ],
                 }]
         }] });
@@ -2459,7 +1519,7 @@ class EuimDataSummaryColLabelDirective {
         ].join(' ').trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDataSummaryColLabelDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDataSummaryColLabelDirective, decorators: [{
             type: Directive,
@@ -2469,7 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimPrimary',
+                                'color',
                             ],
                         },
                     ],
@@ -2519,18 +1579,18 @@ class EuimDataSummaryComponent {
     ngAfterContentInit() {
         if (this.euimDataSummaryColLabelComponent
             && this.euimDataSummaryColValueComponent) {
-            if (this.baseStatesDirective.euimPrimary) {
+            if (this.baseStatesDirective.color) {
                 this.euimDataSummaryColLabelComponent.forEach(item => {
-                    item.baseStatesDirective.euimPrimary = true;
+                    item.baseStatesDirective.color = 'primary';
                 });
                 this.euimDataSummaryColValueComponent.forEach(item => {
-                    item.baseStatesDirective.euimPrimary = true;
+                    item.baseStatesDirective.color = 'primary';
                 });
             }
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDataSummaryComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimDataSummaryComponent, selector: "euim-data-summary", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimDataSummaryColLabelComponent", predicate: EuimDataSummaryColLabelDirective, descendants: true }, { propertyName: "euimDataSummaryColValueComponent", predicate: EuimDataSummaryColValueDirective, descendants: true }], hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-top:1px solid var(--eui-base-color-grey-20)}.euim-data-summary--primary{background-color:var(--eui-base-color-primary-100);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-base-color-grey-20)}.euim-data-summary__col-label{color:var(--eui-base-color-grey-100);font:var(--eui-base-font-m);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs)}.euim-data-summary__col-label--primary{color:var(--eui-base-color-white)}.euim-data-summary__col-value{color:var(--eui-base-color-grey-75);font:var(--eui-base-font-s)}.euim-data-summary__col-value--primary{color:var(--eui-base-color-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimDataSummaryComponent, selector: "euim-data-summary", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimDataSummaryColLabelComponent", predicate: EuimDataSummaryColLabelDirective, descendants: true }, { propertyName: "euimDataSummaryColValueComponent", predicate: EuimDataSummaryColValueDirective, descendants: true }], hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-top:1px solid var(--eui-base-color-grey-20)}.euim-data-summary--primary{background-color:var(--eui-base-color-primary-100);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-base-color-grey-20)}.euim-data-summary__col-label{color:var(--eui-base-color-grey-100);font:var(--eui-base-font-m);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-2xs)}.euim-data-summary__col-label--primary{color:var(--eui-base-color-white)}.euim-data-summary__col-value{color:var(--eui-base-color-grey-75);font:var(--eui-base-font-s)}.euim-data-summary__col-value--primary{color:var(--eui-base-color-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDataSummaryComponent, decorators: [{
             type: Component,
@@ -2538,7 +1598,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimPrimary',
                                 'color',
                             ],
                         },
@@ -2572,7 +1631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$7 = [
+const COMPONENTS$8 = [
     EuimDataSummaryComponent,
     EuimDataSummaryColComponent,
     EuimDataSummaryColLabelDirective,
@@ -2599,10 +1658,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$7,
+                        ...COMPONENTS$8,
                     ],
                     declarations: [
-                        ...COMPONENTS$7,
+                        ...COMPONENTS$8,
                     ],
                 }]
         }] });
@@ -2612,11 +1671,11 @@ class EuimAvatarComponent {
         this.className = 'euim-avatar';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAvatarComponent, selector: "euim-avatar", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-base-color-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAvatarComponent, selector: "euim-avatar", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-base-color-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-base-color-white)}\n"] }]
+            args: [{ selector: 'euim-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-base-color-white)}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -2656,7 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$6 = [
+const COMPONENTS$7 = [
     EuimAvatarComponent,
     EuimAvatarSubIconDirective,
     EuimAvatarMainIconDirective,
@@ -2680,10 +1739,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$6,
+                        ...COMPONENTS$7,
                     ],
                     declarations: [
-                        ...COMPONENTS$6,
+                        ...COMPONENTS$7,
                     ],
                 }]
         }] });
@@ -2704,29 +1763,8 @@ class EuimAlertMessageComponent {
         }
     }
     setVariants() {
-        if (this.baseStatesDirective.euimInfo) {
-            this._variant = 'info';
-        }
-        else if (this.baseStatesDirective.euimSuccess) {
-            this._variant = 'success';
-        }
-        else if (this.baseStatesDirective.euimDanger) {
-            this._variant = 'danger';
-        }
-        else if (this.baseStatesDirective.euimPrimary) {
-            this._variant = 'primary';
-        }
-        else if (this.baseStatesDirective.euimDark) {
-            this._variant = 'dark';
-        }
-        else if (this.baseStatesDirective.euimWarning) {
-            this._variant = 'warning';
-        }
-        else if (this.baseStatesDirective.euimLight) {
-            this._variant = 'light';
-        }
-        else if (this.baseStatesDirective.euimClear) {
-            this._variant = 'clear';
+        if (this.baseStatesDirective.color) {
+            this._variant = this.baseStatesDirective.color;
         }
     }
     get icon() {
@@ -2769,50 +1807,35 @@ class EuimAlertMessageComponent {
         this.euimClose.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAlertMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: { euimLabelTruncate: "euimLabelTruncate", hasIcon: "hasIcon", isCloseable: "isCloseable" }, outputs: { euimClose: "euimClose" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimPrimary", "euimPrimary", "euimDark", "euimDark", "euimLight", "euimLight", "euimClear", "euimClear", "euimVariant", "euimVariant", "color", "color"] }], ngImport: i0, template: "<div class=\"euim-alert-message__wrappericon\" *ngIf=\"hasIcon && isVisible\">\n    <ion-icon *ngIf=\"hasIcon\" [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-alert-message__wrapper\" *ngIf=\"isVisible\">\n    <div class=\"slotStart\">\n        <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n        <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n</div>\n\n<a *ngIf=\"isCloseable && isVisible\" role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n</a>\n", styles: [".euim-alert-message{width:100%;display:flex;align-items:center;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-xs);padding-bottom:var(--eui-base-spacing-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-base-spacing-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-base-color-danger-120);background:var(--eui-base-color-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-base-color-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--info{color:var(--eui-base-color-info-120);background:var(--eui-base-color-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-base-color-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--success{color:var(--eui-base-color-success-120);background:var(--eui-base-color-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-base-color-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--warning{color:var(--eui-base-color-warning-140);background:var(--eui-base-color-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-base-color-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-base-color-warning-120);color:var(--eui-base-color-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--dark{color:var(--eui-base-color-white);background:var(--eui-base-color-grey-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-alert-message--primary{color:var(--eui-base-color-white);background:var(--eui-base-color-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-5)}.euim-alert-message--light{color:var(--eui-base-color-grey-100);background:var(--eui-base-color-grey-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-100)}.euim-alert-message--default{color:var(--eui-base-color-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-base-color-black)}.euim-alert-message--clear{color:var(--eui-base-color-grey-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-base-spacing-xs);padding-left:var(--eui-base-spacing-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: { euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute], hasIcon: ["hasIcon", "hasIcon", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { euimClose: "euimClose" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{width:100%;display:flex;align-items:center;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-xs);padding-bottom:var(--eui-base-spacing-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-base-spacing-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-base-color-danger-120);background:var(--eui-base-color-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-base-color-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--info{color:var(--eui-base-color-info-120);background:var(--eui-base-color-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-base-color-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--success{color:var(--eui-base-color-success-120);background:var(--eui-base-color-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-base-color-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--warning{color:var(--eui-base-color-warning-140);background:var(--eui-base-color-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-base-color-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-base-color-warning-120);color:var(--eui-base-color-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--dark{color:var(--eui-base-color-white);background:var(--eui-base-color-grey-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-alert-message--primary{color:var(--eui-base-color-white);background:var(--eui-base-color-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-5)}.euim-alert-message--light{color:var(--eui-base-color-grey-100);background:var(--eui-base-color-grey-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-100)}.euim-alert-message--default{color:var(--eui-base-color-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-base-color-black)}.euim-alert-message--clear{color:var(--eui-base-color-grey-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-base-spacing-xs);padding-left:var(--eui-base-spacing-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-base-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimAlertMessageComponent.prototype, "euimLabelTruncate", void 0);
-__decorate([
-    coerceBoolean
-], EuimAlertMessageComponent.prototype, "hasIcon", void 0);
-__decorate([
-    coerceBoolean
-], EuimAlertMessageComponent.prototype, "isCloseable", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAlertMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-alert-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimInfo',
-                                'euimSuccess',
-                                'euimWarning',
-                                'euimDanger',
-                                'euimPrimary',
-                                'euimDark',
-                                'euimLight',
-                                'euimClear',
-                                'euimVariant',
                                 'color',
                             ],
                         },
-                    ], template: "<div class=\"euim-alert-message__wrappericon\" *ngIf=\"hasIcon && isVisible\">\n    <ion-icon *ngIf=\"hasIcon\" [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-alert-message__wrapper\" *ngIf=\"isVisible\">\n    <div class=\"slotStart\">\n        <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n        <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n</div>\n\n<a *ngIf=\"isCloseable && isVisible\" role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n</a>\n", styles: [".euim-alert-message{width:100%;display:flex;align-items:center;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-xs);padding-bottom:var(--eui-base-spacing-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-base-spacing-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-base-color-danger-120);background:var(--eui-base-color-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-base-color-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--info{color:var(--eui-base-color-info-120);background:var(--eui-base-color-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-base-color-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--success{color:var(--eui-base-color-success-120);background:var(--eui-base-color-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-base-color-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--warning{color:var(--eui-base-color-warning-140);background:var(--eui-base-color-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-base-color-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-base-color-warning-120);color:var(--eui-base-color-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--dark{color:var(--eui-base-color-white);background:var(--eui-base-color-grey-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-alert-message--primary{color:var(--eui-base-color-white);background:var(--eui-base-color-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-5)}.euim-alert-message--light{color:var(--eui-base-color-grey-100);background:var(--eui-base-color-grey-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-100)}.euim-alert-message--default{color:var(--eui-base-color-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-base-color-black)}.euim-alert-message--clear{color:var(--eui-base-color-grey-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-base-spacing-xs);padding-left:var(--eui-base-spacing-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-base-spacing-2xs)}\n"] }]
+                    ], template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{width:100%;display:flex;align-items:center;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-xs);padding-bottom:var(--eui-base-spacing-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-base-spacing-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);margin-inline-end:var(--eui-base-spacing-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-base-color-danger-120);background:var(--eui-base-color-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-base-color-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-base-color-danger-100)}.euim-alert-message--info{color:var(--eui-base-color-info-120);background:var(--eui-base-color-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-base-color-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-base-color-info-100)}.euim-alert-message--success{color:var(--eui-base-color-success-120);background:var(--eui-base-color-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-base-color-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-base-color-success-100)}.euim-alert-message--warning{color:var(--eui-base-color-warning-140);background:var(--eui-base-color-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-base-color-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-base-color-warning-120);color:var(--eui-base-color-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-base-color-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-base-color-warning-120)}.euim-alert-message--dark{color:var(--eui-base-color-white);background:var(--eui-base-color-grey-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-alert-message--primary{color:var(--eui-base-color-white);background:var(--eui-base-color-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-base-color-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-5)}.euim-alert-message--light{color:var(--eui-base-color-grey-100);background:var(--eui-base-color-grey-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-100)}.euim-alert-message--default{color:var(--eui-base-color-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-base-color-black)}.euim-alert-message--clear{color:var(--eui-base-color-grey-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-base-color-grey-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-base-spacing-xs);padding-left:var(--eui-base-spacing-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-base-spacing-2xs)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimClose: [{
                 type: Output
             }], euimLabelTruncate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hasIcon: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], isCloseable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENTS$5 = [
+const COMPONENTS$6 = [
     EuimAlertMessageComponent,
 ];
 class EuimAlertMessageModule {
@@ -2833,231 +1856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         EuimLabelModule,
                     ],
                     exports: [
-                        ...COMPONENTS$5,
-                    ],
-                    declarations: [
-                        ...COMPONENTS$5,
-                    ],
-                }]
-        }] });
-
-/**
-*  @deprecated It was removed in v16. Use {@link euim-slider-info-screen} instead.
-*/
-class EuimSliderComponent {
-    constructor(renderer, gestureCtrl, sliderElement, cdr) {
-        this.renderer = renderer;
-        this.gestureCtrl = gestureCtrl;
-        this.sliderElement = sliderElement;
-        this.cdr = cdr;
-        this.actionClicked = new EventEmitter();
-        this.lastStepActionClicked = new EventEmitter();
-        this.leftBtnActionClicked = new EventEmitter();
-        this.actionBtnNames = {
-            actionBtnName: 'Skip',
-            lastStepActionBtnName: 'Done',
-            leftActionBtnName: 'Previous',
-        };
-        this.isLastItemReached = false;
-        this.isLeftBtnVisible = false;
-        this.isPreviousBtn = false;
-        this.isNextBtn = false;
-        this.isRightBtnVisible = true;
-        this.className = 'euim-slider';
-        this.slidesArray = [];
-        this.currentSlide = 0;
-        this.startX = 0;
-    }
-    onResize(event) {
-        this.setSliderStyles();
-    }
-    ngAfterViewInit() {
-        this.setSliderStyles();
-    }
-    ngOnInit() {
-        const gesture = this.gestureCtrl.create({
-            el: this.sliderElement.nativeElement,
-            gestureName: 'on-gesture-end',
-            onEnd: (event) => {
-                this.handleTouchEnd(event);
-                this.isPreviousButtonVisible();
-                this.isNextButtonVisible();
-            },
-        });
-        gesture.enable();
-        this.isPreviousButtonVisible();
-        this.isNextButtonVisible();
-    }
-    setSliderStyles() {
-        const windowHeight = window.innerHeight;
-        const paginationHeight = 60;
-        const slideHeight = windowHeight - paginationHeight;
-        this.slidesArray = this.slides.nativeElement.children;
-        this.renderer.setStyle(this.slides.nativeElement, 'width', `${this.slidesArray.length * 100}%`);
-        for (const slide of this.slidesArray) {
-            this.renderer.setStyle(slide, 'width', `${100 / this.slidesArray.length}%`);
-            this.renderer.setStyle(slide, 'maxHeight', `${slideHeight}px`);
-            this.renderer.setStyle(slide, 'overflow', 'auto');
-        }
-        // to calculate the case when there is only one slide
-        if (!this.isLastItemReached && this.slidesArray.length < 2) {
-            this.isLastItemReached = true;
-        }
-    }
-    isPreviousButtonVisible() {
-        this.isLeftBtnVisible = this.currentSlide > 0 && this.isPreviousBtn;
-    }
-    isNextButtonVisible() {
-        this.isRightBtnVisible = this.currentSlide !== this.slidesArray.length - 1 && this.isNextBtn;
-    }
-    handleTouchEnd(e) {
-        const difference = -e.deltaX;
-        if (difference > 0 && this.currentSlide < this.slidesArray.length - 1) {
-            this.currentSlide++;
-            this.isLastItemReached = false;
-        }
-        else if (difference < 0 && this.currentSlide > 0) {
-            this.currentSlide--;
-            this.isLastItemReached = false;
-        }
-        this.isLastItemReached = this.currentSlide === this.slidesArray.length - 1;
-        this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
-        this.cdr.detectChanges();
-    }
-    goToSlide(index) {
-        this.currentSlide = index;
-        this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
-        this.isPreviousButtonVisible();
-        this.isNextButtonVisible();
-    }
-    goToPreviousSlide() {
-        if (this.currentSlide > 0) {
-            this.currentSlide--;
-            this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
-        }
-        this.isPreviousButtonVisible();
-        this.isNextButtonVisible();
-    }
-    goToNextSlide() {
-        if (this.currentSlide < this.slidesArray.length - 1) {
-            this.currentSlide++;
-            this.renderer.setStyle(this.slides.nativeElement, 'transform', `translateX(-${this.currentSlide * 100 / this.slidesArray.length}%)`);
-        }
-        this.isPreviousButtonVisible();
-        this.isNextButtonVisible();
-    }
-    onAction(event) {
-        if (this.isNextBtn) {
-            this.goToNextSlide();
-            return;
-        }
-        this.actionClicked.emit(event);
-    }
-    onLastStepAction(event) {
-        this.lastStepActionClicked.emit(event);
-    }
-    onLeftBtnAction(event) {
-        if (this.isPreviousBtn) {
-            this.goToPreviousSlide();
-            return;
-        }
-        this.leftBtnActionClicked.emit(event);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i1.GestureController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSliderComponent, selector: "euim-slider", inputs: { actionBtnNames: "actionBtnNames", isLeftBtnVisible: "isLeftBtnVisible", isPreviousBtn: "isPreviousBtn", isNextBtn: "isNextBtn" }, outputs: { actionClicked: "actionClicked", lastStepActionClicked: "lastStepActionClicked", leftBtnActionClicked: "leftBtnActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider__slider-container\">\n    <div #slides class=\"euim-slider__slides\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"euim-slider__pagination-container\">\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=isLeftBtnVisible class=\"euim-slider__action-button euim-slider__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftActionBtnName}}</ion-button>\n        <div class=\"euim-slider__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                  [ngClass]=\"{ 'active': currentSlide === i }\"\n                  class=\"euim-slider__span\"></span>\n        </div>\n        <ion-button (click)=\"onAction($event)\" *ngIf=\"!isLastItemReached && !isNextBtn || isNextBtn && isRightBtnVisible\" class=\"euim-slider__action-button euim-slider__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.actionBtnName}}</ion-button>\n        <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n    </div>\n</div>\n", styles: [".euim-slider__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider__slides{display:flex;transition:all .5s ease;width:100%}.euim-slider__slide{width:100%}.euim-slider__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider__pagination{display:flex}.euim-slider__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider__span.active{background-color:var(--eui-base-color-primary)}.euim-slider__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
-}
-__decorate([
-    coerceBoolean
-], EuimSliderComponent.prototype, "isLastItemReached", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderComponent.prototype, "isLeftBtnVisible", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderComponent.prototype, "isPreviousBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderComponent.prototype, "isNextBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderComponent.prototype, "isRightBtnVisible", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-slider', template: "<div #sliderElement class=\"euim-slider__slider-container\">\n    <div #slides class=\"euim-slider__slides\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"euim-slider__pagination-container\">\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=isLeftBtnVisible class=\"euim-slider__action-button euim-slider__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftActionBtnName}}</ion-button>\n        <div class=\"euim-slider__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                  [ngClass]=\"{ 'active': currentSlide === i }\"\n                  class=\"euim-slider__span\"></span>\n        </div>\n        <ion-button (click)=\"onAction($event)\" *ngIf=\"!isLastItemReached && !isNextBtn || isNextBtn && isRightBtnVisible\" class=\"euim-slider__action-button euim-slider__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.actionBtnName}}</ion-button>\n        <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider__action-button euim-slider__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n    </div>\n</div>\n", styles: [".euim-slider__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider__slides{display:flex;transition:all .5s ease;width:100%}.euim-slider__slide{width:100%}.euim-slider__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider__pagination{display:flex}.euim-slider__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider__span.active{background-color:var(--eui-base-color-primary)}.euim-slider__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { slides: [{
-                type: ViewChild,
-                args: ['slides', { static: true }]
-            }], actionClicked: [{
-                type: Output
-            }], lastStepActionClicked: [{
-                type: Output
-            }], leftBtnActionClicked: [{
-                type: Output
-            }], actionBtnNames: [{
-                type: Input
-            }], isLastItemReached: [], isLeftBtnVisible: [{
-                type: Input
-            }], isPreviousBtn: [{
-                type: Input
-            }], isNextBtn: [{
-                type: Input
-            }], isRightBtnVisible: [], className: [{
-                type: HostBinding,
-                args: ['class']
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class EuimSlideComponent {
-    constructor() {
-        this.className = 'euim-slider__slide';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSlideComponent, selector: "euim-slide", host: { properties: { "class": "this.className" } }, ngImport: i0, template: `
-        <div #slide>
-            <ng-content></ng-content>
-        </div>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSlideComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'euim-slide',
-                    template: `
-        <div #slide>
-            <ng-content></ng-content>
-        </div>`,
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENTS$4 = [
-    EuimSliderComponent,
-    EuimSlideComponent,
-];
-class EuimSliderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderModule, declarations: [EuimSliderComponent,
-            EuimSlideComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimSliderComponent,
-            EuimSlideComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        ...COMPONENTS$4,
+                        ...COMPONENTS$6,
                     ],
                     declarations: [
-                        ...COMPONENTS$4,
+                        ...COMPONENTS$6,
                     ],
                 }]
         }] });
@@ -3186,32 +1988,11 @@ class EuimSliderInfoScreenComponent {
         this.leftActionClicked.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderInfoScreenComponent, deps: [{ token: i0.Renderer2 }, { token: i1.GestureController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSliderInfoScreenComponent, selector: "euim-slider-info-screen", inputs: { isCarousel: "isCarousel", showLeftBtn: "showLeftBtn", showRightBtn: "showRightBtn", isPreviousBtn: "isPreviousBtn", isNextBtn: "isNextBtn", actionBtnNames: "actionBtnNames" }, outputs: { rightActionClicked: "rightActionClicked", lastStepActionClicked: "lastStepActionClicked", leftActionClicked: "leftActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"euim-slider-info-screen__pagination-container\" *ngIf=\"showLeftBtn || showRightBtn || isCarousel || isLastItemReached\" >\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=\"showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=showLeftBtnAsPrevious class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n        <div *ngIf=isCarousel class=\"euim-slider-info-screen__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                  [ngClass]=\"{ 'active': currentSlide === i }\"\n                  class=\"euim-slider-info-screen__span\"></span>\n        </div>\n        <ion-button (click)=\"onRightBtnAction($event)\" *ngIf=\"!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.rightBtnName}}</ion-button>\n        <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n    </div>\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-base-color-primary)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}.euim-slider-info-screen__title{@eui-font (3xl);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-slider-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-slider-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimSliderInfoScreenComponent, selector: "euim-slider-info-screen", inputs: { isCarousel: ["isCarousel", "isCarousel", booleanAttribute], showLeftBtn: ["showLeftBtn", "showLeftBtn", booleanAttribute], showRightBtn: ["showRightBtn", "showRightBtn", booleanAttribute], isPreviousBtn: ["isPreviousBtn", "isPreviousBtn", booleanAttribute], isNextBtn: ["isNextBtn", "isNextBtn", booleanAttribute], actionBtnNames: "actionBtnNames" }, outputs: { rightActionClicked: "rightActionClicked", lastStepActionClicked: "lastStepActionClicked", leftActionClicked: "leftActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n                <ion-button (click)=\"onLeftBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n                <ion-button (click)=\"onLeftBtnAction($event)\"  class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (isCarousel){\n                <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                      [ngClass]=\"{ 'active': currentSlide === i }\"\n                      class=\"euim-slider-info-screen__span\"></span>\n                </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n                <ion-button (click)=\"onRightBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.rightBtnName}}</ion-button>\n            }\n\n            @if (isLastItemReached) {\n                <ion-button (click)=\"onLastStepAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n            }\n        </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary-100)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-base-color-primary-100)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-base-color-primary-100);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}.euim-slider-info-screen__title{font:normal normal 400 1.75rem/2rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-slider-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-slider-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "isLastItemReached", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "isCarousel", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "showLeftBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "showRightBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "isPreviousBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "isNextBtn", void 0);
-__decorate([
-    coerceBoolean
-], EuimSliderInfoScreenComponent.prototype, "showLeftBtnAsPrevious", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSliderInfoScreenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-slider-info-screen', encapsulation: ViewEncapsulation.None, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"euim-slider-info-screen__pagination-container\" *ngIf=\"showLeftBtn || showRightBtn || isCarousel || isLastItemReached\" >\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=\"showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n        <ion-button (click)=\"onLeftBtnAction($event)\" *ngIf=showLeftBtnAsPrevious class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                    fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n        <div *ngIf=isCarousel class=\"euim-slider-info-screen__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                  [ngClass]=\"{ 'active': currentSlide === i }\"\n                  class=\"euim-slider-info-screen__span\"></span>\n        </div>\n        <ion-button (click)=\"onRightBtnAction($event)\" *ngIf=\"!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.rightBtnName}}</ion-button>\n        <ion-button (click)=\"onLastStepAction($event)\" *ngIf=isLastItemReached class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                    fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n    </div>\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-base-color-primary)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-base-color-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}.euim-slider-info-screen__title{@eui-font (3xl);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-slider-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-slider-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);@eui-font (l);}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"] }]
+            args: [{ selector: 'euim-slider-info-screen', encapsulation: ViewEncapsulation.None, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n                <ion-button (click)=\"onLeftBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n                <ion-button (click)=\"onLeftBtnAction($event)\"  class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (isCarousel){\n                <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                      [ngClass]=\"{ 'active': currentSlide === i }\"\n                      class=\"euim-slider-info-screen__span\"></span>\n                </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n                <ion-button (click)=\"onRightBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.rightBtnName}}</ion-button>\n            }\n\n            @if (isLastItemReached) {\n                <ion-button (click)=\"onLastStepAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.lastStepActionBtnName}}</ion-button>\n            }\n        </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);height:calc(var(--eui-base-spacing-xs) + var(--eui-base-spacing-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-base-color-primary-100)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-base-spacing-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-base-color-primary-100)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-base-color-primary-100);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-base-spacing-m) 0 var(--eui-base-spacing-xs);left:0}.euim-slider-info-screen__title{font:normal normal 400 1.75rem/2rem var(--eui-base-font-family);font-weight:700;color:var(--eui-base-color-grey-100);margin-top:var(--eui-base-spacing-l);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l)}.euim-slider-info-screen__sub-title{color:var(--eui-base-color-grey-75);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-slider-info-screen__content{color:var(--eui-base-color-grey-100);padding-left:var(--eui-base-spacing-l);padding-right:var(--eui-base-spacing-l);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-base-spacing-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-base-spacing-m)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { slides: [{
                 type: ViewChild,
                 args: ['slides', { static: true }]
@@ -3221,19 +2002,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Output
             }], leftActionClicked: [{
                 type: Output
-            }], isLastItemReached: [], isCarousel: [{
-                type: Input
+            }], isCarousel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showLeftBtn: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showRightBtn: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], isPreviousBtn: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], isNextBtn: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], actionBtnNames: [{
                 type: Input
-            }], showLeftBtnAsPrevious: [], className: [{
+            }], className: [{
                 type: HostBinding,
                 args: ['class']
             }], onResize: [{
@@ -3316,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$3 = [
+const COMPONENTS$5 = [
     EuimSliderInfoScreenComponent,
     EuimSlideInfoScreenComponent,
     EuimSliderInfoScreenContentDirective,
@@ -3346,10 +2132,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$3,
+                        ...COMPONENTS$5,
                     ],
                     declarations: [
-                        ...COMPONENTS$3,
+                        ...COMPONENTS$5,
                     ],
                 }]
         }] });
@@ -3396,15 +2182,13 @@ class EuimChipSelectorItemDirective {
     constructor(renderer, el) {
         this.renderer = renderer;
         this.el = el;
+        this.clickEventAdded = false;
         this.euimChipSelectorAll = false;
         this.className = 'euim-chip-selector__item';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChipSelectorItemDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: "id", euimChipSelectorAll: "euimChipSelectorAll" }, host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: "id", euimChipSelectorAll: ["euimChipSelectorAll", "euimChipSelectorAll", booleanAttribute] }, host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-__decorate([
-    coerceBoolean
-], EuimChipSelectorItemDirective.prototype, "euimChipSelectorAll", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChipSelectorItemDirective, decorators: [{
             type: Directive,
             args: [{
@@ -3413,7 +2197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], euimChipSelectorAll: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], className: [{
                 type: HostBinding,
                 args: ['class']
@@ -3422,21 +2207,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
 class EuimChipSelectorComponent {
     constructor() {
         this.backgroundColor = 'primary';
-        /**
-         * @deprecated Will be removed in v17.
-         * Please use {@link color} property instead
-         */
-        this.chipColor = 'white';
         this.color = 'white';
         this.chipSelectedColor = 'white';
         this.chipFill = 'default';
         this.sourceData = [];
         this.selectedChips = [];
         this.isMultiSelectionMode = false;
+        this.euimKeepSelection = false;
+        this.hasSearchbar = false;
         this.filterData = new EventEmitter();
         this.clickItems = new EventEmitter();
         this.filteredData = [...this.sourceData];
         this.filterConditions = [];
+        this.searchInput = '';
+        this.isEmitEvent = true;
+        this.clickEventHandled = false;
     }
     get cssClasses() {
         return this.getCssClasses();
@@ -3445,14 +2230,36 @@ class EuimChipSelectorComponent {
         this.setCssItemClasses();
     }
     ngAfterContentInit() {
+        this.subscribeToChanges();
         this.updateChipsAndFilterDataAfterInit();
         this.updateChipsAndFilters();
     }
+    ngOnDestroy() {
+        if (this.euimChipSelectorItemSubscription) {
+            this.euimChipSelectorItemSubscription.unsubscribe();
+        }
+    }
+    subscribeToChanges() {
+        if (this.euimChipSelectorItemSubscription) {
+            this.euimChipSelectorItemSubscription.unsubscribe();
+        }
+        this.euimChipSelectorItemSubscription = this.euimChipSelectorItemComponent.changes.subscribe(() => {
+            this.setCssItemClasses();
+            this.updateChipsAndFilterDataAfterInit(this.isEmitEvent = false);
+            this.updateChipsAndFilters();
+        });
+    }
     ngOnChanges(changes) {
         if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0 &&
             changes.selectedChips.currentValue && changes.selectedChips.currentValue.length === 1 &&
-            changes.selectedChips.currentValue.every((value, index) => value === '0')) {
+            changes.selectedChips.currentValue.every((value) => value === '0')) {
             this.clearFiltersAndSelectAll();
+            return;
+        }
+        if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0 &&
+            changes.selectedChips.currentValue && !changes.selectedChips.currentValue.every((value) => value === '0')) {
+            this.updateChipsAndFilterDataAfterInit();
+            return;
         }
     }
     getCssClasses() {
@@ -3470,36 +2277,51 @@ class EuimChipSelectorComponent {
         });
     }
     getCssItemClasses() {
-        let currentColor = 'white';
-        // if color property is different from default one (white) than use chip color
-        // means using the deprecated chipColor property,
-        // needed as in V18 will be removed chipColor
-        if (this.chipColor === 'white' && this.color != 'white') {
-            currentColor = this.color;
-        }
-        else {
-            currentColor = this.chipColor;
-        }
         return [
             this.chipFill ? `euim-chip-selector__item--fill-${this.chipFill}` : '',
-            currentColor ? `euim-chip-selector__item--color-${currentColor}` : '',
+            this.color ? `euim-chip-selector__item--color-${this.color}` : '',
         ].join(' ');
     }
     updateChipsAndFilters() {
         this.euimChipSelectorItemComponent.forEach(chip => {
-            chip.el.nativeElement.addEventListener('click', () => {
-                this.euimChipSelectorItemComponent.forEach(chip => {
-                    if (!this.isMultiSelectionMode || this.isMultiSelectionMode && chip.euimChipSelectorAll) {
-                        this.removeSelectedStyles(chip.el.nativeElement);
+            if (!chip.clickEventAdded) {
+                chip.el.nativeElement.addEventListener('click', () => {
+                    if (!this.clickEventHandled) {
+                        this.clickEventHandled = true;
+                        this.euimChipSelectorItemComponent.forEach(innerChip => {
+                            if (!this.isMultiSelectionMode || (this.isMultiSelectionMode && innerChip.euimChipSelectorAll)) {
+                                this.removeSelectedStyles(innerChip.el.nativeElement);
+                            }
+                        });
+                        this.addSelectedStyles(chip.el.nativeElement);
+                        this.onFilterChange(chip.id?.toString(), chip.euimChipSelectorAll, chip.el.nativeElement);
+                        this.filterData.emit(this.filteredData);
+                        this.clickItems.emit(this.selectedChips);
+                        this.clickEventHandled = false;
                     }
                 });
-                this.addSelectedStyles(chip.el.nativeElement);
-                this.onFilterChange(chip.id.toString(), chip.euimChipSelectorAll, chip.el.nativeElement);
-                this.filterData.emit(this.filteredData);
-                this.clickItems.emit(this.selectedChips);
-            });
+                chip.clickEventAdded = true;
+            }
         });
     }
+    applyFilter(filterCondition, isAllFilter, multipleFilterConditions) {
+        let filteredData = [...this.sourceData];
+        if (isAllFilter) {
+            filteredData = this.filterBySearch(filteredData, this.searchInput);
+        }
+        else {
+            if (this.isMultiSelectionMode || multipleFilterConditions.length > 0) {
+                filteredData = this.filterByMultipleConditions(filteredData, multipleFilterConditions);
+            }
+            else {
+                filteredData = this.filterByCondition(filteredData, filterCondition);
+            }
+            if (this.euimKeepSelection && this.searchInput !== '') {
+                filteredData = this.filterBySearch(filteredData, this.searchInput);
+            }
+        }
+        this.filteredData = filteredData;
+    }
     clearFiltersAndSelectAll() {
         this.clearAllSelections();
         let isFirstElement = true;
@@ -3512,16 +2334,14 @@ class EuimChipSelectorComponent {
         this.filterData.emit(this.sourceData);
         this.clickItems.emit(this.selectedChips);
     }
-    updateChipsAndFilterDataAfterInit() {
+    updateChipsAndFilterDataAfterInit(isEmitEvent) {
         this.euimChipSelectorItemComponent.forEach(chip => {
             this.removeSelectedStyles(chip.el.nativeElement);
             if (chip.id === undefined && chip.euimChipSelectorAll) {
                 chip.id = 0;
             }
-        });
-        this.euimChipSelectorItemComponent.forEach((chip) => {
             const chipId = chip.id;
-            if (chipId && this.selectedChips.includes(chipId)) {
+            if (chipId && this.selectedChips.includes(chipId.toString())) {
                 this.addSelectedStyles(chip.el.nativeElement);
                 this.applyFilter(null, chip.euimChipSelectorAll, this.selectedChips);
                 this.filterData.emit(this.filteredData);
@@ -3530,10 +2350,11 @@ class EuimChipSelectorComponent {
                 this.addSelectedStyles(chip.el.nativeElement);
                 this.selectedChips = ['0'];
                 this.filterData.emit(this.sourceData);
-                this.clickItems.emit(this.selectedChips);
             }
         });
-        this.clickItems.emit(this.selectedChips);
+        if (isEmitEvent !== false) {
+            this.clickItems.emit(this.selectedChips);
+        }
     }
     onFilterChange(filterCondition, isFilterAll, item) {
         if (this.isMultiSelectionMode) {
@@ -3545,18 +2366,19 @@ class EuimChipSelectorComponent {
         this.applyFilter(filterCondition, isFilterAll, this.filterConditions);
         this.filterData.emit(this.filteredData);
     }
-    applyFilter(filterCondition, isAllFilter, multipleFilterConditions) {
-        if (isAllFilter && multipleFilterConditions.length === 0) {
-            this.filteredData = [...this.sourceData];
-            return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleChange(event) {
+        this.searchInput = event.detail.value.toLowerCase();
+        let filteredData = [...this.sourceData];
+        if (this.euimKeepSelection) {
+            filteredData = this.filterByChips(filteredData, this.selectedChips);
+            filteredData = this.filterBySearch(filteredData, this.searchInput);
         }
-        if (this.isMultiSelectionMode || multipleFilterConditions.length > 0) {
-            this.filteredData = [...this.sourceData].filter(item => multipleFilterConditions.includes(item.filterId));
-            return;
+        else {
+            filteredData = this.filterBySearch(filteredData, this.searchInput);
         }
-        this.filteredData = [...this.sourceData].filter(item => {
-            return item.filterId === filterCondition;
-        });
+        this.filteredData = filteredData;
+        this.filterData.emit(this.filteredData);
     }
     addSelectedStyles(item) {
         item.classList.add(`euim-chip-selector__item-selected--color-${this.chipSelectedColor}`);
@@ -3599,19 +2421,32 @@ class EuimChipSelectorComponent {
         this.filterConditions = [];
         this.selectedChips = ['0'];
     }
+    filterBySearch(data, searchInput) {
+        if (!searchInput)
+            return data;
+        return data.filter(obj => obj.title.toLowerCase().includes(searchInput));
+    }
+    filterByChips(data, selectedChips) {
+        if (selectedChips[0] === '0')
+            return data;
+        return data.filter(item => selectedChips.includes(item.filterId));
+    }
+    filterByCondition(data, filterCondition) {
+        return data.filter(item => item.filterId === filterCondition);
+    }
+    filterByMultipleConditions(data, multipleFilterConditions) {
+        if (multipleFilterConditions.length === 0)
+            return data;
+        return data.filter(item => multipleFilterConditions.includes(item.filterId));
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChipSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", chipColor: "chipColor", color: "color", chipSelectedColor: "chipSelectedColor", chipFill: "chipFill", sourceData: "sourceData", selectedChips: "selectedChips", isMultiSelectionMode: "isMultiSelectionMode" }, outputs: { filterData: "filterData", clickItems: "clickItems" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimChipSelectorItemComponent", predicate: EuimChipSelectorItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<euim-scroller-x>\n    <ng-content></ng-content>\n</euim-scroller-x>\n", styles: [".euim-chip-selector{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) var(--eui-base-spacing-xs);display:flex;align-items:center}.euim-chip-selector ion-chip{margin:0 var(--eui-base-spacing-xs) 0 0}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-base-color-success-25);border-color:var(--eui-base-color-success-25);color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-base-color-warning-25);border-color:var(--eui-base-color-warning-25);color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-base-color-danger-25);border-color:var(--eui-base-color-danger-25);color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-base-color-primary-25);border-color:var(--eui-base-color-primary-25);color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-primary-50)}.euim-chip-selector__item--color-info{background-color:var(--eui-base-color-info-25);border-color:var(--eui-base-color-info-25);color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-base-color-grey-100);border-color:var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-base-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-grey-50)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-base-color-white)!important;border-color:var(--eui-base-color-white)!important;color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-base-color-grey-100)!important;border-color:var(--eui-base-color-grey-100)!important;color:var(--eui-base-color-white)!important}\n"], dependencies: [{ kind: "component", type: EuimScrollerXComponent, selector: "euim-scroller-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", color: "color", chipSelectedColor: "chipSelectedColor", chipFill: "chipFill", sourceData: "sourceData", selectedChips: "selectedChips", isMultiSelectionMode: ["isMultiSelectionMode", "isMultiSelectionMode", booleanAttribute], euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute], hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { filterData: "filterData", clickItems: "clickItems" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimChipSelectorItemComponent", predicate: EuimChipSelectorItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasSearchbar) {\n  <ion-searchbar (ionChange)=\"handleChange($event)\"\n  class=\"euim-chip-selector__searchbar\"></ion-searchbar>\n}\n<euim-scroller-x>\n  <ng-content></ng-content>\n</euim-scroller-x>\n\n", styles: [".euim-chip-selector{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) var(--eui-base-spacing-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:0 var(--eui-base-spacing-xs) 0 0}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-base-spacing-s)}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-base-color-success-25);border-color:var(--eui-base-color-success-25);color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-base-color-warning-25);border-color:var(--eui-base-color-warning-25);color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-base-color-danger-25);border-color:var(--eui-base-color-danger-25);color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-base-color-primary-25);border-color:var(--eui-base-color-primary-25);color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-primary-50)}.euim-chip-selector__item--color-info{background-color:var(--eui-base-color-info-25);border-color:var(--eui-base-color-info-25);color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-base-color-grey-100);border-color:var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-base-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-grey-50)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-base-color-white)!important;border-color:var(--eui-base-color-white)!important;color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-base-color-grey-100)!important;border-color:var(--eui-base-color-grey-100)!important;color:var(--eui-base-color-white)!important}\n"], dependencies: [{ kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimScrollerXComponent, selector: "euim-scroller-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimChipSelectorComponent.prototype, "isMultiSelectionMode", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChipSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-chip-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<euim-scroller-x>\n    <ng-content></ng-content>\n</euim-scroller-x>\n", styles: [".euim-chip-selector{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) var(--eui-base-spacing-xs);display:flex;align-items:center}.euim-chip-selector ion-chip{margin:0 var(--eui-base-spacing-xs) 0 0}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-base-color-success-25);border-color:var(--eui-base-color-success-25);color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-base-color-warning-25);border-color:var(--eui-base-color-warning-25);color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-base-color-danger-25);border-color:var(--eui-base-color-danger-25);color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-base-color-primary-25);border-color:var(--eui-base-color-primary-25);color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-primary-50)}.euim-chip-selector__item--color-info{background-color:var(--eui-base-color-info-25);border-color:var(--eui-base-color-info-25);color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-base-color-grey-100);border-color:var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-base-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-grey-50)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-base-color-white)!important;border-color:var(--eui-base-color-white)!important;color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-base-color-grey-100)!important;border-color:var(--eui-base-color-grey-100)!important;color:var(--eui-base-color-white)!important}\n"] }]
+            args: [{ selector: 'euim-chip-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasSearchbar) {\n  <ion-searchbar (ionChange)=\"handleChange($event)\"\n  class=\"euim-chip-selector__searchbar\"></ion-searchbar>\n}\n<euim-scroller-x>\n  <ng-content></ng-content>\n</euim-scroller-x>\n\n", styles: [".euim-chip-selector{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) var(--eui-base-spacing-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:0 var(--eui-base-spacing-xs) 0 0}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-base-spacing-s)}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-base-color-success-25);border-color:var(--eui-base-color-success-25);color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-base-color-warning-25);border-color:var(--eui-base-color-warning-25);color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-base-color-danger-25);border-color:var(--eui-base-color-danger-25);color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-base-color-primary-25);border-color:var(--eui-base-color-primary-25);color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-primary-50)}.euim-chip-selector__item--color-info{background-color:var(--eui-base-color-info-25);border-color:var(--eui-base-color-info-25);color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-base-color-grey-100);border-color:var(--eui-base-color-grey-100);color:var(--eui-base-color-white)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-base-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-base-color-grey-50)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-base-color-white)!important;border-color:var(--eui-base-color-white)!important;color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-base-color-grey-100)!important;border-color:var(--eui-base-color-grey-100)!important;color:var(--eui-base-color-white)!important}\n"] }]
         }], propDecorators: { backgroundColor: [{
                 type: Input
-            }], chipColor: [{
-                type: Input
             }], color: [{
                 type: Input
             }], chipSelectedColor: [{
@@ -3623,7 +2458,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], selectedChips: [{
                 type: Input
             }], isMultiSelectionMode: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euimKeepSelection: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasSearchbar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], filterData: [{
                 type: Output
             }], clickItems: [{
@@ -3690,23 +2532,8 @@ class EuimSkeletonListItemComponent {
             .trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonListItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: { hasAvatar: "hasAvatar", hasTitle: "hasTitle", hasSubtitle: "hasSubtitle", hasMetaLine: "hasMetaLine", isAnimated: "isAnimated", avatarType: "avatarType", separator: "separator", titleWidth: "titleWidth", subTitleWidth: "subTitleWidth", metaLineWidth: "metaLineWidth" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XL", "euimSize2XL", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-item button [lines]=\"separator\">\n    <ion-thumbnail *ngIf=\"hasAvatar\" slot=\"start\">\n        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n    <ion-label>\n        <ion-skeleton-text *ngIf=\"hasTitle\" [animated]=\"isAnimated\"\n            [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n        <ion-skeleton-text *ngIf=\"hasSubtitle\" [animated]=\"isAnimated\"\n            [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n        <ion-skeleton-text *ngIf=\"hasMetaLine\" [animated]=\"isAnimated\"\n            [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-base-spacing-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonThumbnail, selector: "ion-thumbnail" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: { hasAvatar: ["hasAvatar", "hasAvatar", booleanAttribute], hasTitle: ["hasTitle", "hasTitle", booleanAttribute], hasSubtitle: ["hasSubtitle", "hasSubtitle", booleanAttribute], hasMetaLine: ["hasMetaLine", "hasMetaLine", booleanAttribute], isAnimated: ["isAnimated", "isAnimated", booleanAttribute], avatarType: "avatarType", separator: "separator", titleWidth: "titleWidth", subTitleWidth: "subTitleWidth", metaLineWidth: "metaLineWidth" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XL", "euimSize2XL", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-base-spacing-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"], dependencies: [{ kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonThumbnail, selector: "ion-thumbnail" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimSkeletonListItemComponent.prototype, "hasAvatar", void 0);
-__decorate([
-    coerceBoolean
-], EuimSkeletonListItemComponent.prototype, "hasTitle", void 0);
-__decorate([
-    coerceBoolean
-], EuimSkeletonListItemComponent.prototype, "hasSubtitle", void 0);
-__decorate([
-    coerceBoolean
-], EuimSkeletonListItemComponent.prototype, "hasMetaLine", void 0);
-__decorate([
-    coerceBoolean
-], EuimSkeletonListItemComponent.prototype, "isAnimated", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-skeleton-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
@@ -3717,20 +2544,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                                 'euimSizeL',
                             ],
                         },
-                    ], template: "<ion-item button [lines]=\"separator\">\n    <ion-thumbnail *ngIf=\"hasAvatar\" slot=\"start\">\n        <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n    <ion-label>\n        <ion-skeleton-text *ngIf=\"hasTitle\" [animated]=\"isAnimated\"\n            [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n        <ion-skeleton-text *ngIf=\"hasSubtitle\" [animated]=\"isAnimated\"\n            [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n        <ion-skeleton-text *ngIf=\"hasMetaLine\" [animated]=\"isAnimated\"\n            [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-base-spacing-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"] }]
+                    ], template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-base-spacing-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], hasAvatar: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hasTitle: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hasSubtitle: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hasMetaLine: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], isAnimated: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], avatarType: [{
                 type: Input
             }], separator: [{
@@ -3743,7 +2575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$2 = [
+const COMPONENTS$4 = [
     EuimSkeletonListItemComponent,
 ];
 class EuimSkeletonListItemModule {
@@ -3761,10 +2593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$2,
+                        ...COMPONENTS$4,
                     ],
                     declarations: [
-                        ...COMPONENTS$2,
+                        ...COMPONENTS$4,
                     ],
                 }]
         }] });
@@ -3794,11 +2626,11 @@ class EuimSkeletonListComponent {
         return Array.from({ length: this.items });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimSkeletonListComponent, selector: "euim-skeleton-list", inputs: { items: "items" }, queries: [{ propertyName: "skeletonListItem", first: true, predicate: EuimSkeletonListItemComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of itemsArray\">\n    <euim-skeleton-list-item *ngIf=\"!skeletonListItem\"></euim-skeleton-list-item>\n    <ng-container *ngIf=\"skeletonListItem\">\n        <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n    </ng-container>\n</ng-container>\n\n", dependencies: [{ kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: ["hasAvatar", "hasTitle", "hasSubtitle", "hasMetaLine", "isAnimated", "avatarType", "separator", "titleWidth", "subTitleWidth", "metaLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimSkeletonListComponent, selector: "euim-skeleton-list", inputs: { items: "items" }, queries: [{ propertyName: "skeletonListItem", first: true, predicate: EuimSkeletonListItemComponent, descendants: true }], ngImport: i0, template: "@for (item of itemsArray; track item) {\n  @if (!skeletonListItem) {\n    <euim-skeleton-list-item></euim-skeleton-list-item>\n  }\n  @if (skeletonListItem) {\n    <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n  }\n}\n\n", dependencies: [{ kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: ["hasAvatar", "hasTitle", "hasSubtitle", "hasMetaLine", "isAnimated", "avatarType", "separator", "titleWidth", "subTitleWidth", "metaLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of itemsArray\">\n    <euim-skeleton-list-item *ngIf=\"!skeletonListItem\"></euim-skeleton-list-item>\n    <ng-container *ngIf=\"skeletonListItem\">\n        <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n    </ng-container>\n</ng-container>\n\n" }]
+            args: [{ selector: 'euim-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of itemsArray; track item) {\n  @if (!skeletonListItem) {\n    <euim-skeleton-list-item></euim-skeleton-list-item>\n  }\n  @if (skeletonListItem) {\n    <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n  }\n}\n\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], skeletonListItem: [{
@@ -3806,7 +2638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: [EuimSkeletonListItemComponent]
             }] } });
 
-const COMPONENTS$1 = [
+const COMPONENTS$3 = [
     EuimSkeletonListComponent,
 ];
 class EuimSkeletonListModule {
@@ -3827,10 +2659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         EuimSkeletonListItemModule,
                     ],
                     exports: [
-                        ...COMPONENTS$1,
+                        ...COMPONENTS$3,
                     ],
                     declarations: [
-                        ...COMPONENTS$1,
+                        ...COMPONENTS$3,
                     ],
                 }]
         }] });
@@ -3894,14 +2726,11 @@ class EuimMultiselectComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMultiselectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle", euimKeepSelection: "euimKeepSelection" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<ion-header>\n    <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n        <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n        <ion-toolbar color=\"light\">\n            <ng-content select=\"euim-multiselect-filter\"></ng-content>\n        </ion-toolbar>\n    </ion-toolbar>\n</ion-header>\n\n<ng-container *ngIf=\"currentDataProvider?.length > 0\">\n    <ng-content select=\"euim-multiselect-list\">\n\n    </ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"currentDataProvider?.length === 0\">\n    <ng-content select=\"euim-empty-list-placeholder\">\n    </ng-content>\n</ng-container>\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle", euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute] }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimMultiselectComponent.prototype, "euimKeepSelection", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-header>\n    <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n        <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n        <ion-toolbar color=\"light\">\n            <ng-content select=\"euim-multiselect-filter\"></ng-content>\n        </ion-toolbar>\n    </ion-toolbar>\n</ion-header>\n\n<ng-container *ngIf=\"currentDataProvider?.length > 0\">\n    <ng-content select=\"euim-multiselect-list\">\n\n    </ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"currentDataProvider?.length === 0\">\n    <ng-content select=\"euim-empty-list-placeholder\">\n    </ng-content>\n</ng-container>\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"] }]
+            args: [{ selector: 'euim-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -3910,7 +2739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], toolbarTitle: [{
                 type: Input
             }], euimKeepSelection: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class EuimMultiselectFilterComponent {
@@ -3934,11 +2764,31 @@ class EuimMultiselectFilterComponent {
             else {
                 this.multiselect.currentDataProvider =
                     this.multiselect.initialDataProvider;
+                this.applyStatusToSelectAllCheckControl();
             }
         }
         else {
             this.multiselect.currentDataProvider =
                 this.multiselect.initialDataProvider?.filter(item => this.filterByFieldsNames.some(fieldName => item[fieldName].toString().toLowerCase().includes(query)));
+            if (this.multiselect.euimKeepSelection) {
+                this.applyStatusToSelectAllCheckControl();
+            }
+        }
+    }
+    applyStatusToSelectAllCheckControl() {
+        const isSelectAll = this.multiselect.currentDataProvider?.every((item) => item.selected);
+        this.multiselect.indeterminate = !isSelectAll && this.multiselect.currentDataProvider?.some((item) => item.selected);
+        if (!this.multiselect.indeterminate) {
+            this.multiselect.selectAll = isSelectAll;
+            if (isSelectAll) {
+                this.multiselect.numberOfSelected = this.multiselect.currentDataProvider?.length;
+            }
+            else {
+                this.multiselect.numberOfSelected = 0;
+            }
+        }
+        else {
+            this.multiselect.numberOfSelected = this.multiselect.countSelectedItems();
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMultiselectFilterComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3964,15 +2814,9 @@ class EuimMultiselectAllDirective {
         this.euimMulti.indeterminate = false;
         if (event.detail.checked) {
             this.euimMulti.numberOfSelected = this.euimMulti.currentDataProvider?.length;
-            if (this.euimMulti.euimKeepSelection) {
-                this.euimMulti.initialDataProvider?.forEach((item) => (item.selected = true));
-            }
         }
         else {
             this.euimMulti.numberOfSelected = 0;
-            if (this.euimMulti.euimKeepSelection) {
-                this.euimMulti.initialDataProvider?.forEach((item) => (item.selected = false));
-            }
         }
     }
     get indeterminate() {
@@ -4104,28 +2948,26 @@ class EuimMultiselectToolbarComponent {
         this.cancel.emit(true);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMultiselectToolbarComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimMultiselectToolbarComponent, selector: "euim-multiselect-toolbar", inputs: { toolbarTitle: "toolbarTitle", euimCustomRender: "euimCustomRender" }, outputs: { cancel: "cancel", confirm: "confirm" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<euim-toolbar\n    *ngIf=\"!euimCustomRender\"\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n        {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n        <ion-button (click)=\"onConfirm()\">\n            <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n    </euim-toolbar-action-items>\n</euim-toolbar>\n<ng-content *ngIf=\"euimCustomRender\"></ng-content>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimMultiselectToolbarComponent, selector: "euim-multiselect-toolbar", inputs: { toolbarTitle: "toolbarTitle", euimCustomRender: ["euimCustomRender", "euimCustomRender", booleanAttribute] }, outputs: { cancel: "cancel", confirm: "confirm" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if (!euimCustomRender) {\n  <euim-toolbar\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n      <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n      {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n      <ion-button (click)=\"onConfirm()\">\n        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </euim-toolbar-action-items>\n  </euim-toolbar>\n}\n@if (euimCustomRender) {\n  <ng-content></ng-content>\n}\n\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    coerceBoolean
-], EuimMultiselectToolbarComponent.prototype, "euimCustomRender", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimMultiselectToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-multiselect-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<euim-toolbar\n    *ngIf=\"!euimCustomRender\"\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n        {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n        <ion-button (click)=\"onConfirm()\">\n            <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n    </euim-toolbar-action-items>\n</euim-toolbar>\n<ng-content *ngIf=\"euimCustomRender\"></ng-content>\n\n" }]
+            args: [{ selector: 'euim-multiselect-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!euimCustomRender) {\n  <euim-toolbar\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n      <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n      {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n      <ion-button (click)=\"onConfirm()\">\n        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </euim-toolbar-action-items>\n  </euim-toolbar>\n}\n@if (euimCustomRender) {\n  <ng-content></ng-content>\n}\n\n" }]
         }], ctorParameters: () => [{ type: EuimMultiselectComponent }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }], toolbarTitle: [{
                 type: Input
             }], euimCustomRender: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cancel: [{
                 type: Output
             }], confirm: [{
                 type: Output
             }] } });
 
-const COMPONENTS = [
+const COMPONENTS$2 = [
     EuimMultiselectComponent,
     EuimMultiselectFilterComponent,
     EuimMultiselectListComponent,
@@ -4175,6 +3017,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         EuimEmptyListPlaceholderModule,
                         TranslateModule,
                     ],
+                    exports: [
+                        ...COMPONENTS$2,
+                    ],
+                    declarations: [
+                        ...COMPONENTS$2,
+                    ],
+                }]
+        }] });
+
+class EuimPdfWrapperComponent {
+    constructor(alertService) {
+        this.alertService = alertService;
+        this.page = 1;
+        this.zoom = 1;
+        this.loading = true;
+        this.errorMessage = '';
+        this.showDefaultError = true;
+        setTimeout(() => {
+            if (this.showDefaultError) {
+                this.loading = false;
+                this.alertService.create({ header: 'PDF could not be loaded.' }).then();
+            }
+        }, 15000);
+    }
+    onLoaded(pdf) {
+        this.showDefaultError = false;
+        this.loading = false;
+        this.pdf = pdf;
+    }
+    onError() {
+        this.showDefaultError = false;
+        this.loading = false;
+        this.errorMessage = 'File could not be loaded.';
+    }
+    onDownload() {
+        this.pdf.getData().then((u8) => {
+            const blob = new Blob([u8.buffer], {
+                type: 'application/pdf',
+            });
+            // Create a download link
+            const downloadLink = document.createElement('a');
+            downloadLink.href = window.URL.createObjectURL(blob);
+            // dtm downloadLink.download = this.title;
+            // Append the link to the body
+            document.body.appendChild(downloadLink);
+            // Programmatically trigger a click on the link
+            downloadLink.click();
+            // Remove the link from the DOM
+            document.body.removeChild(downloadLink);
+        });
+    }
+    onZoomIn() {
+        this.zoom += 0.5;
+        this.page = 2;
+    }
+    onZoomOut() {
+        if (this.zoom > 1) {
+            this.zoom -= 0.5;
+        }
+    }
+    onResetZoom() {
+        this.zoom = 1;
+    }
+    // async onDismissModal() {
+    //     await this.modalCtrl.dismiss();
+    // }
+    nextPage() {
+        if (this.page < this.pdf.numPages) {
+            this.page++;
+        }
+    }
+    prevPage() {
+        if (this.page > 1) {
+            this.page--;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperComponent, deps: [{ token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimPdfWrapperComponent, selector: "euim-pdf-wrapper", inputs: { url: "url", page: "page" }, ngImport: i0, template: "<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>Loading PDF...</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{errorMessage}}</div>\n  }\n</div>\n\n\n<pinch-zoom>\n  <div style=\"display: block;width: 500px; height: 500px\">\n    <pdf-viewer [src]=\"url\"\n      [zoom]=\"zoom\"\n      [original-size]=\"true\"\n      [autoresize]=\"false\"\n      (after-load-complete)=\"onLoaded($event)\"\n      (error)=\"onError()\"\n      [page]=\"page\"\n    style=\"width: 100%; height: 100%\"></pdf-viewer>\n  </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"pdf-preview-modal__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!pdf\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"pdf-preview-modal__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\">\n        ZOOM\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\">\n        Prev\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\">\n        Next\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", styles: [""], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: i3.PinchZoomComponent, selector: "pinch-zoom, [pinch-zoom]", inputs: ["properties", "transition-duration", "transitionDuration", "double-tap", "doubleTap", "double-tap-scale", "doubleTapScale", "auto-zoom-out", "autoZoomOut", "limit-zoom", "limitZoom", "disabled", "disablePan", "overflow", "zoomControlScale", "disableZoomControl", "backgroundColor", "limitPan", "minPanScale", "minScale", "listeners", "wheel", "autoHeight", "wheelZoomFactor", "draggableImage"], exportAs: ["pinchZoom"] }, { kind: "component", type: EuimSpinnerComponent, selector: "euim-spinner" }, { kind: "component", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-pdf-wrapper', encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>Loading PDF...</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{errorMessage}}</div>\n  }\n</div>\n\n\n<pinch-zoom>\n  <div style=\"display: block;width: 500px; height: 500px\">\n    <pdf-viewer [src]=\"url\"\n      [zoom]=\"zoom\"\n      [original-size]=\"true\"\n      [autoresize]=\"false\"\n      (after-load-complete)=\"onLoaded($event)\"\n      (error)=\"onError()\"\n      [page]=\"page\"\n    style=\"width: 100%; height: 100%\"></pdf-viewer>\n  </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"pdf-preview-modal__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!pdf\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"pdf-preview-modal__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\">\n        ZOOM\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\">\n        Prev\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\">\n        Next\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n" }]
+        }], ctorParameters: () => [{ type: i1.AlertController }], propDecorators: { url: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }] } });
+
+const COMPONENTS$1 = [
+    EuimPdfWrapperComponent,
+];
+class EuimPdfWrapperModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperModule, declarations: [EuimPdfWrapperComponent], imports: [CommonModule,
+            IonicModule,
+            PdfViewerModule,
+            PinchZoomModule,
+            EuimSpinnerComponentModule], exports: [EuimPdfWrapperComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperModule, imports: [CommonModule,
+            IonicModule,
+            PdfViewerModule,
+            PinchZoomModule,
+            EuimSpinnerComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPdfWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                        PdfViewerModule,
+                        PinchZoomModule,
+                        EuimSpinnerComponentModule,
+                    ],
+                    exports: [
+                        ...COMPONENTS$1,
+                    ],
+                    declarations: [
+                        ...COMPONENTS$1,
+                    ],
+                }]
+        }] });
+
+class EuimChangelogComponent {
+    constructor() {
+        this.changeLogs = [];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChangelogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimChangelogComponent, selector: "euim-changelog", inputs: { changeLogs: "changeLogs" }, ngImport: i0, template: "<div class=\"euim-changelog\">\n\n    <ion-header>\n        <ion-toolbar color=\"primary\">\n            <euim-toolbar>\n                <euim-toolbar-title>Change Log</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track logItem) {\n                <ng-container>\n                    <ion-accordion value=\"about\">\n                        <ion-item button slot=\"header\" lines=\"full\" class=\"euim-changelog__expanded-border\">\n                            <ion-icon name=\"build-outline\"></ion-icon>\n                            <ion-label>\n                                <div class=\"euim-changelog__euimLabelTitle\" euimLabel euimLabelTitle><strong>{{logItem.version }}</strong></div>\n                            </ion-label>\n                        </ion-item>\n                            <ion-list slot=\"content\">\n                                <ion-item-divider>\n                                    <ion-label>New features</ion-label>\n                                </ion-item-divider>\n                                @for (feature of logItem.features; track feature) {\n                                <ion-item lines=\"none\" class=\"euim-changelog__item\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ feature }}\n                                    </div>\n                                </ion-item> }\n                                <ion-item-divider>\n                                    <ion-label>Improvements</ion-label>\n                                </ion-item-divider>\n                                @for (improvement of logItem.improvements; track improvement) {\n                                <ion-item lines=\"none\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ improvement}}\n                                    </div>\n                                </ion-item> }\n                                <ion-item-divider>\n                                    <ion-label>Bugfixes</ion-label>\n                                </ion-item-divider>\n                                @for (bugfix of logItem.bugfixes; track bugfix) {\n                                <ion-item lines=\"none\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ bugfix }}\n                                    </div>\n                                </ion-item> }\n                            </ion-list>\n                    </ion-accordion>\n                </ng-container> }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimLabelTitle{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);justify-content:space-between;margin-left:var(--eui-base-spacing-m)}.euim-changelog__bullet-point{display:inline-block;background-color:var(--eui-base-color-grey-100);width:var(--eui-base-spacing-2xs);height:var(--eui-base-spacing-2xs);border-radius:50%;margin-right:var(--eui-base-spacing-s)}.euim-changelog__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);white-space:wrap;color:var(--eui-base-color-grey-120);min-height:0px!important}\n"], dependencies: [{ kind: "component", type: i1.IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: i1.IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimChangelogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-changelog', template: "<div class=\"euim-changelog\">\n\n    <ion-header>\n        <ion-toolbar color=\"primary\">\n            <euim-toolbar>\n                <euim-toolbar-title>Change Log</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track logItem) {\n                <ng-container>\n                    <ion-accordion value=\"about\">\n                        <ion-item button slot=\"header\" lines=\"full\" class=\"euim-changelog__expanded-border\">\n                            <ion-icon name=\"build-outline\"></ion-icon>\n                            <ion-label>\n                                <div class=\"euim-changelog__euimLabelTitle\" euimLabel euimLabelTitle><strong>{{logItem.version }}</strong></div>\n                            </ion-label>\n                        </ion-item>\n                            <ion-list slot=\"content\">\n                                <ion-item-divider>\n                                    <ion-label>New features</ion-label>\n                                </ion-item-divider>\n                                @for (feature of logItem.features; track feature) {\n                                <ion-item lines=\"none\" class=\"euim-changelog__item\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ feature }}\n                                    </div>\n                                </ion-item> }\n                                <ion-item-divider>\n                                    <ion-label>Improvements</ion-label>\n                                </ion-item-divider>\n                                @for (improvement of logItem.improvements; track improvement) {\n                                <ion-item lines=\"none\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ improvement}}\n                                    </div>\n                                </ion-item> }\n                                <ion-item-divider>\n                                    <ion-label>Bugfixes</ion-label>\n                                </ion-item-divider>\n                                @for (bugfix of logItem.bugfixes; track bugfix) {\n                                <ion-item lines=\"none\">\n                                    <div class=\"euim-changelog__label\" euimLabel><span class=\"euim-changelog__bullet-point\"></span>{{ bugfix }}\n                                    </div>\n                                </ion-item> }\n                            </ion-list>\n                    </ion-accordion>\n                </ng-container> }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimLabelTitle{font:normal normal 400 .875rem/1rem var(--eui-base-font-family);justify-content:space-between;margin-left:var(--eui-base-spacing-m)}.euim-changelog__bullet-point{display:inline-block;background-color:var(--eui-base-color-grey-100);width:var(--eui-base-spacing-2xs);height:var(--eui-base-spacing-2xs);border-radius:50%;margin-right:var(--eui-base-spacing-s)}.euim-changelog__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);white-space:wrap;color:var(--eui-base-color-grey-120);min-height:0px!important}\n"] }]
+        }], propDecorators: { changeLogs: [{
+                type: Input
+            }] } });
+
+class EuimPrivacyStatementComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPrivacyStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimPrivacyStatementComponent, selector: "euim-privacy-statement", ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimPrivacyStatementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-privacy-statement', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
+        }] });
+
+class EuimContactSupportComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimContactSupportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimContactSupportComponent, selector: "euim-contact-support", ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimContactSupportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-contact-support', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
+        }] });
+
+class EuimLegalNoticeComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLegalNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimLegalNoticeComponent, selector: "euim-legal-notice", ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimLegalNoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-legal-notice', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
+        }] });
+
+class EuimOpenSourceLicencesComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimOpenSourceLicencesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuimOpenSourceLicencesComponent, selector: "euim-opensource-licences", ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimOpenSourceLicencesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-opensource-licences', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
+        }] });
+
+class EuimAboutComponent {
+    constructor() {
+        this.showCode = false;
+        this.logoUrl = '';
+        this.changelogExists = false;
+        this.privacyStatementExists = false;
+        this.contactSupportExists = false;
+        this.legalNoticeExists = false;
+        this.openSourceLicencesExists = false;
+    }
+    toggleQRCode() {
+        this.showCode = !this.showCode;
+    }
+    ngAfterContentInit() {
+        this.changelogExists = !!this.changelog;
+        this.privacyStatementExists = !!this.privacyStatement;
+        this.contactSupportExists = !!this.contactSupport;
+        this.legalNoticeExists = !!this.legalNotice;
+        this.openSourceLicencesExists = !!this.openSourceLicences;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: EuimAboutComponent, selector: "euim-about", inputs: { showCode: "showCode", version: "version", releaseDate: "releaseDate", qrCodeUrl: "qrCodeUrl", logoUrl: "logoUrl" }, queries: [{ propertyName: "changelog", first: true, predicate: EuimChangelogComponent, descendants: true }, { propertyName: "privacyStatement", first: true, predicate: EuimPrivacyStatementComponent, descendants: true }, { propertyName: "contactSupport", first: true, predicate: EuimContactSupportComponent, descendants: true }, { propertyName: "legalNotice", first: true, predicate: EuimLegalNoticeComponent, descendants: true }, { propertyName: "openSourceLicences", first: true, predicate: EuimOpenSourceLicencesComponent, descendants: true }], ngImport: i0, template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"primary\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title>About</euim-toolbar-title>\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\" class=\"euim-about__toolbar-action-items\">\r\n            {{ showCode ? 'HIDE QR CODE' : 'SHOW QR CODE' }}\r\n          </ion-label>\r\n        </euim-toolbar-action-items>\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"primary\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\"\r\n          [elementType]=\"'svg'\" [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n          @if (!showCode) {\r\n            <img [src]=\"logoUrl\" alt=\"Image\" />  }\r\n      </div>\r\n      <div euimHeaderDetailsTitle>eUI / mobile</div>\r\n      <div euimHeaderDetailsMeta>version {{version}}</div>\r\n      <div euimHeaderDetailsMeta>Built on {{releaseDate}}</div>\r\n    </euim-header-details>\r\n  </ion-header>\r\n\r\n  <ion-list>\r\n    <ion-list-header>ABOUT THIS APP</ion-list-header>\r\n    @if (changelogExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Change Log</div>\r\n    </ion-item>\r\n  }\r\n  @if (privacyStatementExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"finger-print-sharp\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Privacy Statement</div>\r\n    </ion-item>\r\n  }\r\n    @if (openSourceLicencesExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Open source Licences</div>\r\n    </ion-item> }\r\n    @if (legalNoticeExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"library-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Legal Notice</div>\r\n    </ion-item> }\r\n    @if (contactSupportExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"mail-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Contact & Support</div>\r\n    </ion-item> }\r\n  </ion-list>\r\n</div>\r\n", styles: [".euim-about{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-about euim-toolbar-title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.euim-about euim-toolbar-action-items ion-label{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-about ion-label{padding-inline-end:var(--eui-base-spacing-m)}.euim-about__label{min-height:var(--eui-base-spacing-2xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$3.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "margin", "qrdata", "scale", "version", "width"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }, { kind: "component", type: EuimHeaderDetailsComponent, selector: "euim-header-details" }, { kind: "directive", type: EuimHeaderDetailsTitleDirective, selector: "[euimHeaderDetailsTitle]" }, { kind: "directive", type: EuimHeaderDetailsMetaDirective, selector: "[euimHeaderDetailsMeta]" }, { kind: "directive", type: EuimHeaderDetailsIconDirective, selector: "[euimHeaderDetailsIcon]" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate"] }] }); }
+}
+__decorate([
+    coerceBoolean
+], EuimAboutComponent.prototype, "showCode", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-about', template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"primary\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title>About</euim-toolbar-title>\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\" class=\"euim-about__toolbar-action-items\">\r\n            {{ showCode ? 'HIDE QR CODE' : 'SHOW QR CODE' }}\r\n          </ion-label>\r\n        </euim-toolbar-action-items>\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"primary\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\"\r\n          [elementType]=\"'svg'\" [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n          @if (!showCode) {\r\n            <img [src]=\"logoUrl\" alt=\"Image\" />  }\r\n      </div>\r\n      <div euimHeaderDetailsTitle>eUI / mobile</div>\r\n      <div euimHeaderDetailsMeta>version {{version}}</div>\r\n      <div euimHeaderDetailsMeta>Built on {{releaseDate}}</div>\r\n    </euim-header-details>\r\n  </ion-header>\r\n\r\n  <ion-list>\r\n    <ion-list-header>ABOUT THIS APP</ion-list-header>\r\n    @if (changelogExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Change Log</div>\r\n    </ion-item>\r\n  }\r\n  @if (privacyStatementExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"finger-print-sharp\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Privacy Statement</div>\r\n    </ion-item>\r\n  }\r\n    @if (openSourceLicencesExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Open source Licences</div>\r\n    </ion-item> }\r\n    @if (legalNoticeExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"library-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Legal Notice</div>\r\n    </ion-item> }\r\n    @if (contactSupportExists) {\r\n    <ion-item class=\"euim-about__item\">\r\n      <ion-icon name=\"mail-outline\" slot=\"start\"></ion-icon>\r\n      <div euimLabel class=\"euim-about__label\">Contact & Support</div>\r\n    </ion-item> }\r\n  </ion-list>\r\n</div>\r\n", styles: [".euim-about{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-about euim-toolbar-title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.euim-about euim-toolbar-action-items ion-label{font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.euim-about ion-label{padding-inline-end:var(--eui-base-spacing-m)}.euim-about__label{min-height:var(--eui-base-spacing-2xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}\n"] }]
+        }], propDecorators: { changelog: [{
+                type: ContentChild,
+                args: [EuimChangelogComponent]
+            }], privacyStatement: [{
+                type: ContentChild,
+                args: [EuimPrivacyStatementComponent]
+            }], contactSupport: [{
+                type: ContentChild,
+                args: [EuimContactSupportComponent]
+            }], legalNotice: [{
+                type: ContentChild,
+                args: [EuimLegalNoticeComponent]
+            }], openSourceLicences: [{
+                type: ContentChild,
+                args: [EuimOpenSourceLicencesComponent]
+            }], showCode: [{
+                type: Input
+            }], version: [{
+                type: Input
+            }], releaseDate: [{
+                type: Input
+            }], qrCodeUrl: [{
+                type: Input
+            }], logoUrl: [{
+                type: Input
+            }] } });
+
+const COMPONENTS = [
+    EuimAboutComponent,
+    EuimChangelogComponent,
+    EuimPrivacyStatementComponent,
+    EuimOpenSourceLicencesComponent,
+    EuimLegalNoticeComponent,
+    EuimContactSupportComponent,
+];
+class EuimAboutModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutModule, declarations: [EuimAboutComponent,
+            EuimChangelogComponent,
+            EuimPrivacyStatementComponent,
+            EuimOpenSourceLicencesComponent,
+            EuimLegalNoticeComponent,
+            EuimContactSupportComponent], imports: [CommonModule,
+            IonicModule,
+            QRCodeModule,
+            EuimToolbarComponentModule,
+            EuimHeaderDetailsModule,
+            EuimLabelModule,
+            EuimAvatarIconModule], exports: [EuimAboutComponent,
+            EuimChangelogComponent,
+            EuimPrivacyStatementComponent,
+            EuimOpenSourceLicencesComponent,
+            EuimLegalNoticeComponent,
+            EuimContactSupportComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutModule, imports: [CommonModule,
+            IonicModule,
+            QRCodeModule,
+            EuimToolbarComponentModule,
+            EuimHeaderDetailsModule,
+            EuimLabelModule,
+            EuimAvatarIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAboutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                        QRCodeModule,
+                        EuimToolbarComponentModule,
+                        EuimHeaderDetailsModule,
+                        EuimLabelModule,
+                        EuimAvatarIconModule,
+                    ],
                     exports: [
                         ...COMPONENTS,
                     ],
@@ -4184,32 +3302,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
+class EuimDividerDirective {
+    get cssClasses() {
+        return this.getCssClasses('euim-divider');
+    }
+    getCssClasses(rootClass) {
+        return [
+            rootClass,
+            this.lines ? `${rootClass}--lines-${this.lines}` : '',
+        ].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimDividerDirective, selector: "[euimDivider]", inputs: { lines: "lines" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimDivider]',
+                }]
+        }], propDecorators: { lines: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimDividerModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, declarations: [EuimDividerDirective], imports: [CommonModule,
+            IonicModule], exports: [EuimDividerDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, imports: [CommonModule,
+            IonicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimDividerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                    ],
+                    exports: [
+                        EuimDividerDirective,
+                    ],
+                    declarations: [
+                        EuimDividerDirective,
+                    ],
+                }]
+        }] });
+
+class EuimSkeletonTextAvatarDirective {
+    constructor() {
+        this.className = 'euim-skeleton-text-avatar';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: EuimSkeletonTextAvatarDirective, selector: "[euimSkeletonTextAvatar]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimSkeletonTextAvatar]',
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimSkeletonTextAvatarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, declarations: [EuimSkeletonTextAvatarDirective], imports: [CommonModule,
+            IonicModule], exports: [EuimSkeletonTextAvatarDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, imports: [CommonModule,
+            IonicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimSkeletonTextAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                    ],
+                    exports: [
+                        EuimSkeletonTextAvatarDirective,
+                    ],
+                    declarations: [
+                        EuimSkeletonTextAvatarDirective,
+                    ],
+                }]
+        }] });
+
 const MODULES = [
     // Layout
     EuimAppModule,
-    EuimAppSidebarModule,
     // Components
     EuimEmptyListPlaceholderModule,
     EuimLanguageSelectorModule,
-    EuimStepperComponentModule,
     EuimUserProfileModule,
     EuimMessageModule,
     EuimSkeletonListItemModule,
     EuimSkeletonListModule,
     EuimAvatarIconModule,
     EuimLabelModule,
-    EuimMenuModule,
     EuimAlertMessageModule,
-    EuimControlFeedbackModule,
-    EuimFieldsetModule,
+    EuimAboutModule,
     EuimToolbarComponentModule,
     EuimNotificationItemModule,
     EuimMediaHeaderModule,
     EuimDataSummaryModule,
     EuimHeaderDetailsModule,
     EuimAvatarModule,
-    EuimInfoScreenModule,
-    EuimSliderModule,
     EuimSliderInfoScreenModule,
     EuimScrollerXComponentModule,
     EuimChipSelectorComponentModule,
@@ -4217,9 +3417,7 @@ const MODULES = [
     EuimSidebarModule,
     EuimMultiselectModule,
     // Directives
-    EuimListHeaderModule,
     EuimSpinnerComponentModule,
-    EuimItemDividerModule,
     EuimDividerModule,
     EuimSkeletonTextAvatarModule,
 ];
@@ -4228,29 +3426,23 @@ class EuimAllModule {
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: EuimAllModule, imports: [
             // Layout
             EuimAppModule,
-            EuimAppSidebarModule,
             // Components
             EuimEmptyListPlaceholderModule,
             EuimLanguageSelectorModule,
-            EuimStepperComponentModule,
             EuimUserProfileModule,
             EuimMessageModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
             EuimAvatarIconModule,
             EuimLabelModule,
-            EuimMenuModule,
             EuimAlertMessageModule,
-            EuimControlFeedbackModule,
-            EuimFieldsetModule,
+            EuimAboutModule,
             EuimToolbarComponentModule,
             EuimNotificationItemModule,
             EuimMediaHeaderModule,
             EuimDataSummaryModule,
             EuimHeaderDetailsModule,
             EuimAvatarModule,
-            EuimInfoScreenModule,
-            EuimSliderModule,
             EuimSliderInfoScreenModule,
             EuimScrollerXComponentModule,
             EuimChipSelectorComponentModule,
@@ -4258,36 +3450,28 @@ class EuimAllModule {
             EuimSidebarModule,
             EuimMultiselectModule,
             // Directives
-            EuimListHeaderModule,
             EuimSpinnerComponentModule,
-            EuimItemDividerModule,
             EuimDividerModule,
             EuimSkeletonTextAvatarModule], exports: [
             // Layout
             EuimAppModule,
-            EuimAppSidebarModule,
             // Components
             EuimEmptyListPlaceholderModule,
             EuimLanguageSelectorModule,
-            EuimStepperComponentModule,
             EuimUserProfileModule,
             EuimMessageModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
             EuimAvatarIconModule,
             EuimLabelModule,
-            EuimMenuModule,
             EuimAlertMessageModule,
-            EuimControlFeedbackModule,
-            EuimFieldsetModule,
+            EuimAboutModule,
             EuimToolbarComponentModule,
             EuimNotificationItemModule,
             EuimMediaHeaderModule,
             EuimDataSummaryModule,
             EuimHeaderDetailsModule,
             EuimAvatarModule,
-            EuimInfoScreenModule,
-            EuimSliderModule,
             EuimSliderInfoScreenModule,
             EuimScrollerXComponentModule,
             EuimChipSelectorComponentModule,
@@ -4295,37 +3479,29 @@ class EuimAllModule {
             EuimSidebarModule,
             EuimMultiselectModule,
             // Directives
-            EuimListHeaderModule,
             EuimSpinnerComponentModule,
-            EuimItemDividerModule,
             EuimDividerModule,
             EuimSkeletonTextAvatarModule] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuimAllModule, imports: [MODULES, 
             // Layout
             EuimAppModule,
-            EuimAppSidebarModule,
             // Components
             EuimEmptyListPlaceholderModule,
             EuimLanguageSelectorModule,
-            EuimStepperComponentModule,
             EuimUserProfileModule,
             EuimMessageModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
             EuimAvatarIconModule,
             EuimLabelModule,
-            EuimMenuModule,
             EuimAlertMessageModule,
-            EuimControlFeedbackModule,
-            EuimFieldsetModule,
+            EuimAboutModule,
             EuimToolbarComponentModule,
             EuimNotificationItemModule,
             EuimMediaHeaderModule,
             EuimDataSummaryModule,
             EuimHeaderDetailsModule,
             EuimAvatarModule,
-            EuimInfoScreenModule,
-            EuimSliderModule,
             EuimSliderInfoScreenModule,
             EuimScrollerXComponentModule,
             EuimChipSelectorComponentModule,
@@ -4333,9 +3509,7 @@ class EuimAllModule {
             EuimSidebarModule,
             EuimMultiselectModule,
             // Directives
-            EuimListHeaderModule,
             EuimSpinnerComponentModule,
-            EuimItemDividerModule,
             EuimDividerModule,
             EuimSkeletonTextAvatarModule] }); }
 }
@@ -4357,5 +3531,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAppSidebarComponent, EuimAppSidebarFooterComponent, EuimAppSidebarHeaderComponent, EuimAppSidebarMenuComponent, EuimAppSidebarModule, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimControlFeedbackComponent, EuimControlFeedbackModule, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimFieldSetComponent, EuimFieldsetActionsComponent, EuimFieldsetLegendComponent, EuimFieldsetModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimInfoScreenComponent, EuimInfoScreenContentDirective, EuimInfoScreenModule, EuimInfoScreenSubTitleDirective, EuimInfoScreenTitleDirective, EuimItemDividerDirective, EuimItemDividerModule, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimListHeaderDirective, EuimListHeaderModule, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMenuComponent, EuimMenuModule, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideComponent, EuimSlideInfoScreenComponent, EuimSliderComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSliderModule, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimStepperChangeEvent, EuimStepperComponent, EuimStepperComponentModule, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarTitleComponent, EuimUserProfileComponent, EuimUserProfileModule };
+export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAboutComponent, EuimAboutModule, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimChangelogComponent, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimContactSupportComponent, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimLegalNoticeComponent, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimOpenSourceLicencesComponent, EuimPdfWrapperComponent, EuimPdfWrapperModule, EuimPrivacyStatementComponent, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideInfoScreenComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarTitleComponent, EuimUserProfileComponent, EuimUserProfileModule };
 //# sourceMappingURL=eui-mobile-core.mjs.map