@eui/core 18.0.0-rc.18 → 18.0.0-rc.19

package/fesm2022/eui-core.mjs

@@ -6,7 +6,7 @@ import { InjectionToken, Injectable, Inject, Injector, NgModule, Optional, APP_I
 import * as extendProxy from 'extend';
 import * as i1$1 from '@ngrx/effects';
 import { createEffect, ofType } from '@ngrx/effects';
-import { merge, fromEvent, throwError, of, forkJoin, from, BehaviorSubject, defer, firstValueFrom, ReplaySubject, map as map$1, Subject } from 'rxjs';
+import { merge, fromEvent, throwError, of, forkJoin, from, BehaviorSubject, defer, firstValueFrom, Subject } from 'rxjs';
 import { mapTo, map, mergeMap, tap, debounceTime, distinctUntilChanged, take, switchMap, catchError, concatMap, filter, takeUntil } from 'rxjs/operators';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateLoader } from '@ngx-translate/core';
@@ -2780,7 +2780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }] });
 
-const initialState = {
+const initialState$1 = {
     appName: '',
     appShortName: '',
     appSubTitle: '',
@@ -2903,9 +2903,9 @@ class EuiAppShellService {
         this.router = router;
         this.storeService = storeService;
         this.i18nService = i18nService;
-        let stateWithConfig = initialState;
-        const languages = config?.i18n?.i18nService?.languages || initialState.languages;
-        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;
+        let stateWithConfig = initialState$1;
+        const languages = config?.i18n?.i18nService?.languages || initialState$1.languages;
+        const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState$1.activeLanguage;
         stateWithConfig = {
             ...stateWithConfig,
             ...{
@@ -3894,46 +3894,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 
 var EuiTheme;
 (function (EuiTheme) {
-    EuiTheme["EC"] = "ec";
-    EuiTheme["EU"] = "eu";
-    EuiTheme["EUI"] = "eui";
+    EuiTheme["DEFAULT"] = "default";
+    EuiTheme["ECL_EC"] = "ecl-ec";
+    EuiTheme["ECL_EC_RTL"] = "ecl-ec-rtl";
+    EuiTheme["ECL_EU"] = "ecl-eu";
+    EuiTheme["ECL_EU_RTL"] = "ecl-eu-rtl";
+    EuiTheme["EUI_LEGACY"] = "eui-legacy";
+    EuiTheme["EUI_LEGACY_HC"] = "eui-legacy-high-contrast";
+    EuiTheme["DARK"] = "dark";
+    EuiTheme["COMPACT"] = "compact";
 })(EuiTheme || (EuiTheme = {}));
+;
+;
+const initialState = {
+    themes: [
+        { name: EuiTheme.DEFAULT, isActive: false, styleSheet: null, cssClass: null },
+        { name: EuiTheme.ECL_EC, isActive: false, styleSheet: 'eui-ecl-ec.css', cssClass: null },
+        { name: EuiTheme.ECL_EC_RTL, isActive: false, styleSheet: 'eui-ecl-ec-rtl.css', cssClass: null },
+        { name: EuiTheme.ECL_EU, isActive: false, styleSheet: 'eui-ecl-eu.css', cssClass: null },
+        { name: EuiTheme.ECL_EU_RTL, isActive: false, styleSheet: 'eui-ecl-eu-rtl.css', cssClass: null },
+        { name: EuiTheme.EUI_LEGACY, isActive: false, styleSheet: null, cssClass: 'eui-t-eui-legacy' },
+        { name: EuiTheme.EUI_LEGACY_HC, isActive: false, styleSheet: null, cssClass: 'eui-t-high-contrast' },
+        { name: EuiTheme.DARK, isActive: false, styleSheet: null, cssClass: 'eui-t-dark' },
+        { name: EuiTheme.COMPACT, isActive: false, styleSheet: null, cssClass: 'eui-t-compact' },
+    ],
+    theme: {
+        isDefault: false,
+        isEclEc: false,
+        isEclEcRtl: false,
+        isEclEu: false,
+        isEclEuRtl: false,
+        isEuiLegacy: false,
+        isEuiLegacyHc: false,
+        isDark: false,
+        isCompact: false,
+    },
+};
 class EuiThemeService {
-    constructor(config) {
+    constructor(document, config, asService) {
+        this.document = document;
         this.config = config;
-        this.theme = EuiTheme.EC;
-        this.themeSubject = new ReplaySubject();
-        this.theme$ = this.themeSubject.asObservable();
-        this.isEU$ = this.theme$.pipe(map$1((theme) => EuiTheme.EU === theme));
-        this.isEC$ = this.theme$.pipe(map$1((theme) => EuiTheme.EC === theme));
-        const theme = this.config?.eui?.theme || EuiTheme.EC;
-        this.setTheme(theme);
+        this.asService = asService;
+        this._state$ = new BehaviorSubject(initialState);
+        const themeName = this.config?.eui?.theme || EuiTheme.DEFAULT;
+        this.setActiveTheme(themeName, true);
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.getValue();
+    }
+    isDefault() {
+        return this.state.theme.isDefault;
+    }
+    isEclEc() {
+        return this.state.theme.isEclEc;
+    }
+    isEclEcRtl() {
+        return this.state.theme.isEclEcRtl;
+    }
+    isEclEu() {
+        return this.state.theme.isEclEu;
+    }
+    isEclEuRtl() {
+        return this.state.theme.isEclEuRtl;
+    }
+    isEuiLegacy() {
+        return this.state.theme.isEuiLegacy;
     }
-    isECTheme() {
-        return EuiTheme.EC === this.theme;
+    isEuiLegacyHc() {
+        return this.state.theme.isEuiLegacyHc;
     }
-    isEUTheme() {
-        return EuiTheme.EU === this.theme;
+    isDark() {
+        return this.state.theme.isDark;
+    }
+    isCompact() {
+        return this.state.theme.isCompact;
+    }
+    setActiveTheme(theme, isActive) {
+        const themes = this.state.themes;
+        const themeIdx = themes.findIndex(t => t.name === theme);
+        if (themeIdx < 0) {
+            throw new Error('NO_THEME_FOUND');
+        }
+        else {
+            themes[themeIdx].isActive = isActive;
+            const themeFound = themes[themeIdx];
+            const status = initialState.theme;
+            switch (theme) {
+                case EuiTheme.DEFAULT: {
+                    status.isDefault = isActive;
+                    break;
+                }
+                case EuiTheme.ECL_EC: {
+                    status.isEclEc = isActive;
+                    break;
+                }
+                case EuiTheme.ECL_EC_RTL: {
+                    status.isEclEcRtl = isActive;
+                    break;
+                }
+                case EuiTheme.ECL_EU: {
+                    status.isEclEu = isActive;
+                    break;
+                }
+                case EuiTheme.ECL_EU_RTL: {
+                    status.isEclEuRtl = isActive;
+                    break;
+                }
+                case EuiTheme.DARK: {
+                    status.isDark = isActive;
+                    break;
+                }
+                case EuiTheme.COMPACT: {
+                    status.isCompact = isActive;
+                    break;
+                }
+                case EuiTheme.EUI_LEGACY: {
+                    status.isEuiLegacy = isActive;
+                    break;
+                }
+                case EuiTheme.EUI_LEGACY_HC: {
+                    status.isEuiLegacyHc = isActive;
+                    break;
+                }
+            }
+            this._state$.next({
+                themes,
+                theme: status,
+            });
+            this._renderTheme(themeFound, isActive);
+        }
     }
-    getTheme() {
-        return this.theme;
+    _renderTheme(themeFound, isActive) {
+        if (themeFound.name === EuiTheme.COMPACT) {
+            if (isActive) {
+                this.asService.setBaseFontSize('14px');
+            }
+            else {
+                this.asService.setBaseFontSize('16px');
+            }
+        }
+        else if (themeFound.name === EuiTheme.ECL_EC_RTL || themeFound.name === EuiTheme.ECL_EU_RTL) {
+            const rtlLink = this.document.getElementById('rtl-theme');
+            this._renderThemeCss(themeFound, isActive, rtlLink);
+        }
+        else {
+            const themeLink = this.document.getElementById('eui-theme');
+            this._renderThemeCss(themeFound, isActive, themeLink);
+        }
     }
-    setTheme(theme) {
-        this.theme = theme;
-        this.themeSubject.next(theme);
+    _renderThemeCss(themeFound, isActive, link) {
+        const head = this.document.getElementsByTagName('head')[0];
+        if (isActive) {
+            if (themeFound.cssClass) {
+                document.querySelector('html').classList.add(themeFound.cssClass);
+            }
+            if (themeFound.styleSheet) {
+                if (link) {
+                    link.href = themeFound.styleSheet;
+                }
+                else {
+                    const style = this.document.createElement('link');
+                    style.id = 'eui-theme';
+                    style.rel = 'stylesheet';
+                    style.href = `assets/${themeFound.styleSheet}`;
+                    head.appendChild(style);
+                }
+            }
+        }
+        else {
+            if (themeFound.cssClass) {
+                document.querySelector('html').classList.remove(themeFound.cssClass);
+            }
+            if (themeFound.styleSheet) {
+                if (link) {
+                    link.media = '';
+                }
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiThemeService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiThemeService, deps: [{ token: DOCUMENT }, { token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: EuiAppShellService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiThemeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiThemeService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [GLOBAL_CONFIG_TOKEN]
-                }] }] });
+                }] }, { type: EuiAppShellService }] });
 
 /**
  * Generic storage service. Concrete storage services must extend this class