@eui/mobile-core 14.0.0-beta.4 → 14.0.0-beta.7

package/fesm2020/eui-mobile-core.mjs

@@ -1,20 +1,20 @@
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, HostBinding, Input, Component, ViewEncapsulation, NgModule, EventEmitter, ChangeDetectionStrategy, Output } from '@angular/core';
+import { Injectable, Directive, HostBinding, Input, Component, ViewEncapsulation, NgModule, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@ionic/angular';
+import * as i1$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
-import { RouterModule } from '@angular/router';
-import * as i5 from '@eui/ecl-core';
-import { EclLanguageService, EclDefaultLanguageService, EclLanguageListComponentModule, EclLinkDirectiveModule, EclIconComponentModule } from '@eui/ecl-core';
-import * as i2$1 from '@eui/core';
+import * as i2 from '@eui/core';
 import { UxEuLanguages } from '@eui/core';
-import * as i1$1 from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { takeUntil, distinctUntilKeyChanged } from 'rxjs/operators';
+import * as i5 from '@eui/ecl-core';
+import { EclLanguageService, EclDefaultLanguageService, EclLanguageListComponentModule, EclLinkDirectiveModule, EclIconComponentModule } from '@eui/ecl-core';
+import { RouterModule } from '@angular/router';
 
 const initialState = {
     isLanguageListVisible: false,
@@ -69,41 +69,109 @@ class EuimBaseDirective {
         this._euiSize4XL = false;
     }
     // TYPECLASS
-    get euiPrimary() { return this._euiPrimary; }
-    set euiPrimary(value) { this._euiPrimary = coerceBooleanProperty(value); }
-    get euiSecondary() { return this._euiSecondary; }
-    set euiSecondary(value) { this._euiSecondary = coerceBooleanProperty(value); }
-    get euiInfo() { return this._euiInfo; }
-    set euiInfo(value) { this._euiInfo = coerceBooleanProperty(value); }
-    get euiSuccess() { return this._euiSuccess; }
-    set euiSuccess(value) { this._euiSuccess = coerceBooleanProperty(value); }
-    get euiWarning() { return this._euiWarning; }
-    set euiWarning(value) { this._euiWarning = coerceBooleanProperty(value); }
-    get euiDanger() { return this._euiDanger; }
-    set euiDanger(value) { this._euiDanger = coerceBooleanProperty(value); }
-    get euiAccent() { return this._euiAccent; }
-    set euiAccent(value) { this._euiAccent = coerceBooleanProperty(value); }
-    get euiInverted() { return this._euiInverted; }
-    set euiInverted(value) { this._euiInverted = coerceBooleanProperty(value); }
+    get euiPrimary() {
+        return this._euiPrimary;
+    }
+    set euiPrimary(value) {
+        this._euiPrimary = coerceBooleanProperty(value);
+    }
+    get euiSecondary() {
+        return this._euiSecondary;
+    }
+    set euiSecondary(value) {
+        this._euiSecondary = coerceBooleanProperty(value);
+    }
+    get euiInfo() {
+        return this._euiInfo;
+    }
+    set euiInfo(value) {
+        this._euiInfo = coerceBooleanProperty(value);
+    }
+    get euiSuccess() {
+        return this._euiSuccess;
+    }
+    set euiSuccess(value) {
+        this._euiSuccess = coerceBooleanProperty(value);
+    }
+    get euiWarning() {
+        return this._euiWarning;
+    }
+    set euiWarning(value) {
+        this._euiWarning = coerceBooleanProperty(value);
+    }
+    get euiDanger() {
+        return this._euiDanger;
+    }
+    set euiDanger(value) {
+        this._euiDanger = coerceBooleanProperty(value);
+    }
+    get euiAccent() {
+        return this._euiAccent;
+    }
+    set euiAccent(value) {
+        this._euiAccent = coerceBooleanProperty(value);
+    }
+    get euiInverted() {
+        return this._euiInverted;
+    }
+    set euiInverted(value) {
+        this._euiInverted = coerceBooleanProperty(value);
+    }
     // SIZES
-    get euiSize2XS() { return this._euiSize2XS; }
-    set euiSize2XS(value) { this._euiSize2XS = coerceBooleanProperty(value); }
-    get euiSizeXS() { return this._euiSizeXS; }
-    set euiSizeXS(value) { this._euiSizeXS = coerceBooleanProperty(value); }
-    get euiSizeS() { return this._euiSizeS; }
-    set euiSizeS(value) { this._euiSizeS = coerceBooleanProperty(value); }
-    get euiSizeM() { return this._euiSizeM; }
-    set euiSizeM(value) { this._euiSizeM = coerceBooleanProperty(value); }
-    get euiSizeL() { return this._euiSizeL; }
-    set euiSizeL(value) { this._euiSizeL = coerceBooleanProperty(value); }
-    get euiSizeXL() { return this._euiSizeXL; }
-    set euiSizeXL(value) { this._euiSizeXL = coerceBooleanProperty(value); }
-    get euiSize2XL() { return this._euiSize2XL; }
-    set euiSize2XL(value) { this._euiSize2XL = coerceBooleanProperty(value); }
-    get euiSize3XL() { return this._euiSize3XL; }
-    set euiSize3XL(value) { this._euiSize3XL = coerceBooleanProperty(value); }
-    get euiSize4XL() { return this._euiSize4XL; }
-    set euiSize4XL(value) { this._euiSize4XL = coerceBooleanProperty(value); }
+    get euiSize2XS() {
+        return this._euiSize2XS;
+    }
+    set euiSize2XS(value) {
+        this._euiSize2XS = coerceBooleanProperty(value);
+    }
+    get euiSizeXS() {
+        return this._euiSizeXS;
+    }
+    set euiSizeXS(value) {
+        this._euiSizeXS = coerceBooleanProperty(value);
+    }
+    get euiSizeS() {
+        return this._euiSizeS;
+    }
+    set euiSizeS(value) {
+        this._euiSizeS = coerceBooleanProperty(value);
+    }
+    get euiSizeM() {
+        return this._euiSizeM;
+    }
+    set euiSizeM(value) {
+        this._euiSizeM = coerceBooleanProperty(value);
+    }
+    get euiSizeL() {
+        return this._euiSizeL;
+    }
+    set euiSizeL(value) {
+        this._euiSizeL = coerceBooleanProperty(value);
+    }
+    get euiSizeXL() {
+        return this._euiSizeXL;
+    }
+    set euiSizeXL(value) {
+        this._euiSizeXL = coerceBooleanProperty(value);
+    }
+    get euiSize2XL() {
+        return this._euiSize2XL;
+    }
+    set euiSize2XL(value) {
+        this._euiSize2XL = coerceBooleanProperty(value);
+    }
+    get euiSize3XL() {
+        return this._euiSize3XL;
+    }
+    set euiSize3XL(value) {
+        this._euiSize3XL = coerceBooleanProperty(value);
+    }
+    get euiSize4XL() {
+        return this._euiSize4XL;
+    }
+    set euiSize4XL(value) {
+        this._euiSize4XL = coerceBooleanProperty(value);
+    }
     getCssClasses(rootClass) {
         return [
             rootClass,
@@ -186,12 +254,24 @@ class EuimLabelComponent extends EuimBaseDirective {
         this._euimLabelSubTitle = false;
         this._euimLabelMeta = false;
     }
-    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 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 cssClasses() {
         return this.getCssClasses();
     }
@@ -370,6 +450,80 @@ class EuimControlFeedbackModule {
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(EuimControlFeedbackModule, { declarations: [EuimControlFeedbackComponent], imports: [CommonModule,
         IonicModule], exports: [EuimControlFeedbackComponent] }); })();
 
+function EuimLanguageListComponent_ecl_language_list_item_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ecl-language-list-item", 2);
+} if (rf & 2) {
+    const language_r1 = ctx.$implicit;
+    i0.ɵɵproperty("languageCode", language_r1.code)("languageLabel", language_r1.label);
+} }
+class EuimLanguageListComponent extends EuimBaseDirective {
+    constructor(cd, translateService, appShellService, appService) {
+        super();
+        this.cd = cd;
+        this.translateService = translateService;
+        this.appShellService = appShellService;
+        this.appService = appService;
+        this.languageSelected = new EventEmitter();
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
+            this.languages = (state.languages) ?
+                UxEuLanguages.getOrderedLanguages(state.languages) :
+                UxEuLanguages.getLanguages();
+            this.cd.detectChanges();
+        });
+        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
+            this.selectedLanguage = {
+                code: state.activeLanguage,
+                label: this.getLanguageLabel(state.activeLanguage),
+            };
+            this.cd.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onLanguageSelected(evt) {
+        this.translateService.use(evt.language.code);
+        this.appService.isLanguageListVisible = false;
+        this.appShellService.setState({
+            ...this.appShellService.state,
+            activeLanguage: evt.language.code,
+        });
+    }
+    onLanguageListClose() {
+        this.appService.isLanguageListVisible = false;
+    }
+    getLanguageLabel(languageCode) {
+        for (const language of this.languages) {
+            if (language.code === languageCode) {
+                return language.label;
+            }
+        }
+        return;
+    }
+}
+/** @nocollapse */ EuimLanguageListComponent.ɵfac = function EuimLanguageListComponent_Factory(t) { return new (t || EuimLanguageListComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.TranslateService), i0.ɵɵdirectiveInject(i2.UxAppShellService), i0.ɵɵdirectiveInject(EuimAppService)); };
+/** @nocollapse */ EuimLanguageListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimLanguageListComponent, selectors: [["euim-language-list"]], outputs: { languageSelected: "languageSelected" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 6, consts: [[3, "selectedLanguageCode", "isOverlay", "isHidden", "languageSelected", "close"], [3, "languageCode", "languageLabel", 4, "ngFor", "ngForOf"], [3, "languageCode", "languageLabel"]], template: function EuimLanguageListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "ecl-language-list", 0);
+        i0.ɵɵlistener("languageSelected", function EuimLanguageListComponent_Template_ecl_language_list_languageSelected_0_listener($event) { return ctx.onLanguageSelected($event); })("close", function EuimLanguageListComponent_Template_ecl_language_list_close_0_listener() { return ctx.onLanguageListClose(); });
+        i0.ɵɵpipe(1, "async");
+        i0.ɵɵtemplate(2, EuimLanguageListComponent_ecl_language_list_item_2_Template, 1, 2, "ecl-language-list-item", 1);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("selectedLanguageCode", ctx.selectedLanguage == null ? null : ctx.selectedLanguage.code)("isOverlay", true)("isHidden", !i0.ɵɵpipeBind1(1, 4, ctx.appService.state$).isLanguageListVisible);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.languages);
+    } }, dependencies: [i4.NgForOf, i5.EclLanguageListComponent, i5.EclLanguageListItemComponent, i4.AsyncPipe], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimLanguageListComponent, [{
+        type: Component,
+        args: [{ selector: 'euim-language-list', template: "<ecl-language-list\n    [selectedLanguageCode]=\"selectedLanguage?.code\"\n    [isOverlay]=\"true\"\n    [isHidden]=\"!(appService.state$ | async).isLanguageListVisible\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (close)=\"onLanguageListClose()\">\n    <ecl-language-list-item\n        *ngFor=\"let language of languages\"\n        [languageCode]=\"language.code\"\n        [languageLabel]=\"language.label\">\n    </ecl-language-list-item>\n</ecl-language-list>\n" }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }, { type: i2.UxAppShellService }, { type: EuimAppService }]; }, { languageSelected: [{
+            type: Output
+        }] }); })();
+
 const _c0$i = ["*"];
 class EuimAppComponent extends EuimBaseDirective {
     constructor(asService) {
@@ -379,24 +533,25 @@ class EuimAppComponent extends EuimBaseDirective {
     }
 }
 /** @nocollapse */ EuimAppComponent.ɵfac = function EuimAppComponent_Factory(t) { return new (t || EuimAppComponent)(i0.ɵɵdirectiveInject(EuimAppService)); };
-/** @nocollapse */ EuimAppComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimAppComponent, selectors: [["euim-app"]], inputs: { ionMenuId: "ionMenuId" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$i, decls: 3, vars: 1, consts: [[3, "id"]], template: function EuimAppComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ EuimAppComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimAppComponent, selectors: [["euim-app"]], inputs: { ionMenuId: "ionMenuId" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$i, decls: 4, vars: 1, consts: [[3, "id"]], template: function EuimAppComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "ion-app");
         i0.ɵɵprojection(1);
         i0.ɵɵelement(2, "ion-router-outlet", 0);
         i0.ɵɵelementEnd();
+        i0.ɵɵelement(3, "euim-language-list");
     } if (rf & 2) {
         i0.ɵɵadvance(2);
         i0.ɵɵpropertyInterpolate("id", ctx.ionMenuId);
-    } }, dependencies: [i1.IonApp, i1.IonRouterOutlet], encapsulation: 2 });
+    } }, dependencies: [i1$1.IonApp, i1$1.IonRouterOutlet, EuimLanguageListComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimAppComponent, [{
         type: Component,
-        args: [{ selector: 'euim-app', template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n\n<!-- <euim-language-list></euim-language-list> -->\n" }]
+        args: [{ selector: 'euim-app', template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n\n<euim-language-list></euim-language-list>\n" }]
     }], function () { return [{ type: EuimAppService }]; }, { ionMenuId: [{
             type: Input
         }] }); })();
 
-function EuimMenuComponent_ng_container_1_ion_list_header_1_Template(rf, ctx) { if (rf & 1) {
+function EuimMenuComponent_ng_container_1_ion_list_header_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ion-list-header");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -405,17 +560,17 @@ function EuimMenuComponent_ng_container_1_ion_list_header_1_Template(rf, ctx) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", item_r1.subtitle, " ");
 } }
-function EuimMenuComponent_ng_container_1_ion_item_2_ion_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ion-icon", 5);
+function EuimMenuComponent_ng_container_1_ion_item_3_ion_icon_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
 } if (rf & 2) {
     const item_r1 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵproperty("name", item_r1.icon)("color", item_r1.iconColor);
 } }
