@eui/core 18.0.0-rc.35 → 18.0.0-rc.37

package/fesm2022/eui-core.mjs

@@ -10,7 +10,7 @@ import { merge, fromEvent, throwError, of, forkJoin, from, BehaviorSubject, defe
 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';
-import { isPlatformBrowser, LOCATION_INITIALIZED, DOCUMENT, getLocaleId, registerLocaleData } from '@angular/common';
+import { isPlatformBrowser, LOCATION_INITIALIZED, DOCUMENT, isPlatformServer, getLocaleId, registerLocaleData } from '@angular/common';
 import * as i1$3 from '@ngrx/store';
 import { createSelector } from '@ngrx/store';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -2123,16 +2123,10 @@ const offset = (nativeEl) => {
     };
 };
 // PRIVATE FUNCTIONS
-// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getStyle = (nativeEl, cssProp) => {
-    // IE
     /* istanbul ignore if */
-    if (nativeEl.currentStyle) {
-        return nativeEl.currentStyle[cssProp];
-    }
-    if (window.getComputedStyle) {
-        return window.getComputedStyle(nativeEl)[cssProp];
+    if (getComputedStyle(nativeEl)) {
+        return getComputedStyle(nativeEl)[cssProp];
     }
     // finally try and get inline style
     /* istanbul ignore next */
@@ -2324,46 +2318,57 @@ const handleError = (error) => {
 const isDefined = (value) => value !== undefined && value !== null;
 
 class CssUtils {
-    static { this.getCssVarValue = (inputProperty, document) => {
-        return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
+    /**
+     * Get the value of a CSS variable. Using getComputedStyle to get the value of the CSS variable (Browser Specific API)
+     * @param inputProperty
+     * @param document
+     * @param platform
+     */
+    static { this.getCssVarValue = (inputProperty, document, platform) => {
+        if (isPlatformServer(platform)) {
+            return document.documentElement.style.getPropertyValue(inputProperty);
+        }
+        else {
+            return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
+        }
     }; }
     static { this.setCssVarValue = (propertyName, propertyValue, document) => {
         document.documentElement.style.setProperty(propertyName, propertyValue);
     }; }
-    static { this.setCssVar = (inputProperty, outputProperty, document) => {
-        const cssVarValue = this.getCssVarValue(inputProperty, document);
+    static { this.setCssVar = (inputProperty, outputProperty, document, platform) => {
+        const cssVarValue = this.getCssVarValue(inputProperty, document, platform);
         this.setCssVarValue(outputProperty, cssVarValue, document);
     }; }
-    static { this.initCssVars = (document) => {
-        this.setCssVar('--eui-app-header-height-default', '--eui-app-header-height', document);
-        this.setCssVar('--eui-app-breadcrumb-height-default', '--eui-app-breadcrumb-height', document);
-        this.setCssVar('--eui-app-top-message-height-default', '--eui-app-top-message-height', document);
-        this.setCssVar('--eui-app-toolbar-height-default', '--eui-app-toolbar-height', document);
-        this.setCssVar('--eui-app-sidebar-width-default', '--eui-app-sidebar-width', document);
-        this.setCssVar('--eui-app-sidebar-width-close-default', '--eui-app-sidebar-width-close', document);
-        this.setCssVar('--eui-app-sidebar-header-height-default', '--eui-app-sidebar-header-height', document);
-        this.setCssVar('--eui-app-sidebar-footer-height-default', '--eui-app-sidebar-footer-height', document);
+    static { this.initCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-header-height-default', '--eui-app-header-height', document, platform);
+        this.setCssVar('--eui-app-breadcrumb-height-default', '--eui-app-breadcrumb-height', document, platform);
+        this.setCssVar('--eui-app-top-message-height-default', '--eui-app-top-message-height', document, platform);
+        this.setCssVar('--eui-app-toolbar-height-default', '--eui-app-toolbar-height', document, platform);
+        this.setCssVar('--eui-app-sidebar-width-default', '--eui-app-sidebar-width', document, platform);
+        this.setCssVar('--eui-app-sidebar-width-close-default', '--eui-app-sidebar-width-close', document, platform);
+        this.setCssVar('--eui-app-sidebar-header-height-default', '--eui-app-sidebar-header-height', document, platform);
+        this.setCssVar('--eui-app-sidebar-footer-height-default', '--eui-app-sidebar-footer-height', document, platform);
     }; }
     // eslint-disable-next-line
-    static { this.getBreakpointValues = (document) => {
+    static { this.getBreakpointValues = (document, platform) => {
         const breakpoints = [];
-        const xs = this.getCssVarValue('--eui-bp-xs', document);
+        const xs = this.getCssVarValue('--eui-bp-xs', document, platform);
         breakpoints.push({ bkp: 'xs', pxValue: xs, value: xs.replace('px', '') });
-        const sm = this.getCssVarValue('--eui-bp-sm', document);
+        const sm = this.getCssVarValue('--eui-bp-sm', document, platform);
         breakpoints.push({ bkp: 'sm', pxValue: sm, value: sm.replace('px', '') });
-        const md = this.getCssVarValue('--eui-bp-md', document);
+        const md = this.getCssVarValue('--eui-bp-md', document, platform);
         breakpoints.push({ bkp: 'md', pxValue: md, value: md.replace('px', '') });
-        const lg = this.getCssVarValue('--eui-bp-lg', document);
+        const lg = this.getCssVarValue('--eui-bp-lg', document, platform);
         breakpoints.push({ bkp: 'lg', pxValue: lg, value: lg.replace('px', '') });
-        const xl = this.getCssVarValue('--eui-bp-xl', document);
+        const xl = this.getCssVarValue('--eui-bp-xl', document, platform);
         breakpoints.push({ bkp: 'xl', pxValue: xl, value: xl.replace('px', '') });
-        const xxl = this.getCssVarValue('--eui-bp-xxl', document);
+        const xxl = this.getCssVarValue('--eui-bp-xxl', document, platform);
         breakpoints.push({ bkp: 'xxl', pxValue: xxl, value: xxl.replace('px', '') });
-        const fhd = this.getCssVarValue('--eui-bp-fhd', document);
+        const fhd = this.getCssVarValue('--eui-bp-fhd', document, platform);
         breakpoints.push({ bkp: 'fhd', pxValue: fhd, value: fhd.replace('px', '') });
-        const twok = this.getCssVarValue('--eui-bp-2k', document);
+        const twok = this.getCssVarValue('--eui-bp-2k', document, platform);
         breakpoints.push({ bkp: '2k', pxValue: twok, value: twok.replace('px', '') });
-        const fourk = this.getCssVarValue('--eui-bp-4k', document);
+        const fourk = this.getCssVarValue('--eui-bp-4k', document, platform);
         breakpoints.push({ bkp: '4k', pxValue: fourk, value: fourk.replace('px', '') });
         return breakpoints;
     }; }
@@ -2379,32 +2384,32 @@ class CssUtils {
             this.setCssVarValue('--eui-z-index-root', '1', document); // Restore eui-app-main-content z-index
         }
     }; }
-    static { this.activateHeaderCssVars = (document) => {
-        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document);
+    static { this.activateHeaderCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document, platform);
     }; }
-    static { this.activateBreadcrumbCssVars = (document) => {
-        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height', document);
+    static { this.activateBreadcrumbCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height', document, platform);
     }; }
     static { this.activateTopMessageCssVars = (height, document) => {
         this.setCssVarValue('--eui-app-top-message-height', `${height}px`, document);
     }; }
-    static { this.activateToolbarCssVars = (document) => {
-        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height', document);
+    static { this.activateToolbarCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height', document, platform);
     }; }
-    static { this.activateFooterCssVars = (document) => {
-        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height', document);
+    static { this.activateFooterCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height', document, platform);
     }; }
-    static { this.setHeaderShrinkCssVar = (active, document) => {
+    static { this.setHeaderShrinkCssVar = (active, document, platform) => {
         if (active) {
-            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height', document);
+            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height', document, platform);
         }
         else {
-            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document);
+            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document, platform);
         }
     }; }
-    static { this.activateSidebarCssVars = (document) => {
-        this.setCssVar('--eui-app-sidebar-width-active', '--eui-app-sidebar-width', document);
-        this.setCssVar('--eui-app-sidebar-width-close-active', '--eui-app-sidebar-width-close', document);
+    static { this.activateSidebarCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-sidebar-width-active', '--eui-app-sidebar-width', document, platform);
+        this.setCssVar('--eui-app-sidebar-width-close-active', '--eui-app-sidebar-width-close', document, platform);
     }; }
     static { this.removeSidebarCssVars = (document) => {
         document.documentElement.style.removeProperty('--eui-app-sidebar-header-height');
@@ -2412,11 +2417,11 @@ class CssUtils {
         document.documentElement.style.removeProperty('--eui-app-sidebar-width');
         document.documentElement.style.removeProperty('--eui-app-sidebar-width-close');
     }; }
-    static { this.activateSidebarHeaderCssVars = (document) => {
-        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height', document);
+    static { this.activateSidebarHeaderCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height', document, platform);
     }; }
-    static { this.activateSidebarFooterCssVars = (document) => {
-        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height', document);
+    static { this.activateSidebarFooterCssVars = (document, platform) => {
+        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height', document, platform);
     }; }
     /**
      * Gets the viewport height and width and multiply it by 1% to get a value for a vh/vw unit
@@ -3035,28 +3040,28 @@ class EuiAppShellService {
             hasSidebar: true,
         });
         if (!this.state.isSidebarHidden) {
-            CssUtils.activateSidebarCssVars(this.document);
+            CssUtils.activateSidebarCssVars(this.document, this.platformId);
         }
     }
     activateSidebarHeader() {
-        CssUtils.activateSidebarHeaderCssVars(this.document);
+        CssUtils.activateSidebarHeaderCssVars(this.document, this.platformId);
     }
     activateSidebarFooter() {
-        CssUtils.activateSidebarFooterCssVars(this.document);
+        CssUtils.activateSidebarFooterCssVars(this.document, this.platformId);
     }
     activateHeader() {
         this.setState({
             ...this.state,
             hasHeader: true,
         });
-        CssUtils.activateHeaderCssVars(this.document);
+        CssUtils.activateHeaderCssVars(this.document, this.platformId);
     }
     activateBreadcrumb() {
         this.setState({
             ...this.state,
             hasBreadcrumb: true,
         });
-        CssUtils.activateBreadcrumbCssVars(this.document);
+        CssUtils.activateBreadcrumbCssVars(this.document, this.platformId);
     }
     activateTopMessage(height) {
         this.setState({
@@ -3070,7 +3075,7 @@ class EuiAppShellService {
             ...this.state,
             hasToolbar: true,
         });
-        CssUtils.activateToolbarCssVars(this.document);
+        CssUtils.activateToolbarCssVars(this.document, this.platformId);
     }
     activateToolbarMenu() {
         this.setState({
@@ -3082,7 +3087,7 @@ class EuiAppShellService {
      * Returns the current value of --eui-f-size-base CSS variable
      */
     getBaseFontSize() {
-        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document);
+        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document, this.platformId);
     }
     /**
      * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize
@@ -3127,7 +3132,7 @@ class EuiAppShellService {
         if (this.state.breakpointValues.length === 0) {
             this.setState({
                 ...this.state,
-                breakpointValues: CssUtils.getBreakpointValues(this.document),
+                breakpointValues: CssUtils.getBreakpointValues(this.document, this.platformId),
             });
         }
         this.state.breakpointValues.forEach((b, i) => {