@eui/core 17.0.0-next.5 → 17.0.0-next.7

package/fesm2022/eui-core.mjs

@@ -1,29 +1,29 @@
 import * as i1 from '@eui/base';
-import { LogLevel, ConsoleAppender, Logger, LoggerMock, mergeAll, getI18nLoaderConfig, EuiLazyService, getI18nServiceConfigFromBase, getI18nState, getLastAddedModule, getBrowserDefaultLanguage, EuiEuLanguages, getActiveLang, initialAppState, initialUserState, initialNotificationsState, initialI18nState, initialLocaleState, xhr, getApiQueue, getApiQueueItem, EuiService, getUserRights, getUserState, UxPublishErrorFeedbackEvent, UxClearErrorFeedbackEvent, getLocaleServiceConfigFromBase, getLocaleState, transformToUxHttpResponse } from '@eui/base';
+import { LogLevel, ConsoleAppender, Logger, LoggerMock, initialAppState, initialUserState, initialNotificationsState, initialI18nState, initialLocaleState, xhr, getApiQueue, getApiQueueItem, mergeAll, getI18nLoaderConfig, EuiLazyService, getI18nServiceConfigFromBase, getI18nState, getLastAddedModule, getBrowserDefaultLanguage, EuiEuLanguages, getActiveLang, EuiService, getUserRights, getUserState, getLocaleServiceConfigFromBase, getLocaleState, transformToUxHttpResponse } from '@eui/base';
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Injector, NgModule, Optional, APP_INITIALIZER, EventEmitter, PLATFORM_ID, SkipSelf, ErrorHandler, LOCALE_ID } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Injector, NgModule, Optional, APP_INITIALIZER, SkipSelf, ErrorHandler, EventEmitter, PLATFORM_ID, LOCALE_ID } from '@angular/core';
 import * as extendProxy from 'extend';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { LOCATION_INITIALIZED, DOCUMENT, isPlatformBrowser, getLocaleId, registerLocaleData } from '@angular/common';
-import { throwError, forkJoin, of, BehaviorSubject, defer, merge, fromEvent, Observable, Subject, from } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, catchError, switchMap, tap, filter, take, mapTo, mergeMap, concatMap, takeUntil, finalize } from 'rxjs/operators';
+import { throwError, merge, fromEvent, of, forkJoin, BehaviorSubject, defer, from, Subject, Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, mapTo, map, mergeMap, tap, take, switchMap, catchError, concatMap, filter, takeUntil, finalize } from 'rxjs/operators';
 import * as i1$1 from '@ngrx/store';
 import { createSelector } from '@ngrx/store';
-import * as i1$3 from '@ngrx/effects';
+import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType } from '@ngrx/effects';
-import * as i2 from '@ngx-translate/core';
+import * as i1$3 from '@ngx-translate/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import * as i2$1 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
-import isEqual from 'lodash-es/isEqual';
-import get from 'lodash-es/get';
-import * as i1$2 from '@angular/common/http';
+import * as i1$5 from '@angular/common/http';
 import { HttpErrorResponse, HttpResponse, HttpHeaders, HttpEventType } from '@angular/common/http';
+import * as i1$4 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { FormGroup, FormArray } from '@angular/forms';
 import { DomPortalOutlet, ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import isEqual from 'lodash-es/isEqual';
+import get from 'lodash-es/get';
 import * as lf from 'localforage';
 import localeFr from '@angular/common/locales/fr';
 import localeEl from '@angular/common/locales/el';
@@ -615,2296 +615,2244 @@ class UpdateLocaleStateAction {
     }
 }
 