-function EuimMenuComponent_ng_container_1_ion_item_2_Template(rf, ctx) { if (rf & 1) {
+function EuimMenuComponent_ng_container_1_ion_item_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-item", 3);
-    i0.ɵɵlistener("click", function EuimMenuComponent_ng_container_1_ion_item_2_Template_ion_item_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); const item_r1 = ctx_r9.$implicit; const i_r2 = ctx_r9.index; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onItemClick($event, item_r1.url, i_r2, item_r1)); });
-    i0.ɵɵtemplate(1, EuimMenuComponent_ng_container_1_ion_item_2_ion_icon_1_Template, 1, 2, "ion-icon", 4);
+    i0.ɵɵelementStart(0, "ion-item", 4);
+    i0.ɵɵlistener("click", function EuimMenuComponent_ng_container_1_ion_item_3_Template_ion_item_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); const item_r1 = ctx_r9.$implicit; const i_r2 = ctx_r9.index; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onItemClick($event, item_r1.url, i_r2, item_r1)); });
+    i0.ɵɵtemplate(1, EuimMenuComponent_ng_container_1_ion_item_3_ion_icon_1_Template, 1, 2, "ion-icon", 5);
     i0.ɵɵelementStart(2, "ion-label");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -429,12 +584,14 @@ function EuimMenuComponent_ng_container_1_ion_item_2_Template(rf, ctx) { if (rf
 } }
 function EuimMenuComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, EuimMenuComponent_ng_container_1_ion_list_header_1_Template, 2, 1, "ion-list-header", 1);
