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

package/fesm2015/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 { takeUntil, distinctUntilKeyChanged } from 'rxjs/operators';
-import * as i1$1 from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+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,
@@ -66,41 +66,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,
@@ -187,12 +255,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();
     }
@@ -391,6 +471,85 @@ class EuimControlFeedbackModule {
             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(Object.assign(Object.assign({}, 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) {
@@ -400,29 +559,30 @@ 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) {
+/** @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) {
+function EuimMenuComponent_ng_container_1_ion_list_header_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "ion-list-header");
         i0.ɵɵtext(1);
@@ -434,21 +594,21 @@ function EuimMenuComponent_ng_container_1_ion_list_header_1_Template(rf, ctx) {
         i0.ɵɵtextInterpolate1(" ", item_r1.subtitle, " ");
     }
 }
-function EuimMenuComponent_ng_container_1_ion_item_2_ion_icon_1_Template(rf, ctx) {
+function EuimMenuComponent_ng_container_1_ion_item_3_ion_icon_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "ion-icon", 5);
+        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) {
+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()();
@@ -465,13 +625,15 @@ function EuimMenuComponent_ng_container_1_ion_item_2_Template(rf, ctx) {
 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);
@@ -495,23 +657,23 @@ 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) {
+/** @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
@@ -582,7 +744,7 @@ class EuimAppSidebarComponent extends EuimBaseDirective {
             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,
@@ -713,85 +875,6 @@ class EuimAppSidebarModule {
             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(Object.assign(Object.assign({}, 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();
@@ -844,7 +927,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);
@@ -866,12 +949,12 @@ class EuimLanguageSelectorComponent extends EuimBaseDirective {
             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,
@@ -1090,7 +1173,7 @@ class EuiMUserProfileActionComponent extends EuimBaseDirective {
             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,
@@ -1219,7 +1302,7 @@ class EuimToolbarComponent extends EuimBaseDirective {
             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,
@@ -1470,7 +1553,7 @@ class EuimEmptyListPlaceholderComponent extends EuimBaseDirective {
             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,
@@ -1622,7 +1705,7 @@ class EuimMessageComponent extends EuimBaseDirective {
             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,
@@ -1783,7 +1866,7 @@ class EuimStepperComponent extends EuimBaseDirective {
             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,
@@ -2035,7 +2118,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,