-class I18nResourceImpl {
-    /**
-     * Resource constructor
-     *
-     * @param prefix the prefix of the resource
-     * @param suffix the suffix of the resource, optional parameter
-     * @param compileTranslations compiler function, optional parameter
-     */
-    constructor(prefix, suffix = '', compileTranslationsFn = (translations) => translations) {
-        this.prefix = prefix;
-        this.suffix = suffix;
-        this.compileTranslationsFn = compileTranslationsFn;
-    }
-    /**
-     * Translations pre-processor
-     *
-     * @param translations the object to be pre-processed
-     * @param lang the translations language
-     * @returns the pre-processed translations
-     */
-    compileTranslations(translations, lang) {
-        return this.compileTranslationsFn(translations, lang);
-    }
-    /**
-     * Indicates whether other object is equal-to this one.
-     *
-     * @param obj the reference object with which to compare
-     * @returns true if this object is the same as obj, false otherwise
-     */
-    equals(obj) {
-        return this.prefix === obj.prefix && this.suffix === obj.suffix;
-    }
-    /**
-     * The path to the resource
-     *
-     * @param lang the resource language
-     * @returns the path
-     */
-    getPath(lang) {
-        return `${this.prefix}${lang}${this.suffix}`;
-    }
-}
-
-class I18nLoader {
-    constructor(http, logService, euiAppConfig) {
-        this.http = http;
-        this.logService = logService;
-        this.euiAppConfig = euiAppConfig;
-        this.resources = [];
-        this.failedResources = [];
-        // create the resources from the config object
-        const i18nConfig = this.euiAppConfig.global && this.euiAppConfig.global.i18n;
-        const i18nLoaderConfig = i18nConfig && i18nConfig.i18nLoader;
-        this.resources.push(...this.createResources(i18nLoaderConfig));
-    }
-    /**
-     * Gets the translations from the server
-     *
-     * @param lang
-     * @returns Observable<any>
-     */
-    getTranslation(lang) {
-        return this.loadResources(this.resources, lang).pipe(map((loadedResources) => {
-            this.failedResources = loadedResources.hasError ? loadedResources.errors : [];
-            return loadedResources.translations;
-        }));
-    }
-    /**
-     * Adds resources
-     *
-     * @param config loader configuration
-     * @returns Observable<any> | false
-     */
-    addResources(config) {
-        // create the resources
-        let resources = this.createResources(config);
-        // filter the resources first, to avoid duplicates
-        resources = resources.filter((resource) => !this.resources.some((res) => res.equals(resource)));
-        // add the new resources to the list of existing resources
-        this.resources.push(...resources);
-        // return the filtered resources
-        return resources;
-    }
-    /**
-     * Removes resources from the loader instance
-     */
-    removeResources(removedResources) {
-        this.resources = this.resources.filter((res) => !removedResources.some((removedResource) => removedResource.equals(res)));
+class EuiGrowlService {
+    constructor() {
+        this.growlMessages = [];
+        this.isGrowlSticky = false;
+        this.isCloseAllSticky = false;
+        this.growlLife = 3000;
+        this.growlPosition = 'bottom-right';
+        this.growlCallback = null;
     }
     /**
-     * Loads an array of resources, by language
-     *
-     * @param resources the definition of the resources
-     * @param lang the resource language to load
-     * @returns Observable<any>
+     * displays a growl UxMessage item, isSticky
      */
-    loadResources(resources, lang) {
-        // if there are resources to load
-        if (Array.isArray(resources) && resources.length > 0) {
-            // load all the resources in an array of Observable
-            const requests = resources.map((resource) => this.loadResource(resource, lang));
-            // group all the observables with forkJoin and deep merge them
-            return forkJoin(requests).pipe(map((response) => {
-                const successResp = [];
-                const errResp = [];
-                response.forEach((item) => {
-                    if (item.isError) {
-                        errResp.push({ resource: item.resource, error: item.error });
-                    }
-                    else {
-                        successResp.push(item);
-                    }
-                });
-                if (successResp.length === response.length) {
-                    return { hasError: false, translations: mergeAll(successResp) };
+    growl(msg, isSticky, isMultiple, life, position, callback) {
+        if (msg.severity !== 'info' && msg.severity !== 'warning' && msg.severity !== 'success' && msg.severity !== 'danger') {
+            throw new Error('EuiGrowlService.growl() ERROR : message severity must be either : success, warning, info, danger');
+        }
+        else {
+            if (isMultiple === undefined || !isMultiple) {
+                this.growlMessages = [];
+            }
+            this.growlMessages = this.growlMessages.concat(msg);
+            msg.life = life || msg.life;
+            msg.sticky = isSticky || msg.sticky;
+            if (life === undefined || isNaN(life)) {
+                if (msg.severity === 'danger') {
+                    isSticky = true;
                 }
                 else {
-                    return { hasError: true, translations: mergeAll(successResp), errors: errResp };
+                    this.growlLife = 3000;
                 }
-            }));
-        }
-        else {
-            // no resources to load
-            return of({ hasError: false, translations: {} });
+            }
+            else {
+                this.growlLife = life;
+            }
+            if (isSticky) {
+                this.isGrowlSticky = isSticky;
+            }
+            else {
+                this.isGrowlSticky = false;
+            }
+            if (position) {
+                this.growlPosition = position;
+            }
+            if (callback) {
+                this.growlCallback = callback;
+            }
+            else {
+                this.growlCallback = () => { };
+            }
         }
     }
-    /**
-     * Returns resources that failed
-     */
-    getFailedResources() {
-        return this.failedResources;
+    clearGrowl() {
+        this.growlMessages = [];
     }
-    /**
-     * Create resources from a config file
-     *
-     * @param config loader configuration
-     * @returns I18nResourceImpl[] resources
-     */
-    createResources(config) {
-        // use the default config as a reference base
-        config = getI18nLoaderConfig(config);
-        const resources = [];
-        // extract the i18n folders from config
-        const i18nFolders = Array.isArray(config.i18nFolders)
-            ? config.i18nFolders
-            : config.i18nFolders
-                ? [config.i18nFolders]
-                : [];
-        if (i18nFolders) {
-            // add the i18n folders to resources
-            resources.push(...i18nFolders.map((folder) => new I18nResourceImpl(`assets/${folder}/`, '.json')));
-        }
-        // extract the i18n services from config
-        const i18nServices = Array.isArray(config.i18nServices)
-            ? config.i18nServices
-            : config.i18nServices
-                ? [config.i18nServices]
-                : [];
-        if (i18nServices) {
-            // add the i18n services to resources
-            resources.push(...i18nServices.map((service) => new I18nResourceImpl(service)));
-        }
-        // extract the i18n resources from config
-        const i18nResources = Array.isArray(config.i18nResources)
-            ? config.i18nResources
-            : config.i18nResources
-                ? [config.i18nResources]
-                : [];
-        if (i18nResources) {
-            // add the i18n resources to resources
-            resources.push(...i18nResources.map((resource) => new I18nResourceImpl(resource.prefix, resource.suffix, this.getResourceCompileFunction(resource.compileTranslations))));
-        }
-        return resources;
+    growlSuccess(msg, position) {
+        this.growl({ severity: 'success', summary: 'SUCCESS', detail: msg }, false, false, undefined, position);
     }
-    /**
-     * Loads a resource, by language
-     *
-     * @param resource the definition of the resource
-     * @param lang the resource language to load
-     * @returns Observable<any>
-     */
-    loadResource(resource, lang) {
-        // the path to the resource
-        const path = resource.getPath(lang);
-        // load the translations from the path
-        return this.http.get(path).pipe(
-        // preprocess the translations using the resource compiler
-        map((translations) => resource.compileTranslations(translations, lang)), map((translations) => {
-            // resource loaded properly, send a info message
-            if (this.logService) {
-                this.logService.info(`I18n resource loaded from path ${path}`);
-            }
-            // return the translations
-            return translations;
-        }), catchError((err) => {
-            // remove failed resource from loaded resource array
-            this.removeResources([resource]);
-            // resource not loaded properly, send a warning message
-            if (this.logService) {
-                this.logService.warn(`I18n resource NOT loaded from path ${path}`, err);
-            }
-            const resourceError = { error: `I18n resource NOT loaded from path ${path}`, resource, isError: true };
-            return of(resourceError);
-        }));
+    growlError(msg, position) {
+        this.growl({ severity: 'danger', summary: 'ERROR', detail: msg }, false, false, undefined, position);
     }
-    getResourceCompileFunction(id) {
-        const customHandlers = this.euiAppConfig.customHandler;
-        if (customHandlers && typeof customHandlers[id] === 'function') {
-            return customHandlers[id];
-        }
-        return undefined;
+    // date helpers
+    growlWarning(msg, position) {
+        this.growl({ severity: 'warning', summary: 'WARNING', detail: msg }, false, false, undefined, position);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader, deps: [{ token: i1$2.HttpClient }, { token: LogService, optional: true }, { token: CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader }); }
+    growlInfo(msg, position) {
+        this.growl({ severity: 'info', summary: 'INFO', detail: msg }, false, false, undefined, position);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiGrowlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiGrowlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: LogService, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_TOKEN]
-                }] }]; } });
-const translateConfig = {
-    loader: {
-        provide: TranslateLoader,
-        useClass: I18nLoader,
-    },
-};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiGrowlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
-class I18nService extends EuiLazyService {
-    constructor(baseGlobalConfig, translateService, logService, store, document) {
-        super({ activeLang: 'en' });
-        this.baseGlobalConfig = baseGlobalConfig;
+class CoreAppEffects {
+    constructor(actions, 
+    // TODO: remove on eUI 14
+    showConnectionStatus, translateService, asService) {
+        this.actions = actions;
+        this.showConnectionStatus = showConnectionStatus;
         this.translateService = translateService;
-        this.logService = logService;
-        this.store = store;
-        this.document = document;
-        this.config = getI18nServiceConfigFromBase(this.baseGlobalConfig);
-        this.onModuleLoad = new BehaviorSubject({ ready: false, name: null });
-    }
-    getState(keyOrMapFn) {
-        let selector = getI18nState;
-        let dotNotationToObject = (obj, key) => key.split('.').reduce((slice, i) => slice[i], obj);
-        if (keyOrMapFn) {
-            switch (typeof keyOrMapFn) {
-                case 'function':
-                    selector = createSelector(getI18nState, keyOrMapFn);
-                    break;
-                case 'string':
-                    selector = createSelector(getI18nState, (state) => dotNotationToObject(state, keyOrMapFn));
-                    break;
-            }
-        }
-        return this.store.select(selector);
-    }
-    updateState(langState) {
-        this.updateHTMLDOMLang(langState.activeLang);
-        this.store.dispatch(new UpdateI18nStateAction(langState));
-    }
-    init(langState) {
-        const initLang = langState && langState.activeLang ? langState.activeLang : this.preparedDefaultLanguage();
-        const initState = {
-            ...langState,
-            activeLang: initLang,
-        };
-        if (typeof initLang === 'string') {
-            super.initEuiService(this.store);
-            this.updateState(initState);
-            return this.setup(initLang);
-        }
-        return of({ success: false, error: 'Initial active lang should be string' });
-    }
-    /**
-     * A pipe function that could serve as a wrapper of another observable
-     * e.g. ngx-translate i18n.onReady('my_module').pipe(switchMap(()=>translate.get('eui.KEY')));
-     * WARNING: onReady will emit only once for a loaded Module, going to another and then going back will not result
-     * into another emission.
-     *
-     * @param moduleName the name of the module that has been given through the eUI globalConfig. In case non provided
-     * fetch module name from the state.
-     */
-    onReady(moduleName) {
-        return this.onModuleLoad.pipe(switchMap((evt) => moduleName
-            ? of(evt)
-            : this.store.select(getLastAddedModule).pipe(tap((m) => (moduleName = m)), map(() => evt))), 
-        // emit only if event emitted matches the module name and is ready
-        filter((evt) => evt.ready === true && evt.name === moduleName), 
-        // make sure that observable completes
-        take(1));
-    }
-    lazyLoad(config) {
-        const moduleId = Math.floor(Math.random() * 100000 + 1).toLocaleString();
-        return this.addResources(config, moduleId);
-    }
-    lazyLoadInit(moduleConfig, moduleName) {
-        const i18nLoaderConfig = moduleConfig;
-        // add resources
-        return this.addResources(i18nLoaderConfig, moduleName);
-    }
-    /**
-     * Add resources based of a config loader
-     *
-     * @param config I18nLoaderConfig
-     * @return Promise<EuiServiceStatus> an EuiServiceStatus when translation has fully loaded
-     */
-    addResources(config, moduleName) {
-        // emit that module is loading
-        this.onModuleLoad.next({ ready: false, name: moduleName });
-        const loader = this.translateService.currentLoader;
-        if (loader instanceof I18nLoader) {
-            const langSubscription = [];
-            const i18nLoader = loader;
-            // add the resources to the loader
-            const resources = i18nLoader.addResources(config);
-            // manually load the resources for the CURRENT language and add them to the translate service
-            langSubscription.push(i18nLoader.loadResources(resources, this.translateService.currentLang).pipe(take(1), tap((loadedResources) => {
-                // add the new set of translations to the current language
-                this.translateService.setTranslation(this.translateService.currentLang, loadedResources.translations, true);
-            })));
-            // if the current language is different than the DEFAULT language
-            const defaultLang = this.config.defaultLanguage || this.translateService.defaultLang;
-            if (this.translateService.currentLang !== defaultLang) {
-                // manually load the resources for the default language and add them to the translate service
-                langSubscription.push(i18nLoader.loadResources(resources, defaultLang).pipe(take(1), tap((loadedResources) => {
-                    this.translateService.setTranslation(defaultLang, loadedResources.translations, true);
-                })));
-            }
-            return forkJoin(langSubscription).pipe(map((loadedResourcesArr) => !loadedResourcesArr[0].hasError ? { success: true } : { success: false, error: loadedResourcesArr[0].errors }), tap(() => {
-                // emit status of module loading progress
-                this.onModuleLoad.next({ ready: true, name: moduleName });
-            }), catchError((error) => {
-                // emit status of module loading progress
-                this.onModuleLoad.next({ ready: true, name: moduleName, error });
-                return of({ success: false, error });
-            }));
-        }
-        else {
-            return of({ success: false, error: 'currentLoader is not an I18nLoader.' });
-        }
-    }
-    /**
-     * Prepares the default language
-     */
-    preparedDefaultLanguage() {
-        const browserPref = getBrowserDefaultLanguage();
-        // If user has browser preferred lang, and that language is part of the languages array
-        if (browserPref && this.config.languages && EuiEuLanguages.getLanguageCodes(this.config.languages).includes(browserPref)) {
-            return browserPref;
-        }
-        return this.config.defaultLanguage;
-    }
-    /**
-     * @param default_language if given default language to override default language coming from the
-     * configuration token.
-     */
-    setup(initLanguage) {
-        // use the default config as a reference base
-        this.config = Object.assign({}, DEFAULT_I18N_SERVICE_CONFIG, this.config);
-        // configure the translate config service
-        if (this.config.languages) {
-            this.translateService.addLangs(EuiEuLanguages.getLanguageCodes(this.config.languages));
-            if (this.logService) {
-                this.logService.info(`I18n accepted languages set to ${EuiEuLanguages.getLanguageCodes(this.config.languages)}`);
-            }
-        }
-        // set the current language, causing to load translations
-        return this.translateService.use(initLanguage).pipe(tap(() => {
-            this.bindActiveLangStateToTranslateService();
-            this.bindTranslateServiceLangChangeToState();
-            if (this.config.defaultLanguage) {
-                this.setDefaultLanguage(this.config.defaultLanguage);
-            }
-        }), map(() => {
-            if (this.translateService.currentLoader instanceof I18nLoader) {
-                const failedResources = this.translateService.currentLoader.getFailedResources();
-                if (failedResources.length > 0) {
-                    return { success: false, error: failedResources };
+        this.asService = asService;
+        this.getAppConnectionInformation = createEffect(() => merge(fromEvent(window, 'online').pipe(mapTo(true)), fromEvent(window, 'offline').pipe(mapTo(false))).pipe(map((connected) => new UpdateAppConnectionAction(connected))));
+        this.activatedRoute = createEffect(() => this.actions.pipe(ofType(CoreAppActionTypes.ACTIVATED_ROUTE), map((action) => action.payload), mergeMap((route) => {
+            // extract the module name, if defined
+            const module = route.snapshot.data['module'] || 'undefined';
+            return [new UpdateCurrentModuleAction(module)];
+        })));
+        this.updateAppConnection = createEffect(() => this.actions.pipe(ofType(CoreAppActionTypes.UPDATE_APP_CONNECTION), map((action) => action.payload), tap((connected) => {
+            // TODO: for eUI 14, drop boolean support and refactor
+            // check if feature is enabled
+            const isFeatureEnabled = typeof this.showConnectionStatus !== 'boolean' ? this.showConnectionStatus?.enabled : this.showConnectionStatus;
+            // extract lifespan if any
+            const lifespan = typeof this.showConnectionStatus !== 'boolean' ? this.showConnectionStatus?.messageBox?.lifespan || 0 : 0;
+            // if the user needs to be informed about the connection status
+            if (isFeatureEnabled) {
+                if (connected) {
+                    this.translateService.get('eui.CONNECTED').subscribe((translation) => {
+                        this.asService.growl({ severity: 'success', summary: 'MESSAGE', detail: translation, life: lifespan }, lifespan < 1, false);
+                    });
+                }
+                else {
+                    this.translateService.get('eui.NOTCONNECTED').subscribe((translation) => {
+                        this.asService.growl({ severity: 'danger', summary: 'ERROR', detail: translation, life: lifespan }, lifespan < 1, false);
+                    });
                 }
             }
-            return { success: true };
-        }), catchError((error) => of({ success: false, error })));
-    }
-    bindActiveLangStateToTranslateService() {
-        this.store.select(getActiveLang).subscribe((lang) => {
-            if (lang !== null && this.translateService.currentLang !== lang) {
-                this.use(lang);
-            }
-        });
-    }
-    bindTranslateServiceLangChangeToState() {
-        this.translateService.onLangChange.subscribe((event) => {
-            if (this.stateInstance.activeLang !== event.lang) {
-                this.updateState({ activeLang: event.lang });
-            }
-            if (this.logService) {
-                this.logService.info(`I18n current language set to ${event.lang}`);
-            }
-        });
-    }
-    setDefaultLanguage(defaultLanguage) {
-        // removed, current language is already calculated in init, setup function fill use it directly, not default
-        // this.translateService.currentLang = default_language || this.config.defaultLanguage;
-        this.translateService.setDefaultLang(defaultLanguage);
-        if (this.logService) {
-            this.logService.info(`I18n default language set to ${defaultLanguage}`);
-        }
-    }
-    /**
-     * change the currently used language
-     *
-     * @param lang is the language code based on the convention you used e.g. (en or en-EN)
-     * @returns Observable that returns an object contain the object translation for given language after language
-     * fully loaded.
-     */
-    use(lang) {
-        return this.translateService.use(lang);
-    }
-    /**
-     * updates the HTML element lang attribute
-     *
-     * @private
-     */
-    updateHTMLDOMLang(lang) {
-        this.document.documentElement.lang = lang;
+        })), { dispatch: false });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, deps: [{ token: GLOBAL_CONFIG_TOKEN }, { token: i2.TranslateService }, { token: LogService, optional: true }, { token: StoreService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects, deps: [{ token: i1$2.Actions }, { token: SHOW_CONNECTION_STATUS_TOKEN }, { token: i1$3.TranslateService }, { token: EuiGrowlService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GLOBAL_CONFIG_TOKEN]
-                }] }, { type: i2.TranslateService }, { type: LogService, decorators: [{
-                    type: Optional
-                }] }, { type: StoreService }, { type: Document, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
+                    args: [SHOW_CONNECTION_STATUS_TOKEN]
+                }] }, { type: i1$3.TranslateService }, { type: EuiGrowlService }]; } });
 
-class I18nServiceMock extends I18nService {
-    constructor() {
-        super(null, null, null, null, null);
-        this.DEFAULT_LANGUAGE = 'en';
-    }
-    get onLangChange() {
-        return new EventEmitter();
-    }
-    addResources() {
-        return of({ success: true });
-    }
-    get currentLanguage() {
-        return this.DEFAULT_LANGUAGE;
-    }
-    getState() {
-        return of({ activeLang: this.DEFAULT_LANGUAGE });
+const CoreModuleEffects = [CoreAppEffects];
+
+const updateAppVersion = (state, action) => ({ ...state, version: action.payload });
+const updateAppConnection = (state, action) => ({ ...state, connected: action.payload });
+const AddAppLoadedConfigModules = (state, action) => ({
+    ...state,
+    loadedConfigModules: {
+        lastAddedModule: action.payload.moduleName,
+        modulesConfig: {
+            ...state.loadedConfigModules.modulesConfig,
+            [action.payload.moduleName]: {
+                ...action.payload.moduleConfig,
+            },
+        },
+    },
+});
+const updateAppStatus = (state, action) => ({ ...state, status: action.payload });
+const updateCurrentModule = (state, action) => Object.assign({}, state, { currentModule: action.payload });
+const addApiQueueItem = (state, action) => {
+    // apply the timestamp to the queue item
+    const apiQueueItem = Object.assign({}, action.payload.item, { timestamp: new Date().getTime() });
+    // update the queue
+    const apiQueue = Object.assign({}, state.apiQueue, { [action.payload.id]: apiQueueItem });
+    return Object.assign({}, state, { apiQueue });
+};
+const removeApiQueueItem = (state, action) => {
+    // remove the specified id from the list of item ids and recreate the apiQueue from the remaining ids
+    const apiQueue = Object.keys(state.apiQueue)
+        .filter((id) => id !== action.payload)
+        .reduce((queue, key) => {
+        queue[key] = state.apiQueue[key];
+        return queue;
+    }, {});
+    return Object.assign({}, state, { apiQueue });
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emptyApiQueue = (state, action) => 
+// remove all items in the Api Queue
+Object.assign({}, state, { apiQueue: {} });
+const actionToReducerMap$4 = {
+    [CoreAppActionTypes.UPDATE_APP_VERSION]: updateAppVersion,
+    [CoreAppActionTypes.UPDATE_APP_CONNECTION]: updateAppConnection,
+    [CoreAppActionTypes.ADD_APP_LOADED_CONFIG_MODULES]: AddAppLoadedConfigModules,
+    [CoreAppActionTypes.UPDATE_APP_STATUS]: updateAppStatus,
+    [CoreAppActionTypes.UPDATE_CURRENT_MODULE]: updateCurrentModule,
+    [CoreAppActionTypes.ADD_API_QUEUE_ITEM]: addApiQueueItem,
+    [CoreAppActionTypes.REMOVE_API_QUEUE_ITEM]: removeApiQueueItem,
+    [CoreAppActionTypes.EMPTY_API_QUEUE]: emptyApiQueue,
+};
+const coreAppReducers = (state = initialAppState, action) => {
+    if (actionToReducerMap$4[action.type]) {
+        return actionToReducerMap$4[action.type](state, action);
     }
-    updateState(i18nState) {
-        this.DEFAULT_LANGUAGE = i18nState.activeLang || 'en';
+    // if the action type is not in the map, call the base reducers method
+    return state;
+};
+
+const updateUser = (state, action) => {
+    let fullName = action.payload.fullName;
+    if (!fullName) {
+        fullName = `${action.payload.firstName || ''} ${action.payload.lastName || ''}`.trim();
     }
-    init(i18nState) {
-        this.DEFAULT_LANGUAGE = i18nState.activeLang || 'en';
-        return of({ success: true });
+    return Object.assign({}, state, action.payload, { fullName });
+};
+const updateUserDetails = (state, action) => {
+    let fullName = action.payload.fullName;
+    if (!fullName) {
+        fullName = `${action.payload.firstName || ''} ${action.payload.lastName || ''}`.trim();
     }
-    lazyLoadInit() {
-        return of({ success: true });
+    // todo should be checked if state.details is really there
+    const details = Object.assign({}, state.details, action.payload, { fullName });
+    return Object.assign({}, state, details);
+};
+const updateUserPreferences = (state, action) => {
+    const preferences = Object.assign({}, state.preferences, action.payload);
+    return Object.assign({}, state, { preferences });
+};
+const updateUserRights = (state, action) => Object.assign({}, state, { rights: [...action.payload] });
+const updateUserDashboard = (state, action) => {
+    // apply the dashboard to preferences
+    const preferences = Object.assign({}, state.preferences, { dashboard: action.payload });
+    // update the state
+    return { ...state, preferences };
+};
+const actionToReducerMap$3 = {
+    [CoreUserActionTypes.UPDATE_USER_DETAILS]: updateUserDetails,
+    [CoreUserActionTypes.UPDATE_USER_PREFERENCES]: updateUserPreferences,
+    [CoreUserActionTypes.UPDATE_USER_STATE]: updateUser,
+    [CoreUserActionTypes.UPDATE_USER_RIGHTS]: updateUserRights,
+    [CoreUserActionTypes.UPDATE_USER_DASHBOARD]: updateUserDashboard,
+};
+const coreUserReducers = (state = initialUserState, action) => {
+    if (actionToReducerMap$3[action.type]) {
+        return actionToReducerMap$3[action.type](state, action);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
+    return state;
+};
 
-const initialState = {
-    appName: '',
-    appShortName: '',
-    appSubTitle: '',
-    appBaseFontSize: '',
-    userInfos: null,
-    userSubInfos: null,
-    impersonatedUserInfos: null,
-    isSidebarOpen: true,
-    isSidebarHover: false,
-    isSidebarActive: false,
-    isSidebarInnerActive: false,
-    isSidebarStateCloseWithIcons: false,
-    isSidebarExpandOnHover: true,
-    hasSidebar: false,
-    hasHeader: false,
-    hasBreadcrumb: false,
-    hasHeaderLogo: false,
-    hasHeaderEnvironment: false,
-    hasToolbar: false,
-    hasToolbarMenu: false,
-    environmentValue: '',
-    isSidebarHidden: false,
-    hasTopMessage: false,
-    windowWidth: 0,
-    windowHeight: 0,
-    mainContentHeight: 0,
-    pageHeaderHeight: 0,
-    wrapperClasses: '',
-    breakpoint: '',
-    breakpoints: {
-        isMobile: false,
-        isTablet: false,
-        isLtDesktop: false,
-        isDesktop: false,
-        isXL: false,
-        isXXL: false,
-        isFHD: false,
-        is2K: false,
-        is4K: false,
-    },
-    menuLinks: [],
-    sidebarLinks: [],
-    combinedLinks: [],
-    isBlockDocumentActive: false,
-    deviceInfo: null,
-    activeLanguage: 'en',
-    languages: EuiEuLanguages.getLanguages(),
-    appMetadata: null,
-    hasModalActive: false,
-    isDimmerActive: false,
+const updateNotificationsList = (state, action) => Object.assign({}, state, { list: [...action.payload] });
+const actionToReducerMap$2 = {
+    [CoreNotificationsActionTypes.UPDATE_NOTIFICATIONS_LIST]: updateNotificationsList,
 };
-// TODO: this service needs to be transferred in the respective component
-class UxAppShellService {
-    // -------------------
-    get state$() {
-        return this._state$.asObservable();
-    }
-    // -------------------
-    // exposed observables
-    get breakpoint$() {
-        return this._breakpoint$.asObservable();
-    }
-    get breakpoints$() {
-        return this._breakpoints$.asObservable();
+const coreNotificationsReducers = (state = initialNotificationsState, action) => {
+    if (actionToReducerMap$2[action.type]) {
+        return actionToReducerMap$2[action.type](state, action);
     }
-    // ----------------
-    // state operations
-    // ----------------
-    get state() {
-        return this._state$.getValue();
+    return state;
+};
+
+const updateI18nState = (state, action) => ({
+    ...state,
+    ...action.payload,
+});
+const actionToReducerMap$1 = {
+    [CoreI18nActionTypes.UPDATE_I18N_STATE]: updateI18nState,
+};
+const corI18nReducers = (state = initialI18nState, action) => {
+    if (actionToReducerMap$1[action.type]) {
+        return actionToReducerMap$1[action.type](state, action);
     }
-    // ----------------------------
-    // public setters and functions
-    // ----------------------------
-    set isSidebarOpen(isOpen) {
-        this.setState({
-            ...this.state,
-            isSidebarOpen: isOpen,
-        });
+    return state;
+};
+
+const updateLocaleState = (state, action) => ({
+    ...state,
+    ...action.payload,
+});
+const actionToReducerMap = {
+    [CoreLocaleActionTypes.UPDATE_LOCALE_STATE]: updateLocaleState,
+};
+const coreLocaleReducers = (state = initialLocaleState, action) => {
+    if (actionToReducerMap[action.type]) {
+        return actionToReducerMap[action.type](state, action);
     }
-    get isSidebarOpen() {
-        return this.state.isSidebarOpen;
+    return state;
+};
+
+const coreReducers = Object.assign({}, {
+    app: coreAppReducers,
+    user: coreUserReducers,
+    notifications: coreNotificationsReducers,
+    i18n: corI18nReducers,
+    locale: coreLocaleReducers,
+});
+
+const extend = extendProxy.default || extendProxy;
+/**
+ * Utility meta-reducer to load the state from the local storage
+ * @param reducer the action reducer
+ */
+function localStorageSync(reducer) {
+    return cb(reducer, localStorage);
+}
+/**
+ * Utility meta-reducer to load the state from the session storage
+ * @param reducer the action reducer
+ */
+function sessionStorageSync(reducer) {
+    return cb(reducer, sessionStorage);
+}
+// Keys that are allowed to be synced with NgRx state from BrowserStorage
+const disallowedKeys = ['loadedConfigModules', 'connect', 'currentModule', 'status', 'apiQueue'];
+/**
+ * filters the AppState by removing those keys from the state and return a new state Object
+ * @param app the AppState
+ */
+const filterAppState = (app) => {
+    // in case app is undefined or null it should return empty object
+    if (!app) {
+        return {};
     }
-    set isSidebarHover(isHover) {
-        if (this.state.isSidebarExpandOnHover) {
-            this.setState({
-                ...this.state,
-                isSidebarHover: isHover,
-            });
+    return (Object.keys(app)
+        // select keys that are present in the allowed list
+        .filter((key) => !disallowedKeys.includes(key))
+        // build a new object with only the allowed properties
+        .reduce((obj, key) => {
+        obj[key] = app[key];
+        return obj;
+    }, {}));
+};
+/**
+ *
+ * @param storageType
+ */
+const loadState = (storage = localStorage) => {
+    try {
+        // by default falls back to localStorage
+        const serializedState = storage.getItem('state');
+        if (serializedState === null) {
+            return undefined;
         }
+        // deserialize state
+        let state = JSON.parse(serializedState);
+        // filter AppState and replace
+        state = { ...state, app: filterAppState(state?.app) };
+        return state;
     }
-    get isSidebarHover() {
-        return this.state.isSidebarHover;
+    catch (err) {
+        return undefined;
     }
-    set isSidebarActive(isActive) {
-        this.setState({
-            ...this.state,
-            isSidebarActive: isActive,
-        });
+};
+const cb = (reducer, storage) => (state, action) => {
+    if (action.type === CoreAppActionTypes.INIT_STORE) {
+        // This action must be dispatched from an app initializer
+        // We load the state from a storage and compare the version and userId with the provided ones.
+        // If they are the same, we merge the local state into the initial state.
+        // If there is a mismatch, we don't merge the local state, but update only the initial state.
+        // load the state from the localStorage
+        const localState = loadState(storage);
+        // extract the details about user and app version from the action payload
+        const payload = action.payload;
+        const payloadVersion = payload?.version;
+        if (localState) {
+            // TODO: Why all these checks here? What is the purpose of this code?
+            // extract the details about user and app version from the storage state
+            const localVersion = localState?.app?.version;
+            // const localUserId = localState.user && localState.user.userId;
+            const isVersionOK = !localVersion || !payloadVersion || localVersion === payloadVersion;
+            // const isUserIdOK = (localUserId === payloadUserId);
+            // update the entire state with deep merge of states, if the version and user are the same
+            if (isVersionOK) {
+                state = extend(true, {}, state, localState);
+            }
+        }
+        // update the app version, if defined
+        if (payloadVersion) {
+            state = { ...state, app: { ...state?.app, version: payloadVersion } };
+        }
     }
-    set isSidebarInnerActive(isOpen) {
-        this.setState({
-            ...this.state,
-            isSidebarInnerActive: isOpen,
-        });
+    return reducer(state, action);
+};
+
+class StoreServiceMock extends StoreService {
+    constructor() {
+        super(null, null);
     }
-    set sidebarLinks(links) {
-        this.setState({
-            ...this.state,
-            sidebarLinks: links,
-        });
+    init() { }
+    addAutoSaveHandler() { }
+    handleAutoSave() { }
+    dispatch() { }
+    select() {
+        return of({});
     }
-    set menuLinks(links) {
-        this.setState({
-            ...this.state,
-            menuLinks: links,
-        });
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+const CORE_ROOT_GUARD = new InjectionToken('Internal Theme ForRoot Guard');
+class CoreModule {
+    /**
+     * No more providing config from forRoot, you have to use EUI_CONFIG_TOKEN to pass config via providers.
+     */
+    static forRoot() {
+        return {
+            ngModule: CoreModule,
+            providers: [
+                {
+                    provide: EuiCoreRootGuardClass,
+                    useFactory: euiCoreRootGuardClass,
+                    deps: [],
+                },
+                {
+                    provide: CORE_ROOT_GUARD,
+                    useFactory: createEuiCoreRootGuard,
+                    deps: [[EuiCoreRootGuardClass, new Optional(), new SkipSelf()]],
+                },
+                ...getCoreProviders(),
+            ],
+        };
     }
-    set isBlockDocumentActive(isActive) {
-        this.setState({
-            ...this.state,
-            isBlockDocumentActive: isActive,
-        });
+    static forChild(moduleName) {
+        return {
+            ngModule: CoreModule,
+            providers: getCoreChildProviders(moduleName),
+        };
     }
-    get hasHeader() {
-        return this.state.hasHeader;
+    constructor(guard, parentModule, injector) {
+        // if there is a parentModule, a new instance is created in a lazy loaded module
+        if (parentModule) {
+            // extract the i18n service and the i18n loader config
+            // todo, this thing should be achieved by store, and localization service dependency should be removed
+            const storeService = injector.get(StoreService);
+            const moduleName = injector.get(MODULE_NAME_TOKEN);
+            const moduleConfig = injector.get(MODULE_CONFIG_TOKEN);
+            storeService.dispatch(new AddAppLoadedConfigModulesAction({ moduleName, moduleConfig }));
+        }
     }
-    // Edit mode
-    get isDimmerActive() {
-        return this.state.isDimmerActive;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule, deps: [{ token: CORE_ROOT_GUARD, optional: true }, { token: CoreModule, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                    // HttpClientModule, no more..
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CORE_ROOT_GUARD]
+                }] }, { type: CoreModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.Injector }]; } });
+const createEuiCoreRootGuard = (core) => {
+    if (core) {
+        throw new TypeError(`CoreModule.forRoot() called twice. Feature modules should use ThemeModule.forChild() instead.`);
     }
-    set isDimmerActive(isActive) {
-        this.setState({
-            ...this.state,
-            isDimmerActive: isActive,
-        });
+    return 'guarded';
+};
+class EuiCoreRootGuardClass {
+    constructor() { }
+}
+const euiCoreRootGuardClass = () => new EuiCoreRootGuardClass();
+
+/**
+ * Function to be used before the AppModule is bootstrapped. It is currently used to load dynamic configurations.
+ * It needs to be added in your application main.ts file.
+ * @param envConfig the current environment configuration
+ * @returns the updated environment configuration, as a promise
+ */
+async function preInitApp(envConfig) {
+    const envDynamicConfig = envConfig && envConfig.envDynamicConfig;
+    if (envDynamicConfig) {
+        // load the local configuration file, if defined
+        const euiAppJsonConfig = await loadEuiDynamicEnvironmentConfig(envDynamicConfig.uri, envDynamicConfig.configTimeout || 2000);
+        envConfig.loadedEnvDynamicConfig = euiAppJsonConfig;
+        return envConfig;
     }
-    constructor(config, http, platformId, router, storeService, i18nService) {
-        this.config = config;
-        this.http = http;
-        this.platformId = platformId;
-        this.router = router;
-        this.storeService = storeService;
-        this.i18nService = i18nService;
-        this.cssVars = [];
-        let stateWithConfig = initialState;
-        const languages = config?.i18n?.i18nService?.languages || initialState.languages;
-        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;
-        stateWithConfig = {
-            ...stateWithConfig,
-            ...{
-                languages,
-                activeLanguage: defaultLanguage,
-            },
-        };
-        this._state$ = new BehaviorSubject(stateWithConfig);
-        this._breakpoint$ = new BehaviorSubject('');
-        this._breakpoints$ = new BehaviorSubject({});
-        this.bindActiveLanguageToAppShellState();
-        if (isPlatformBrowser(this.platformId)) {
-            router.events.subscribe((event) => {
-                if (event instanceof NavigationEnd) {
-                    window.scrollTo(0, 0);
-                }
+    return envConfig;
+}
+/**
+ * Function to load asynchronously a dynamic configuration (from a local path or a web service)
+ *
+ * @param url the path to the configuration
+ * @param timeout possible timeout
+ * @returns EuiAppJsonConfig promise
+ */
+async function loadEuiDynamicEnvironmentConfig(url, timeout) {
+    // if the url is specified
+    if (url) {
+        // fetch the config
+        try {
+            return await xhr({
+                url,
+                timeout,
             });
         }
-    }
-    setState(nextState, updateI18 = true) {
-        let breakpoint, breakpoints, wrapperClasses;
-        let combinedLinks;
-        const state = this.state;
-        // check if window width has been updated from previous state
-        if (this.state.windowWidth !== nextState.windowWidth) {
-            breakpoint = this.getBreakpoint(nextState.windowWidth);
-            breakpoints = this.getBreakpoints(breakpoint);
-            this._breakpoint$.next(breakpoint);
-            this._breakpoints$.next(breakpoints);
-            // if not propagate the old ones without doing any calculations
-        }
-        else {
-            breakpoint = state.breakpoint;
-            breakpoints = state.breakpoints;
-        }
-        // finally get the wrapper classes when both the state and breakpoint are known
-        wrapperClasses = this.getWrapperClasses(nextState, breakpoint);
-        // check if the menuLinks or sidebarLinks have changed from previous state
-        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {
-            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];
+        catch (error) {
+            // send a warning to the console
+            console.warn('Dynamic configuration cannot be loaded from url', url, error);
         }
-        else {
-            combinedLinks = this.state.combinedLinks;
+    }
+    // the dynamic config is not loaded
+    return null;
+}
+
+const errorCodes = {
+    ERR_GENERIC: 'ERR_GENERIC',
+};
+const messages = {
+    ERR_GENERIC: 'An error occured',
+};
+// Intermediate "hacky" subclass taken from
+// https://www.bennadel.com/blog/3226-experimenting-with-error-sub-classing-using-es5-and-typescript-2-1-5.htm
+class ErrorSubClass {
+    constructor(code, msg, args) {
+        if (!msg && code && code in messages) {
+            if (typeof messages[code] === 'function') {
+                msg = messages[code](...args.messageParams);
+            }
+            else {
+                msg = messages[code];
+            }
         }
-        const stateBeforeUpdate = { ...this.state };
-        // we put it all together with the calculated properties
-        this._state$.next({
-            ...nextState,
-            wrapperClasses,
-            breakpoint,
-            breakpoints,
-            combinedLinks,
-            appBaseFontSize: this.getBaseFontSize(),
-        });
-        // update the Store Language
-        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {
-            this.i18nService.updateState({ activeLang: nextState.activeLanguage });
+        this.name = 'ErrorSubClass';
+        this.message = msg;
+        this.code = code;
+        this.stack = new Error(msg).stack;
+        if (args) {
+            Object.keys(args).forEach((k) => {
+                if (k !== 'messageParams') {
+                    this[k] = args[k];
+                }
+            });
         }
     }
+}
+// This replaces the "extends" on the Class
+// ErrorSubClass.prototype = <any>Object.create(Error.prototype);
+class EuiError extends ErrorSubClass {
+    constructor(code = errorCodes.ERR_GENERIC, msg, args) {
+        super(code, msg, args);
+        this.name = 'EuiError';
+    }
+}
+
+class GlobalErrorHandler extends ErrorHandler {
+    constructor(logService) {
+        super();
+        this.logService = logService;
+    }
+    handleError(error) {
+        // log error
+        this.logService.error(error.message || error.toString());
+        // throw error;
+        super.handleError(error);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: LogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: LogService }]; } });
+
+class HttpErrorHandlerInterceptor {
+    constructor(config = DEFAULT_HTTP_ERROR_HANDLER_CONFIG, injector, router) {
+        this.config = config;
+        this.injector = injector;
+        this.router = router;
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(tap(() => { }, (error) => {
+            // in case of http error
+            if (error instanceof HttpErrorResponse) {
+                const routeConfig = this.getRouteConfig(error);
+                const rule = routeConfig && (routeConfig[error.status] || routeConfig.default);
+                if (typeof rule === 'string') {
+                    // perform a redirect
+                    this.router.navigate([rule]);
+                }
+                else if (typeof rule === 'function') {
+                    // callback function
+                    rule.call(null, error, this.injector);
+                }
+            }
+        }));
+    }
     /**
-     * Emits a slice from the state whether that changes
+     * Search in the configuration for the first matching route
      *
-     * @param key can be 'key' or 'key.sub.sub'
+     * @param error http error response
+     * @returns HttpErrorRouteConfig or null
      */
-    getState(key) {
-        return defer(() => 
-        // check if key exists
-        key
-            ? this.state$.pipe(map((state) => get(state, key)), 
-            // filter((state) => state),
-            distinctUntilChanged((x, y) => isEqual(x, y)))
-            : this.state$);
-    }
-    sidebarToggle() {
-        this.isSidebarOpen = !this.state.isSidebarOpen;
-    }
-    // Edit mode
-    dimmerActiveToggle() {
-        const isActive = this.isDimmerActive;
-        this.setState({
-            ...this.state,
-            isDimmerActive: !isActive,
+    getRouteConfig(error) {
+        // filter the routes
+        const routes = this.config.routes.filter((route) => {
+            const regex = new RegExp('^' + route.path.split('*').join('.*') + '$');
+            return regex.test(error.url) && (typeof route[error.status] !== 'undefined' || typeof route.default !== 'undefined');
         });
-        this.activateEditModeCssVars(!isActive);
+        // return the first matching route, if any
+        return routes.length > 0 ? routes[0] : null;
     }
-    setDimmerActiveState(activeState) {
-        this.setState({
-            ...this.state,
-            isDimmerActive: activeState,
-        });
-        this.activateEditModeCssVars(activeState);
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor, deps: [{ token: HTTP_ERROR_HANDLER_CONFIG_TOKEN }, { token: i0.Injector }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HTTP_ERROR_HANDLER_CONFIG_TOKEN]
+                }] }, { type: i0.Injector }, { type: i1$4.Router }]; } });
+
+function AlertHttpErrorCallbackFn(error) {
+    alert(error.statusText);
+}
+function ConsoleHttpErrorCallbackFn(error) {
+    console.error('HttpError', error);
+}
+function LogHttpErrorCallbackFn(error, injector) {
+    const logService = injector.get(LogService);
+    logService.error('HttpError', error);
+}
+function GrowlHttpErrorCallbackFn(error, injector) {
+    const asService = injector.get(EuiGrowlService);
+    asService.growlError(error.statusText);
+}
+
+class ApiQueueService {
+    constructor(store, http, logService) {
+        this.store = store;
+        this.http = http;
+        this.logService = logService;
     }
-    activateEditModeCssVars(isActive) {
-        if (isActive) {
-            this._setCssVarValue('--eui-docpage-navigation-z-index', 'inherit'); // Reset doc-page-navigation-column z-index
-            this._setCssVarValue('--eui-z-index-sidebar', 'inherit'); // Reset eui-app-sidebar z-index
-            this._setCssVarValue('--eui-z-index-root', 'inherit'); // Reset eui-app-main-content z-index
-        }
-        else {
-            this._setCssVarValue('--eui-docpage-navigation-z-index', '2'); // Restore doc-page-navigation-column z-index
-            this._setCssVarValue('--eui-z-index-sidebar', '1044'); // Restore eui-app-sidebar z-index
-            this._setCssVarValue('--eui-z-index-root', '1'); // Restore eui-app-main-content z-index
+    /**
+     * Adds an item in the queue by dispatching an action to the store.
+     * @param id - The id of the item inside the queue.
+     * WARNING if matches any other queue item id will overwrite it.
+     * @param item - an item for Queue
+     */
+    addQueueItem(id, item) {
+        const allowedMethods = ['post', 'put', 'get'];
+        if (allowedMethods.indexOf(item.method) < 0) {
+            throw new Error(`[ApiQueue] method "${item.method}" is not allowed`);
         }
+        this.store.dispatch(new AddApiQueueItemAction({ id, item }));
     }
-    // --------------
-    // public methods
-    // --------------
-    fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json') {
-        this.getJson(metadataFilePath).then((data) => {
-            this.setState({
-                ...this.state,
-                appMetadata: data,
-            });
-        });
+    /**
+     * Subscribes to the store to retrieve queue and then converts the queue object to an array of items.
+     * @return An Observable of array of all items inside the current queue (ApiQueueItem[])
+     */
+    getQueue() {
+        return this.store.select(getApiQueue).pipe(take(1), map((queue) => {
+            const queueArray = queue && Object.values(queue);
+            if (!queueArray || queueArray.length < 1) {
+                this.logService.warn('No items in the queue exist.');
+            }
+            return queueArray;
+        }));
     }
-    activateSidebar() {
-        this.setState({
-            ...this.state,
-            hasSidebar: true,
-        });
-        if (!this.state.isSidebarHidden) {
-            this.activateSidebarCssVars();
-        }
+    /**
+     * Subscribes to the store to retrieve an item from the queue.
+     * @param id - id of the item inside the queue
+     * @return An Observable of ApiQueueItem type
+     */
+    getQueueItem(id) {
+        return this.store.select(getApiQueueItem(id)).pipe(take(1), map((queue) => {
+            if (!queue) {
+                this.logService.warn(`Queue item with id "${id}" does not exist`);
+                return null;
+            }
+            return queue;
+        }));
     }
-    activateSidebarHeader() {
-        this.activateSidebarHeaderCssVars();
+    /**
+     * Removes a given item from the queue.
+     * @param id - id of the item inside the queue
+     */
+    removeQueueItem(id) {
+        this.store.dispatch(new RemoveApiQueueItemAction(id));
     }
-    activateSidebarFooter() {
-        this.activateSidebarFooterCssVars();
+    /**
+     * Removes all items placed in the queue.
+     */
+    removeAllQueueItem() {
+        this.store.dispatch(new EmptyApiQueueAction(null));
     }
-    activateHeader() {
-        this.setState({
-            ...this.state,
-            hasHeader: true,
-        });
-        this.activateHeaderCssVars();
+    /**
+     * Process an item from the queue.
+     * @param id - id of the item inside the queue
+     * @return An Observable of type any
+     */
+    processQueueItem(id) {
+        return this.store.select(getApiQueueItem(id)).pipe(take(1), switchMap((queue) => {
+            if (!queue) {
+                this.logService.warn(`Queue item with id "${id}" does not exist`);
+                return of(null);
+            }
+            return this.buildHttpRequest(id, queue);
+        }));
     }
-    activateBreadcrumb() {
-        this.setState({
-            ...this.state,
-            hasBreadcrumb: true,
-        });
-        this.activateBreadcrumbCssVars();
+    /**
+     * Process all the items inside the queue.
+     * @param [continueOnError=true] - in case of an item request fails continue with the rest in queue
+     * @return An Observable with an array which contains all responses from all items in queue.
+     */
+    processAllQueueItems(continueOnError = true) {
+        return this.store.select(getApiQueue).pipe(map((queue) => Object.entries(queue).map(([key, value]) => this.buildHttpRequest(key, value).pipe(catchError((error) => {
+            this.logService.error(`Queue Item with id ${key} failed.`, error.message, error.stack);
+            if (!continueOnError) {
+                throw error;
+            }
+            return of(error);
+        })))), switchMap((obsQueue) => forkJoin(Array.from(obsQueue))));
     }
-    activateTopMessage(height) {
-        this.setState({
-            ...this.state,
-            hasTopMessage: true,
-        });
-        this.activateTopMessageCssVars(height);
+    /**
+     * Process all items in queue after it order them based on their timestamp. Beware that order
+     * matter in execution of Http Request in queue. When a request completes only then next will begin. Emission
+     * or Http response follows order.
+     * @param [ascending=true] - sets the order of queue items based on timestamp
+     */
+    processAllQueueItemsSequential(ascending = true) {
+        return this.store.select(getApiQueue).pipe(concatMap((queue) => Object.entries(queue)
+            .sort((a, b) => (ascending ? this.sortOnTimestamp(a, b) : this.sortOnTimestamp(b, a)))
+            .map(([id, item]) => this.buildHttpRequest(id, item))));
     }
-    activateToolbar() {
-        this.setState({
-            ...this.state,
-            hasToolbar: true,
-        });
-        this.activateToolbarCssVars();
+    /**
+     * Short dates ascending based on input
+     * @param a - Date one
+     * @param b - Date two
+     *
+     * @beta
+     */
+    sortOnTimestamp(a, b) {
+        return +new Date(a[1].timestamp) - +new Date(b[1].timestamp);
     }
-    activateToolbarMenu() {
-        this.setState({
-            ...this.state,
-            hasToolbarMenu: true,
-        });
+    /**
+     * build and HttpRequest Observable based on the given queue.
+     * After successful request completion removes the item from the queue.
+     * @param id - id of the item inside the queue
+     * @param item - the item of the queue that matches the id.
+     * @return An Observable of HttpClient Request
+     */
+    buildHttpRequest(id, item) {
+        return this.http[item.method.toLowerCase()](item.uri, item.payload).pipe(tap(() => this.removeQueueItem(id)));
     }
-    fetchCssVars() {
-        const cssVarNames = [
-            '--eui-app-header-height-default',
-            '--eui-app-header-height-active',
-            '--eui-app-header-height-shrink',
-            '--eui-app-breadcrumb-height-default',
-            '--eui-app-breadcrumb-height-active',
-            '--eui-app-top-message-height-default',
-            '--eui-app-top-message-height-active',
-            '--eui-app-top-message-height-shrink',
-            '--eui-app-toolbar-height-default',
-            '--eui-app-toolbar-height-active',
-            '--eui-app-sidebar-width-default',
-            '--eui-app-sidebar-width-active',
-            '--eui-app-sidebar-width-close-default',
-            '--eui-app-sidebar-width-close-active',
-            '--eui-app-sidebar-header-height-default',
-            '--eui-app-sidebar-header-height-active',
-            '--eui-app-sidebar-footer-height-default',
-            '--eui-app-sidebar-footer-height-active',
-        ];
-        this.cssVars = cssVarNames.map((v) => ({ key: v, value: this.getCssVarValue(v) }));
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, deps: [{ token: StoreService }, { token: i1$5.HttpClient }, { token: LogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: StoreService }, { type: i1$5.HttpClient }, { type: LogService }]; } });
+
+class ApiQueueServiceMock extends ApiQueueService {
+    constructor() {
+        super(null, null, null);
     }
-    initCssVars() {
-        this.setCssVar('--eui-app-header-height-default', '--eui-app-header-height');
-        this.setCssVar('--eui-app-breadcrumb-height-default', '--eui-app-breadcrumb-height');
-        this.setCssVar('--eui-app-top-message-height-default', '--eui-app-top-message-height');
-        this.setCssVar('--eui-app-toolbar-height-default', '--eui-app-toolbar-height');
-        this.setCssVar('--eui-app-sidebar-width-default', '--eui-app-sidebar-width');
-        this.setCssVar('--eui-app-sidebar-width-close-default', '--eui-app-sidebar-width-close');
-        this.setCssVar('--eui-app-sidebar-header-height-default', '--eui-app-sidebar-header-height');
-        this.setCssVar('--eui-app-sidebar-footer-height-default', '--eui-app-sidebar-footer-height');
+    getQueue() {
+        return of([]);
     }
-    activateHeaderCssVars() {
-        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
+    getQueueItem(id) {
+        return of({ uri: id, method: 'GET' });
     }
-    activateBreadcrumbCssVars() {
-        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height');
+    removeAllQueueItem() { }
+    processAllQueueItems() {
+        return of({});
     }
-    activateTopMessageCssVars(height) {
-        this._setCssVarValue('--eui-app-top-message-height', `${height}px`);
+    addQueueItem() { }
+    removeQueueItem() { }
+    processQueueItem() {
+        return of({});
     }
-    activateToolbarCssVars() {
-        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height');
+}
+
+class I18nResourceImpl {
+    /**
+     * Resource constructor
+     *
+     * @param prefix the prefix of the resource
+     * @param suffix the suffix of the resource, optional parameter
+     * @param compileTranslations compiler function, optional parameter
+     */
+    constructor(prefix, suffix = '', compileTranslationsFn = (translations) => translations) {
+        this.prefix = prefix;
+        this.suffix = suffix;
+        this.compileTranslationsFn = compileTranslationsFn;
     }
-    activateFooterCssVars() {
-        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height');
+    /**
+     * Translations pre-processor
+     *
+     * @param translations the object to be pre-processed
+     * @param lang the translations language
+     * @returns the pre-processed translations
+     */
+    compileTranslations(translations, lang) {
+        return this.compileTranslationsFn(translations, lang);
     }
-    setHeaderShrinkCssVar(active) {
-        if (active) {
-            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height');
-        }
-        else {
-            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
-        }
+    /**
+     * Indicates whether other object is equal-to this one.
+     *
+     * @param obj the reference object with which to compare
+     * @returns true if this object is the same as obj, false otherwise
+     */
+    equals(obj) {
+        return this.prefix === obj.prefix && this.suffix === obj.suffix;
     }
-    activateSidebarCssVars() {
-        this.setCssVar('--eui-app-sidebar-width-active', '--eui-app-sidebar-width');
-        this.setCssVar('--eui-app-sidebar-width-close-active', '--eui-app-sidebar-width-close');
+    /**
+     * The path to the resource
+     *
+     * @param lang the resource language
+     * @returns the path
+     */
+    getPath(lang) {
+        return `${this.prefix}${lang}${this.suffix}`;
     }
-    removeSidebarCssVars() {
-        document.documentElement.style.removeProperty('--eui-app-sidebar-header-height');
-        document.documentElement.style.removeProperty('--eui-app-sidebar-footer-height');
-        document.documentElement.style.removeProperty('--eui-app-sidebar-width');
-        document.documentElement.style.removeProperty('--eui-app-sidebar-width-close');
+}
+
+class I18nLoader {
+    constructor(http, logService, euiAppConfig) {
+        this.http = http;
+        this.logService = logService;
+        this.euiAppConfig = euiAppConfig;
+        this.resources = [];
+        this.failedResources = [];
+        // create the resources from the config object
+        const i18nConfig = this.euiAppConfig.global && this.euiAppConfig.global.i18n;
+        const i18nLoaderConfig = i18nConfig && i18nConfig.i18nLoader;
+        this.resources.push(...this.createResources(i18nLoaderConfig));
     }
-    activateSidebarHeaderCssVars() {
-        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height');
+    /**
+     * Gets the translations from the server
+     *
+     * @param lang
+     * @returns Observable<any>
+     */
+    getTranslation(lang) {
+        return this.loadResources(this.resources, lang).pipe(map((loadedResources) => {
+            this.failedResources = loadedResources.hasError ? loadedResources.errors : [];
+            return loadedResources.translations;
+        }));
     }
-    activateSidebarFooterCssVars() {
-        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height');
+    /**
+     * Adds resources
+     *
+     * @param config loader configuration
+     * @returns Observable<any> | false
+     */
+    addResources(config) {
+        // create the resources
+        let resources = this.createResources(config);
+        // filter the resources first, to avoid duplicates
+        resources = resources.filter((resource) => !this.resources.some((res) => res.equals(resource)));
+        // add the new resources to the list of existing resources
+        this.resources.push(...resources);
+        // return the filtered resources
+        return resources;
     }
     /**
-     * Gets the viewport height and width and multiple it by 1% to get a value for a vh/vw unit
-     * Sets the value in the --eui-app-vh custom property to the root of the document
-     * Sets the value in the --eui-app-vw custom property to the root of the document
-     * Example for 100% height: calc(var(--eui-app-vh, 1vh) * 100);
-     * Example for 50% height: calc(var(--eui-app-vh, 1vh) * 50);
-     * Example for 50% width: calc(var(--eui-app-vw, 1vw) * 50);
+     * Removes resources from the loader instance
      */
-    setAppViewportCssVars() {
-        let vh = window.innerHeight * 0.01;
-        let vw = window.innerWidth * 0.01;
-        this._setCssVarValue('--eui-app-vh', `${vh}px`);
-        this._setCssVarValue('--eui-app-vw', `${vw}px`);
+    removeResources(removedResources) {
+        this.resources = this.resources.filter((res) => !removedResources.some((removedResource) => removedResource.equals(res)));
+    }
+    /**
+     * Loads an array of resources, by language
+     *
+     * @param resources the definition of the resources
+     * @param lang the resource language to load
+     * @returns Observable<any>
+     */
+    loadResources(resources, lang) {
+        // if there are resources to load
+        if (Array.isArray(resources) && resources.length > 0) {
+            // load all the resources in an array of Observable
+            const requests = resources.map((resource) => this.loadResource(resource, lang));
+            // group all the observables with forkJoin and deep merge them
+            return forkJoin(requests).pipe(map((response) => {
+                const successResp = [];
+                const errResp = [];
+                response.forEach((item) => {
+                    if (item.isError) {
+                        errResp.push({ resource: item.resource, error: item.error });
+                    }
+                    else {
+                        successResp.push(item);
+                    }
+                });
+                if (successResp.length === response.length) {
+                    return { hasError: false, translations: mergeAll(successResp) };
+                }
+                else {
+                    return { hasError: true, translations: mergeAll(successResp), errors: errResp };
+                }
+            }));
+        }
+        else {
+            // no resources to load
+            return of({ hasError: false, translations: {} });
+        }
     }
     /**
-     * Returns the current value of --eui-base-font-size CSS variable
+     * Returns resources that failed
      */
-    getBaseFontSize() {
-        return this.state.appBaseFontSize || this.getCssVarValue('--eui-base-font-size');
+    getFailedResources() {
+        return this.failedResources;
     }
     /**
-     * Updates the current value of --eui-base-font-size CSS variable and the UIState appBaseFontSize
+     * Create resources from a config file
+     *
+     * @param config loader configuration
+     * @returns I18nResourceImpl[] resources
      */
-    setBaseFontSize(newsize) {
-        this.setState({
-            ...this.state,
-            appBaseFontSize: newsize,
-        }, false);
-        this._setCssVarValue('--eui-base-font-size', newsize);
-    }
-    // ---------------
-    // private getters
-    // ---------------
-    getCssVarValue(inputProperty) {
-        return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
-    }
-    setCssVar(inputProperty, outputProperty) {
-        const cssVarValue = this.cssVars.filter((v) => v.key === inputProperty)[0].value;
-        this._setCssVarValue(outputProperty, cssVarValue);
-        // console.log(inputProperty, outputProperty, cssVarValue);
-    }
-    _setCssVarValue(varName, varValue) {
-        document.documentElement.style.setProperty(varName, varValue);
-    }
-    getWrapperClasses(state, breakpoint) {
-        let classes = [];
-        classes.push(breakpoint);
-        if (state.hasSidebar) {
-            if (state.isSidebarOpen && (state.isSidebarActive || state.isSidebarInnerActive)) {
-                classes.push('sidebar-state-open');
-            }
-            if (!state.isSidebarOpen && (state.isSidebarActive || state.isSidebarInnerActive)) {
-                classes.push('sidebar-state-close');
-            }
-            if (state.isSidebarActive) {
-                classes.push('sidebar-active');
-            }
-            if (state.isSidebarInnerActive) {
-                classes.push('sidebar-inner-active');
-            }
-            if (state.isSidebarStateCloseWithIcons) {
-                classes.push('sidebar-state-close-with-icons');
-            }
-            // NEW APP-SHELL props
-            if (state.isSidebarHidden) {
-                classes.push('sidebar--hidden');
-            }
-            if (state.isSidebarOpen) {
-                classes.push('sidebar--open');
-            }
-            else {
-                classes.push('sidebar--close');
-            }
-            if (state.isSidebarHover) {
-                classes.push('sidebar--hover');
-            }
-        }
-        if (state.deviceInfo && state.deviceInfo.isFF) {
-            classes.push('ff');
-        }
-        if (state.deviceInfo && state.deviceInfo.isIE) {
-            classes.push('ie');
-        }
-        if (state.deviceInfo && state.deviceInfo.isIE11) {
-            classes.push('ie11');
+    createResources(config) {
+        // use the default config as a reference base
+        config = getI18nLoaderConfig(config);
+        const resources = [];
+        // extract the i18n folders from config
+        const i18nFolders = Array.isArray(config.i18nFolders)
+            ? config.i18nFolders
+            : config.i18nFolders
+                ? [config.i18nFolders]
+                : [];
+        if (i18nFolders) {
+            // add the i18n folders to resources
+            resources.push(...i18nFolders.map((folder) => new I18nResourceImpl(`assets/${folder}/`, '.json')));
         }
-        if (state.deviceInfo && state.deviceInfo.isChrome) {
-            classes.push('chrome');
+        // extract the i18n services from config
+        const i18nServices = Array.isArray(config.i18nServices)
+            ? config.i18nServices
+            : config.i18nServices
+                ? [config.i18nServices]
+                : [];
+        if (i18nServices) {
+            // add the i18n services to resources
+            resources.push(...i18nServices.map((service) => new I18nResourceImpl(service)));
         }
-        return classes.join(' ');
-    }
-    getBreakpoint(windowWidth) {
-        let bkp = '';
-        switch (true) {
-            case windowWidth >= 0 && windowWidth < 576:
-                bkp = 'xs';
-                break;
-            case windowWidth >= 576 && windowWidth < 768:
-                bkp = 'sm';
-                break;
-            case windowWidth >= 768 && windowWidth < 992:
-                bkp = 'md';
-                break;
-            case windowWidth >= 992 && windowWidth < 1200:
-                bkp = 'lg';
-                break;
-            case windowWidth >= 1200 && windowWidth < 1400:
-                bkp = 'xl';
-                break;
-            case windowWidth >= 1400 && windowWidth < 1920:
-                bkp = 'xxl';
-                break;
-            case windowWidth >= 1920 && windowWidth < 2560:
-                bkp = 'fhd';
-                break;
-            case windowWidth >= 2560 && windowWidth < 3840:
-                bkp = '2k';
-                break;
-            case windowWidth >= 3840:
-                bkp = '4k';
-                break;
+        // extract the i18n resources from config
+        const i18nResources = Array.isArray(config.i18nResources)
+            ? config.i18nResources
+            : config.i18nResources
+                ? [config.i18nResources]
+                : [];
+        if (i18nResources) {
+            // add the i18n resources to resources
+            resources.push(...i18nResources.map((resource) => new I18nResourceImpl(resource.prefix, resource.suffix, this.getResourceCompileFunction(resource.compileTranslations))));
         }
-        return bkp;
-    }
-    getBreakpoints(bkp) {
-        return {
-            isMobile: bkp === 'xs' || bkp === 'sm',
-            isTablet: bkp === 'md',
-            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md',
-            isDesktop: bkp === 'lg',
-            isXL: bkp === 'xl',
-            isXXL: bkp === 'xxl',
-            isFHD: bkp === 'fhd',
-            is2K: bkp === '2k',
-            is4K: bkp === '4k',
-        };
-    }
-    getJson(url) {
-        return this.http.get(url).toPromise().then(this.extractData).catch(this.handleError);
-    }
-    extractData(res) {
-        const body = res;
-        return body || {};
-    }
-    handleError(error) {
-        console.error('An error occurred', error);
-        return Promise.reject(error.message || error);
+        return resources;
     }
-    bindActiveLanguageToAppShellState() {
-        this.storeService.select(getActiveLang).subscribe((activeLang) => {
-            if (activeLang !== this.state.activeLanguage) {
-                this.setState({
-                    ...this.state,
-                    activeLanguage: activeLang,
-                }, false);
+    /**
+     * Loads a resource, by language
+     *
+     * @param resource the definition of the resource
+     * @param lang the resource language to load
+     * @returns Observable<any>
+     */
+    loadResource(resource, lang) {
+        // the path to the resource
+        const path = resource.getPath(lang);
+        // load the translations from the path
+        return this.http.get(path).pipe(
+        // preprocess the translations using the resource compiler
+        map((translations) => resource.compileTranslations(translations, lang)), map((translations) => {
+            // resource loaded properly, send a info message
+            if (this.logService) {
+                this.logService.info(`I18n resource loaded from path ${path}`);
             }
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxAppShellService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i1$2.HttpClient }, { token: PLATFORM_ID }, { token: i2$1.Router }, { token: StoreService }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxAppShellService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxAppShellService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [GLOBAL_CONFIG_TOKEN]
-                }] }, { type: i1$2.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i2$1.Router }, { type: StoreService }, { type: I18nService, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-class CoreAppEffects {
-    constructor(actions, 
-    // TODO: remove on eUI 14
-    showConnectionStatus, translateService, asService) {
-        this.actions = actions;
-        this.showConnectionStatus = showConnectionStatus;
-        this.translateService = translateService;
-        this.asService = asService;
-        this.getAppConnectionInformation = createEffect(() => merge(fromEvent(window, 'online').pipe(mapTo(true)), fromEvent(window, 'offline').pipe(mapTo(false))).pipe(map((connected) => new UpdateAppConnectionAction(connected))));
-        this.activatedRoute = createEffect(() => this.actions.pipe(ofType(CoreAppActionTypes.ACTIVATED_ROUTE), map((action) => action.payload), mergeMap((route) => {
-            // extract the module name, if defined
-            const module = route.snapshot.data['module'] || 'undefined';
-            return [new UpdateCurrentModuleAction(module)];
-        })));
-        this.updateAppConnection = createEffect(() => this.actions.pipe(ofType(CoreAppActionTypes.UPDATE_APP_CONNECTION), map((action) => action.payload), tap((connected) => {
-            // TODO: for eUI 14, drop boolean support and refactor
-            // check if feature is enabled
-            let isFeatureEnabled = typeof this.showConnectionStatus !== 'boolean' ? this.showConnectionStatus?.enabled : this.showConnectionStatus;
-            // extract lifespan if any
-            let lifespan = typeof this.showConnectionStatus !== 'boolean' ? this.showConnectionStatus?.messageBox?.lifespan || 0 : 0;
-            // if the user needs to be informed about the connection status
-            if (isFeatureEnabled) {
-                if (connected) {
-                    this.translateService.get('eui.CONNECTED').subscribe((translation) => {
-                        // TODO v17 - should be subscribed from the eui-app to display growl
-                        // this.asService.growl(
-                        //     { severity: 'success', summary: 'MESSAGE', detail: translation, life: lifespan },
-                        //     lifespan < 1,
-                        //     false
-                        // );
-                    });
-                }
-                else {
-                    this.translateService.get('eui.NOTCONNECTED').subscribe((translation) => {
-                        // TODO v17 - should be subscribed from the eui-app to display growl
-                        // this.asService.growl(
-                        //     { severity: 'danger', summary: 'ERROR', detail: translation, life: lifespan },
-                        //     lifespan < 1,
-                        //     false
-                        // );
-                    });
-                }
+            // return the translations
+            return translations;
+        }), catchError((err) => {
+            // remove failed resource from loaded resource array
+            this.removeResources([resource]);
+            // resource not loaded properly, send a warning message
+            if (this.logService) {
+                this.logService.warn(`I18n resource NOT loaded from path ${path}`, err);
             }
-        })), { dispatch: false });
+            const resourceError = { error: `I18n resource NOT loaded from path ${path}`, resource, isError: true };
+            return of(resourceError);
+        }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects, deps: [{ token: i1$3.Actions }, { token: SHOW_CONNECTION_STATUS_TOKEN }, { token: i2.TranslateService }, { token: UxAppShellService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects }); }
+    getResourceCompileFunction(id) {
+        const customHandlers = this.euiAppConfig.customHandler;
+        if (customHandlers && typeof customHandlers[id] === 'function') {
+            return customHandlers[id];
+        }
+        return undefined;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader, deps: [{ token: i1$5.HttpClient }, { token: LogService, optional: true }, { token: CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreAppEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nLoader, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.HttpClient }, { type: LogService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [SHOW_CONNECTION_STATUS_TOKEN]
-                }] }, { type: i2.TranslateService }, { type: UxAppShellService }]; } });
-
-const CoreModuleEffects = [CoreAppEffects];
-
-const updateAppVersion = (state, action) => ({ ...state, version: action.payload });
-const updateAppConnection = (state, action) => ({ ...state, connected: action.payload });
-const AddAppLoadedConfigModules = (state, action) => ({
-    ...state,
-    loadedConfigModules: {
-        lastAddedModule: action.payload.moduleName,
-        modulesConfig: {
-            ...state.loadedConfigModules.modulesConfig,
-            [action.payload.moduleName]: {
-                ...action.payload.moduleConfig,
-            },
-        },
+                    args: [CONFIG_TOKEN]
+                }] }]; } });
+const translateConfig = {
+    loader: {
+        provide: TranslateLoader,
+        useClass: I18nLoader,
     },
-});
-const updateAppStatus = (state, action) => ({ ...state, status: action.payload });
-const updateCurrentModule = (state, action) => Object.assign({}, state, { currentModule: action.payload });
-const addApiQueueItem = (state, action) => {
-    // apply the timestamp to the queue item
-    const apiQueueItem = Object.assign({}, action.payload.item, { timestamp: new Date().getTime() });
-    // update the queue
-    const apiQueue = Object.assign({}, state.apiQueue, { [action.payload.id]: apiQueueItem });
-    return Object.assign({}, state, { apiQueue });
-};
-const removeApiQueueItem = (state, action) => {
-    // remove the specified id from the list of item ids and recreate the apiQueue from the remaining ids
-    const apiQueue = Object.keys(state.apiQueue)
-        .filter((id) => id !== action.payload)
-        .reduce((queue, key) => {
-        queue[key] = state.apiQueue[key];
-        return queue;
-    }, {});
-    return Object.assign({}, state, { apiQueue });
-};
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const emptyApiQueue = (state, action) => 
-// remove all items in the Api Queue
-Object.assign({}, state, { apiQueue: {} });
-const actionToReducerMap$4 = {
-    [CoreAppActionTypes.UPDATE_APP_VERSION]: updateAppVersion,
-    [CoreAppActionTypes.UPDATE_APP_CONNECTION]: updateAppConnection,
-    [CoreAppActionTypes.ADD_APP_LOADED_CONFIG_MODULES]: AddAppLoadedConfigModules,
-    [CoreAppActionTypes.UPDATE_APP_STATUS]: updateAppStatus,
-    [CoreAppActionTypes.UPDATE_CURRENT_MODULE]: updateCurrentModule,
-    [CoreAppActionTypes.ADD_API_QUEUE_ITEM]: addApiQueueItem,
-    [CoreAppActionTypes.REMOVE_API_QUEUE_ITEM]: removeApiQueueItem,
-    [CoreAppActionTypes.EMPTY_API_QUEUE]: emptyApiQueue,
-};
-const coreAppReducers = (state = initialAppState, action) => {
-    if (actionToReducerMap$4[action.type]) {
-        return actionToReducerMap$4[action.type](state, action);
-    }
-    // if the action type is not in the map, call the base reducers method
-    return state;
 };
 
-const updateUser = (state, action) => {
-    let fullName = action.payload.fullName;
-    if (!fullName) {
-        fullName = `${action.payload.firstName || ''} ${action.payload.lastName || ''}`.trim();
-    }
-    return Object.assign({}, state, action.payload, { fullName });
-};
-const updateUserDetails = (state, action) => {
-    let fullName = action.payload.fullName;
-    if (!fullName) {
-        fullName = `${action.payload.firstName || ''} ${action.payload.lastName || ''}`.trim();
-    }
-    // todo should be checked if state.details is really there
-    const details = Object.assign({}, state.details, action.payload, { fullName });
-    return Object.assign({}, state, details);
-};
-const updateUserPreferences = (state, action) => {
-    const preferences = Object.assign({}, state.preferences, action.payload);
-    return Object.assign({}, state, { preferences });
-};
-const updateUserRights = (state, action) => Object.assign({}, state, { rights: [...action.payload] });
-const updateUserDashboard = (state, action) => {
-    // apply the dashboard to preferences
-    const preferences = Object.assign({}, state.preferences, { dashboard: action.payload });
-    // update the state
-    return { ...state, preferences };
-};
-const actionToReducerMap$3 = {
-    [CoreUserActionTypes.UPDATE_USER_DETAILS]: updateUserDetails,
-    [CoreUserActionTypes.UPDATE_USER_PREFERENCES]: updateUserPreferences,
-    [CoreUserActionTypes.UPDATE_USER_STATE]: updateUser,
-    [CoreUserActionTypes.UPDATE_USER_RIGHTS]: updateUserRights,
-    [CoreUserActionTypes.UPDATE_USER_DASHBOARD]: updateUserDashboard,
-};
-const coreUserReducers = (state = initialUserState, action) => {
-    if (actionToReducerMap$3[action.type]) {
-        return actionToReducerMap$3[action.type](state, action);
+class I18nService extends EuiLazyService {
+    constructor(baseGlobalConfig, translateService, logService, store, document) {
+        super({ activeLang: 'en' });
+        this.baseGlobalConfig = baseGlobalConfig;
+        this.translateService = translateService;
+        this.logService = logService;
+        this.store = store;
+        this.document = document;
+        this.config = getI18nServiceConfigFromBase(this.baseGlobalConfig);
+        this.onModuleLoad = new BehaviorSubject({ ready: false, name: null });
     }
-    return state;
-};
-
-const updateNotificationsList = (state, action) => Object.assign({}, state, { list: [...action.payload] });
-const actionToReducerMap$2 = {
-    [CoreNotificationsActionTypes.UPDATE_NOTIFICATIONS_LIST]: updateNotificationsList,
-};
-const coreNotificationsReducers = (state = initialNotificationsState, action) => {
-    if (actionToReducerMap$2[action.type]) {
-        return actionToReducerMap$2[action.type](state, action);
+    getState(keyOrMapFn) {
+        let selector = getI18nState;
+        let dotNotationToObject = (obj, key) => key.split('.').reduce((slice, i) => slice[i], obj);
+        if (keyOrMapFn) {
+            switch (typeof keyOrMapFn) {
+                case 'function':
+                    selector = createSelector(getI18nState, keyOrMapFn);
+                    break;
+                case 'string':
+                    selector = createSelector(getI18nState, (state) => dotNotationToObject(state, keyOrMapFn));
+                    break;
+            }
+        }
+        return this.store.select(selector);
     }
-    return state;
-};
-
-const updateI18nState = (state, action) => ({
-    ...state,
-    ...action.payload,
-});
-const actionToReducerMap$1 = {
-    [CoreI18nActionTypes.UPDATE_I18N_STATE]: updateI18nState,
-};
-const corI18nReducers = (state = initialI18nState, action) => {
-    if (actionToReducerMap$1[action.type]) {
-        return actionToReducerMap$1[action.type](state, action);
+    updateState(langState) {
+        this.updateHTMLDOMLang(langState.activeLang);
+        this.store.dispatch(new UpdateI18nStateAction(langState));
     }
-    return state;
-};
-
-const updateLocaleState = (state, action) => ({
-    ...state,
-    ...action.payload,
-});
-const actionToReducerMap = {
-    [CoreLocaleActionTypes.UPDATE_LOCALE_STATE]: updateLocaleState,
-};
-const coreLocaleReducers = (state = initialLocaleState, action) => {
-    if (actionToReducerMap[action.type]) {
-        return actionToReducerMap[action.type](state, action);
+    init(langState) {
+        const initLang = langState && langState.activeLang ? langState.activeLang : this.preparedDefaultLanguage();
+        const initState = {
+            ...langState,
+            activeLang: initLang,
+        };
+        if (typeof initLang === 'string') {
+            super.initEuiService(this.store);
+            this.updateState(initState);
+            return this.setup(initLang);
+        }
+        return of({ success: false, error: 'Initial active lang should be string' });
     }
-    return state;
-};
-
-const coreReducers = Object.assign({}, {
-    app: coreAppReducers,
-    user: coreUserReducers,
-    notifications: coreNotificationsReducers,
-    i18n: corI18nReducers,
-    locale: coreLocaleReducers,
-});
-
-const extend = extendProxy.default || extendProxy;
-/**
- * Utility meta-reducer to load the state from the local storage
- * @param reducer the action reducer
- */
-function localStorageSync(reducer) {
-    return cb(reducer, localStorage);
-}
-/**
- * Utility meta-reducer to load the state from the session storage
- * @param reducer the action reducer
- */
-function sessionStorageSync(reducer) {
-    return cb(reducer, sessionStorage);
-}
-// Keys that are allowed to be synced with NgRx state from BrowserStorage
-const disallowedKeys = ['loadedConfigModules', 'connect', 'currentModule', 'status', 'apiQueue'];
-/**
- * filters the AppState by removing those keys from the state and return a new state Object
- * @param app the AppState
- */
-const filterAppState = (app) => {
-    // in case app is undefined or null it should return empty object
-    if (!app) {
-        return {};
+    /**
+     * A pipe function that could serve as a wrapper of another observable
+     * e.g. ngx-translate i18n.onReady('my_module').pipe(switchMap(()=>translate.get('eui.KEY')));
+     * WARNING: onReady will emit only once for a loaded Module, going to another and then going back will not result
+     * into another emission.
+     *
+     * @param moduleName the name of the module that has been given through the eUI globalConfig. In case non provided
+     * fetch module name from the state.
+     */
+    onReady(moduleName) {
+        return this.onModuleLoad.pipe(switchMap((evt) => moduleName
+            ? of(evt)
+            : this.store.select(getLastAddedModule).pipe(tap((m) => (moduleName = m)), map(() => evt))), 
+        // emit only if event emitted matches the module name and is ready
+        filter((evt) => evt.ready === true && evt.name === moduleName), 
+        // make sure that observable completes
+        take(1));
     }
-    return (Object.keys(app)
-        // select keys that are present in the allowed list
-        .filter((key) => !disallowedKeys.includes(key))
-        // build a new object with only the allowed properties
-        .reduce((obj, key) => {
-        obj[key] = app[key];
-        return obj;
-    }, {}));
-};
-/**
- *
- * @param storageType
- */
-const loadState = (storage = localStorage) => {
-    try {
-        // by default falls back to localStorage
-        const serializedState = storage.getItem('state');
-        if (serializedState === null) {
-            return undefined;
-        }
-        // deserialize state
-        let state = JSON.parse(serializedState);
-        // filter AppState and replace
-        state = { ...state, app: filterAppState(state?.app) };
-        return state;
+    lazyLoad(config) {
+        const moduleId = Math.floor(Math.random() * 100000 + 1).toLocaleString();
+        return this.addResources(config, moduleId);
     }
-    catch (err) {
-        return undefined;
+    lazyLoadInit(moduleConfig, moduleName) {
+        const i18nLoaderConfig = moduleConfig;
+        // add resources
+        return this.addResources(i18nLoaderConfig, moduleName);
     }
-};
-const cb = (reducer, storage) => (state, action) => {
-    if (action.type === CoreAppActionTypes.INIT_STORE) {
-        // This action must be dispatched from an app initializer
-        // We load the state from a storage and compare the version and userId with the provided ones.
-        // If they are the same, we merge the local state into the initial state.
-        // If there is a mismatch, we don't merge the local state, but update only the initial state.
-        // load the state from the localStorage
-        const localState = loadState(storage);
-        // extract the details about user and app version from the action payload
-        const payload = action.payload;
-        const payloadVersion = payload?.version;
-        if (localState) {
-            // TODO: Why all these checks here? What is the purpose of this code?
-            // extract the details about user and app version from the storage state
-            const localVersion = localState?.app?.version;
-            // const localUserId = localState.user && localState.user.userId;
-            const isVersionOK = !localVersion || !payloadVersion || localVersion === payloadVersion;
-            // const isUserIdOK = (localUserId === payloadUserId);
-            // update the entire state with deep merge of states, if the version and user are the same
-            if (isVersionOK) {
-                state = extend(true, {}, state, localState);
+    /**
+     * Add resources based of a config loader
+     *
+     * @param config I18nLoaderConfig
+     * @return Promise<EuiServiceStatus> an EuiServiceStatus when translation has fully loaded
+     */
+    addResources(config, moduleName) {
+        // emit that module is loading
+        this.onModuleLoad.next({ ready: false, name: moduleName });
+        const loader = this.translateService.currentLoader;
+        if (loader instanceof I18nLoader) {
+            const langSubscription = [];
+            const i18nLoader = loader;
+            // add the resources to the loader
+            const resources = i18nLoader.addResources(config);
+            // manually load the resources for the CURRENT language and add them to the translate service
+            langSubscription.push(i18nLoader.loadResources(resources, this.translateService.currentLang).pipe(take(1), tap((loadedResources) => {
+                // add the new set of translations to the current language
+                this.translateService.setTranslation(this.translateService.currentLang, loadedResources.translations, true);
+            })));
+            // if the current language is different than the DEFAULT language
+            const defaultLang = this.config.defaultLanguage || this.translateService.defaultLang;
+            if (this.translateService.currentLang !== defaultLang) {
+                // manually load the resources for the default language and add them to the translate service
+                langSubscription.push(i18nLoader.loadResources(resources, defaultLang).pipe(take(1), tap((loadedResources) => {
+                    this.translateService.setTranslation(defaultLang, loadedResources.translations, true);
+                })));
             }
+            return forkJoin(langSubscription).pipe(map((loadedResourcesArr) => !loadedResourcesArr[0].hasError ? { success: true } : { success: false, error: loadedResourcesArr[0].errors }), tap(() => {
+                // emit status of module loading progress
+                this.onModuleLoad.next({ ready: true, name: moduleName });
+            }), catchError((error) => {
+                // emit status of module loading progress
+                this.onModuleLoad.next({ ready: true, name: moduleName, error });
+                return of({ success: false, error });
+            }));
         }
-        // update the app version, if defined
-        if (payloadVersion) {
-            state = { ...state, app: { ...state?.app, version: payloadVersion } };
+        else {
+            return of({ success: false, error: 'currentLoader is not an I18nLoader.' });
         }
     }
-    return reducer(state, action);
-};
-
-class StoreServiceMock extends StoreService {
-    constructor() {
-        super(null, null);
-    }
-    init() { }
-    addAutoSaveHandler() { }
-    handleAutoSave() { }
-    dispatch() { }
-    select() {
-        return of({});
+    /**
+     * Prepares the default language
+     */
+    preparedDefaultLanguage() {
+        const browserPref = getBrowserDefaultLanguage();
+        // If user has browser preferred lang, and that language is part of the languages array
+        if (browserPref && this.config.languages && EuiEuLanguages.getLanguageCodes(this.config.languages).includes(browserPref)) {
+            return browserPref;
+        }
+        return this.config.defaultLanguage;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: StoreServiceMock, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-const CORE_ROOT_GUARD = new InjectionToken('Internal Theme ForRoot Guard');
-class CoreModule {
     /**
-     * No more providing config from forRoot, you have to use EUI_CONFIG_TOKEN to pass config via providers.
+     * @param default_language if given default language to override default language coming from the
+     * configuration token.
      */
-    static forRoot() {
-        return {
-            ngModule: CoreModule,
-            providers: [
-                {
-                    provide: EuiCoreRootGuardClass,
-                    useFactory: euiCoreRootGuardClass,
-                    deps: [],
-                },
-                {
-                    provide: CORE_ROOT_GUARD,
-                    useFactory: createEuiCoreRootGuard,
-                    deps: [[EuiCoreRootGuardClass, new Optional(), new SkipSelf()]],
-                },
-                ...getCoreProviders(),
-            ],
-        };
+    setup(initLanguage) {
+        // use the default config as a reference base
+        this.config = Object.assign({}, DEFAULT_I18N_SERVICE_CONFIG, this.config);
+        // configure the translate config service
+        if (this.config.languages) {
+            this.translateService.addLangs(EuiEuLanguages.getLanguageCodes(this.config.languages));
+            if (this.logService) {
+                this.logService.info(`I18n accepted languages set to ${EuiEuLanguages.getLanguageCodes(this.config.languages)}`);
+            }
+        }
+        // set the current language, causing to load translations
+        return this.translateService.use(initLanguage).pipe(tap(() => {
+            this.bindActiveLangStateToTranslateService();
+            this.bindTranslateServiceLangChangeToState();
+            if (this.config.defaultLanguage) {
+                this.setDefaultLanguage(this.config.defaultLanguage);
+            }
+        }), map(() => {
+            if (this.translateService.currentLoader instanceof I18nLoader) {
+                const failedResources = this.translateService.currentLoader.getFailedResources();
+                if (failedResources.length > 0) {
+                    return { success: false, error: failedResources };
+                }
+            }
+            return { success: true };
+        }), catchError((error) => of({ success: false, error })));
     }
-    static forChild(moduleName) {
-        return {
-            ngModule: CoreModule,
-            providers: getCoreChildProviders(moduleName),
-        };
+    bindActiveLangStateToTranslateService() {
+        this.store.select(getActiveLang).subscribe((lang) => {
+            if (lang !== null && this.translateService.currentLang !== lang) {
+                this.use(lang);
+            }
+        });
     }
-    constructor(guard, parentModule, injector) {
-        // if there is a parentModule, a new instance is created in a lazy loaded module
-        if (parentModule) {
-            // extract the i18n service and the i18n loader config
-            // todo, this thing should be achieved by store, and localization service dependency should be removed
-            const storeService = injector.get(StoreService);
-            const moduleName = injector.get(MODULE_NAME_TOKEN);
-            const moduleConfig = injector.get(MODULE_CONFIG_TOKEN);
-            storeService.dispatch(new AddAppLoadedConfigModulesAction({ moduleName, moduleConfig }));
+    bindTranslateServiceLangChangeToState() {
+        this.translateService.onLangChange.subscribe((event) => {
+            if (this.stateInstance.activeLang !== event.lang) {
+                this.updateState({ activeLang: event.lang });
+            }
+            if (this.logService) {
+                this.logService.info(`I18n current language set to ${event.lang}`);
+            }
+        });
+    }
+    setDefaultLanguage(defaultLanguage) {
+        // removed, current language is already calculated in init, setup function fill use it directly, not default
+        // this.translateService.currentLang = default_language || this.config.defaultLanguage;
+        this.translateService.setDefaultLang(defaultLanguage);
+        if (this.logService) {
+            this.logService.info(`I18n default language set to ${defaultLanguage}`);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule, deps: [{ token: CORE_ROOT_GUARD, optional: true }, { token: CoreModule, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule }); }
+    /**
+     * change the currently used language
+     *
+     * @param lang is the language code based on the convention you used e.g. (en or en-EN)
+     * @returns Observable that returns an object contain the object translation for given language after language
+     * fully loaded.
+     */
+    use(lang) {
+        return this.translateService.use(lang);
+    }
+    /**
+     * updates the HTML element lang attribute
+     *
+     * @private
+     */
+    updateHTMLDOMLang(lang) {
+        this.document.documentElement.lang = lang;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, deps: [{ token: GLOBAL_CONFIG_TOKEN }, { token: i1$3.TranslateService }, { token: LogService, optional: true }, { token: StoreService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: CoreModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [
-                    // HttpClientModule, no more..
-                    ],
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
                     type: Inject,
-                    args: [CORE_ROOT_GUARD]
-                }] }, { type: CoreModule, decorators: [{
+                    args: [GLOBAL_CONFIG_TOKEN]
+                }] }, { type: i1$3.TranslateService }, { type: LogService, decorators: [{
                     type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: i0.Injector }]; } });
-const createEuiCoreRootGuard = (core) => {
-    if (core) {
-        throw new TypeError(`CoreModule.forRoot() called twice. Feature modules should use ThemeModule.forChild() instead.`);
+                }] }, { type: StoreService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class I18nServiceMock extends I18nService {
+    constructor() {
+        super(null, null, null, null, null);
+        this.DEFAULT_LANGUAGE = 'en';
+    }
+    get onLangChange() {
+        return new EventEmitter();
+    }
+    addResources() {
+        return of({ success: true });
+    }
+    get currentLanguage() {
+        return this.DEFAULT_LANGUAGE;
+    }
+    getState() {
+        return of({ activeLang: this.DEFAULT_LANGUAGE });
+    }
+    updateState(i18nState) {
+        this.DEFAULT_LANGUAGE = i18nState.activeLang || 'en';
+    }
+    init(i18nState) {
+        this.DEFAULT_LANGUAGE = i18nState.activeLang || 'en';
+        return of({ success: true });
+    }
+    lazyLoadInit() {
+        return of({ success: true });
     }
-    return 'guarded';
-};
-class EuiCoreRootGuardClass {
-    constructor() { }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock }); }
 }
-const euiCoreRootGuardClass = () => new EuiCoreRootGuardClass();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: I18nServiceMock, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+const diffDays = (dateStart, dateEnd) => Math.round((dateEnd.getTime() - dateStart.getTime()) / 1000 / 60 / 60 / 24);
+const diffDaysFromToday = (date) => diffDays(new Date(), date);
 
 /**
- * Function to be used before the AppModule is bootstrapped. It is currently used to load dynamic configurations.
- * It needs to be added in your application main.ts file.
- * @param envConfig the current environment configuration
- * @returns the updated environment configuration, as a promise
+ * Provides read-only equivalent of jQuery's position function:
+ * http://api.jquery.com/position/
  */
-async function preInitApp(envConfig) {
-    const envDynamicConfig = envConfig && envConfig.envDynamicConfig;
-    if (envDynamicConfig) {
-        // load the local configuration file, if defined
-        const euiAppJsonConfig = await loadEuiDynamicEnvironmentConfig(envDynamicConfig.uri, envDynamicConfig.configTimeout || 2000);
-        envConfig.loadedEnvDynamicConfig = euiAppJsonConfig;
-        return envConfig;
+const position = (nativeEl) => {
+    let elBCR = offset(nativeEl);
+    let offsetParentBCR = { top: 0, left: 0 };
+    let offsetParentEl = parentOffsetEl(nativeEl);
+    if (offsetParentEl !== document) {
+        offsetParentBCR = offset(offsetParentEl);
+        offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
+        offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
     }
-    return envConfig;
-}
+    let boundingClientRect = nativeEl.getBoundingClientRect();
+    return {
+        width: boundingClientRect.width || nativeEl.offsetWidth,
+        height: boundingClientRect.height || nativeEl.offsetHeight,
+        top: elBCR.top - offsetParentBCR.top,
+        left: elBCR.left - offsetParentBCR.left,
+    };
+};
 /**
- * Function to load asynchronously a dynamic configuration (from a local path or a web service)
- *
- * @param url the path to the configuration
- * @param timeout possible timeout
- * @returns EuiAppJsonConfig promise
+ * Provides read-only equivalent of jQuery's offset function:
+ * http://api.jquery.com/offset/
  */
-async function loadEuiDynamicEnvironmentConfig(url, timeout) {
-    // if the url is specified
-    if (url) {
-        // fetch the config
-        try {
-            return await xhr({
-                url,
-                timeout,
-            });
+const offset = (nativeEl) => {
+    let boundingClientRect = nativeEl.getBoundingClientRect();
+    return {
+        width: boundingClientRect.width || nativeEl.offsetWidth,
+        height: boundingClientRect.height || nativeEl.offsetHeight,
+        top: boundingClientRect.top + (window.pageYOffset || document.documentElement.scrollTop),
+        left: boundingClientRect.left + (window.pageXOffset || document.documentElement.scrollLeft),
+    };
+};
+// PRIVATE FUNCTIONS
+const getStyle = (nativeEl, cssProp) => {
+    // IE
+    if (nativeEl.currentStyle) {
+        return nativeEl.currentStyle[cssProp];
+    }
+    if (window.getComputedStyle) {
+        return window.getComputedStyle(nativeEl)[cssProp];
+    }
+    // finally try and get inline style
+    return nativeEl.style[cssProp];
+};
+/**
+ * Checks if a given element is statically positioned
+ */
+const isStaticPositioned = (nativeEl) => (getStyle(nativeEl, 'position') || 'static') === 'static';
+/**
+ * returns the closest, non-statically positioned parentOffset of a given element
+ * @param nativeEl
+ */
+const parentOffsetEl = (nativeEl) => {
+    let offsetParent = nativeEl.offsetParent || document;
+    while (offsetParent && offsetParent !== document && isStaticPositioned(offsetParent)) {
+        offsetParent = offsetParent.offsetParent;
+    }
+    return offsetParent || document;
+};
+const getViewElement = (fixture, componentClass, klass) => {
+    let de, el, domElement;
+    de = fixture.debugElement.query(By.css(componentClass));
+    if (de) {
+        el = de.nativeElement;
+        if (el && klass) {
+            domElement = el.querySelectorAll(klass);
+            if (domElement.length <= 1) {
+                domElement = el.querySelector(klass);
+            }
         }
-        catch (error) {
-            // send a warning to the console
-            console.warn('Dynamic configuration cannot be loaded from url', url, error);
+    }
+    return { de, el, domElement };
+};
+const closestMatchingParent = (target, className) => {
+    let element = target;
+    while (element && element.nodeType === Node.ELEMENT_NODE) {
+        if (element.classList.contains(className)) {
+            return element;
         }
+        element = element.parentElement;
     }
-    // the dynamic config is not loaded
     return null;
-}
+};
 
-const errorCodes = {
-    ERR_GENERIC: 'ERR_GENERIC',
+const consumeEvent = (event) => {
+    if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.cancelBubble = true;
+    }
+    return false;
 };
-const messages = {
-    ERR_GENERIC: 'An error occured',
+
+const forOwn = (object, iteratee) => {
+    object = Object(object);
+    Object.keys(object).forEach((key) => iteratee(object[key], key, object));
 };
-// Intermediate "hacky" subclass taken from
-// https://www.bennadel.com/blog/3226-experimenting-with-error-sub-classing-using-es5-and-typescript-2-1-5.htm
-class ErrorSubClass {
-    constructor(code, msg, args) {
-        if (!msg && code && code in messages) {
-            if (typeof messages[code] === 'function') {
-                msg = messages[code](...args.messageParams);
+const markFormGroupTouched = (FormControls) => {
+    const markFormGroupTouchedRecursive = (controls) => {
+        forOwn(controls, (c) => {
+            if (c instanceof FormGroup || c instanceof FormArray) {
+                markFormGroupTouchedRecursive(c.controls);
             }
             else {
-                msg = messages[code];
+                c.markAsTouched();
+                c.updateValueAndValidity();
             }
+        });
+    };
+    markFormGroupTouchedRecursive(FormControls);
+};
+const markControlsTouched = (group) => {
+    Object.keys(group.controls).forEach((key) => {
+        const abstractControl = group.controls[key];
+        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
+            markControlsTouched(abstractControl);
         }
-        this.name = 'ErrorSubClass';
-        this.message = msg;
-        this.code = code;
-        this.stack = new Error(msg).stack;
-        if (args) {
-            Object.keys(args).forEach((k) => {
-                if (k !== 'messageParams') {
-                    this[k] = args[k];
-                }
-            });
+        else {
+            abstractControl.markAsTouched();
         }
-    }
-}
-// This replaces the "extends" on the Class
-// ErrorSubClass.prototype = <any>Object.create(Error.prototype);
-class EuiError extends ErrorSubClass {
-    constructor(code = errorCodes.ERR_GENERIC, msg, args) {
-        super(code, msg, args);
-        this.name = 'EuiError';
-    }
-}
+    });
+};
+const validateEmail = (c) => {
+    const EMAIL_REGEXP = 
+    // eslint-disable-next-line max-len, no-useless-escape
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const error = {
+        validateEmail: {
+            valid: false,
+        },
+    };
+    return EMAIL_REGEXP.test(c.value) ? null : error;
+};
 
-class GlobalErrorHandler extends ErrorHandler {
-    constructor(logService) {
-        super();
-        this.logService = logService;
-    }
-    handleError(error) {
-        // log error
-        this.logService.error(error.message || error.toString());
-        // throw error;
-        super.handleError(error);
+/**
+ * returns a random string with radix=36
+ */
+const uniqueId = () => Math.random().toString(36).substr(2, 9);
+/**
+ * Its job is to parse number and format it based on given input.
+ * @param value can be a number or a string number
+ * @param fractionSize size of fraction of a number e.g. 1000.88 fraction is 2 (88)  default is 2
+ * @param inDecimalSeparator separator for decimal part of the number default is ','
+ * @param inThousandSeparator separator for the whole part of the number default is ''
+ */
+const formatNumber = (value, fractionSize = 2, inDecimalSeparator = ',', inThousandSeparator = '') => {
+    if (inDecimalSeparator || inThousandSeparator) {
+        console.warn('The inDecimalSeparator and inThousandSeparator are deprecated. They will be a ' +
+            'BREAKING CHANGE for eUI 9 and be replaced by localization strategy.');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: LogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: GlobalErrorHandler, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: LogService }]; } });
-
-class HttpErrorHandlerInterceptor {
-    constructor(config = DEFAULT_HTTP_ERROR_HANDLER_CONFIG, injector, router) {
-        this.config = config;
-        this.injector = injector;
-        this.router = router;
+    let decimalSeparator = '';
+    let thousandsSeparator = '';
+    if (value === null || value === undefined) {
+        return null;
     }
-    intercept(req, next) {
-        return next.handle(req).pipe(tap(() => { }, (error) => {
-            // in case of http error
-            if (error instanceof HttpErrorResponse) {
-                const routeConfig = this.getRouteConfig(error);
-                const rule = routeConfig && (routeConfig[error.status] || routeConfig.default);
-                if (typeof rule === 'string') {
-                    // perform a redirect
-                    this.router.navigate([rule]);
-                }
-                else if (typeof rule === 'function') {
-                    // callback function
-                    rule.call(null, error, this.injector);
-                }
+    if (typeof value === 'string') {
+        // get all non characters
+        let nonChars = value.match(/[^0-9]+/g) || [];
+        // get all unique chars
+        let uniqueChars = nonChars.reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map());
+        // get separators
+        let separators = Array.from(uniqueChars.keys());
+        // sense where decimal separator and where thousand separator is
+        if (separators.length > 1) {
+            // left detected separator will be thousand and second will be decimal
+            thousandsSeparator = separators[0];
+            decimalSeparator = separators[1];
+        }
+        else if (separators.length > 0) {
+            // in case there is only one separator you don't know exactly who this separator is.
+            // in case there are more than two occurrences means we have a thousand otherwise we'll
+            // agree by conventions that is decimal
+            if (nonChars.length > 1) {
+                return value
+                    .split(separators[0])
+                    .join('')
+                    .replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
             }
-        }));
-    }
-    /**
-     * Search in the configuration for the first matching route
-     *
-     * @param error http error response
-     * @returns HttpErrorRouteConfig or null
-     */
-    getRouteConfig(error) {
-        // filter the routes
-        const routes = this.config.routes.filter((route) => {
-            const regex = new RegExp('^' + route.path.split('*').join('.*') + '$');
-            return regex.test(error.url) && (typeof route[error.status] !== 'undefined' || typeof route.default !== 'undefined');
-        });
-        // return the first matching route, if any
-        return routes.length > 0 ? routes[0] : null;
+            else {
+                return value.replace(separators[0], inDecimalSeparator).replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
+            }
+        }
+        else {
+            // in case there are no separators then only format based on thousand one
+            return value.replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
+        }
+        // do the replacement of separators and parseInt
+        // Beware! Always replace thousand separator first and then decimal
+        value = value.split(thousandsSeparator).join('').replace(decimalSeparator, '.');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor, deps: [{ token: HTTP_ERROR_HANDLER_CONFIG_TOKEN }, { token: i0.Injector }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: HttpErrorHandlerInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [HTTP_ERROR_HANDLER_CONFIG_TOKEN]
-                }] }, { type: i0.Injector }, { type: i2$1.Router }]; } });
+    decimalSeparator = inDecimalSeparator;
+    thousandsSeparator = inThousandSeparator;
+    const maxFraction = '0'.repeat(fractionSize);
+    let [integer, fraction = maxFraction] = (value || '0').toString().split('.');
+    fraction = fractionSize > 0 ? (fraction + maxFraction).substring(0, fractionSize) : '';
+    // this rule makes sense only in number in case fraction is all zero
+    fraction = typeof value === 'number' && fraction === maxFraction ? '' : decimalSeparator + fraction;
+    return integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator) + fraction;
+};
 
-// import { UxAppShellService } from '../ux-app-shell.service';
-function AlertHttpErrorCallbackFn(error) {
-    alert(error.statusText);
-}
-function ConsoleHttpErrorCallbackFn(error) {
-    console.error('HttpError', error);
-}
-function LogHttpErrorCallbackFn(error, injector) {
-    const logService = injector.get(LogService);
-    logService.error('HttpError', error);
-}
-function GrowlHttpErrorCallbackFn(error, injector) {
-    // TODO v17 should not display growl from here but from where it's called
-    // const asService = injector.get(UxAppShellService);
-    // asService.growlError(error.statusText);
-}
+const handleError = (error) => {
+    let errMsg = error.message ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+    // console.error(errMsg);
+    return throwError(errMsg);
+};
 
-class ApiQueueService {
-    constructor(store, http, logService) {
+/**
+ * check if a value is null or undefined. If it's not both returns true otherwise false
+ *
+ * @param value
+ */
+const isDefined = (value) => value !== undefined && value !== null;
+
+class EuiPermissionService extends EuiService {
+    constructor(log, store) {
+        super([]);
+        this.log = log;
         this.store = store;
-        this.http = http;
-        this.logService = logService;
-    }
-    /**
-     * Adds an item in the queue by dispatching an action to the store.
-     * @param id - The id of the item inside the queue.
-     * WARNING if matches any other queue item id will overwrite it.
-     * @param item - an item for Queue
-     */
-    addQueueItem(id, item) {
-        const allowedMethods = ['post', 'put', 'get'];
-        if (allowedMethods.indexOf(item.method) < 0) {
-            throw new Error(`[ApiQueue] method "${item.method}" is not allowed`);
+        if (log) {
+            this.logger = log.getLogger('core.PermissionService');
         }
-        this.store.dispatch(new AddApiQueueItemAction({ id, item }));
     }
     /**
-     * Subscribes to the store to retrieve queue and then converts the queue object to an array of items.
-     * @return An Observable of array of all items inside the current queue (ApiQueueItem[])
+     * initialize the service by providing a state
+     * @param rights
      */
-    getQueue() {
-        return this.store.select(getApiQueue).pipe(take(1), map((queue) => {
-            const queueArray = queue && Object.values(queue);
-            if (!queueArray || queueArray.length < 1) {
-                this.logService.warn('No items in the queue exist.');
-            }
-            return queueArray;
-        }));
+    init(rights) {
+        super.initEuiService();
+        if (Array.isArray(rights)) {
+            this.updateState(rights);
+            return of({ success: true });
+        }
+        if (this.logger) {
+            this.logger.error('Init object should be instance of BaseUserState');
+        }
+        return of({ success: false, error: 'Init object should be instance of BaseUserState' });
     }
-    /**
-     * Subscribes to the store to retrieve an item from the queue.
-     * @param id - id of the item inside the queue
-     * @return An Observable of ApiQueueItem type
-     */
-    getQueueItem(id) {
-        return this.store.select(getApiQueueItem(id)).pipe(take(1), map((queue) => {
-            if (!queue) {
-                this.logService.warn(`Queue item with id "${id}" does not exist`);
-                return null;
-            }
-            return queue;
-        }));
+    get userRights() {
+        return this.stateInstance;
     }
     /**
-     * Removes a given item from the queue.
-     * @param id - id of the item inside the queue
+     * get the user's Rights from the state
      */
-    removeQueueItem(id) {
-        this.store.dispatch(new RemoveApiQueueItemAction(id));
+    getState() {
+        return this.store.select(getUserRights);
     }
     /**
-     * Removes all items placed in the queue.
+     * update the state with the given user's rights
+     * @param rights
      */
-    removeAllQueueItem() {
-        this.store.dispatch(new EmptyApiQueueAction(null));
+    updateState(rights) {
+        this.store.dispatch(new UpdateUserRightsAction(rights || []));
     }
     /**
-     * Process an item from the queue.
-     * @param id - id of the item inside the queue
-     * @return An Observable of type any
+     * accepts a string of right and or a permission. In string first comes the right and or followed by permission in
+     * a dot separated way e.g. 'RIGHT.PERMISSION' or 'RIGHT'. The string can contain more that 2 separated fields.
+     * In that case the last field should be the permission and all the others a Right. e.g. 'RIGHT1.RIGHT2.PERMISSION'
+     * The last part is useful where you want a user to have multiple rights and the permission of the last right.
+     * @param rightsAndPermission
      */
-    processQueueItem(id) {
-        return this.store.select(getApiQueueItem(id)).pipe(take(1), switchMap((queue) => {
-            if (!queue) {
-                this.logService.warn(`Queue item with id "${id}" does not exist`);
-                return of(null);
+    checkAttributePermission(rightsAndPermission) {
+        const permProps = rightsAndPermission.split('.');
+        const rightId = permProps[0];
+        const hasRight = this.checkRight(rightId);
+        if (hasRight) {
+            if (permProps.length === 2) {
+                // in case of 'RIGHT.PERMISSION'
+                const permission = permProps[1];
+                return this.checkPermission(rightId, permission);
             }
-            return this.buildHttpRequest(id, queue);
-        }));
+            else if (permProps.length > 2) {
+                // in case of 'RIGHT1.RIGHT2.....PERMISSION' string call recursively
+                return this.checkAttributePermission(rightsAndPermission.slice(rightId.length + 1));
+            }
+        }
+        return hasRight;
     }
     /**
-     * Process all the items inside the queue.
-     * @param [continueOnError=true] - in case of an item request fails continue with the rest in queue
-     * @return An Observable with an array which contains all responses from all items in queue.
+     * check if a user has the right.
+     * @param rightId the id of Right
      */
-    processAllQueueItems(continueOnError = true) {
-        return this.store.select(getApiQueue).pipe(map((queue) => Object.entries(queue).map(([key, value]) => this.buildHttpRequest(key, value).pipe(catchError((error) => {
-            this.logService.error(`Queue Item with id ${key} failed.`, error.message, error.stack);
-            if (!continueOnError) {
-                throw error;
-            }
-            return of(error);
-        })))), switchMap((obsQueue) => forkJoin(Array.from(obsQueue))));
+    checkRight(rightId) {
+        return this.userRights.some((right) => right && right.id === rightId);
     }
     /**
-     * Process all items in queue after it order them based on their timestamp. Beware that order
-     * matter in execution of Http Request in queue. When a request completes only then next will begin. Emission
-     * or Http response follows order.
-     * @param [ascending=true] - sets the order of queue items based on timestamp
+     * check if a user has that right and that right has the permission given.
+     * @param rightId the right of the user
+     * @param permission the permission of the right
      */
-    processAllQueueItemsSequential(ascending = true) {
-        return this.store.select(getApiQueue).pipe(concatMap((queue) => Object.entries(queue)
-            .sort((a, b) => (ascending ? this.sortOnTimestamp(a, b) : this.sortOnTimestamp(b, a)))
-            .map(([id, item]) => this.buildHttpRequest(id, item))));
+    checkPermission(rightId, permission) {
+        // the user has to have that right and that right has to have the given permission
+        return this.userRights.some((right) => right && right.id === rightId && right.permissions && right.permissions.includes(permission));
     }
     /**
-     * Short dates ascending based on input
-     * @param a - Date one
-     * @param b - Date two
-     *
-     * @beta
+     * checks whether a user have all rights passed as an argument
+     * @param rights an array of EuiUserRight
      */
-    sortOnTimestamp(a, b) {
-        return +new Date(a[1].timestamp) - +new Date(b[1].timestamp);
+    haveAllRights(rights) {
+        if (!isDefined(rights)) {
+            throw Error(`The rights should be an array but instead it's not defined!`);
+        }
+        return rights.every((right) => this.userRights.find((uRight) => uRight.id === right.id));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, deps: [{ token: LogService, optional: true }, { token: StoreService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: LogService, decorators: [{
+                    type: Optional
+                }] }, { type: StoreService }]; } });
+
+class EuiDynamicMenuService {
+    // TODO: it should be moved euiservice, or it should be static
+    // TODO: can we moved that service inside the module of the component that's using it?
+    constructor(euiPermission, store) {
+        this.euiPermission = euiPermission;
+        this.store = store;
+        this.menuLinks = [];
+        this.store.select(getUserState).subscribe((user) => {
+            if (user.menuLinks) {
+                this.menuLinks = user.menuLinks;
+            }
+        });
+    }
+    getMenuLinks() {
+        return this.menuLinks;
     }
-    /**
-     * build and HttpRequest Observable based on the given queue.
-     * After successful request completion removes the item from the queue.
-     * @param id - id of the item inside the queue
-     * @param item - the item of the queue that matches the id.
-     * @return An Observable of HttpClient Request
-     */
-    buildHttpRequest(id, item) {
-        return this.http[item.method.toLowerCase()](item.uri, item.payload).pipe(tap(() => this.removeQueueItem(id)));
+    filterEuiMenuItemsWithRights(links) {
+        return links.filter((link) => {
+            if (link.hasChildren) {
+                link.children = this.filterEuiMenuItemsWithRights(link.children);
+            }
+            // First check if the user is denied access:
+            if (link.deniedRightId) {
+                if (this.euiPermission.checkRight(link.deniedRightId)) {
+                    return false;
+                }
+            }
+            if (link.deniedRightIds) {
+                for (const deniedRightId of link.deniedRightIds) {
+                    if (this.euiPermission.checkRight(deniedRightId)) {
+                        return false;
+                    }
+                }
+            }
+            // Then check if the user needs to be allowed access explicitly:
+            if (link.allowedRightId) {
+                return this.euiPermission.checkRight(link.allowedRightId);
+            }
+            if (link.allowedRightIds) {
+                for (const allowedRightId of link.allowedRightIds) {
+                    if (this.euiPermission.checkRight(allowedRightId)) {
+                        return true;
+                    }
+                }
+                // User doesn't have one of the allowed rights. Deny access:
+                return false;
+            }
+            // Access to the menu item is not denied, therefore allow it:
+            return true;
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, deps: [{ token: StoreService }, { token: i1$2.HttpClient }, { token: LogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, deps: [{ token: EuiPermissionService }, { token: StoreService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: ApiQueueService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: StoreService }, { type: i1$2.HttpClient }, { type: LogService }]; } });
+        }], ctorParameters: function () { return [{ type: EuiPermissionService }, { type: StoreService }]; } });
 
-class ApiQueueServiceMock extends ApiQueueService {
-    constructor() {
-        super(null, null, null);
-    }
-    getQueue() {
-        return of([]);
+const DYNAMIC_COMPONENT_CONFIG = new InjectionToken('DYNAMIC_COMPONENT_CONFIG');
+class EuiDynamicComponentService {
+    constructor(componentFactoryResolver, injector, appRef) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.appRef = appRef;
     }
-    getQueueItem(id) {
-        return of({ uri: id, method: 'GET' });
+    /**
+     * Adds a component to portal host dynamically
+     * @param component The component to be injected
+     * @param el The element reference for the component to be injected
+     * @param config The data to be passed (config) for the DYNAMIC_COMPONENT_CONFIG token
+     */
+    add(component, el, config) {
+        // TODO: take a look and replace deprecated componentFactoryResolver https://github.com/angular/components/issues/24334
+        // Create a portalHost from a DOM element
+        this.portalHost = new DomPortalOutlet(el ? el.nativeElement : document.body, this.componentFactoryResolver, this.appRef, this.injector);
+        // Locate the component factory for the ComponentToIncludeDynamicallyComponent
+        this.portal = new ComponentPortal(component, null, config ? this.createInjector(config) : null);
+        // Attach portal to host
+        this.portalComponentInstance = this.portalHost.attach(this.portal);
+        if (config) {
+            Object.assign(config, {
+                portalHostRef: this.portalHost,
+                portalRef: this.portal,
+                portalComponentInstanceRef: this.portalComponentInstance,
+            });
+        }
+        return {
+            portalHost: this.portalHost,
+            portal: this.portal,
+            portalComponentInstance: this.portalComponentInstance,
+        };
     }
-    removeAllQueueItem() { }
-    processAllQueueItems() {
-        return of({});
+    /**
+     * detaches a portalHost
+     * @param portalHostRef reference of portal host to be detached
+     */
+    remove(portalHostRef) {
+        portalHostRef.detach();
+        this.portalHost = null;
+        this.portal = null;
+        this.portalComponentInstance = null;
     }
-    addQueueItem() { }
-    removeQueueItem() { }
-    processQueueItem() {
-        return of({});
+    /**
+     * creates a custom injector to be used when providing custom injection tokens to components inside a portal
+     * @param data to be used by DYNAMIC_COMPONENT_CONFIG token
+     */
+    createInjector(data) {
+        const injectorTokens = new WeakMap();
+        injectorTokens.set(DYNAMIC_COMPONENT_CONFIG, data);
+        return new PortalInjector(this.injector, injectorTokens);
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicComponentService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicComponentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
-const diffDays = (dateStart, dateEnd) => Math.round((dateEnd.getTime() - dateStart.getTime()) / 1000 / 60 / 60 / 24);
-const diffDaysFromToday = (date) => diffDays(new Date(), date);
-
-/**
- * Provides read-only equivalent of jQuery's position function:
- * http://api.jquery.com/position/
- */
-const position = (nativeEl) => {
-    let elBCR = offset(nativeEl);
-    let offsetParentBCR = { top: 0, left: 0 };
-    let offsetParentEl = parentOffsetEl(nativeEl);
-    if (offsetParentEl !== document) {
-        offsetParentBCR = offset(offsetParentEl);
-        offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
-        offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
-    }
-    let boundingClientRect = nativeEl.getBoundingClientRect();
-    return {
-        width: boundingClientRect.width || nativeEl.offsetWidth,
-        height: boundingClientRect.height || nativeEl.offsetHeight,
-        top: elBCR.top - offsetParentBCR.top,
-        left: elBCR.left - offsetParentBCR.left,
-    };
-};
-/**
- * Provides read-only equivalent of jQuery's offset function:
- * http://api.jquery.com/offset/
- */
-const offset = (nativeEl) => {
-    let boundingClientRect = nativeEl.getBoundingClientRect();
-    return {
-        width: boundingClientRect.width || nativeEl.offsetWidth,
-        height: boundingClientRect.height || nativeEl.offsetHeight,
-        top: boundingClientRect.top + (window.pageYOffset || document.documentElement.scrollTop),
-        left: boundingClientRect.left + (window.pageXOffset || document.documentElement.scrollLeft),
-    };
+const initialState = {
+    appName: '',
+    appShortName: '',
+    appSubTitle: '',
+    appBaseFontSize: '',
+    userInfos: null,
+    userSubInfos: null,
+    impersonatedUserInfos: null,
+    isSidebarOpen: true,
+    isSidebarHover: false,
+    isSidebarActive: false,
+    isSidebarInnerActive: false,
+    isSidebarStateCloseWithIcons: false,
+    isSidebarExpandOnHover: true,
+    hasSidebar: false,
+    hasHeader: false,
+    hasBreadcrumb: false,
+    hasHeaderLogo: false,
+    hasHeaderEnvironment: false,
+    hasToolbar: false,
+    hasToolbarMenu: false,
+    environmentValue: '',
+    isSidebarHidden: false,
+    hasTopMessage: false,
+    windowWidth: 0,
+    windowHeight: 0,
+    mainContentHeight: 0,
+    pageHeaderHeight: 0,
+    wrapperClasses: '',
+    breakpoint: '',
+    breakpoints: {
+        isMobile: false,
+        isTablet: false,
+        isLtDesktop: false,
+        isDesktop: false,
+        isXL: false,
+        isXXL: false,
+        isFHD: false,
+        is2K: false,
+        is4K: false,
+    },
+    menuLinks: [],
+    sidebarLinks: [],
+    combinedLinks: [],
+    isBlockDocumentActive: false,
+    deviceInfo: null,
+    activeLanguage: 'en',
+    languages: EuiEuLanguages.getLanguages(),
+    appMetadata: null,
+    hasModalActive: false,
+    isDimmerActive: false,
 };
-// PRIVATE FUNCTIONS
-const getStyle = (nativeEl, cssProp) => {
-    // IE
-    if (nativeEl.currentStyle) {
-        return nativeEl.currentStyle[cssProp];
+class EuiAppShellService {
+    // -------------------
+    get state$() {
+        return this._state$.asObservable();
     }
-    if (window.getComputedStyle) {
-        return window.getComputedStyle(nativeEl)[cssProp];
+    // -------------------
+    // exposed observables
+    get breakpoint$() {
+        return this._breakpoint$.asObservable();
     }
-    // finally try and get inline style
-    return nativeEl.style[cssProp];
-};
-/**
- * Checks if a given element is statically positioned
- */
-const isStaticPositioned = (nativeEl) => (getStyle(nativeEl, 'position') || 'static') === 'static';
-/**
- * returns the closest, non-statically positioned parentOffset of a given element
- * @param nativeEl
- */
-const parentOffsetEl = (nativeEl) => {
-    let offsetParent = nativeEl.offsetParent || document;
-    while (offsetParent && offsetParent !== document && isStaticPositioned(offsetParent)) {
-        offsetParent = offsetParent.offsetParent;
+    get breakpoints$() {
+        return this._breakpoints$.asObservable();
     }
-    return offsetParent || document;
-};
-const getViewElement = (fixture, componentClass, klass) => {
-    let de, el, domElement;
-    de = fixture.debugElement.query(By.css(componentClass));
-    if (de) {
-        el = de.nativeElement;
-        if (el && klass) {
-            domElement = el.querySelectorAll(klass);
-            if (domElement.length <= 1) {
-                domElement = el.querySelector(klass);
-            }
-        }
+    // ----------------
+    // state operations
+    // ----------------
+    get state() {
+        return this._state$.getValue();
+    }
+    // ----------------------------
+    // public setters and functions
+    // ----------------------------
+    set isSidebarOpen(isOpen) {
+        this.setState({
+            ...this.state,
+            isSidebarOpen: isOpen,
+        });
     }
-    return { de, el, domElement };
-};
-const closestMatchingParent = (target, className) => {
-    let element = target;
-    while (element && element.nodeType === Node.ELEMENT_NODE) {
-        if (element.classList.contains(className)) {
-            return element;
+    get isSidebarOpen() {
+        return this.state.isSidebarOpen;
+    }
+    set isSidebarHover(isHover) {
+        if (this.state.isSidebarExpandOnHover) {
+            this.setState({
+                ...this.state,
+                isSidebarHover: isHover,
+            });
         }
-        element = element.parentElement;
     }
-    return null;
-};
-
-const consumeEvent = (event) => {
-    if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        event.cancelBubble = true;
+    get isSidebarHover() {
+        return this.state.isSidebarHover;
     }
-    return false;
-};
-
-const forOwn = (object, iteratee) => {
-    object = Object(object);
-    Object.keys(object).forEach((key) => iteratee(object[key], key, object));
-};
-const markFormGroupTouched = (FormControls) => {
-    const markFormGroupTouchedRecursive = (controls) => {
-        forOwn(controls, (c) => {
-            if (c instanceof FormGroup || c instanceof FormArray) {
-                markFormGroupTouchedRecursive(c.controls);
-            }
-            else {
-                c.markAsTouched();
-                c.updateValueAndValidity();
-            }
+    set isSidebarActive(isActive) {
+        this.setState({
+            ...this.state,
+            isSidebarActive: isActive,
         });
-    };
-    markFormGroupTouchedRecursive(FormControls);
-};
-const markControlsTouched = (group) => {
-    Object.keys(group.controls).forEach((key) => {
-        const abstractControl = group.controls[key];
-        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
-            markControlsTouched(abstractControl);
-        }
-        else {
-            abstractControl.markAsTouched();
-        }
-    });
-};
-const validateEmail = (c) => {
-    const EMAIL_REGEXP = 
-    // eslint-disable-next-line max-len, no-useless-escape
-    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    const error = {
-        validateEmail: {
-            valid: false,
-        },
-    };
-    return EMAIL_REGEXP.test(c.value) ? null : error;
-};
-
-/**
- * returns a random string with radix=36
- */
-const uniqueId = () => Math.random().toString(36).substr(2, 9);
-/**
- * Its job is to parse number and format it based on given input.
- * @param value can be a number or a string number
- * @param fractionSize size of fraction of a number e.g. 1000.88 fraction is 2 (88)  default is 2
- * @param inDecimalSeparator separator for decimal part of the number default is ','
- * @param inThousandSeparator separator for the whole part of the number default is ''
- */
-const formatNumber = (value, fractionSize = 2, inDecimalSeparator = ',', inThousandSeparator = '') => {
-    if (inDecimalSeparator || inThousandSeparator) {
-        console.warn('The inDecimalSeparator and inThousandSeparator are deprecated. They will be a ' +
-            'BREAKING CHANGE for eUI 9 and be replaced by localization strategy.');
     }
-    let decimalSeparator = '';
-    let thousandsSeparator = '';
-    if (value === null || value === undefined) {
-        return null;
+    set isSidebarInnerActive(isOpen) {
+        this.setState({
+            ...this.state,
+            isSidebarInnerActive: isOpen,
+        });
     }
-    if (typeof value === 'string') {
-        // get all non characters
-        let nonChars = value.match(/[^0-9]+/g) || [];
-        // get all unique chars
-        let uniqueChars = nonChars.reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map());
-        // get separators
-        let separators = Array.from(uniqueChars.keys());
-        // sense where decimal separator and where thousand separator is
-        if (separators.length > 1) {
-            // left detected separator will be thousand and second will be decimal
-            thousandsSeparator = separators[0];
-            decimalSeparator = separators[1];
+    set sidebarLinks(links) {
+        this.setState({
+            ...this.state,
+            sidebarLinks: links,
+        });
+    }
+    set menuLinks(links) {
+        this.setState({
+            ...this.state,
+            menuLinks: links,
+        });
+    }
+    set isBlockDocumentActive(isActive) {
+        this.setState({
+            ...this.state,
+            isBlockDocumentActive: isActive,
+        });
+    }
+    get hasHeader() {
+        return this.state.hasHeader;
+    }
+    // Edit mode
+    get isDimmerActive() {
+        return this.state.isDimmerActive;
+    }
+    set isDimmerActive(isActive) {
+        this.setState({
+            ...this.state,
+            isDimmerActive: isActive,
+        });
+    }
+    constructor(config, http, platformId, router, storeService, i18nService) {
+        this.config = config;
+        this.http = http;
+        this.platformId = platformId;
+        this.router = router;
+        this.storeService = storeService;
+        this.i18nService = i18nService;
+        this.cssVars = [];
+        let stateWithConfig = initialState;
+        const languages = config?.i18n?.i18nService?.languages || initialState.languages;
+        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;
+        stateWithConfig = {
+            ...stateWithConfig,
+            ...{
+                languages,
+                activeLanguage: defaultLanguage,
+            },
+        };
+        this._state$ = new BehaviorSubject(stateWithConfig);
+        this._breakpoint$ = new BehaviorSubject('');
+        this._breakpoints$ = new BehaviorSubject({});
+        this.bindActiveLanguageToAppShellState();
+        if (isPlatformBrowser(this.platformId)) {
+            router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd) {
+                    window.scrollTo(0, 0);
+                }
+            });
         }
-        else if (separators.length > 0) {
-            // in case there is only one separator you don't know exactly who this separator is.
-            // in case there are more than two occurrences means we have a thousand otherwise we'll
-            // agree by conventions that is decimal
-            if (nonChars.length > 1) {
-                return value
-                    .split(separators[0])
-                    .join('')
-                    .replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
-            }
-            else {
-                return value.replace(separators[0], inDecimalSeparator).replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
-            }
+    }
+    setState(nextState, updateI18 = true) {
+        let breakpoint, breakpoints, wrapperClasses;
+        let combinedLinks;
+        const state = this.state;
+        // check if window width has been updated from previous state
+        if (this.state.windowWidth !== nextState.windowWidth) {
+            breakpoint = this.getBreakpoint(nextState.windowWidth);
+            breakpoints = this.getBreakpoints(breakpoint);
+            this._breakpoint$.next(breakpoint);
+            this._breakpoints$.next(breakpoints);
+            // if not propagate the old ones without doing any calculations
         }
         else {
-            // in case there are no separators then only format based on thousand one
-            return value.replace(/\B(?=(\d{3})+(?!\d))/g, inThousandSeparator);
+            breakpoint = state.breakpoint;
+            breakpoints = state.breakpoints;
         }
-        // do the replacement of separators and parseInt
-        // Beware! Always replace thousand separator first and then decimal
-        value = value.split(thousandsSeparator).join('').replace(decimalSeparator, '.');
-    }
-    decimalSeparator = inDecimalSeparator;
-    thousandsSeparator = inThousandSeparator;
-    const maxFraction = '0'.repeat(fractionSize);
-    let [integer, fraction = maxFraction] = (value || '0').toString().split('.');
-    fraction = fractionSize > 0 ? (fraction + maxFraction).substring(0, fractionSize) : '';
-    // this rule makes sense only in number in case fraction is all zero
-    fraction = typeof value === 'number' && fraction === maxFraction ? '' : decimalSeparator + fraction;
-    return integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator) + fraction;
-};
-
-const handleError = (error) => {
-    let errMsg = error.message ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
-    // console.error(errMsg);
-    return throwError(errMsg);
-};
-
-/**
- * check if a value is null or undefined. If it's not both returns true otherwise false
- *
- * @param value
- */
-const isDefined = (value) => value !== undefined && value !== null;
-
-class EuiPermissionService extends EuiService {
-    constructor(log, store) {
-        super([]);
-        this.log = log;
-        this.store = store;
-        if (log) {
-            this.logger = log.getLogger('core.PermissionService');
+        // finally get the wrapper classes when both the state and breakpoint are known
+        wrapperClasses = this.getWrapperClasses(nextState, breakpoint);
+        // check if the menuLinks or sidebarLinks have changed from previous state
+        if (this.state.menuLinks !== nextState.menuLinks || this.state.sidebarLinks !== nextState.sidebarLinks) {
+            combinedLinks = [...nextState.menuLinks, ...nextState.sidebarLinks];
         }
-    }
-    /**
-     * initialize the service by providing a state
-     * @param rights
-     */
-    init(rights) {
-        super.initEuiService();
-        if (Array.isArray(rights)) {
-            this.updateState(rights);
-            return of({ success: true });
+        else {
+            combinedLinks = this.state.combinedLinks;
         }
-        if (this.logger) {
-            this.logger.error('Init object should be instance of BaseUserState');
+        const stateBeforeUpdate = { ...this.state };
+        // we put it all together with the calculated properties
+        this._state$.next({
+            ...nextState,
+            wrapperClasses,
+            breakpoint,
+            breakpoints,
+            combinedLinks,
+        });
+        // update the Store Language
+        if (updateI18 && nextState.activeLanguage !== stateBeforeUpdate.activeLanguage) {
+            this.i18nService.updateState({ activeLang: nextState.activeLanguage });
         }
-        return of({ success: false, error: 'Init object should be instance of BaseUserState' });
-    }
-    get userRights() {
-        return this.stateInstance;
     }
     /**
-     * get the user's Rights from the state
+     * Emits a slice from the state whether that changes
+     *
+     * @param key can be 'key' or 'key.sub.sub'
      */
-    getState() {
-        return this.store.select(getUserRights);
+    getState(key) {
+        return defer(() => 
+        // check if key exists
+        key
+            ? this.state$.pipe(map((state) => get(state, key)), 
+            // filter((state) => state),
+            distinctUntilChanged((x, y) => isEqual(x, y)))
+            : this.state$);
     }
-    /**
-     * update the state with the given user's rights
-     * @param rights
-     */
-    updateState(rights) {
-        this.store.dispatch(new UpdateUserRightsAction(rights || []));
+    sidebarToggle() {
+        this.isSidebarOpen = !this.state.isSidebarOpen;
     }
-    /**
-     * accepts a string of right and or a permission. In string first comes the right and or followed by permission in
-     * a dot separated way e.g. 'RIGHT.PERMISSION' or 'RIGHT'. The string can contain more that 2 separated fields.
-     * In that case the last field should be the permission and all the others a Right. e.g. 'RIGHT1.RIGHT2.PERMISSION'
-     * The last part is useful where you want a user to have multiple rights and the permission of the last right.
-     * @param rightsAndPermission
-     */
-    checkAttributePermission(rightsAndPermission) {
-        const permProps = rightsAndPermission.split('.');
-        const rightId = permProps[0];
-        const hasRight = this.checkRight(rightId);
-        if (hasRight) {
-            if (permProps.length === 2) {
-                // in case of 'RIGHT.PERMISSION'
-                const permission = permProps[1];
-                return this.checkPermission(rightId, permission);
-            }
-            else if (permProps.length > 2) {
-                // in case of 'RIGHT1.RIGHT2.....PERMISSION' string call recursively
-                return this.checkAttributePermission(rightsAndPermission.slice(rightId.length + 1));
-            }
-        }
-        return hasRight;
+    // Edit mode
+    dimmerActiveToggle() {
+        const isActive = this.isDimmerActive;
+        this.setState({
+            ...this.state,
+            isDimmerActive: !isActive,
+        });
+        this.activateEditModeCssVars(!isActive);
     }
-    /**
-     * check if a user has the right.
-     * @param rightId the id of Right
-     */
-    checkRight(rightId) {
-        return this.userRights.some((right) => right && right.id === rightId);
+    setDimmerActiveState(activeState) {
+        this.setState({
+            ...this.state,
+            isDimmerActive: activeState,
+        });
+        this.activateEditModeCssVars(activeState);
     }
-    /**
-     * check if a user has that right and that right has the permission given.
-     * @param rightId the right of the user
-     * @param permission the permission of the right
-     */
-    checkPermission(rightId, permission) {
-        // the user has to have that right and that right has to have the given permission
-        return this.userRights.some((right) => right && right.id === rightId && right.permissions && right.permissions.includes(permission));
+    activateEditModeCssVars(isActive) {
+        if (isActive) {
+            this._setCssVarValue('--eui-docpage-navigation-z-index', 'inherit'); // Reset doc-page-navigation-column z-index
+            this._setCssVarValue('--eui-z-index-sidebar', 'inherit'); // Reset eui-app-sidebar z-index
+            this._setCssVarValue('--eui-z-index-root', 'inherit'); // Reset eui-app-main-content z-index
+        }
+        else {
+            this._setCssVarValue('--eui-docpage-navigation-z-index', '2'); // Restore doc-page-navigation-column z-index
+            this._setCssVarValue('--eui-z-index-sidebar', '1044'); // Restore eui-app-sidebar z-index
+            this._setCssVarValue('--eui-z-index-root', '1'); // Restore eui-app-main-content z-index
+        }
     }
-    /**
-     * checks whether a user have all rights passed as an argument
-     * @param rights an array of EuiUserRight
-     */
-    haveAllRights(rights) {
-        if (!isDefined(rights)) {
-            throw Error(`The rights should be an array but instead it's not defined!`);
+    // --------------
+    // public methods
+    // --------------
+    fetchAppMetadata(metadataFilePath = 'assets/app-metadata.json') {
+        this.getJson(metadataFilePath).then((data) => {
+            this.setState({
+                ...this.state,
+                appMetadata: data,
+            });
+        });
+    }
+    activateSidebar() {
+        this.setState({
+            ...this.state,
+            hasSidebar: true,
+        });
+        if (!this.state.isSidebarHidden) {
+            this.activateSidebarCssVars();
         }
-        return rights.every((right) => this.userRights.find((uRight) => uRight.id === right.id));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, deps: [{ token: LogService, optional: true }, { token: StoreService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPermissionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: LogService, decorators: [{
-                    type: Optional
-                }] }, { type: StoreService }]; } });
-
-class EuiDynamicMenuService {
-    // TODO: it should be moved euiservice, or it should be static
-    // TODO: can we moved that service inside the module of the component that's using it?
-    constructor(uxPermission, store) {
-        this.uxPermission = uxPermission;
-        this.store = store;
-        this.menuLinks = [];
-        this.store.select(getUserState).subscribe((user) => {
-            if (user.menuLinks) {
-                this.menuLinks = user.menuLinks;
-            }
+    activateSidebarHeader() {
+        this.activateSidebarHeaderCssVars();
+    }
+    activateSidebarFooter() {
+        this.activateSidebarFooterCssVars();
+    }
+    activateHeader() {
+        this.setState({
+            ...this.state,
+            hasHeader: true,
         });
+        this.activateHeaderCssVars();
     }
-    getMenuLinks() {
-        return this.menuLinks;
+    activateBreadcrumb() {
+        this.setState({
+            ...this.state,
+            hasBreadcrumb: true,
+        });
+        this.activateBreadcrumbCssVars();
     }
-    filterEuiMenuItemsWithRights(links) {
-        return links.filter((link) => {
-            if (link.hasChildren) {
-                link.children = this.filterEuiMenuItemsWithRights(link.children);
-            }
-            // First check if the user is denied access:
-            if (link.deniedRightId) {
-                if (this.uxPermission.checkRight(link.deniedRightId)) {
-                    return false;
-                }
-            }
-            if (link.deniedRightIds) {
-                for (const deniedRightId of link.deniedRightIds) {
-                    if (this.uxPermission.checkRight(deniedRightId)) {
-                        return false;
-                    }
-                }
-            }
-            // Then check if the user needs to be allowed access explicitly:
-            if (link.allowedRightId) {
-                return this.uxPermission.checkRight(link.allowedRightId);
-            }
-            if (link.allowedRightIds) {
-                for (const allowedRightId of link.allowedRightIds) {
-                    if (this.uxPermission.checkRight(allowedRightId)) {
-                        return true;
-                    }
-                }
-                // User doesn't have one of the allowed rights. Deny access:
-                return false;
-            }
-            // Access to the menu item is not denied, therefore allow it:
-            return true;
+    activateTopMessage(height) {
+        this.setState({
+            ...this.state,
+            hasTopMessage: true,
         });
+        this.activateTopMessageCssVars(height);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, deps: [{ token: EuiPermissionService }, { token: StoreService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiDynamicMenuService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: EuiPermissionService }, { type: StoreService }]; } });
-
-function withUxErrorManager(errorManager) {
-    return (source$) => new Observable((observer) => {
-        const wrapper = {
-            next: (value) => {
-                errorManager.clearError();
-                observer.next(value);
-            },
-            error: (err) => {
-                errorManager.publishError(err);
-            },
-        };
-        return source$.subscribe(wrapper);
-    });
-}
-
-class UxErrorFeedbackService {
-    constructor(asService, translateService) {
-        this.asService = asService;
-        this.translateService = translateService;
-        this.errors = new Subject();
+    activateToolbar() {
+        this.setState({
+            ...this.state,
+            hasToolbar: true,
+        });
+        this.activateToolbarCssVars();
+    }
+    activateToolbarMenu() {
+        this.setState({
+            ...this.state,
+            hasToolbarMenu: true,
+        });
+    }
+    fetchCssVars() {
+        const cssVarNames = [
+            '--eui-app-header-height-default',
+            '--eui-app-header-height-active',
+            '--eui-app-header-height-shrink',
+            '--eui-app-breadcrumb-height-default',
+            '--eui-app-breadcrumb-height-active',
+            '--eui-app-top-message-height-default',
+            '--eui-app-top-message-height-active',
+            '--eui-app-top-message-height-shrink',
+            '--eui-app-toolbar-height-default',
+            '--eui-app-toolbar-height-active',
+            '--eui-app-sidebar-width-default',
+            '--eui-app-sidebar-width-active',
+            '--eui-app-sidebar-width-close-default',
+            '--eui-app-sidebar-width-close-active',
+            '--eui-app-sidebar-header-height-default',
+            '--eui-app-sidebar-header-height-active',
+            '--eui-app-sidebar-footer-height-default',
+            '--eui-app-sidebar-footer-height-active',
+        ];
+        this.cssVars = cssVarNames.map((v) => ({ key: v, value: this.getCssVarValue(v) }));
+    }
+    initCssVars() {
+        this.setCssVar('--eui-app-header-height-default', '--eui-app-header-height');
+        this.setCssVar('--eui-app-breadcrumb-height-default', '--eui-app-breadcrumb-height');
+        this.setCssVar('--eui-app-top-message-height-default', '--eui-app-top-message-height');
+        this.setCssVar('--eui-app-toolbar-height-default', '--eui-app-toolbar-height');
+        this.setCssVar('--eui-app-sidebar-width-default', '--eui-app-sidebar-width');
+        this.setCssVar('--eui-app-sidebar-width-close-default', '--eui-app-sidebar-width-close');
+        this.setCssVar('--eui-app-sidebar-header-height-default', '--eui-app-sidebar-header-height');
+        this.setCssVar('--eui-app-sidebar-footer-height-default', '--eui-app-sidebar-footer-height');
     }
-    /**
-     *  Publishes errors to targeted components
-     */
-    publishError(err, instanceId, groupId, accumulate) {
-        if (instanceId) {
-            this.errors.next(new UxPublishErrorFeedbackEvent(err.uxHttpErrorOutput, instanceId, groupId, accumulate));
-        }
-        else {
-            this.errors.next(new UxPublishErrorFeedbackEvent(err.uxHttpErrorOutput, undefined, groupId, accumulate));
-        }
+    activateHeaderCssVars() {
+        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
     }
-    /**
-     *  Growl errors
-     */
-    growlError(err) {
-        // TODO v17 - should not display growl from here, but where it's called
-        // const feedBacks = err.uxHttpErrorOutput.getFeedBacks();
-        // const isGrowlSticky = false;
-        // const isGrowlMultiple = true;
-        // const growlLife = 10000;
-        // const position = 'bottom-right';
-        // feedBacks.forEach((feedback: UxErrorFeedback) =>
-        //     this.translateService
-        //         .get(feedback.msgId)
-        //         .pipe(take(1))
-        //         .subscribe((translate) => {
-        //             this.asService.growl(
-        //                 {
-        //                     severity: feedback.severity || 'danger',
-        //                     summary: 'ERROR',
-        //                     detail: translate,
-        //                 },
-        //                 isGrowlSticky,
-        //                 isGrowlMultiple,
-        //                 growlLife,
-        //                 position
-        //             );
-        //         })
-        // );
+    activateBreadcrumbCssVars() {
+        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height');
     }
-    clearError(id, groupId) {
-        this.errors.next(new UxClearErrorFeedbackEvent(id, groupId));
+    activateTopMessageCssVars(height) {
+        this._setCssVarValue('--eui-app-top-message-height', `${height}px`);
     }
-    createLocalErrorManager() {
-        return new UxErrorManager(this);
+    activateToolbarCssVars() {
+        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height');
     }
-    createGlobalErrorManager() {
-        return new UxErrorManager(this, true);
+    activateFooterCssVars() {
+        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxErrorFeedbackService, deps: [{ token: UxAppShellService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxErrorFeedbackService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxErrorFeedbackService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: UxAppShellService }, { type: i2.TranslateService }]; } });
-class UxErrorManager {
-    constructor(uxErrorFeedbackService, isGlobal) {
-        this.uxErrorFeedbackService = uxErrorFeedbackService;
-        this.isGlobal = isGlobal;
-        this.httpErrorOperator = withUxErrorManager(this);
-        this.id = Math.random().toString();
-    }
-    publishError(err, groupId, accumulate) {
-        if (!this.isGlobal) {
-            this.uxErrorFeedbackService.publishError(err, this.id, groupId, accumulate);
+    setHeaderShrinkCssVar(active) {
+        if (active) {
+            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height');
         }
         else {
-            this.uxErrorFeedbackService.publishError(err, undefined, groupId, accumulate);
+            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
         }
     }
-    clearError(groupId) {
-        if (!this.isGlobal) {
-            this.uxErrorFeedbackService.clearError(this.id, groupId);
-        }
-        else {
-            this.uxErrorFeedbackService.clearError(undefined, groupId);
-        }
+    activateSidebarCssVars() {
+        this.setCssVar('--eui-app-sidebar-width-active', '--eui-app-sidebar-width');
+        this.setCssVar('--eui-app-sidebar-width-close-active', '--eui-app-sidebar-width-close');
     }
-    growlError(err) {
-        this.uxErrorFeedbackService.growlError(err);
+    removeSidebarCssVars() {
+        document.documentElement.style.removeProperty('--eui-app-sidebar-header-height');
+        document.documentElement.style.removeProperty('--eui-app-sidebar-footer-height');
+        document.documentElement.style.removeProperty('--eui-app-sidebar-width');
+        document.documentElement.style.removeProperty('--eui-app-sidebar-width-close');
     }
-    errors() {
-        if (!this.isGlobal) {
-            return this.uxErrorFeedbackService.errors.pipe(filter((evt) => evt.id === this.id));
-        }
-        else {
-            return this.uxErrorFeedbackService.errors.pipe(filter((evt) => !evt.id));
-        }
+    activateSidebarHeaderCssVars() {
+        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height');
     }
-}
-
-const DYNAMIC_COMPONENT_CONFIG = new InjectionToken('DYNAMIC_COMPONENT_CONFIG');
-class UxDynamicComponentService {
-    constructor(componentFactoryResolver, injector, appRef) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.injector = injector;
-        this.appRef = appRef;
+    activateSidebarFooterCssVars() {
+        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height');
     }
     /**
-     * Adds a component to portal host dynamically
-     * @param component The component to be injected
-     * @param el The element reference for the component to be injected
-     * @param config The data to be passed (config) for the DYNAMIC_COMPONENT_CONFIG token
+     * Gets the viewport height and width and multiple it by 1% to get a value for a vh/vw unit
+     * Sets the value in the --eui-app-vh custom property to the root of the document
+     * Sets the value in the --eui-app-vw custom property to the root of the document
+     * Example for 100% height: calc(var(--eui-app-vh, 1vh) * 100);
+     * Example for 50% height: calc(var(--eui-app-vh, 1vh) * 50);
+     * Example for 50% width: calc(var(--eui-app-vw, 1vw) * 50);
      */
-    add(component, el, config) {
-        // TODO: take a look and replace deprecated componentFactoryResolver https://github.com/angular/components/issues/24334
-        // Create a portalHost from a DOM element
-        this.portalHost = new DomPortalOutlet(el ? el.nativeElement : document.body, this.componentFactoryResolver, this.appRef, this.injector);
-        // Locate the component factory for the ComponentToIncludeDynamicallyComponent
-        this.portal = new ComponentPortal(component, null, config ? this.createInjector(config) : null);
-        // Attach portal to host
-        this.portalComponentInstance = this.portalHost.attach(this.portal);
-        if (config) {
-            Object.assign(config, {
-                portalHostRef: this.portalHost,
-                portalRef: this.portal,
-                portalComponentInstanceRef: this.portalComponentInstance,
-            });
-        }
-        return {
-            portalHost: this.portalHost,
-            portal: this.portal,
-            portalComponentInstance: this.portalComponentInstance,
-        };
+    setAppViewportCssVars() {
+        let vh = window.innerHeight * 0.01;
+        let vw = window.innerWidth * 0.01;
+        this._setCssVarValue('--eui-app-vh', `${vh}px`);
+        this._setCssVarValue('--eui-app-vw', `${vw}px`);
     }
     /**
-     * detaches a portalHost
-     * @param portalHostRef reference of portal host to be detached
+     * Returns the current value of --eui-base-font-size CSS variable
      */
-    remove(portalHostRef) {
-        portalHostRef.detach();
-        this.portalHost = null;
-        this.portal = null;
-        this.portalComponentInstance = null;
+    getBaseFontSize() {
+        return this.state.appBaseFontSize || this.getCssVarValue('--eui-base-font-size');
     }
     /**
-     * creates a custom injector to be used when providing custom injection tokens to components inside a portal
-     * @param data to be used by DYNAMIC_COMPONENT_CONFIG token
+     * Updates the current value of --eui-base-font-size CSS variable and the UIState appBaseFontSize
      */
-    createInjector(data) {
-        const injectorTokens = new WeakMap();
-        injectorTokens.set(DYNAMIC_COMPONENT_CONFIG, data);
-        return new PortalInjector(this.injector, injectorTokens);
+    setBaseFontSize(newsize) {
+        this.setState({
+            ...this.state,
+            appBaseFontSize: newsize,
+        }, false);
+        this._setCssVarValue('--eui-base-font-size', newsize);
+    }
+    // ---------------
+    // private getters
+    // ---------------
+    getCssVarValue(inputProperty) {
+        return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
+    }
+    setCssVar(inputProperty, outputProperty) {
+        const cssVarValue = this.cssVars.filter((v) => v.key === inputProperty)[0].value;
+        this._setCssVarValue(outputProperty, cssVarValue);
+        // console.log(inputProperty, outputProperty, cssVarValue);
+    }
+    _setCssVarValue(varName, varValue) {
+        document.documentElement.style.setProperty(varName, varValue);
+    }
+    getWrapperClasses(state, breakpoint) {
+        let classes = [];
+        classes.push(breakpoint);
+        if (state.hasSidebar) {
+            if (state.isSidebarOpen && (state.isSidebarActive || state.isSidebarInnerActive)) {
+                classes.push('sidebar-state-open');
+            }
+            if (!state.isSidebarOpen && (state.isSidebarActive || state.isSidebarInnerActive)) {
+                classes.push('sidebar-state-close');
+            }
+            if (state.isSidebarActive) {
+                classes.push('sidebar-active');
+            }
+            if (state.isSidebarInnerActive) {
+                classes.push('sidebar-inner-active');
+            }
+            if (state.isSidebarStateCloseWithIcons) {
+                classes.push('sidebar-state-close-with-icons');
+            }
+            // NEW APP-SHELL props
+            if (state.isSidebarHidden) {
+                classes.push('sidebar--hidden');
+            }
+            if (state.isSidebarOpen) {
+                classes.push('sidebar--open');
+            }
+            else {
+                classes.push('sidebar--close');
+            }
+            if (state.isSidebarHover) {
+                classes.push('sidebar--hover');
+            }
+        }
+        if (state.deviceInfo && state.deviceInfo.isFF) {
+            classes.push('ff');
+        }
+        if (state.deviceInfo && state.deviceInfo.isIE) {
+            classes.push('ie');
+        }
+        if (state.deviceInfo && state.deviceInfo.isIE11) {
+            classes.push('ie11');
+        }
+        if (state.deviceInfo && state.deviceInfo.isChrome) {
+            classes.push('chrome');
+        }
+        return classes.join(' ');
+    }
+    getBreakpoint(windowWidth) {
+        let bkp = '';
+        switch (true) {
+            case windowWidth >= 0 && windowWidth < 576:
+                bkp = 'xs';
+                break;
+            case windowWidth >= 576 && windowWidth < 768:
+                bkp = 'sm';
+                break;
+            case windowWidth >= 768 && windowWidth < 992:
+                bkp = 'md';
+                break;
+            case windowWidth >= 992 && windowWidth < 1200:
+                bkp = 'lg';
+                break;
+            case windowWidth >= 1200 && windowWidth < 1400:
+                bkp = 'xl';
+                break;
+            case windowWidth >= 1400 && windowWidth < 1920:
+                bkp = 'xxl';
+                break;
+            case windowWidth >= 1920 && windowWidth < 2560:
+                bkp = 'fhd';
+                break;
+            case windowWidth >= 2560 && windowWidth < 3840:
+                bkp = '2k';
+                break;
+            case windowWidth >= 3840:
+                bkp = '4k';
+                break;
+        }
+        return bkp;
+    }
+    getBreakpoints(bkp) {
+        return {
+            isMobile: bkp === 'xs' || bkp === 'sm',
+            isTablet: bkp === 'md',
+            isLtDesktop: bkp === 'xs' || bkp === 'sm' || bkp === 'md',
+            isDesktop: bkp === 'lg',
+            isXL: bkp === 'xl',
+            isXXL: bkp === 'xxl',
+            isFHD: bkp === 'fhd',
+            is2K: bkp === '2k',
+            is4K: bkp === '4k',
+        };
+    }
+    getJson(url) {
+        return this.http.get(url).toPromise().then(this.extractData).catch(this.handleError);
+    }
+    extractData(res) {
+        const body = res;
+        return body || {};
+    }
+    handleError(error) {
+        console.error('An error occurred', error);
+        return Promise.reject(error.message || error);
+    }
+    bindActiveLanguageToAppShellState() {
+        this.storeService.select(getActiveLang).subscribe((activeLang) => {
+            if (activeLang !== this.state.activeLanguage) {
+                this.setState({
+                    ...this.state,
+                    activeLanguage: activeLang,
+                }, false);
+            }
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxDynamicComponentService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiAppShellService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i1$5.HttpClient }, { token: PLATFORM_ID }, { token: i1$4.Router }, { token: StoreService }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiAppShellService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: UxDynamicComponentService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiAppShellService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [GLOBAL_CONFIG_TOKEN]
+                }] }, { type: i1$5.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i1$4.Router }, { type: StoreService }, { type: I18nService, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /* eslint-disable */
 const EUI_COUNTRIES = {
@@ -4268,12 +4216,12 @@ class AddLangParamInterceptor {
             params: req.params.set(langParam, langValue),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: AddLangParamInterceptor, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: AddLangParamInterceptor, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: AddLangParamInterceptor }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: AddLangParamInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }]; } });
 
 class CachePreventionInterceptor {
     intercept(req, next) {
@@ -4627,5 +4575,5 @@ class OpenIdConnectServiceMock extends OpenIdConnectService {
  * Generated bundle index. Do not edit.
  */
 
-export { ActivatedRouteAction, AddApiQueueItemAction, AddAppLoadedConfigModulesAction, AddLangParamInterceptor, AlertHttpErrorCallbackFn, ApiQueueService, ApiQueueServiceMock, AsyncStorageService, AsyncStorageServiceMock, BASE_LOGGER_NAME_TOKEN, BASE_NAME_TOKEN, BrowserStorageType, CONFIG_TOKEN, CORE_ROOT_GUARD, CachePreventionInterceptor, ConsoleHttpErrorCallbackFn, CoreAppActionTypes, CoreAppEffects, CoreI18nActionTypes, CoreLocaleActionTypes, CoreModule, CoreModuleEffects, CoreNotificationsActionTypes, CoreUserActionTypes, CorsSecurityInterceptor, CsrfPreventionInterceptor, DYNAMIC_COMPONENT_CONFIG, EUI_CONFIG_TOKEN, EUI_COUNTRIES, EUI_TIMEZONES, EmptyApiQueueAction, ErrorSubClass, EuLoginSessionTimeoutHandlingInterceptor, EuiCoreRootGuardClass, EuiDynamicMenuService, EuiError, EuiPermissionService, EuiTimezoneService, GLOBAL_CONFIG_TOKEN, GlobalErrorHandler, GrowlHttpErrorCallbackFn, HTTP_ERROR_HANDLER_CONFIG_TOKEN, HttpErrorHandlerInterceptor, I18nLoader, I18nResourceImpl, I18nService, I18nServiceMock, InitStoreAction, LANG_PARAM_KEY, LOCALE_ID_MAPPER, LOCAL_FORAGE_SERVICE_CONFIG_TOKEN, LOG_APPENDERS_TOKEN, LOG_LEVEL_TOKEN, LocalForageService, LocalStorageService, LocaleService, LocaleServiceMock, LogHttpErrorCallbackFn, LogModule, LogService, LogServiceMock, MODULE_CONFIG_TOKEN, MODULE_NAME_TOKEN, OpenIdConnectInterceptor, OpenIdConnectService, OpenIdConnectServiceMock, ROOT_LOG_CONFIG_TOKEN, RemoveApiQueueItemAction, SHOW_CONNECTION_STATUS_TOKEN, SessionStorageService, StorageService, StorageServiceMock, StoreService, StoreServiceMock, UX_ERROR_MAPPING_HANDLER_TOKEN, UpdateAppConnectionAction, UpdateAppStatusAction, UpdateAppVersionAction, UpdateCurrentModuleAction, UpdateI18nStateAction, UpdateLocaleStateAction, UpdateNotificationsListAction, UpdateUserDashboardAction, UpdateUserDetailsAction, UpdateUserPreferencesAction, UpdateUserRightsAction, UpdateUserStateAction, UserService, UserServiceMock, UxAppShellService, UxDynamicComponentService, UxErrorFeedbackService, UxErrorManager, UxRequestErrorModelInterceptor, closestMatchingParent, consumeEvent, corI18nReducers, coreAppReducers, coreLocaleReducers, coreNotificationsReducers, coreUserReducers, createEuiCoreRootGuard, diffDays, diffDaysFromToday, errorCodes, euiCoreRootGuardClass, formatNumber, getGlobalConfig, getHttpErrorHandlingConfig, getModuleConfig, getRootLogConfig, getShowConnectionStatus, getViewElement, handleError, isDefined, loadEuiDynamicEnvironmentConfig, loadState, localForage, localStorageSync, markControlsTouched, markFormGroupTouched, mergeAppHandlerConfigToAppConfig, mergeAppJsonConfigToAppConfig, offset, position, preInitApp, prepareEuiAppConfigToken, coreReducers as reducers, sessionStorageSync, translateConfig, uniqueId, validateEmail, withUxErrorManager };
+export { ActivatedRouteAction, AddApiQueueItemAction, AddAppLoadedConfigModulesAction, AddLangParamInterceptor, AlertHttpErrorCallbackFn, ApiQueueService, ApiQueueServiceMock, AsyncStorageService, AsyncStorageServiceMock, BASE_LOGGER_NAME_TOKEN, BASE_NAME_TOKEN, BrowserStorageType, CONFIG_TOKEN, CORE_ROOT_GUARD, CachePreventionInterceptor, ConsoleHttpErrorCallbackFn, CoreAppActionTypes, CoreAppEffects, CoreI18nActionTypes, CoreLocaleActionTypes, CoreModule, CoreModuleEffects, CoreNotificationsActionTypes, CoreUserActionTypes, CorsSecurityInterceptor, CsrfPreventionInterceptor, DYNAMIC_COMPONENT_CONFIG, EUI_CONFIG_TOKEN, EUI_COUNTRIES, EUI_TIMEZONES, EmptyApiQueueAction, ErrorSubClass, EuLoginSessionTimeoutHandlingInterceptor, EuiAppShellService, EuiCoreRootGuardClass, EuiDynamicComponentService, EuiDynamicMenuService, EuiError, EuiGrowlService, EuiPermissionService, EuiTimezoneService, GLOBAL_CONFIG_TOKEN, GlobalErrorHandler, GrowlHttpErrorCallbackFn, HTTP_ERROR_HANDLER_CONFIG_TOKEN, HttpErrorHandlerInterceptor, I18nLoader, I18nResourceImpl, I18nService, I18nServiceMock, InitStoreAction, LANG_PARAM_KEY, LOCALE_ID_MAPPER, LOCAL_FORAGE_SERVICE_CONFIG_TOKEN, LOG_APPENDERS_TOKEN, LOG_LEVEL_TOKEN, LocalForageService, LocalStorageService, LocaleService, LocaleServiceMock, LogHttpErrorCallbackFn, LogModule, LogService, LogServiceMock, MODULE_CONFIG_TOKEN, MODULE_NAME_TOKEN, OpenIdConnectInterceptor, OpenIdConnectService, OpenIdConnectServiceMock, ROOT_LOG_CONFIG_TOKEN, RemoveApiQueueItemAction, SHOW_CONNECTION_STATUS_TOKEN, SessionStorageService, StorageService, StorageServiceMock, StoreService, StoreServiceMock, UX_ERROR_MAPPING_HANDLER_TOKEN, UpdateAppConnectionAction, UpdateAppStatusAction, UpdateAppVersionAction, UpdateCurrentModuleAction, UpdateI18nStateAction, UpdateLocaleStateAction, UpdateNotificationsListAction, UpdateUserDashboardAction, UpdateUserDetailsAction, UpdateUserPreferencesAction, UpdateUserRightsAction, UpdateUserStateAction, UserService, UserServiceMock, UxRequestErrorModelInterceptor, closestMatchingParent, consumeEvent, corI18nReducers, coreAppReducers, coreLocaleReducers, coreNotificationsReducers, coreUserReducers, createEuiCoreRootGuard, diffDays, diffDaysFromToday, errorCodes, euiCoreRootGuardClass, formatNumber, getGlobalConfig, getHttpErrorHandlingConfig, getModuleConfig, getRootLogConfig, getShowConnectionStatus, getViewElement, handleError, isDefined, loadEuiDynamicEnvironmentConfig, loadState, localForage, localStorageSync, markControlsTouched, markFormGroupTouched, mergeAppHandlerConfigToAppConfig, mergeAppJsonConfigToAppConfig, offset, position, preInitApp, prepareEuiAppConfigToken, coreReducers as reducers, sessionStorageSync, translateConfig, uniqueId, validateEmail };
 //# sourceMappingURL=eui-core.mjs.map