@eui/mobile-core 16.7.0-snapshot-1709025354856 → 16.7.0-snapshot-1709121320092

package/fesm2022/eui-mobile-core.mjs

@@ -1,9 +1,9 @@
 import { coerceBoolean } from '@eui/base';
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, HostBinding, Input, Component, ViewEncapsulation, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, ViewChild, HostListener, ContentChild } from '@angular/core';
+import { Injectable, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, EventEmitter, Output, ContentChildren, ViewChild, HostListener, ContentChild } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { __decorate } from 'tslib';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@ionic/angular';
@@ -15,7 +15,6 @@ import { UxEuLanguages } from '@eui/core';
 import { takeUntil, distinctUntilKeyChanged } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { __decorate } from 'tslib';
 
 const initialState = {
     isLanguageListVisible: false,
@@ -49,236 +48,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
-class EuimBaseDirective {
+class BaseStatesDirective {
     constructor() {
-        this._euimPrimary = false;
-        this._euimSecondary = false;
-        this._euimInfo = false;
-        this._euimSuccess = false;
-        this._euimWarning = false;
-        this._euimDanger = false;
-        this._euimAccent = false;
-        this._euimDefault = false;
-        this._euimLight = false;
-        this._euimClear = false;
-        this._euimDark = false;
-        this._euimInverted = false;
-        this._euimSize2XS = false;
-        this._euimSizeXS = false;
-        this._euimSizeS = false;
-        this._euimSizeM = false;
-        this._euimSizeL = false;
-        this._euimSizeXL = false;
-        this._euimSize2XL = false;
-        this._euimSize3XL = false;
-        this._euimSize4XL = false;
-        this._euimFontBold = false;
-        this._euimFontRegular = false;
-        this._euimFontBoldItalic = false;
-        this._euimFontItalic = false;
-        this._euimFontLight = false;
-    }
-    get euimPrimary() {
-        return this._euimPrimary;
-    }
-    set euimPrimary(value) {
-        this._euimPrimary = coerceBooleanProperty(value);
-    }
-    get euimSecondary() {
-        return this._euimSecondary;
-    }
-    set euimSecondary(value) {
-        this._euimSecondary = coerceBooleanProperty(value);
-    }
-    get euimInfo() {
-        return this._euimInfo;
-    }
-    set euimInfo(value) {
-        this._euimInfo = coerceBooleanProperty(value);
-    }
-    get euimSuccess() {
-        return this._euimSuccess;
-    }
-    set euimSuccess(value) {
-        this._euimSuccess = coerceBooleanProperty(value);
-    }
-    get euimWarning() {
-        return this._euimWarning;
-    }
-    set euimWarning(value) {
-        this._euimWarning = coerceBooleanProperty(value);
-    }
-    get euimDanger() {
-        return this._euimDanger;
-    }
-    set euimDanger(value) {
-        this._euimDanger = coerceBooleanProperty(value);
-    }
-    get euimDefault() {
-        return this._euimDefault;
-    }
-    set euimDefault(value) {
-        this._euimDefault = coerceBooleanProperty(value);
-    }
-    get euimDark() {
-        return this._euimDark;
-    }
-    set euimDark(value) {
-        this._euimDark = coerceBooleanProperty(value);
-    }
-    get euimLight() {
-        return this._euimLight;
-    }
-    set euimLight(value) {
-        this._euimLight = coerceBooleanProperty(value);
-    }
-    get euimClear() {
-        return this._euimClear;
-    }
-    set euimClear(value) {
-        this._euimClear = coerceBooleanProperty(value);
-    }
-    get euimAccent() {
-        return this._euimAccent;
-    }
-    set euimAccent(value) {
-        this._euimAccent = coerceBooleanProperty(value);
-    }
-    get euimInverted() {
-        return this._euimInverted;
-    }
-    set euimInverted(value) {
-        this._euimInverted = coerceBooleanProperty(value);
-    }
-    // SIZES
-    get euimSize2XS() {
-        return this._euimSize2XS;
-    }
-    set euimSize2XS(value) {
-        this._euimSize2XS = coerceBooleanProperty(value);
-    }
-    get euimSizeXS() {
-        return this._euimSizeXS;
-    }
-    set euimSizeXS(value) {
-        this._euimSizeXS = coerceBooleanProperty(value);
-    }
-    get euimSizeS() {
-        return this._euimSizeS;
-    }
-    set euimSizeS(value) {
-        this._euimSizeS = coerceBooleanProperty(value);
-    }
-    get euimSizeM() {
-        return this._euimSizeM;
-    }
-    set euimSizeM(value) {
-        this._euimSizeM = coerceBooleanProperty(value);
-    }
-    get euimSizeL() {
-        return this._euimSizeL;
-    }
-    set euimSizeL(value) {
-        this._euimSizeL = coerceBooleanProperty(value);
-    }
-    get euimSizeXL() {
-        return this._euimSizeXL;
-    }
-    set euimSizeXL(value) {
-        this._euimSizeXL = coerceBooleanProperty(value);
-    }
-    get euimSize2XL() {
-        return this._euimSize2XL;
-    }
-    set euimSize2XL(value) {
-        this._euimSize2XL = coerceBooleanProperty(value);
-    }
-    get euimSize3XL() {
-        return this._euimSize3XL;
-    }
-    set euimSize3XL(value) {
-        this._euimSize3XL = coerceBooleanProperty(value);
-    }
-    get euimSize4XL() {
-        return this._euimSize4XL;
-    }
-    set euimSize4XL(value) {
-        this._euimSize4XL = coerceBooleanProperty(value);
-    }
-    get euimFontBold() {
-        return this._euimFontBold;
-    }
-    set euimFontBold(value) {
-        this._euimFontBold = coerceBooleanProperty(value);
-    }
-    get euimFontRegular() {
-        return this._euimFontRegular;
-    }
-    set euimFontRegular(value) {
-        this._euimFontRegular = coerceBooleanProperty(value);
-    }
-    get euimFontBoldItalic() {
-        return this._euimFontBoldItalic;
-    }
-    set euimFontBoldItalic(value) {
-        this._euimFontBoldItalic = coerceBooleanProperty(value);
+        // COLORS
+        this.euimPrimary = false;
+        this.euimSecondary = false;
+        this.euimInfo = false;
+        this.euimSuccess = false;
+        this.euimWarning = false;
+        this.euimDanger = false;
+        this.euimAccent = false;
+        this.euimDefault = false;
+        this.euimDark = false;
+        this.euimWhite = false;
+        this.euimLight = false;
+        this.euimClear = false;
+        // STATES
+        this.euimDisabled = false;
+        // POSITION
+        this.euimPositionTopEnd = false;
+        // TYPOGRAPHY
+        this.euimFontBold = false;
+        this.euimFontRegular = false;
+        this.euimFontBoldItalic = false;
+        this.euimFontItalic = false;
+        this.euimFontLight = false;
+        // SIZES
+        this.euimSize2XS = false;
+        this.euimSizeXS = false;
+        this.euimSizeS = false;
+        this.euimSizeM = false;
+        this.euimSizeL = false;
+        this.euimSizeXL = false;
+        this.euimSize2XL = false;
+        this.euimSize3XL = false;
+        this.euimSize4XL = false;
+        this.euimSize5XL = false;
+        this._euimSizeVariant = '';
+        this._euimVariant = '';
     }
-    get euimFontItalic() {
-        return this._euimFontItalic;
+    get euimVariant() {
+        return this._euimVariant;
     }
-    set euimFontItalic(value) {
-        this._euimFontItalic = coerceBooleanProperty(value);
+    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';
     }
-    get euimFontLight() {
-        return this._euimFontLight;
+    get euimSizeVariant() {
+        return this._euimSizeVariant;
     }
-    set euimFontLight(value) {
-        this._euimFontLight = coerceBooleanProperty(value);
+    set euimSizeVariant(value) {
+        this.euimSize2XS = value === '2xs';
+        this.euimSizeXS = value === 'xs';
+        this.euimSizeS = value === 's';
+        this.euimSizeM = value === 'm';
+        this.euimSizeL = value === 'l';
+        this.euimSizeXL = value === 'xl';
+        this.euimSize2XL = value === '2xl';
+        this.euimSize3XL = value === '3xl';
+        this.euimSize4XL = value === '4xl';
+        this.euimSize5XL = value === '5xl';
+        this._euimSizeVariant = value;
     }
     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._euimDefault ? `${rootClass}--default` : '',
-            this._euimDark ? `${rootClass}--dark` : '',
-            this._euimLight ? `${rootClass}--light` : '',
-            this._euimAccent ? `${rootClass}--accent` : '',
-            this._euimInverted ? `${rootClass}--inverted` : '',
-            this._euimSize2XS ? `${rootClass}--size-2xs` : '',
-            this._euimSizeXS ? `${rootClass}--size-xs` : '',
-            this._euimSizeS ? `${rootClass}--size-s` : '',
-            this._euimSizeM ? `${rootClass}--size-m` : '',
-            this._euimSizeL ? `${rootClass}--size-l` : '',
-            this._euimSizeXL ? `${rootClass}--size-xl` : '',
-            this._euimSize2XL ? `${rootClass}--size-2xl` : '',
-            this._euimSize3XL ? `${rootClass}--size-3xl` : '',
-            this._euimSize4XL ? `${rootClass}--size-4xl` : '',
-            this._euimFontBold ? 'eui-u-font-bold' : '',
-            this._euimFontRegular ? 'eui-u-font-regular' : '',
-            this._euimFontBoldItalic ? 'eui-u-font-bold-italic' : '',
-            this._euimFontItalic ? 'eui-u-font-italic' : '',
-            this._euimFontLight ? 'eui-u-font-light' : '',
-        ].join(' ').trim();
+            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.euimSize2XS ? `${rootClass}--size-2xs` : '',
+            this.euimSizeXS ? `${rootClass}--size-xs` : '',
+            this.euimSizeS ? `${rootClass}--size-s` : '',
+            this.euimSizeM ? `${rootClass}--size-m` : '',
+            this.euimSizeL ? `${rootClass}--size-l` : '',
+            this.euimSizeXL ? `${rootClass}--size-xl` : '',
+            this.euimSize2XL ? `${rootClass}--size-2xl` : '',
+            this.euimSize3XL ? `${rootClass}--size-3xl` : '',
+            this.euimSize4XL ? `${rootClass}--size-4xl` : '',
+            this.euimSize5XL ? `${rootClass}--size-5xl` : '',
+            this.euimPositionTopEnd ? `${rootClass}--position-top-end` : '',
+            this.euimDisabled ? `${rootClass}--disabled disabled` : '',
+            this.euimFontBold ? 'eui-u-font-bold' : '',
+            this.euimFontRegular ? 'eui-u-font-regular' : '',
+            this.euimFontBoldItalic ? 'eui-u-font-bold-italic' : '',
+            this.euimFontItalic ? 'eui-u-font-italic' : '',
+            this.euimFontLight ? 'eui-u-font-light' : '',
+        ]
+            .join(' ')
+            .trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimBaseDirective, selector: "[euimBase]", inputs: { e2eAttr: "e2eAttr", euimPrimary: "euimPrimary", euimSecondary: "euimSecondary", euimInfo: "euimInfo", euimSuccess: "euimSuccess", euimWarning: "euimWarning", euimDanger: "euimDanger", euimDefault: "euimDefault", euimDark: "euimDark", euimLight: "euimLight", euimClear: "euimClear", euimAccent: "euimAccent", euimInverted: "euimInverted", euimSize2XS: "euimSize2XS", euimSizeXS: "euimSizeXS", euimSizeS: "euimSizeS", euimSizeM: "euimSizeM", euimSizeL: "euimSizeL", euimSizeXL: "euimSizeXL", euimSize2XL: "euimSize2XL", euimSize3XL: "euimSize3XL", euimSize4XL: "euimSize4XL", euimFontBold: "euimFontBold", euimFontRegular: "euimFontRegular", euimFontBoldItalic: "euimFontBoldItalic", euimFontItalic: "euimFontItalic", euimFontLight: "euimFontLight" }, host: { properties: { "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimBaseDirective, decorators: [{
+__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: "16.2.12", ngImport: i0, type: BaseStatesDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
+                    // eslint-disable-next-line
                     selector: '[euimBase]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        '[attr.aria-disabled]': 'this.euimDisabled.toString()',
+                    },
                 }]
-        }], propDecorators: { e2eAttr: [{
-                type: HostBinding,
-                args: ['attr.data-e2e']
-            }, {
-                type: Input
-            }], euimPrimary: [{
+        }], propDecorators: { euimPrimary: [{
                 type: Input
             }], euimSecondary: [{
                 type: Input
@@ -290,19 +268,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], euimDanger: [{
                 type: Input
+            }], euimAccent: [{
+                type: Input
             }], euimDefault: [{
                 type: Input
             }], euimDark: [{
                 type: Input
+            }], euimWhite: [{
+                type: Input
             }], euimLight: [{
                 type: Input
             }], euimClear: [{
                 type: Input
-            }], euimAccent: [{
+            }], euimVariant: [{
                 type: Input
-            }], euimInverted: [{
+            }], euimDisabled: [{
                 type: Input
-            }], euimSize2XS: [{
+            }], euimPositionTopEnd: [{
+                type: Input
+            }], euimFontBold: [{
+                type: Input
+            }], euimFontRegular: [{
+                type: Input
+            }], euimFontBoldItalic: [{
+                type: Input
+            }], euimFontItalic: [{
+                type: Input
+            }], euimFontLight: [{
+                type: Input
+            }], euimSize2XS: [{
                 type: Input
             }], euimSizeXS: [{
                 type: Input
@@ -320,71 +314,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], euimSize4XL: [{
                 type: Input
-            }], euimFontBold: [{
-                type: Input
-            }], euimFontRegular: [{
-                type: Input
-            }], euimFontBoldItalic: [{
-                type: Input
-            }], euimFontItalic: [{
+            }], euimSize5XL: [{
                 type: Input
-            }], euimFontLight: [{
+            }], euimSizeVariant: [{
                 type: Input
             }] } });
 
-class EuimLabelComponent extends EuimBaseDirective {
-    get euimLabelTitle() {
-        return this._euimLabelTitle;
-    }
-    set euimLabelTitle(value) {
-        this._euimLabelTitle = coerceBooleanProperty(value);
-    }
-    get euimLabelSubTitle() {
-        return this._euimLabelSubTitle;
-    }
-    set euimLabelSubTitle(value) {
-        this._euimLabelSubTitle = coerceBooleanProperty(value);
-    }
-    get euimLabelMeta() {
-        return this._euimLabelMeta;
-    }
-    set euimLabelMeta(value) {
-        this._euimLabelMeta = coerceBooleanProperty(value);
-    }
-    get euimLabelTruncate() {
-        return this._euimLabelTruncate;
-    }
-    set euimLabelTruncate(value) {
-        this._euimLabelTruncate = coerceBooleanProperty(value);
-    }
+class EuimLabelComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
-    constructor() {
-        super();
-        this._euimLabelTitle = false;
-        this._euimLabelSubTitle = false;
-        this._euimLabelMeta = false;
-        this._euimLabelTruncate = false;
-        // this.euiTextTruncateWithLines = this.paramEuiTextTruncateWithLines;
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+        this.euimLabelTitle = false;
+        this.euimLabelSubTitle = false;
+        this.euimLabelMeta = false;
+        this.euimLabelTruncate = false;
     }
     getCssClasses() {
         return [
+            this.baseStatesDirective.getCssClasses('euim-label'),
             this.euimLabelTitle ? 'euim-label__title' : '',
             this.euimLabelSubTitle ? 'euim-label__sub-title' : '',
             this.euimLabelMeta ? 'euim-label__meta' : '',
             this.euimLabelTruncate ? 'eui-u-text-truncate' : '',
             this.euimLabelTruncateWithLines > 0 ? 'euim-label__euiTextTruncateWithLines euim-label__truncate' : '',
-            super.getCssClasses('euim-label'),
-        ].join(' ').trim();
+        ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" } }, usesInheritance: true, 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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLabelComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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 }); }
 }
+__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: "16.2.12", 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, 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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { euimLabelTruncateWithLines: [{
+            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',
+                                'euimSizeM',
+                                'euimSizeL',
+                                'euimSizeXL',
+                                'euimSize2XL',
+                                'euimSize3XL',
+                                'euimSize4XL',
+                            ],
+                        },
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { euimLabelTruncateWithLines: [{
                 type: HostBinding,
                 args: ['style.--euimLabelTruncateWithLines']
             }, {
@@ -425,101 +424,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimControlFeedbackComponent extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this._euimInfo = true;
-        this._euimSuccess = false;
-        this._euimWarning = false;
-        this._euimDanger = false;
-        this._variant = 'info';
-    }
-    get euimInfo() {
-        return this._euimInfo;
-    }
-    set euimInfo(value) {
-        this.resetVariantType();
-        this._euimInfo = coerceBooleanProperty(value);
-        if (this._euimInfo) {
-            this._variant = 'info';
-        }
-    }
-    get euimSuccess() {
-        return this._euimSuccess;
-    }
-    set euimSuccess(value) {
-        this.resetVariantType();
-        this._euimSuccess = coerceBooleanProperty(value);
-        if (this._euimSuccess) {
-            this._variant = 'success';
-        }
-    }
-    get euimWarning() {
-        return this._euimWarning;
-    }
-    set euimWarning(value) {
-        this.resetVariantType();
-        this._euimWarning = coerceBooleanProperty(value);
-        if (this._euimWarning) {
-            this._variant = 'warning';
-        }
-    }
-    get euimDanger() {
-        return this._euimDanger;
-    }
-    set euimDanger(value) {
-        this.resetVariantType();
-        this._euimDanger = coerceBooleanProperty(value);
-        if (this._euimDanger) {
-            this._variant = 'danger';
-        }
-    }
-    get variant() {
-        return this._variant;
-    }
-    set variant(value) {
-        this._euimWarning = (value === 'warning');
-        this._euimInfo = (value === 'info');
-        this._euimSuccess = (value === 'success');
-        this._euimDanger = (value === 'danger');
-        this._variant = value;
-    }
-    resetVariantType() {
-        this._euimDanger = false;
-        this._euimInfo = false;
-        this._euimSuccess = false;
-        this._euimInfo = false;
-        this._variant = null;
-    }
-    get color() {
-        return this.variant;
-    }
+class EuimControlFeedbackComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
     getCssClasses() {
         return [
-            'euim-control-feedback',
-            this.color ? `euim-control-feedback--${this.color}` : '',
+            this.baseStatesDirective.getCssClasses('euim-control-feedback'),
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimControlFeedbackComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimControlFeedbackComponent, selector: "euim-control-feedback", inputs: { euimInfo: "euimInfo", euimSuccess: "euimSuccess", euimWarning: "euimWarning", euimDanger: "euimDanger", variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"euim-control-feedback\">\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-control-feedback{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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimControlFeedbackComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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: "16.2.12", ngImport: i0, type: EuimControlFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-control-feedback', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-control-feedback\">\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-control-feedback{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"] }]
-        }], propDecorators: { euimInfo: [{
-                type: Input
-            }], euimSuccess: [{
-                type: Input
-            }], euimWarning: [{
-                type: Input
-            }], euimDanger: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], cssClasses: [{
+            args: [{ selector: 'euim-control-feedback', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimInfo',
+                                'euimSuccess',
+                                'euimWarning',
+                                'euimDanger',
+                                'euimVariant',
+                            ],
+                        },
+                    ], 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: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -547,22 +481,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimNotificationItemComponent extends EuimBaseDirective {
+class EuimNotificationItemComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
     getCssClasses() {
         return [
-            super.getCssClasses('euim-notification-item'),
-        ].join(' ').trim();
+            this.baseStatesDirective.getCssClasses('euim-notification-item'),
+        ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimNotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimNotificationItemComponent, selector: "euim-notification-item", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimNotificationItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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: "16.2.12", ngImport: i0, type: EuimNotificationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-notification-item', encapsulation: ViewEncapsulation.None, 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"] }]
-        }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'euim-notification-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimInfo',
+                                'euimSuccess',
+                                'euimWarning',
+                                'euimDanger',
+                                'euimPrimary',
+                                'euimSecondary',
+                                'euimAccent',
+                            ],
+                        },
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -590,14 +540,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimAppComponent extends EuimBaseDirective {
+class EuimAppComponent {
     constructor(asService) {
-        super();
         this.asService = asService;
         this.ionMenuId = 'main';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAppComponent, deps: [{ token: EuimAppService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAppComponent, selector: "euim-app", inputs: { ionMenuId: "ionMenuId" }, usesInheritance: true, ngImport: i0, template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n", dependencies: [{ kind: "component", type: i1.IonApp, selector: "ion-app" }, { kind: "directive", type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "mode", "swipeGesture", "environmentInjector"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAppComponent, selector: "euim-app", inputs: { ionMenuId: "ionMenuId" }, ngImport: i0, template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n", dependencies: [{ kind: "component", type: i1.IonApp, selector: "ion-app" }, { kind: "directive", type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "mode", "swipeGesture", "environmentInjector"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAppComponent, decorators: [{
             type: Component,
@@ -606,9 +555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class EuimAvatarIconComponent extends EuimBaseDirective {
+class EuimAvatarIconComponent {
     constructor() {
-        super(...arguments);
         this.color = 'default';
         this.size = 'default';
         this.fill = 'default';
@@ -628,12 +576,12 @@ class EuimAvatarIconComponent extends EuimBaseDirective {
             this.borderColor ? `euim-avatar-icon--border-color-${this.borderColor}` : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: { color: "color", size: "size", fill: "fill", variant: "variant", borderColor: "borderColor" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-base-color-grey-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white)}.euim-avatar-icon--color-default{background-color:var(--eui-base-color-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-avatar-icon--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-avatar-icon--color-primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-base-color-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-base-color-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-base-color-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-base-color-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-base-color-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-m{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-s{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);font-size:var(--eui-base-font-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-avatar-icon--size-l{width:var(--eui-base-spacing-4xl);height:var(--eui-base-spacing-4xl);font-size:var(--eui-base-font-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: { color: "color", size: "size", fill: "fill", variant: "variant", borderColor: "borderColor" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-base-color-grey-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white)}.euim-avatar-icon--color-default{background-color:var(--eui-base-color-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-avatar-icon--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-avatar-icon--color-primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-base-color-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-base-color-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-base-color-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-base-color-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-base-color-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-m{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-s{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);font-size:var(--eui-base-font-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-avatar-icon--size-l{width:var(--eui-base-spacing-4xl);height:var(--eui-base-spacing-4xl);font-size:var(--eui-base-font-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-avatar-icon', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-base-color-grey-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white)}.euim-avatar-icon--color-default{background-color:var(--eui-base-color-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-avatar-icon--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-avatar-icon--color-primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-base-color-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-base-color-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-base-color-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-base-color-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-base-color-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-m{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-s{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);font-size:var(--eui-base-font-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-avatar-icon--size-l{width:var(--eui-base-spacing-4xl);height:var(--eui-base-spacing-4xl);font-size:var(--eui-base-font-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"] }]
+            args: [{ selector: 'euim-avatar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-base-color-grey-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-white)}.euim-avatar-icon--color-default{background-color:var(--eui-base-color-grey-15);border-color:var(--eui-base-color-grey-15);color:var(--eui-base-color-grey-100)}.euim-avatar-icon--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-avatar-icon--color-primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-base-color-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-base-color-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-base-color-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-base-color-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-base-color-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-m{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl);font-size:var(--eui-base-font-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l)}.euim-avatar-icon--size-s{width:var(--eui-base-spacing-l);height:var(--eui-base-spacing-l);font-size:var(--eui-base-font-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-base-spacing-m);height:var(--eui-base-spacing-m)}.euim-avatar-icon--size-l{width:var(--eui-base-spacing-4xl);height:var(--eui-base-spacing-4xl);font-size:var(--eui-base-font-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-base-spacing-2xl);height:var(--eui-base-spacing-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -649,18 +597,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class EuimMenuComponent extends EuimBaseDirective {
+class EuimMenuComponent {
     constructor(navCtrl) {
-        super();
         this.navCtrl = navCtrl;
         this.isChanged = false;
         this.itemClick = new EventEmitter();
-    }
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._items = value;
+        this.items = [];
     }
     onItemClick(event, idx, item) {
         if (item && item.url) {
@@ -677,12 +619,15 @@ class EuimMenuComponent extends EuimBaseDirective {
         return item.notification?.color === color;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMenuComponent, deps: [{ token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMenuComponent, selector: "euim-menu", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, 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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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: function () { return [{ type: i1.NavController }]; }, propDecorators: { itemClick: [{
+        }], ctorParameters: function () { return [{ type: i1.NavController }]; }, propDecorators: { isChanged: [], itemClick: [{
                 type: Output
             }], items: [{
                 type: Input
@@ -746,13 +691,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimAppSidebarComponent extends EuimBaseDirective {
+class EuimAppSidebarComponent {
     constructor() {
-        super(...arguments);
         this.ionMenuId = 'main';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAppSidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAppSidebarComponent, selector: "euim-app-sidebar", inputs: { ionMenuId: "ionMenuId", sidebarItems: "sidebarItems" }, usesInheritance: true, 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"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EuimAppSidebarComponent, decorators: [{
             type: Component,
@@ -844,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimEmptyListPlaceholderComponent extends EuimBaseDirective {
+class EuimEmptyListPlaceholderComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
@@ -856,8 +800,8 @@ class EuimEmptyListPlaceholderComponent extends EuimBaseDirective {
             this.euimMarginBottomSmall ? 'euim-empty-list-placeholder--margin-bottom-small' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimEmptyListPlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" } }, usesInheritance: true, 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimEmptyListPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 __decorate([
     coerceBoolean
@@ -870,7 +814,7 @@ __decorate([
 ], EuimEmptyListPlaceholderComponent.prototype, "euimMarginBottomSmall", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimEmptyListPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-empty-list-placeholder', encapsulation: ViewEncapsulation.None, 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: "<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"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], icon: [{
@@ -890,9 +834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class EuimLanguageListComponent extends EuimBaseDirective {
+class EuimLanguageListComponent {
     constructor(cd, translateService, appShellService, appService, modalCtrl, platform) {
-        super();
         this.cd = cd;
         this.translateService = translateService;
         this.appShellService = appShellService;
@@ -968,32 +911,26 @@ class EuimLanguageListComponent extends EuimBaseDirective {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2$1.UxAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimLanguageListComponent, selector: "euim-language-list", usesInheritance: true, 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" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLanguageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-language-list', 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" }]
+            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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.UxAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: i1.Platform }]; } });
 
-class EuimLanguageSelectorComponent extends EuimBaseDirective {
-    constructor(cd, translateService, appShellService, appService, modalCtrl) {
-        super();
+class EuimLanguageSelectorComponent {
+    constructor(cd, translateService, appShellService, appService, modalCtrl, baseStatesDirective) {
         this.cd = cd;
         this.translateService = translateService;
         this.appShellService = appShellService;
         this.appService = appService;
         this.modalCtrl = modalCtrl;
-        this._euimPrimary = false;
+        this.baseStatesDirective = baseStatesDirective;
+        this._euimPrimary = this.baseStatesDirective.euimPrimary;
         this.destroy$ = new Subject();
     }
-    get euimPrimary() {
-        return this._euimPrimary;
-    }
-    set euimPrimary(value) {
-        this._euimPrimary = coerceBooleanProperty(value);
-    }
     get cssClasses() {
-        return super.getCssClasses('euim-language-selector');
+        return this.baseStatesDirective.getCssClasses('euim-language-selector');
     }
     ngOnInit() {
         this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
@@ -1035,15 +972,20 @@ class EuimLanguageSelectorComponent extends EuimBaseDirective {
         }
         return;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2$1.UxAppShellService }, { token: EuimAppService }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", inputs: { euimPrimary: "euimPrimary" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2$1.UxAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary"] }], 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: "16.2.12", ngImport: i0, type: EuimLanguageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, 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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.UxAppShellService }, { type: EuimAppService }, { type: i1.ModalController }]; }, propDecorators: { euimPrimary: [{
-                type: Input
-            }], cssClasses: [{
+            args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimPrimary',
+                            ],
+                        },
+                    ], 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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.UxAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1318,13 +1260,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimUserProfileComponent extends EuimBaseDirective {
+class EuimUserProfileComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-user-profile';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimUserProfileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimUserProfileComponent, selector: "euim-user-profile", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-base-spacing-m);background-color:var(--eui-base-color-grey-5)}.euim-user-profile-avatar{margin-right:var(--eui-base-spacing-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-base-spacing-s));margin-right:calc(-1 * var(--eui-base-spacing-s));margin-left:var(--eui-base-spacing-2xs);color:var(--eui-base-color-primary-100)}.euim-user-profile-infos{width:calc(100% - (var(--eui-base-spacing-2xl) + var(--eui-base-spacing-l) + 2 * var(--eui-base-spacing-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-base-color-grey-75)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-base-color-grey-100)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-base-spacing-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-base-spacing-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-base-spacing-2xs);min-width:var(--eui-base-spacing-m);min-height:var(--eui-base-spacing-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimUserProfileComponent, selector: "euim-user-profile", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-base-spacing-m);background-color:var(--eui-base-color-grey-5)}.euim-user-profile-avatar{margin-right:var(--eui-base-spacing-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-base-spacing-s));margin-right:calc(-1 * var(--eui-base-spacing-s));margin-left:var(--eui-base-spacing-2xs);color:var(--eui-base-color-primary-100)}.euim-user-profile-infos{width:calc(100% - (var(--eui-base-spacing-2xl) + var(--eui-base-spacing-l) + 2 * var(--eui-base-spacing-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-base-color-grey-75)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-base-color-grey-100)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-base-spacing-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-base-spacing-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-base-spacing-2xs);min-width:var(--eui-base-spacing-m);min-height:var(--eui-base-spacing-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimUserProfileComponent, decorators: [{
             type: Component,
@@ -1334,13 +1275,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class EuiMUserProfileAvatarComponent extends EuimBaseDirective {
+class EuiMUserProfileAvatarComponent {
     constructor() {
-        super(...arguments);
         this.class = 'euim-user-profile-avatar';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileAvatarComponent, selector: "euim-user-profile-avatar", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileAvatarComponent, selector: "euim-user-profile-avatar", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileAvatarComponent, decorators: [{
             type: Component,
@@ -1349,13 +1289,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding
             }] } });
 
-class EuiMUserProfileInfosComponent extends EuimBaseDirective {
+class EuiMUserProfileInfosComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-user-profile-infos';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileInfosComponent, selector: "euim-user-profile-infos", host: { properties: { "className": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileInfosComponent, selector: "euim-user-profile-infos", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosComponent, decorators: [{
             type: Component,
@@ -1364,13 +1303,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding
             }] } });
 
-class EuiMUserProfileInfosItemComponent extends EuimBaseDirective {
+class EuiMUserProfileInfosItemComponent {
     constructor() {
-        super(...arguments);
         this.class = 'euim-user-profile-infos-item';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileInfosItemComponent, selector: "euim-user-profile-infos-item", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileInfosItemComponent, selector: "euim-user-profile-infos-item", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileInfosItemComponent, decorators: [{
             type: Component,
@@ -1379,13 +1317,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding
             }] } });
 
-class EuiMUserProfileActionComponent extends EuimBaseDirective {
+class EuiMUserProfileActionComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-user-profile-action';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileActionComponent, selector: "euim-user-profile-action", host: { properties: { "className": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiMUserProfileActionComponent, selector: "euim-user-profile-action", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiMUserProfileActionComponent, decorators: [{
             type: Component,
@@ -1432,17 +1369,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimToolbarComponent extends EuimBaseDirective {
+class EuimToolbarComponent {
     constructor() {
-        super(...arguments);
         this.hasBackButton = true;
         this.backButtonDefaultHref = '/';
         this.hasSidebarTrigger = false;
         this.hasLanguageSelector = false;
         this.backButtonClick = new EventEmitter();
-    }
-    get cssClasses() {
-        return super.getCssClasses('euim-toolbar');
+        this.className = 'euim-toolbar';
     }
     ngOnInit() {
         if (this.hasSidebarTrigger) {
@@ -1452,12 +1386,21 @@ class EuimToolbarComponent extends EuimBaseDirective {
     onBackButtonClick(event) {
         this.backButtonClick.emit(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: { hasBackButton: "hasBackButton", backButtonDefaultHref: "backButtonDefaultHref", hasSidebarTrigger: "hasSidebarTrigger", hasLanguageSelector: "hasLanguageSelector" }, outputs: { backButtonClick: "backButtonClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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", inputs: ["euimPrimary"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
+__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: "16.2.12", ngImport: i0, type: EuimToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-toolbar', encapsulation: ViewEncapsulation.None, 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"] }]
+            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
             }], backButtonDefaultHref: [{
@@ -1468,39 +1411,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], backButtonClick: [{
                 type: Output
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
+            }], className: [{
+                type: HostBinding
             }] } });
 
-class EuimToolbarTitleComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return super.getCssClasses('euim-toolbar-title');
+class EuimToolbarTitleComponent {
+    constructor() {
+        this.className = 'euim-toolbar-title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-toolbar-title', template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
+            args: [{ selector: 'euim-toolbar-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding
             }] } });
 
-class EuimToolbarActionItemsComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return super.getCssClasses('euim-toolbar-action-items');
+class EuimToolbarActionItemsComponent {
+    constructor() {
+        this.className = 'euim-toolbar-action-items';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarActionItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarActionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimToolbarActionItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-toolbar-action-items', template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
+            args: [{ selector: 'euim-toolbar-action-items', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding
             }] } });
 
 class EuimToolbarComponentModule {
@@ -1536,353 +1476,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         EuimToolbarComponent,
                         EuimToolbarTitleComponent,
                         EuimToolbarActionItemsComponent,
-                    ],
-                }]
-        }] });
-
-class EuimSidebarComponent {
-    constructor() {
-        this.className = 'euim-sidebar';
-        this.ionMenuId = 'main';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSidebarComponent, selector: "euim-sidebar", inputs: { ionMenuId: "ionMenuId" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-base-spacing-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-base-spacing-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding
-            }], ionMenuId: [{
-                type: Input
-            }] } });
-
-class EuimSidebarContentComponent extends EuimSidebarComponent {
-    constructor() {
-        super(...arguments);
-        this.className = 'euim-sidebar-content';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", host: { properties: { "className": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n", dependencies: [{ kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding
-            }] } });
-
-class EuimSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, declarations: [EuimSidebarComponent,
-            EuimSidebarContentComponent], imports: [CommonModule,
-            RouterModule,
-            IonicModule,
-            EuimAvatarIconModule,
-            EuimLabelModule,
-            EuimNotificationItemModule], exports: [EuimSidebarComponent,
-            EuimSidebarContentComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, imports: [CommonModule,
-            RouterModule,
-            IonicModule,
-            EuimAvatarIconModule,
-            EuimLabelModule,
-            EuimNotificationItemModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        IonicModule,
-                        EuimAvatarIconModule,
-                        EuimLabelModule,
-                        EuimNotificationItemModule,
-                    ],
-                    declarations: [
-                        EuimSidebarComponent,
-                        EuimSidebarContentComponent,
-                    ],
-                    exports: [
-                        EuimSidebarComponent,
-                        EuimSidebarContentComponent,
-                    ],
-                }]
-        }] });
-
-class BaseStatesDirective {
-    constructor() {
-        // COLORS
-        this.euimPrimary = false;
-        this.euimSecondary = false;
-        this.euimInfo = false;
-        this.euimSuccess = false;
-        this.euimWarning = false;
-        this.euimDanger = false;
-        this.euimAccent = false;
-        this.euimDefault = false;
-        this.euimDark = false;
-        this.euimWhite = false;
-        this.euimLight = false;
-        this.euimClear = false;
-        // STATES
-        this.euimDisabled = false;
-        // POSITION
-        this.euimPositionTopEnd = false;
-        // TYPOGRAPHY
-        this.euimFontBold = false;
-        this.euimFontRegular = false;
-        this.euimFontBoldItalic = false;
-        this.euimFontItalic = false;
-        this.euimFontLight = false;
-        // SIZES
-        this.euimSize2XS = false;
-        this.euimSizeXS = false;
-        this.euimSizeS = false;
-        this.euimSizeM = false;
-        this.euimSizeL = false;
-        this.euimSizeXL = false;
-        this.euimSize2XL = false;
-        this.euimSize3XL = false;
-        this.euimSize4XL = false;
-        this.euimSize5XL = false;
-        this._euimSizeVariant = '';
-        this._euimVariant = '';
-    }
-    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';
-    }
-    get euimSizeVariant() {
-        return this._euimSizeVariant;
-    }
-    set euimSizeVariant(value) {
-        this.euimSize2XS = value === '2xs';
-        this.euimSizeXS = value === 'xs';
-        this.euimSizeS = value === 's';
-        this.euimSizeM = value === 'm';
-        this.euimSizeL = value === 'l';
-        this.euimSizeXL = value === 'xl';
-        this.euimSize2XL = value === '2xl';
-        this.euimSize3XL = value === '3xl';
-        this.euimSize4XL = value === '4xl';
-        this.euimSize5XL = value === '5xl';
-        this._euimSizeVariant = value;
-    }
-    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.euimSize2XS ? `${rootClass}--size-2xs` : '',
-            this.euimSizeXS ? `${rootClass}--size-xs` : '',
-            this.euimSizeS ? `${rootClass}--size-s` : '',
-            this.euimSizeM ? `${rootClass}--size-m` : '',
-            this.euimSizeL ? `${rootClass}--size-l` : '',
-            this.euimSizeXL ? `${rootClass}--size-xl` : '',
-            this.euimSize2XL ? `${rootClass}--size-2xl` : '',
-            this.euimSize3XL ? `${rootClass}--size-3xl` : '',
-            this.euimSize4XL ? `${rootClass}--size-4xl` : '',
-            this.euimSize5XL ? `${rootClass}--size-5xl` : '',
-            this.euimPositionTopEnd ? `${rootClass}--position-top-end` : '',
-            this.euimDisabled ? `${rootClass}--disabled disabled` : '',
-            this.euimFontBold ? 'eui-u-font-bold' : '',
-            this.euimFontRegular ? 'eui-u-font-regular' : '',
-            this.euimFontBoldItalic ? 'eui-u-font-bold-italic' : '',
-            this.euimFontItalic ? 'eui-u-font-italic' : '',
-            this.euimFontLight ? 'eui-u-font-light' : '',
-        ]
-            .join(' ')
-            .trim();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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", 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 }); }
-}
-__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: "16.2.12", ngImport: i0, type: BaseStatesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    // eslint-disable-next-line
-                    selector: '[euimBase]',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                    host: {
-                        '[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
-            }], euimDisabled: [{
-                type: Input
-            }], euimPositionTopEnd: [{
-                type: Input
-            }], euimFontBold: [{
-                type: Input
-            }], euimFontRegular: [{
-                type: Input
-            }], euimFontBoldItalic: [{
-                type: Input
-            }], euimFontItalic: [{
-                type: Input
-            }], euimFontLight: [{
-                type: Input
-            }], euimSize2XS: [{
-                type: Input
-            }], euimSizeXS: [{
-                type: Input
-            }], euimSizeS: [{
-                type: Input
-            }], euimSizeM: [{
-                type: Input
-            }], euimSizeL: [{
-                type: Input
-            }], euimSizeXL: [{
-                type: Input
-            }], euimSize2XL: [{
-                type: Input
-            }], euimSize3XL: [{
-                type: Input
-            }], euimSize4XL: [{
-                type: Input
-            }], euimSize5XL: [{
-                type: Input
-            }], euimSizeVariant: [{
+                    ],
+                }]
+        }] });
+
+class EuimSidebarComponent {
+    constructor() {
+        this.className = 'euim-sidebar';
+        this.ionMenuId = 'main';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSidebarComponent, selector: "euim-sidebar", inputs: { ionMenuId: "ionMenuId" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-base-spacing-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-base-spacing-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding
+            }], ionMenuId: [{
                 type: Input
             }] } });
 
+class EuimSidebarContentComponent extends EuimSidebarComponent {
+    constructor() {
+        super(...arguments);
+        this.className = 'euim-sidebar-content';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", host: { properties: { "className": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n", dependencies: [{ kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding
+            }] } });
+
+class EuimSidebarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, declarations: [EuimSidebarComponent,
+            EuimSidebarContentComponent], imports: [CommonModule,
+            RouterModule,
+            IonicModule,
+            EuimAvatarIconModule,
+            EuimLabelModule,
+            EuimNotificationItemModule], exports: [EuimSidebarComponent,
+            EuimSidebarContentComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, imports: [CommonModule,
+            RouterModule,
+            IonicModule,
+            EuimAvatarIconModule,
+            EuimLabelModule,
+            EuimNotificationItemModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        IonicModule,
+                        EuimAvatarIconModule,
+                        EuimLabelModule,
+                        EuimNotificationItemModule,
+                    ],
+                    declarations: [
+                        EuimSidebarComponent,
+                        EuimSidebarContentComponent,
+                    ],
+                    exports: [
+                        EuimSidebarComponent,
+                        EuimSidebarContentComponent,
+                    ],
+                }]
+        }] });
+
 class EuimHeaderDetailsComponent {
     get cssClasses() {
         return this.getCssClasses();
@@ -2000,21 +1668,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class EuimInfoScreenComponent {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    getCssClasses() {
-        return [
-            'euim-info-screen',
-        ].join(' ');
+    constructor() {
+        this.className = 'euim-info-screen';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimInfoScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimInfoScreenComponent, selector: "euim-info-screen", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-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-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-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-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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimInfoScreenComponent, selector: "euim-info-screen", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-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-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-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-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: "16.2.12", 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{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-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-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-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: { cssClasses: [{
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2118,11 +1781,11 @@ class EuimBadgeComponent {
         ].join(' ').trim();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimBadgeComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-badge', encapsulation: ViewEncapsulation.None, hostDirectives: [
+            args: [{ selector: 'euim-badge', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: BaseStatesDirective,
                             inputs: [
@@ -2163,126 +1826,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimMessageComponent extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this._euimInfo = true;
-        this._euimSuccess = false;
-        this._euimWarning = false;
-        this._euimDanger = false;
-        this._variant = 'info';
-    }
-    get euimInfo() {
-        return this._euimInfo;
-    }
-    set euimInfo(value) {
-        this.resetVariantType();
-        this._euimInfo = coerceBooleanProperty(value);
-        if (this._euimInfo) {
-            this._variant = 'info';
-        }
-    }
-    get euimSuccess() {
-        return this._euimSuccess;
-    }
-    set euimSuccess(value) {
-        this.resetVariantType();
-        this._euimSuccess = coerceBooleanProperty(value);
-        if (this._euimSuccess) {
-            this._variant = 'success';
+class EuimMessageComponent {
+    get icon() {
+        if (this.baseStatesDirective.euimWarning) {
+            return 'alert-circle';
         }
-    }
-    get euimWarning() {
-        return this._euimWarning;
-    }
-    set euimWarning(value) {
-        this.resetVariantType();
-        this._euimWarning = coerceBooleanProperty(value);
-        if (this._euimWarning) {
-            this._variant = 'warning';
+        if (this.baseStatesDirective.euimDanger) {
+            return 'close-circle';
         }
-    }
-    get euimDanger() {
-        return this._euimDanger;
-    }
-    set euimDanger(value) {
-        this.resetVariantType();
-        this._euimDanger = coerceBooleanProperty(value);
-        if (this._euimDanger) {
-            this._variant = 'danger';
+        if (this.baseStatesDirective.euimSuccess) {
+            return 'checkmark-circle';
         }
-    }
-    get variant() {
-        return this._variant;
-    }
-    set variant(value) {
-        this._euimWarning = value === 'warning';
-        this._euimInfo = value === 'info';
-        this._euimSuccess = value === 'success';
-        this._euimDanger = value === 'danger';
-        this._variant = value;
-    }
-    get color() {
-        return this.variant;
-    }
-    get icon() {
-        switch (this.variant) {
-            case 'warning':
-                return 'alert-circle';
-            case 'danger':
-                return 'close-circle';
-            case 'success':
-                return 'checkmark-circle';
-            case 'info':
-                return 'information-circle';
-            default:
-                return '';
+        if (this.baseStatesDirective.euimInfo || !this.baseStatesDirective.euimWarning && !this.baseStatesDirective.euimDanger && !this.baseStatesDirective.euimSuccess && !this.baseStatesDirective.euimInfo) {
+            return 'information-circle';
         }
     }
     get cssClasses() {
         return this.getCssClasses();
     }
-    resetVariantType() {
-        this._euimDanger = false;
-        this._euimInfo = false;
-        this._euimSuccess = false;
-        this._euimInfo = false;
-        this._variant = null;
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
     }
     getCssClasses() {
         return [
-            'euim-message',
-            this.color ? `euim-message--${this.color}` : '',
+            this.baseStatesDirective.getCssClasses('euim-message'),
+            !this.baseStatesDirective.euimWarning &&
+                !this.baseStatesDirective.euimDanger &&
+                !this.baseStatesDirective.euimSuccess &&
+                !this.baseStatesDirective.euimInfo ? 'euim-message--info' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMessageComponent, selector: "euim-message", inputs: { euimInfo: "euimInfo", euimSuccess: "euimSuccess", euimWarning: "euimWarning", euimDanger: "euimDanger", variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMessageComponent, selector: "euim-message", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimVariant", "euimVariant"] }], 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: "16.2.12", ngImport: i0, type: EuimMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], propDecorators: { euimInfo: [{
-                type: Input
-            }], euimSuccess: [{
-                type: Input
-            }], euimWarning: [{
-                type: Input
-            }], euimDanger: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], cssClasses: [{
+            args: [{ selector: 'euim-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimInfo',
+                                'euimSuccess',
+                                'euimWarning',
+                                'euimDanger',
+                                'euimVariant',
+                            ],
+                        },
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimMessageTitleComponent extends EuimBaseDirective {
+class EuimMessageTitleComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-message-title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMessageTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMessageTitleComponent, selector: "euim-message-title", host: { properties: { "className": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMessageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMessageTitleComponent, selector: "euim-message-title", host: { properties: { "className": "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: "16.2.12", ngImport: i0, type: EuimMessageTitleComponent, decorators: [{
             type: Component,
@@ -2325,9 +1926,8 @@ class EuimStepperChangeEvent {
         this.currentStep = currentStep;
     }
 }
-class EuimStepperComponent extends EuimBaseDirective {
+class EuimStepperComponent {
     constructor() {
-        super(...arguments);
         this.currentStep = 1;
         this.stepsCount = 5;
         this.isPreviousDisabled = true;
@@ -2353,12 +1953,18 @@ class EuimStepperComponent extends EuimBaseDirective {
         this.isPreviousDisabled = this.currentStep <= 1;
         this.isNextDisabled = this.currentStep >= this.stepsCount;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimStepperComponent, selector: "euim-stepper", inputs: { currentStep: "currentStep", stepsCount: "stepsCount", isPreviousDisabled: "isPreviousDisabled", isNextDisabled: "isNextDisabled" }, outputs: { previous: "previous", next: "next" }, usesInheritance: true, 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" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EuimStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-stepper', 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" }]
+            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: [{
@@ -2399,13 +2005,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimFieldSetComponent extends EuimBaseDirective {
+class EuimFieldSetComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-fieldset';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimFieldSetComponent, selector: "euim-fieldset", host: { properties: { "class": "this.className" } }, usesInheritance: true, 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;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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: "16.2.12", ngImport: i0, type: EuimFieldSetComponent, decorators: [{
             type: Component,
@@ -2415,13 +2020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class EuimFieldsetLegendComponent extends EuimBaseDirective {
+class EuimFieldsetLegendComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-fieldset-legend';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldsetLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimFieldsetLegendComponent, selector: "euim-fieldset-legend", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldsetLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EuimFieldsetLegendComponent, decorators: [{
             type: Component,
@@ -2431,13 +2035,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class EuimFieldsetActionsComponent extends EuimBaseDirective {
+class EuimFieldsetActionsComponent {
     constructor() {
-        super(...arguments);
         this.className = 'euim-fieldset-actions';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldsetActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimFieldsetActionsComponent, selector: "euim-fieldset-actions", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimFieldsetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EuimFieldsetActionsComponent, decorators: [{
             type: Component,
@@ -2479,64 +2082,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimSpinnerComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    getCssClasses() {
-        return [
-            'euim-spinner',
-        ].join(' ');
+class EuimSpinnerComponent {
+    constructor() {
+        this.className = 'euim-spinner';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSpinnerComponent, selector: "euim-spinner", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"] }]
-        }], propDecorators: { cssClasses: [{
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
-class EuimSpinnerMessageComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    getCssClasses() {
-        return [
-            'euim-spinner-message',
-        ].join(' ');
+class EuimSpinnerMessageComponent {
+    constructor() {
+        this.className = 'euim-spinner-message';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".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)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[euimSpinnerMessage]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: [".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)}\n"] }]
-        }], propDecorators: { cssClasses: [{
+            args: [{ selector: '[euimSpinnerMessage]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".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)}\n"] }]
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
-class EuimSpinnerDescriptionComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    getCssClasses() {
-        return [
-            'euim-spinner-description',
-        ].join(' ');
+class EuimSpinnerDescriptionComponent {
+    constructor() {
+        this.className = 'euim-spinner-description';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerDescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSpinnerDescriptionComponent, selector: "[euimSpinnerDescription]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimSpinnerDescriptionComponent, selector: "[euimSpinnerDescription]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSpinnerDescriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[euimSpinnerDescription]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: [".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: { cssClasses: [{
+            args: [{ selector: '[euimSpinnerDescription]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".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']
             }] } });
@@ -2575,40 +2163,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimMediaHeaderComponent extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.euimNoGradient = false;
-    }
+class EuimMediaHeaderComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+        this.euimNoGradient = false;
+    }
     getCssClasses() {
         let size;
-        if (this.euimSizeM) {
+        if (this.baseStatesDirective.euimSizeM) {
             size = 'm';
         }
-        if (this.euimSizeS) {
+        if (this.baseStatesDirective.euimSizeS) {
             size = 's';
         }
-        if (this.euimSizeL) {
+        if (this.baseStatesDirective.euimSizeL) {
             size = 'l';
         }
         return [
-            'euim-media-header',
+            this.baseStatesDirective.getCssClasses('euim-media-header'),
             size ? `euim-media-header__size-${size}` : '',
-        ].join(' ');
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMediaHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: "euimNoGradient" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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{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,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{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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMediaHeaderComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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{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,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{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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
 ], EuimMediaHeaderComponent.prototype, "euimNoGradient", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMediaHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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{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,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{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"] }]
-        }], propDecorators: { euimNoGradient: [{
+            args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimSizeM',
+                                'euimSizeS',
+                                '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);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);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{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,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{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: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { euimNoGradient: [{
                 type: Input
             }], cssClasses: [{
                 type: HostBinding,
@@ -2701,85 +2298,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimDataSummaryColLabelDirective extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.rootClass = 'euim-data-summary__col-label';
-    }
+class EuimDataSummaryColLabelDirective {
     get cssClasses() {
-        return this.getCssClasses(this.rootClass);
+        return this.getCssClasses();
     }
-    getCssClasses(rootClass) {
-        return super.getCssClasses(rootClass);
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('euim-data-summary__col-label'),
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColLabelDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPrimary", "euimPrimary"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimDataSummaryColLabel]',
+                    hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimPrimary',
+                            ],
+                        },
+                    ],
                 }]
-        }], propDecorators: { cssClasses: [{
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimDataSummaryColValueDirective extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.rootClass = 'euim-data-summary__col-value';
-    }
+class EuimDataSummaryColValueDirective {
     get cssClasses() {
-        return this.getCssClasses(this.rootClass);
+        return this.getCssClasses();
     }
-    getCssClasses(rootClass) {
-        return super.getCssClasses(rootClass);
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('euim-data-summary__col-value'),
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimDataSummaryColValueDirective, selector: "[euimDataSummaryColValue]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColValueDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimDataSummaryColValueDirective, selector: "[euimDataSummaryColValue]", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryColValueDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimDataSummaryColValue]',
                 }]
-        }], propDecorators: { cssClasses: [{
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimDataSummaryComponent extends EuimBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.rootClass = 'euim-data-summary';
-    }
+class EuimDataSummaryComponent {
     get cssClasses() {
-        return this.getCssClasses(this.rootClass);
+        return this.getCssClasses();
     }
-    getCssClasses(rootClass) {
-        return super.getCssClasses(rootClass);
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('euim-data-summary'),
+        ].join(' ');
     }
     ngAfterContentInit() {
         if (this.euimDataSummaryColLabelComponent
             && this.euimDataSummaryColValueComponent) {
-            if (this.euimPrimary) {
+            if (this.baseStatesDirective.euimPrimary) {
                 this.euimDataSummaryColLabelComponent.forEach(item => {
-                    item.euimPrimary = true;
+                    item.baseStatesDirective.euimPrimary = true;
                 });
                 this.euimDataSummaryColValueComponent.forEach(item => {
-                    item.euimPrimary = true;
+                    item.baseStatesDirective.euimPrimary = true;
                 });
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimDataSummaryComponent, selector: "euim-data-summary", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimDataSummaryColLabelComponent", predicate: EuimDataSummaryColLabelDirective, descendants: true }, { propertyName: "euimDataSummaryColValueComponent", predicate: EuimDataSummaryColValueDirective, descendants: true }], usesInheritance: true, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimDataSummaryComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], 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: "16.2.12", ngImport: i0, type: EuimDataSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-data-summary', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], propDecorators: { euimDataSummaryColLabelComponent: [{
+            args: [{ selector: 'euim-data-summary', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimPrimary',
+                            ],
+                        },
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: BaseStatesDirective }]; }, propDecorators: { euimDataSummaryColLabelComponent: [{
                 type: ContentChildren,
                 args: [EuimDataSummaryColLabelDirective, { descendants: true }]
             }], euimDataSummaryColValueComponent: [{
@@ -2843,22 +2458,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimAvatarComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    getCssClasses() {
-        return [
-            'euim-avatar',
-        ].join(' ');
+class EuimAvatarComponent {
+    constructor() {
+        this.className = 'euim-avatar';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAvatarComponent, selector: "euim-avatar", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, 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"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-avatar', encapsulation: ViewEncapsulation.None, 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"] }]
-        }], propDecorators: { cssClasses: [{
+            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"] }]
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2929,9 +2539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimAlertMessageComponent extends EuimBaseDirective {
+class EuimAlertMessageComponent {
     constructor(baseStatesDirective) {
-        super();
         this.baseStatesDirective = baseStatesDirective;
         this._variant = 'default';
         this.euimClose = new EventEmitter();
@@ -2942,7 +2551,6 @@ class EuimAlertMessageComponent extends EuimBaseDirective {
     }
     ngOnInit() {
         if (this.baseStatesDirective) {
-            this.resetVariantType();
             this.setVariants();
         }
     }
@@ -2997,20 +2605,9 @@ class EuimAlertMessageComponent extends EuimBaseDirective {
     get cssClasses() {
         return this.getCssClasses();
     }
-    resetVariantType() {
-        this._euimDanger = false;
-        this._euimInfo = false;
-        this._euimSuccess = false;
-        this._euimInfo = false;
-        this._euimPrimary = false;
-        this._euimDark = false;
-        this._euimClear = false;
-        this._euimLight = false;
-        this._variant = null;
-    }
     getCssClasses() {
         return [
-            'euim-alert-message',
+            this.baseStatesDirective.getCssClasses('euim-alert-message'),
             this._variant ? `euim-alert-message--${this._variant}` : '',
             !this.isVisible ? 'euim-alert-message--hidden' : '',
         ].join(' ');
@@ -3023,7 +2620,7 @@ class EuimAlertMessageComponent extends EuimBaseDirective {
         this.euimClose.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimAlertMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: { euimLabelTruncate: "euimLabelTruncate", hasIcon: "hasIcon", isCloseable: "isCloseable" }, outputs: { euimClose: "euimClose" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimInfo", "euimInfo", "euimSuccess", "euimSuccess", "euimWarning", "euimWarning", "euimDanger", "euimDanger", "euimPrimary", "euimPrimary", "euimDark", "euimDark", "euimLight", "euimLight", "euimClear", "euimClear"] }], 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: "14.0.0", version: "16.2.12", 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"] }], 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 }); }
 }
 __decorate([
     coerceBoolean
@@ -3048,6 +2645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 'euimDark',
                                 'euimLight',
                                 'euimClear',
+                                'euimVariant',
                             ],
                         },
                     ], 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"] }]
@@ -3112,19 +2710,14 @@ class EuimSliderComponent {
         this.isPreviousBtn = false;
         this.isNextBtn = false;
         this.isRightBtnVisible = true;
+        this.className = 'euim-slider';
         this.slidesArray = [];
         this.currentSlide = 0;
         this.startX = 0;
     }
-    get cssClasses() {
-        return this.getCssClasses();
-    }
     onResize(event) {
         this.setSliderStyles();
     }
-    getCssClasses() {
-        return ['euim-slider'].join(' ');
-    }
     ngAfterViewInit() {
         this.setSliderStyles();
     }
@@ -3218,7 +2811,7 @@ class EuimSliderComponent {
         this.leftBtnActionClicked.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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.cssClasses" } }, 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"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     coerceBoolean
@@ -3237,7 +2830,7 @@ __decorate([
 ], EuimSliderComponent.prototype, "isRightBtnVisible", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"] }]
+            args: [{ selector: 'euim-slider', changeDetection: ChangeDetectionStrategy.OnPush, 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: function () { return [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { slides: [{
                 type: ViewChild,
                 args: ['slides', { static: true }]
@@ -3255,7 +2848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isNextBtn: [{
                 type: Input
-            }], isRightBtnVisible: [], cssClasses: [{
+            }], isRightBtnVisible: [], className: [{
                 type: HostBinding,
                 args: ['class']
             }], onResize: [{
@@ -3337,19 +2930,14 @@ class EuimSliderInfoScreenComponent {
             leftBtnName: 'Previous',
         };
         this.showLeftBtnAsPrevious = false;
+        this.className = 'euim-slider-info-screen';
         this.slidesArray = [];
         this.currentSlide = 0;
         this.startX = 0;
     }
-    get cssClasses() {
-        return this.getCssClasses();
-    }
     onResize(event) {
         this.setSliderStyles();
     }
-    getCssClasses() {
-        return ['euim-slider-info-screen'].join(' ');
-    }
     ngAfterViewInit() {
         this.setSliderStyles();
     }
@@ -3445,7 +3033,7 @@ class EuimSliderInfoScreenComponent {
         this.leftActionClicked.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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.cssClasses" } }, 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{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.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: "14.0.0", version: "16.2.12", 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{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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -3470,7 +3058,7 @@ __decorate([
 ], EuimSliderInfoScreenComponent.prototype, "showLeftBtnAsPrevious", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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{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"] }]
+            args: [{ selector: 'euim-slider-info-screen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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{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: function () { return [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { slides: [{
                 type: ViewChild,
                 args: ['slides', { static: true }]
@@ -3492,7 +3080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], actionBtnNames: [{
                 type: Input
-            }], showLeftBtnAsPrevious: [], cssClasses: [{
+            }], showLeftBtnAsPrevious: [], className: [{
                 type: HostBinding,
                 args: ['class']
             }], onResize: [{
@@ -3613,17 +3201,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimScrollerXComponent extends EuimBaseDirective {
-    get cssClasses() {
-        return super.getCssClasses('euim-scroller-x');
+class EuimScrollerXComponent {
+    constructor() {
+        this.className = 'euim-scroller-x';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimScrollerXComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimScrollerXComponent, selector: "euim-scroller-x", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent}.euim-scroller-x>*{flex:0 0 auto}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimScrollerXComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimScrollerXComponent, selector: "euim-scroller-x", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent}.euim-scroller-x>*{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimScrollerXComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-scroller-x', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent}.euim-scroller-x>*{flex:0 0 auto}\n"] }]
-        }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'euim-scroller-x', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent}.euim-scroller-x>*{flex:0 0 auto}\n"] }]
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -3651,29 +3239,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class EuimChipSelectorItemDirective extends EuimBaseDirective {
-    get euimChipSelectorAll() {
-        return this._euimChipSelectorAll;
-    }
-    set euimChipSelectorAll(value) {
-        this._euimChipSelectorAll = coerceBooleanProperty(value);
-    }
-    get cssClasses() {
-        return this.getCssClasses(this.rootClass);
-    }
+class EuimChipSelectorItemDirective {
     constructor(renderer, el) {
-        super();
         this.renderer = renderer;
         this.el = el;
-        this._euimChipSelectorAll = false;
-        this.rootClass = 'euim-chip-selector__item';
-    }
-    getCssClasses(rootClass) {
-        return super.getCssClasses(rootClass);
+        this.euimChipSelectorAll = false;
+        this.className = 'euim-chip-selector__item';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: "id", euimChipSelectorAll: "euimChipSelectorAll" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: "id", euimChipSelectorAll: "euimChipSelectorAll" }, host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
+__decorate([
+    coerceBoolean
+], EuimChipSelectorItemDirective.prototype, "euimChipSelectorAll", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimChipSelectorItemDirective, decorators: [{
             type: Directive,
             args: [{
@@ -3683,14 +3261,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], euimChipSelectorAll: [{
                 type: Input
-            }], cssClasses: [{
+            }], className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimChipSelectorComponent extends EuimBaseDirective {
+class EuimChipSelectorComponent {
     constructor() {
-        super(...arguments);
         this.backgroundColor = 'primary';
         this.chipColor = 'white';
         this.chipSelectedColor = 'white';
@@ -3835,15 +3412,15 @@ class EuimChipSelectorComponent extends EuimBaseDirective {
         this.filterConditions = [];
         this.selectedChips = ['0'];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimChipSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", chipColor: "chipColor", 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 }], usesInheritance: 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimChipSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", chipColor: "chipColor", 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 }], 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 }); }
 }
 __decorate([
     coerceBoolean
 ], EuimChipSelectorComponent.prototype, "isMultiSelectionMode", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimChipSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-chip-selector', encapsulation: ViewEncapsulation.None, 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: "<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"] }]
         }], propDecorators: { backgroundColor: [{
                 type: Input
             }], chipColor: [{
@@ -4028,11 +3605,11 @@ class EuimSkeletonListComponent {
         return Array.from({ length: this.items });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimSkeletonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-skeleton-list', 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: "<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" }]
         }], propDecorators: { items: [{
                 type: Input
             }], skeletonListItem: [{