-    i0.ɵɵtemplate(2, EuimMenuComponent_ng_container_1_ion_item_2_Template, 4, 3, "ion-item", 2);
+    i0.ɵɵelementStart(1, "ion-menu-toggle", 1);
+    i0.ɵɵtemplate(2, EuimMenuComponent_ng_container_1_ion_list_header_2_Template, 2, 1, "ion-list-header", 2);
+    i0.ɵɵtemplate(3, EuimMenuComponent_ng_container_1_ion_item_3_Template, 4, 3, "ion-item", 3);
+    i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const item_r1 = ctx.$implicit;
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", item_r1.subtitle);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", item_r1.label);
@@ -457,19 +614,19 @@ class EuimMenuComponent extends EuimBaseDirective {
         this.itemClick.emit(item);
     }
 }
-/** @nocollapse */ EuimMenuComponent.ɵfac = function EuimMenuComponent_Factory(t) { return new (t || EuimMenuComponent)(i0.ɵɵdirectiveInject(i1.NavController)); };
-/** @nocollapse */ EuimMenuComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimMenuComponent, selectors: [["euim-menu"]], inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["button", "", "class", "euim-menu__ion-item", 3, "lines", "click", 4, "ngIf"], ["button", "", 1, "euim-menu__ion-item", 3, "lines", "click"], [3, "name", "color", 4, "ngIf"], [3, "name", "color"]], template: function EuimMenuComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ EuimMenuComponent.ɵfac = function EuimMenuComponent_Factory(t) { return new (t || EuimMenuComponent)(i0.ɵɵdirectiveInject(i1$1.NavController)); };
+/** @nocollapse */ EuimMenuComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimMenuComponent, selectors: [["euim-menu"]], inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[4, "ngFor", "ngForOf"], ["auto-hide", "true"], [4, "ngIf"], ["button", "", "class", "euim-menu__ion-item", 3, "lines", "click", 4, "ngIf"], ["button", "", 1, "euim-menu__ion-item", 3, "lines", "click"], [3, "name", "color", 4, "ngIf"], [3, "name", "color"]], template: function EuimMenuComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "ion-list");
-        i0.ɵɵtemplate(1, EuimMenuComponent_ng_container_1_Template, 3, 2, "ng-container", 0);
+        i0.ɵɵtemplate(1, EuimMenuComponent_ng_container_1_Template, 4, 2, "ng-container", 0);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.items);
-    } }, dependencies: [i2.NgForOf, i2.NgIf, i1.IonIcon, i1.IonItem, i1.IonLabel, i1.IonList, i1.IonListHeader], styles: [".euim-menu__ion-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-icon{margin-left:var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-label{margin-left:var(--eui-base-spacing-xs)}\n"], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i4.NgForOf, i4.NgIf, i1$1.IonIcon, i1$1.IonItem, i1$1.IonLabel, i1$1.IonList, i1$1.IonListHeader, i1$1.IonMenuToggle], styles: [".euim-menu__ion-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-icon{margin-left:var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-label{margin-left:var(--eui-base-spacing-xs)}\n"], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimMenuComponent, [{
         type: Component,
-        args: [{ selector: 'euim-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-list >\n    <ng-container *ngFor=\"let item of items; let i = index\">\n        <ion-list-header *ngIf=\"item.subtitle\"> {{item.subtitle}} </ion-list-header>\n        <ion-item *ngIf=\"item.label\" button class=\"euim-menu__ion-item\" [lines]=\"item.lines ? item.lines : 'none'\"\n                  (click)=\"onItemClick($event, (item.url), i, item)\">\n            <ion-icon *ngIf=\"item.icon\"\n                      [name]=\"item.icon\"\n                      [color]=\"item.iconColor\"></ion-icon>\n            <ion-label>{{item.label}}</ion-label>\n        </ion-item>\n    </ng-container>\n</ion-list>\n", styles: [".euim-menu__ion-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-icon{margin-left:var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-label{margin-left:var(--eui-base-spacing-xs)}\n"] }]
-    }], function () { return [{ type: i1.NavController }]; }, { items: [{
+        args: [{ selector: 'euim-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-list >\n    <ng-container *ngFor=\"let item of items; let i = index\">\n        <ion-menu-toggle auto-hide=\"true\">\n            <ion-list-header *ngIf=\"item.subtitle\"> {{item.subtitle}} </ion-list-header>\n            <ion-item *ngIf=\"item.label\" button class=\"euim-menu__ion-item\" [lines]=\"item.lines ? item.lines : 'none'\"\n                      (click)=\"onItemClick($event, (item.url), i, item)\">\n                <ion-icon *ngIf=\"item.icon\"\n                          [name]=\"item.icon\"\n                          [color]=\"item.iconColor\"></ion-icon>\n                <ion-label>{{item.label}}</ion-label>\n            </ion-item>\n        </ion-menu-toggle>\n    </ng-container>\n</ion-list>\n", styles: [".euim-menu__ion-item{--padding-start: 0px;--inner-padding-start: var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-icon{margin-left:var(--eui-base-spacing-xs)}.euim-menu__ion-item ion-label{margin-left:var(--eui-base-spacing-xs)}\n"] }]
+    }], function () { return [{ type: i1$1.NavController }]; }, { items: [{
             type: Input
         }], itemClick: [{
             type: Output
@@ -532,7 +689,7 @@ class EuimAppSidebarComponent extends EuimBaseDirective {
     } if (rf & 2) {
         i0.ɵɵpropertyInterpolate("contentId", ctx.ionMenuId);
         i0.ɵɵpropertyInterpolate("menuId", ctx.ionMenuId);
-    } }, dependencies: [i1.IonContent, i1.IonFooter, i1.IonMenu, i1.IonToolbar], encapsulation: 2 });
+    } }, dependencies: [i1$1.IonContent, i1$1.IonFooter, i1$1.IonMenu, i1$1.IonToolbar], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimAppSidebarComponent, [{
         type: Component,
         args: [{ selector: 'euim-app-sidebar', template: "<ion-menu side=\"start\" contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\">\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" }]
@@ -642,80 +799,6 @@ class EuimAppSidebarModule {
         EuimAppSidebarFooterComponent,
         EuimAppSidebarMenuComponent] }); })();
 
-function EuimLanguageListComponent_ecl_language_list_item_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ecl-language-list-item", 2);
-} if (rf & 2) {
-    const language_r1 = ctx.$implicit;
-    i0.ɵɵproperty("languageCode", language_r1.code)("languageLabel", language_r1.label);
-} }
-class EuimLanguageListComponent extends EuimBaseDirective {
-    constructor(cd, translateService, appShellService, appService) {
-        super();
-        this.cd = cd;
-        this.translateService = translateService;
-        this.appShellService = appShellService;
-        this.appService = appService;
-        this.languageSelected = new EventEmitter();
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
-            this.languages = (state.languages) ?
-                UxEuLanguages.getOrderedLanguages(state.languages) :
-                UxEuLanguages.getLanguages();
-            this.cd.detectChanges();
-        });
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
-            this.selectedLanguage = {
-                code: state.activeLanguage,
-                label: this.getLanguageLabel(state.activeLanguage),
-            };
-            this.cd.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
-    onLanguageSelected(evt) {
-        this.translateService.use(evt.language.code);
-        this.appService.isLanguageListVisible = false;
-        this.appShellService.setState({
-            ...this.appShellService.state,
-            activeLanguage: evt.language.code,
-        });
-    }
-    onLanguageListClose() {
-        this.appService.isLanguageListVisible = false;
-    }
-    getLanguageLabel(languageCode) {
-        for (const language of this.languages) {
-            if (language.code === languageCode) {
-                return language.label;
-            }
-        }
-        return;
-    }
-}
-/** @nocollapse */ EuimLanguageListComponent.ɵfac = function EuimLanguageListComponent_Factory(t) { return new (t || EuimLanguageListComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.TranslateService), i0.ɵɵdirectiveInject(i2$1.UxAppShellService), i0.ɵɵdirectiveInject(EuimAppService)); };
-/** @nocollapse */ EuimLanguageListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimLanguageListComponent, selectors: [["euim-language-list"]], outputs: { languageSelected: "languageSelected" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 6, consts: [[3, "selectedLanguageCode", "isOverlay", "isHidden", "languageSelected", "close"], [3, "languageCode", "languageLabel", 4, "ngFor", "ngForOf"], [3, "languageCode", "languageLabel"]], template: function EuimLanguageListComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "ecl-language-list", 0);
-        i0.ɵɵlistener("languageSelected", function EuimLanguageListComponent_Template_ecl_language_list_languageSelected_0_listener($event) { return ctx.onLanguageSelected($event); })("close", function EuimLanguageListComponent_Template_ecl_language_list_close_0_listener() { return ctx.onLanguageListClose(); });
-        i0.ɵɵpipe(1, "async");
-        i0.ɵɵtemplate(2, EuimLanguageListComponent_ecl_language_list_item_2_Template, 1, 2, "ecl-language-list-item", 1);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("selectedLanguageCode", ctx.selectedLanguage == null ? null : ctx.selectedLanguage.code)("isOverlay", true)("isHidden", !i0.ɵɵpipeBind1(1, 4, ctx.appService.state$).isLanguageListVisible);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx.languages);
-    } }, dependencies: [i2.NgForOf, i5.EclLanguageListComponent, i5.EclLanguageListItemComponent, i2.AsyncPipe], encapsulation: 2 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimLanguageListComponent, [{
-        type: Component,
-        args: [{ selector: 'euim-language-list', template: "<ecl-language-list\n    [selectedLanguageCode]=\"selectedLanguage?.code\"\n    [isOverlay]=\"true\"\n    [isHidden]=\"!(appService.state$ | async).isLanguageListVisible\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (close)=\"onLanguageListClose()\">\n    <ecl-language-list-item\n        *ngFor=\"let language of languages\"\n        [languageCode]=\"language.code\"\n        [languageLabel]=\"language.label\">\n    </ecl-language-list-item>\n</ecl-language-list>\n" }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.UxAppShellService }, { type: EuimAppService }]; }, { languageSelected: [{
-            type: Output
-        }] }); })();
-
 class EuimLanguageSelectorComponent extends EuimBaseDirective {
     constructor(cd, translateService, appShellService, appService) {
         super();
@@ -771,7 +854,7 @@ class EuimLanguageSelectorComponent extends EuimBaseDirective {
         return super.getCssClasses('euim-language-selector');
     }
 }
-/** @nocollapse */ EuimLanguageSelectorComponent.ɵfac = function EuimLanguageSelectorComponent_Factory(t) { return new (t || EuimLanguageSelectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.TranslateService), i0.ɵɵdirectiveInject(i2$1.UxAppShellService), i0.ɵɵdirectiveInject(EuimAppService)); };
+/** @nocollapse */ EuimLanguageSelectorComponent.ɵfac = function EuimLanguageSelectorComponent_Factory(t) { return new (t || EuimLanguageSelectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.TranslateService), i0.ɵɵdirectiveInject(i2.UxAppShellService), i0.ɵɵdirectiveInject(EuimAppService)); };
 /** @nocollapse */ EuimLanguageSelectorComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EuimLanguageSelectorComponent, selectors: [["euim-language-selector"]], hostVars: 2, hostBindings: function EuimLanguageSelectorComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵclassMap(ctx.cssClasses);
     } }, inputs: { euimPrimary: "euimPrimary" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 7, consts: [[3, "click"], ["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>", "slot", "icon-only"]], template: function EuimLanguageSelectorComponent_Template(rf, ctx) { if (rf & 1) {
@@ -788,11 +871,11 @@ class EuimLanguageSelectorComponent extends EuimBaseDirective {
         i0.ɵɵclassMapInterpolate1("euim-language-selector__text ", ctx.euimPrimary ? "euim-language-selector__text--primary" : "", "");
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate1(" ", ctx.selectedLanguage == null ? null : ctx.selectedLanguage.code == null ? null : ctx.selectedLanguage.code.toUpperCase(), " ");
-    } }, dependencies: [i1.IonButton, i1.IonIcon], styles: [".euim-language-selector__text{font: 400 .75rem/1rem arial,sans-serif;font-style:normal;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)}\n"], encapsulation: 2 });
+    } }, dependencies: [i1$1.IonButton, i1$1.IonIcon], styles: [".euim-language-selector__text{font: 400 .75rem/1rem arial,sans-serif;font-style:normal;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)}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimLanguageSelectorComponent, [{
         type: Component,
         args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, template: "<ion-button (click)=\"onShowLanguageList($event)\">\n    <ion-icon  class=\"euim-language-selector__icon {{euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\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        slot=\"icon-only\">\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: 400 .75rem/1rem arial,sans-serif;font-style:normal;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)}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2$1.UxAppShellService }, { type: EuimAppService }]; }, { euimPrimary: [{
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }, { type: i2.UxAppShellService }, { type: EuimAppService }]; }, { euimPrimary: [{
             type: Input
         }], cssClasses: [{
             type: HostBinding,
@@ -974,7 +1057,7 @@ class EuiMUserProfileActionComponent extends EuimBaseDirective {
         i0.ɵɵelementStart(0, "ion-buttons");
         i0.ɵɵprojection(1);
         i0.ɵɵelementEnd();
-    } }, dependencies: [i1.IonButtons], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1$1.IonButtons], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuiMUserProfileActionComponent, [{
         type: Component,
         args: [{ selector: 'euim-user-profile-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n\n" }]
@@ -1085,7 +1168,7 @@ class EuimToolbarComponent extends EuimBaseDirective {
         i0.ɵɵproperty("ngIf", ctx.hasBackButton);
         i0.ɵɵadvance(6);
         i0.ɵɵproperty("ngIf", ctx.hasLanguageSelector);
-    } }, dependencies: [i2.NgIf, i1.IonBackButton, i1.IonButtons, i1.IonMenuButton, i1.IonTitle, i1.IonBackButtonDelegate, EuimLanguageSelectorComponent], styles: [".euim-toolbar{display:flex}\n"], encapsulation: 2 });
+    } }, dependencies: [i4.NgIf, i1$1.IonBackButton, i1$1.IonButtons, i1$1.IonMenuButton, i1$1.IonTitle, i1$1.IonBackButtonDelegate, EuimLanguageSelectorComponent], styles: [".euim-toolbar{display:flex}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimToolbarComponent, [{
         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 *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"\n                     (pointerdown)=\"onBackButtonClick($event)\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title>\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"primary\">\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}\n"] }]
