@eui/core 18.0.0-next.52 → 18.0.0-next.53

package/fesm2022/eui-core.mjs

@@ -2129,6 +2129,123 @@ var handleError = (error) => {
 // lib/helpers/utils.mjs
 var isDefined = (value) => value !== void 0 && value !== null;
 
+// lib/helpers/css-utils.mjs
+var CssUtils = class {
+  static {
+    this.getCssVarValue = (inputProperty) => {
+      return getComputedStyle(document.documentElement).getPropertyValue(inputProperty);
+    };
+  }
+  static {
+    this.setCssVarValue = (propertyName, propertyValue) => {
+      document.documentElement.style.setProperty(propertyName, propertyValue);
+    };
+  }
+  static {
+    this.setCssVar = (inputProperty, outputProperty) => {
+      const cssVarValue = this.getCssVarValue(inputProperty);
+      this.setCssVarValue(outputProperty, cssVarValue);
+    };
+  }
+  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.activateEditModeCssVars = (isActive) => {
+      if (isActive) {
+        this.setCssVarValue("--eui-docpage-navigation-z-index", "inherit");
+        this.setCssVarValue("--eui-z-index-sidebar", "inherit");
+        this.setCssVarValue("--eui-z-index-root", "inherit");
+      } else {
+        this.setCssVarValue("--eui-docpage-navigation-z-index", "2");
+        this.setCssVarValue("--eui-z-index-sidebar", "1044");
+        this.setCssVarValue("--eui-z-index-root", "1");
+      }
+    };
+  }
+  static {
+    this.activateHeaderCssVars = () => {
+      this.setCssVar("--eui-app-header-height-active", "--eui-app-header-height");
+    };
+  }
+  static {
+    this.activateBreadcrumbCssVars = () => {
+      this.setCssVar("--eui-app-breadcrumb-height-active", "--eui-app-breadcrumb-height");
+    };
+  }
+  static {
+    this.activateTopMessageCssVars = (height) => {
+      this.setCssVarValue("--eui-app-top-message-height", `${height}px`);
+    };
+  }
+  static {
+    this.activateToolbarCssVars = () => {
+      this.setCssVar("--eui-app-toolbar-height-active", "--eui-app-toolbar-height");
+    };
+  }
+  static {
+    this.activateFooterCssVars = () => {
+      this.setCssVar("--eui-app-footer-height-active", "--eui-app-footer-height");
+    };
+  }
+  static {
+    this.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");
+      }
+    };
+  }
+  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.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");
+    };
+  }
+  static {
+    this.activateSidebarHeaderCssVars = () => {
+      this.setCssVar("--eui-app-sidebar-header-height-active", "--eui-app-sidebar-header-height");
+    };
+  }
+  static {
+    this.activateSidebarFooterCssVars = () => {
+      this.setCssVar("--eui-app-sidebar-footer-height-active", "--eui-app-sidebar-footer-height");
+    };
+  }
+  /**
+   * 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);
+   */
+  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`);
+  }
+};
+
 // lib/services/permission/permission.service.mjs
 import { Injectable as Injectable11, Optional as Optional6 } from "@angular/core";
 import { EuiService, getUserRights } from "@eui/base";
@@ -2559,7 +2676,6 @@ var EuiAppShellService = class _EuiAppShellService {
   get breakpoint$() {
     return this._breakpoint$.asObservable();
   }
-  // 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
   get breakpoints$() {
     return this._breakpoints$.asObservable();
@@ -2643,9 +2759,6 @@ var EuiAppShellService = class _EuiAppShellService {
     this.router = router;
     this.storeService = storeService;
     this.i18nService = i18nService;
-    this.openModalId = new BehaviorSubject2("");
-    this.activeModals = [];
-    this.cssVars = [];
     let stateWithConfig = initialState;
     const languages = config?.i18n?.i18nService?.languages || initialState.languages;
     const defaultLanguage = config?.i18n?.i18nService?.defaultLanguage || initialState.activeLanguage;
@@ -2704,7 +2817,6 @@ var EuiAppShellService = class _EuiAppShellService {
    *
    * @param key can be 'key' or 'key.sub.sub'
    */
-  // 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
   getState(key) {
     return defer(() => (
@@ -2726,25 +2838,14 @@ var EuiAppShellService = class _EuiAppShellService {
       ...this.state,
       isDimmerActive: !isActive
     });
-    this.activateEditModeCssVars(!isActive);
+    CssUtils.activateEditModeCssVars(!isActive);
   }
   setDimmerActiveState(activeState) {
     this.setState({
       ...this.state,
       isDimmerActive: activeState
     });
-    this.activateEditModeCssVars(activeState);
-  }
-  activateEditModeCssVars(isActive) {
-    if (isActive) {
-      this._setCssVarValue("--eui-docpage-navigation-z-index", "inherit");
-      this._setCssVarValue("--eui-z-index-sidebar", "inherit");
-      this._setCssVarValue("--eui-z-index-root", "inherit");
-    } else {
-      this._setCssVarValue("--eui-docpage-navigation-z-index", "2");
-      this._setCssVarValue("--eui-z-index-sidebar", "1044");
-      this._setCssVarValue("--eui-z-index-root", "1");
-    }
+    CssUtils.activateEditModeCssVars(activeState);
   }
   // --------------
   // public methods
@@ -2763,42 +2864,42 @@ var EuiAppShellService = class _EuiAppShellService {
       hasSidebar: true
     });
     if (!this.state.isSidebarHidden) {
-      this.activateSidebarCssVars();
+      CssUtils.activateSidebarCssVars();
     }
   }
   activateSidebarHeader() {
-    this.activateSidebarHeaderCssVars();
+    CssUtils.activateSidebarHeaderCssVars();
   }
   activateSidebarFooter() {
-    this.activateSidebarFooterCssVars();
+    CssUtils.activateSidebarFooterCssVars();
   }
   activateHeader() {
     this.setState({
       ...this.state,
       hasHeader: true
     });
-    this.activateHeaderCssVars();
+    CssUtils.activateHeaderCssVars();
   }
   activateBreadcrumb() {
     this.setState({
       ...this.state,
       hasBreadcrumb: true
     });
-    this.activateBreadcrumbCssVars();
+    CssUtils.activateBreadcrumbCssVars();
   }
   activateTopMessage(height) {
     this.setState({
       ...this.state,
       hasTopMessage: true
     });
-    this.activateTopMessageCssVars(height);
+    CssUtils.activateTopMessageCssVars(height);
   }
   activateToolbar() {
     this.setState({
       ...this.state,
       hasToolbar: true
     });
-    this.activateToolbarCssVars();
+    CssUtils.activateToolbarCssVars();
   }
   activateToolbarMenu() {
     this.setState({
@@ -2806,96 +2907,11 @@ var EuiAppShellService = class _EuiAppShellService {
       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");
-  }
-  activateHeaderCssVars() {
-    this.setCssVar("--eui-app-header-height-active", "--eui-app-header-height");
-  }
-  activateBreadcrumbCssVars() {
-    this.setCssVar("--eui-app-breadcrumb-height-active", "--eui-app-breadcrumb-height");
-  }
-  activateTopMessageCssVars(height) {
-    this._setCssVarValue("--eui-app-top-message-height", `${height}px`);
-  }
-  activateToolbarCssVars() {
-    this.setCssVar("--eui-app-toolbar-height-active", "--eui-app-toolbar-height");
-  }
-  activateFooterCssVars() {
-    this.setCssVar("--eui-app-footer-height-active", "--eui-app-footer-height");
-  }
-  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");
-    }
-  }
-  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");
-  }
-  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");
-  }
-  activateSidebarHeaderCssVars() {
-    this.setCssVar("--eui-app-sidebar-header-height-active", "--eui-app-sidebar-header-height");
-  }
-  activateSidebarFooterCssVars() {
-    this.setCssVar("--eui-app-sidebar-footer-height-active", "--eui-app-sidebar-footer-height");
-  }
-  /**
-   * 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);
-   */
-  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`);
-  }
   /**
    * Returns the current value of --eui-f-size-base CSS variable
    */
   getBaseFontSize() {
-    return this.state.appBaseFontSize || this.getCssVarValue("--eui-f-size-base");
+    return this.state.appBaseFontSize || CssUtils.getCssVarValue("--eui-f-size-base");
   }
   /**
    * Updates the current value of --eui-f-size-base CSS variable and the UIState appBaseFontSize
@@ -2905,132 +2921,15 @@ var EuiAppShellService = class _EuiAppShellService {
       ...this.state,
       appBaseFontSize: newsize
     }, false);
-    this._setCssVarValue("--eui-f-size-base", newsize);
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  openModal(modalId) {
-    document.body.classList.add("modal-open");
-    if (!modalId) {
-      modalId = "single_modal";
-    }
-    this.activeModals.push({
-      id: modalId,
-      isOpen: true
-    });
-    setTimeout(() => {
-      const el = document.getElementById(modalId + "-close-button");
-      if (el) {
-        el.focus();
-      }
-    }, 100);
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  openMessageBox(messageBoxId) {
-    if (!messageBoxId) {
-      messageBoxId = "messagebox_modal";
-    }
-    this.openModal(messageBoxId);
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  closeMessageBox(messageBoxId) {
-    if (!messageBoxId) {
-      messageBoxId = "messagebox_modal";
-    }
-    this.closeModal(messageBoxId);
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  isModalOpen(modalId) {
-    if (!modalId) {
-      modalId = "single_modal";
-    }
-    if (this.activeModals.length) {
-      const modalIndex = this.findModalIndex(modalId);
-      if (modalIndex !== -1) {
-        return this.activeModals[modalIndex].isOpen;
-      }
-    }
-    return false;
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  closeModal(modalId) {
-    if (!modalId) {
-      modalId = "single_modal";
-    }
-    const index = this.findModalIndex(modalId);
-    if (index >= 0) {
-      this.activeModals.splice(index, 1);
-    }
-    if (this.activeModals && this.activeModals.length <= 0) {
-      document.body.classList.remove("modal-open");
-    } else {
-      const lastModalId = this.activeModals[this.activeModals.length - 1].id;
-      if (lastModalId) {
-        setTimeout(() => {
-          const el = document.getElementById(lastModalId + "-close-button");
-          if (el) {
-            el.focus();
-          }
-        }, 100);
-      }
-    }
-  }
-  /**
-   * @deprecated don't remove as it's used for external legacy project under v17 (csdr-eui-legacy) to support MWP transition
-   */
-  findModalIndex(modalId) {
-    let index = -1;
-    if (this.activeModals.length) {
-      for (let i = 0; i < this.activeModals.length; i++) {
-        if (this.activeModals[i].id === modalId) {
-          index = i;
-          break;
-        }
-      }
-    }
-    return index;
+    CssUtils.setCssVarValue("--eui-f-size-base", 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);
-  }
-  _setCssVarValue(varName, varValue) {
-    document.documentElement.style.setProperty(varName, varValue);
-  }
   getWrapperClasses(state, breakpoint) {
     const 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");
-      }
       if (state.isSidebarHidden) {
         classes.push("sidebar--hidden");
       }
@@ -3043,16 +2942,13 @@ var EuiAppShellService = class _EuiAppShellService {
         classes.push("sidebar--hover");
       }
     }
-    if (state.deviceInfo && state.deviceInfo.isFF) {
+    if (state.deviceInfo?.isFF) {
       classes.push("ff");
     }
-    if (state.deviceInfo && state.deviceInfo.isIE) {
+    if (state.deviceInfo?.isIE) {
       classes.push("ie");
     }
-    if (state.deviceInfo && state.deviceInfo.isIE11) {
-      classes.push("ie11");
-    }
-    if (state.deviceInfo && state.deviceInfo.isChrome) {
+    if (state.deviceInfo?.isChrome) {
       classes.push("chrome");
     }
     return classes.join(" ");
@@ -5079,6 +4975,7 @@ export {
   CoreUserActionTypes,
   CorsSecurityInterceptor,
   CsrfPreventionInterceptor,
+  CssUtils,
   DYNAMIC_COMPONENT_CONFIG,
   EUI_CONFIG_TOKEN,
   EUI_COUNTRIES,