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

package/fesm2022/eui-core.mjs

@@ -2324,113 +2324,115 @@ const handleError = (error) => {
 const isDefined = (value) => value !== undefined && value !== null;
 
 class CssUtils {
-    static { this.getCssVarValue = (inputProperty) => {
+    static { this.getCssVarValue = (inputProperty, document) => {
         return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
     }; }
-    static { this.setCssVarValue = (propertyName, propertyValue) => {
+    static { this.setCssVarValue = (propertyName, propertyValue, document) => {
         document.documentElement.style.setProperty(propertyName, propertyValue);
     }; }
-    static { this.setCssVar = (inputProperty, outputProperty) => {
-        const cssVarValue = this.getCssVarValue(inputProperty);
-        this.setCssVarValue(outputProperty, cssVarValue);
+    static { this.setCssVar = (inputProperty, outputProperty, document) => {
+        const cssVarValue = this.getCssVarValue(inputProperty, document);
+        this.setCssVarValue(outputProperty, cssVarValue, document);
     }; }
-    static { this.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');
+    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);
     }; }
     // eslint-disable-next-line
-    static { this.getBreakpointValues = () => {
+    static { this.getBreakpointValues = (document) => {
         const breakpoints = [];
-        const xs = this.getCssVarValue('--eui-bp-xs');
+        const xs = this.getCssVarValue('--eui-bp-xs', document);
         breakpoints.push({ bkp: 'xs', pxValue: xs, value: xs.replace('px', '') });
-        const sm = this.getCssVarValue('--eui-bp-sm');
+        const sm = this.getCssVarValue('--eui-bp-sm', document);
         breakpoints.push({ bkp: 'sm', pxValue: sm, value: sm.replace('px', '') });
-        const md = this.getCssVarValue('--eui-bp-md');
+        const md = this.getCssVarValue('--eui-bp-md', document);
         breakpoints.push({ bkp: 'md', pxValue: md, value: md.replace('px', '') });
-        const lg = this.getCssVarValue('--eui-bp-lg');
+        const lg = this.getCssVarValue('--eui-bp-lg', document);
         breakpoints.push({ bkp: 'lg', pxValue: lg, value: lg.replace('px', '') });
-        const xl = this.getCssVarValue('--eui-bp-xl');
+        const xl = this.getCssVarValue('--eui-bp-xl', document);
         breakpoints.push({ bkp: 'xl', pxValue: xl, value: xl.replace('px', '') });
-        const xxl = this.getCssVarValue('--eui-bp-xxl');
+        const xxl = this.getCssVarValue('--eui-bp-xxl', document);
         breakpoints.push({ bkp: 'xxl', pxValue: xxl, value: xxl.replace('px', '') });
-        const fhd = this.getCssVarValue('--eui-bp-fhd');
+        const fhd = this.getCssVarValue('--eui-bp-fhd', document);
         breakpoints.push({ bkp: 'fhd', pxValue: fhd, value: fhd.replace('px', '') });
-        const twok = this.getCssVarValue('--eui-bp-2k');
+        const twok = this.getCssVarValue('--eui-bp-2k', document);
         breakpoints.push({ bkp: '2k', pxValue: twok, value: twok.replace('px', '') });
-        const fourk = this.getCssVarValue('--eui-bp-4k');
+        const fourk = this.getCssVarValue('--eui-bp-4k', document);
         breakpoints.push({ bkp: '4k', pxValue: fourk, value: fourk.replace('px', '') });
         return breakpoints;
     }; }
-    static { this.activateEditModeCssVars = (isActive) => {
+    static { this.activateEditModeCssVars = (isActive, document) => {
         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
+            this.setCssVarValue('--eui-docpage-navigation-z-index', 'inherit', document); // Reset doc-page-navigation-column z-index
+            this.setCssVarValue('--eui-z-index-sidebar', 'inherit', document); // Reset eui-app-sidebar z-index
+            this.setCssVarValue('--eui-z-index-root', 'inherit', document); // 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
+            this.setCssVarValue('--eui-docpage-navigation-z-index', '2', document); // Restore doc-page-navigation-column z-index
+            this.setCssVarValue('--eui-z-index-sidebar', '1044', document); // Restore eui-app-sidebar z-index
+            this.setCssVarValue('--eui-z-index-root', '1', document); // Restore eui-app-main-content z-index
         }
     }; }
-    static { this.activateHeaderCssVars = () => {
-        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
+    static { this.activateHeaderCssVars = (document) => {
+        this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document);
     }; }
-    static { this.activateBreadcrumbCssVars = () => {
-        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height');
+    static { this.activateBreadcrumbCssVars = (document) => {
+        this.setCssVar('--eui-app-breadcrumb-height-active', '--eui-app-breadcrumb-height', document);
     }; }
-    static { this.activateTopMessageCssVars = (height) => {
-        this.setCssVarValue('--eui-app-top-message-height', `${height}px`);
+    static { this.activateTopMessageCssVars = (height, document) => {
+        this.setCssVarValue('--eui-app-top-message-height', `${height}px`, document);
     }; }
-    static { this.activateToolbarCssVars = () => {
-        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height');
+    static { this.activateToolbarCssVars = (document) => {
+        this.setCssVar('--eui-app-toolbar-height-active', '--eui-app-toolbar-height', document);
     }; }
-    static { this.activateFooterCssVars = () => {
-        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height');
+    static { this.activateFooterCssVars = (document) => {
+        this.setCssVar('--eui-app-footer-height-active', '--eui-app-footer-height', document);
     }; }
-    static { this.setHeaderShrinkCssVar = (active) => {
+    static { this.setHeaderShrinkCssVar = (active, document) => {
         if (active) {
-            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height');
+            this.setCssVar('--eui-app-header-height-shrink', '--eui-app-header-height', document);
         }
         else {
-            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height');
+            this.setCssVar('--eui-app-header-height-active', '--eui-app-header-height', document);
         }
     }; }
-    static { this.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');
+    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.removeSidebarCssVars = () => {
+    static { this.removeSidebarCssVars = (document) => {
         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');
     }; }
-    static { this.activateSidebarHeaderCssVars = () => {
-        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height');
+    static { this.activateSidebarHeaderCssVars = (document) => {
+        this.setCssVar('--eui-app-sidebar-header-height-active', '--eui-app-sidebar-header-height', document);
     }; }
-    static { this.activateSidebarFooterCssVars = () => {
-        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height');
+    static { this.activateSidebarFooterCssVars = (document) => {
+        this.setCssVar('--eui-app-sidebar-footer-height-active', '--eui-app-sidebar-footer-height', document);
     }; }
     /**
-     * Gets the viewport height and width and multiple it by 1% to get a value for a vh/vw unit
+     * Gets the viewport height and width and multiply 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);
      */
-    static setAppViewportCssVars() {
-        const vh = window.innerHeight * 0.01;
-        const vw = window.innerWidth * 0.01;
-        this.setCssVarValue('--eui-app-vh', `${vh}px`);
-        this.setCssVarValue('--eui-app-vw', `${vw}px`);
+    static setAppViewportCssVars(platform) {
+        if (isPlatformBrowser(platform)) {
+            const vh = window.innerHeight * 0.01;
+            const vw = window.innerWidth * 0.01;
+            this.setCssVarValue('--eui-app-vh', `${vh}px`, document);
+            this.setCssVarValue('--eui-app-vw', `${vw}px`, document);
+        }
     }
 }
 
@@ -2913,10 +2915,11 @@ class EuiAppShellService {
             isDimmerActive: isActive,
         });
     }
-    constructor(config, http, platformId, router, storeService, i18nService) {
+    constructor(config, http, platformId, document, router, storeService, i18nService) {
         this.config = config;
         this.http = http;
         this.platformId = platformId;
+        this.document = document;
         this.router = router;
         this.storeService = storeService;
         this.i18nService = i18nService;
@@ -3006,14 +3009,14 @@ class EuiAppShellService {
             ...this.state,
             isDimmerActive: !isActive,
         });
-        CssUtils.activateEditModeCssVars(!isActive);
+        CssUtils.activateEditModeCssVars(!isActive, this.document);
     }
     setDimmerActiveState(activeState) {
         this.setState({
             ...this.state,
             isDimmerActive: activeState,
         });
-        CssUtils.activateEditModeCssVars(activeState);
+        CssUtils.activateEditModeCssVars(activeState, this.document);
     }
     // --------------
     // public methods
@@ -3032,42 +3035,42 @@ class EuiAppShellService {
             hasSidebar: true,
         });
         if (!this.state.isSidebarHidden) {
-            CssUtils.activateSidebarCssVars();
+            CssUtils.activateSidebarCssVars(this.document);
         }
     }
     activateSidebarHeader() {
-        CssUtils.activateSidebarHeaderCssVars();
+        CssUtils.activateSidebarHeaderCssVars(this.document);
     }
     activateSidebarFooter() {
-        CssUtils.activateSidebarFooterCssVars();
+        CssUtils.activateSidebarFooterCssVars(this.document);
     }
     activateHeader() {
         this.setState({
             ...this.state,
             hasHeader: true,
         });
-        CssUtils.activateHeaderCssVars();
+        CssUtils.activateHeaderCssVars(this.document);
     }
     activateBreadcrumb() {
         this.setState({
             ...this.state,
             hasBreadcrumb: true,
         });
-        CssUtils.activateBreadcrumbCssVars();
+        CssUtils.activateBreadcrumbCssVars(this.document);
     }
     activateTopMessage(height) {
         this.setState({
             ...this.state,
             hasTopMessage: true,
         });
-        CssUtils.activateTopMessageCssVars(height);
+        CssUtils.activateTopMessageCssVars(height, this.document);
     }
     activateToolbar() {
         this.setState({
             ...this.state,
             hasToolbar: true,
         });
-        CssUtils.activateToolbarCssVars();
+        CssUtils.activateToolbarCssVars(this.document);
     }
     activateToolbarMenu() {
         this.setState({
@@ -3079,7 +3082,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');
+        return this.state.appBaseFontSize || CssUtils.getCssVarValue('--eui-f-size-base', this.document);
     }
     /**
      * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize
@@ -3089,7 +3092,7 @@ class EuiAppShellService {
             ...this.state,
             appBaseFontSize: newsize,
         }, false);
-        CssUtils.setCssVarValue('--eui-f-size-base', newsize);
+        CssUtils.setCssVarValue('--eui-f-size-base', newsize, this.document);
     }
     // ---------------
     // private getters
@@ -3124,7 +3127,7 @@ class EuiAppShellService {
         if (this.state.breakpointValues.length === 0) {
             this.setState({
                 ...this.state,
-                breakpointValues: CssUtils.getBreakpointValues(),
+                breakpointValues: CssUtils.getBreakpointValues(this.document),
             });
         }
         this.state.breakpointValues.forEach((b, i) => {
@@ -3175,7 +3178,7 @@ class EuiAppShellService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppShellService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i1$5.HttpClient }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: i1$4.Router }, { token: StoreService }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppShellService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiAppShellService, decorators: [{
@@ -3191,6 +3194,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }] }, { type: i1$5.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }, { type: i1$4.Router }, { type: StoreService }, { type: I18nService, decorators: [{
                     type: Optional
                 }] }] });