@@ -1299,7 +1382,7 @@ class EuimEmptyListPlaceholderComponent extends EuimBaseDirective {
         const _r1 = i0.ɵɵreference(4);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", !ctx.hasCustomContent(_r1));
-    } }, dependencies: [i2.NgIf, i1.IonCol, i1.IonGrid, i1.IonIcon, i1.IonRow, i1.IonSlide, i1$1.TranslatePipe], styles: [".euim-empty-list-placeholder__icon[_ngcontent-%COMP%]{color:var(--eui-base-color-grey-75);width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl);margin-bottom:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__message[_ngcontent-%COMP%]{font: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;color:var(--eui-base-color-grey-75);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__description[_ngcontent-%COMP%]{font: 400 .875rem/1rem arial,sans-serif;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}"] });
+    } }, dependencies: [i4.NgIf, i1$1.IonCol, i1$1.IonGrid, i1$1.IonIcon, i1$1.IonRow, i1$1.IonSlide, i1.TranslatePipe], styles: [".euim-empty-list-placeholder__icon[_ngcontent-%COMP%]{color:var(--eui-base-color-grey-75);width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl);margin-bottom:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__message[_ngcontent-%COMP%]{font: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;color:var(--eui-base-color-grey-75);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__description[_ngcontent-%COMP%]{font: 400 .875rem/1rem arial,sans-serif;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimEmptyListPlaceholderComponent, [{
         type: Component,
         args: [{ selector: 'euim-empty-list-placeholder', template: "<ion-slide>\n    <h4 >\n        <ion-grid *ngIf=\"!hasCustomContent(content)\">\n            <ion-row *ngIf=\"icon\" >\n                <ion-col class=\"euim-empty-list-placeholder__icon\">\n                    <ion-icon size=\"large\" [name]=\"icon\"></ion-icon>\n                </ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col class=\"euim-empty-list-placeholder__message\">\n                    {{ message || 'euim.empty-list-placeholder.text' | translate }}\n                </ion-col>\n            </ion-row>\n            <ion-row>\n                <ion-col class=\"euim-empty-list-placeholder__description\">\n                    {{ description }}\n                </ion-col>\n            </ion-row>\n        </ion-grid>\n\n        <span #content><ng-content></ng-content></span>\n    </h4>\n\n</ion-slide>\n", styles: [".euim-empty-list-placeholder__icon{color:var(--eui-base-color-grey-75);width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl);margin-bottom:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__message{font: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;color:var(--eui-base-color-grey-75);padding-top:0;padding-bottom:0}.euim-empty-list-placeholder__description{font: 400 .875rem/1rem arial,sans-serif;color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xs);padding-top:0;padding-bottom:0}\n"] }]
@@ -1440,7 +1523,7 @@ class EuimMessageComponent extends EuimBaseDirective {
     } if (rf & 2) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("name", ctx.icon);
-    } }, dependencies: [i1.IonIcon], styles: [".euim-message{display:block;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: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;padding:0;margin:0;margin-bottom:var(--eui-base-spacing-xs)}\n"], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1$1.IonIcon], styles: [".euim-message{display:block;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: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;padding:0;margin:0;margin-bottom:var(--eui-base-spacing-xs)}\n"], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimMessageComponent, [{
         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{display:block;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: 400 1rem/1.25rem arial,sans-serif;font-style:normal;font-weight:700;padding:0;margin:0;margin-bottom:var(--eui-base-spacing-xs)}\n"] }]
@@ -1586,7 +1669,7 @@ class EuimStepperComponent extends EuimBaseDirective {
         i0.ɵɵproperty("disabled", ctx.isNextDisabled);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 11, "euim.stepper.next"));
-    } }, dependencies: [i1.IonButton, i1.IonCol, i1.IonFooter, i1.IonIcon, i1.IonLabel, i1.IonRow, i1.IonToolbar, i1$1.TranslatePipe], encapsulation: 2 });
+    } }, dependencies: [i1$1.IonButton, i1$1.IonCol, i1$1.IonFooter, i1$1.IonIcon, i1$1.IonLabel, i1$1.IonRow, i1$1.IonToolbar, i1.TranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EuimStepperComponent, [{
         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($event)\"\n                        fill=\"clear\"\n                        size=\"small\"\n                        [disabled]=\"isPreviousDisabled\">\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($event)\"\n                        fill=\"clear\"\n                        size=\"small\"\n                        [disabled]=\"isNextDisabled\">\n                        <ion-label>{{ 'euim.stepper.next' | translate }}</ion-label>\n                        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n                    </ion-button>\n                </ion-col>\n            </ion-row>\n        </ion-toolbar>\n    </ion-footer>\n</ion-footer>\n" }]
@@ -1802,7 +1885,7 @@ class EuimAllModule {
 }
 /** @nocollapse */ EuimAllModule.ɵfac = function EuimAllModule_Factory(t) { return new (t || EuimAllModule)(); };
 /** @nocollapse */ EuimAllModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: EuimAllModule });
-/** @nocollapse */ EuimAllModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [], imports: [MODULES, 
+/** @nocollapse */ EuimAllModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [MODULES, 
         // Layout
         EuimAppModule,
         EuimAppSidebarModule,