@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/map-navigation/map-navigation.css

@@ -0,0 +1,197 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .map-nav {
+  display: flex;
+  margin-left: 3.25rem;
+  position: relative;
+  height: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+}
+:host .map-nav-sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 29.75rem;
+  max-width: 29.75rem;
+  min-width: 29.75rem;
+  height: 100%;
+  left: 4rem;
+  background-color: var(--theme-map-navigation--background);
+  border-inline-end: 0.125rem solid var(--theme-map-navigation-separator--background);
+  z-index: 99;
+}
+:host .map-nav-sidebar.display-none {
+  display: none;
+}
+:host .map-nav-sidebar-content {
+  align-items: center;
+  position: relative;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+:host .map-nav-sidebar-content .map-nav-sidebar-static-content {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.437rem;
+  margin-bottom: 0.812rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+:host .map-nav-header {
+  display: flex;
+  position: relative;
+  align-items: center;
+  height: 3.5rem;
+  min-height: 3.5rem;
+  width: 100%;
+}
+:host .map-nav-header .map-nav-header-brand {
+  background-color: var(--theme-map-navigation-background);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.625rem;
+  height: 100%;
+  width: 100%;
+  --theme-app-header--color: var(--theme-map-navigation-header--color);
+  --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);
+}
+:host .map-nav-header .map-nav-header-brand button {
+  margin-left: 1rem;
+}
+:host .map-nav-header-content {
+  display: flex;
+  height: 3.5rem;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 1rem;
+}
+:host .map-nav-header-content.empty {
+  height: 0;
+}
+:host .map-nav-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+:host .content {
+  display: block;
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  z-index: calc(var(--theme-z-index-sticky) - 1);
+}
+:host ::slotted(ix-menu) {
+  position: absolute;
+}

package/dist/collection/components/map-navigation/map-navigation.js

@@ -0,0 +1,386 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, } from "@stencil/core";
+import anime from "animejs";
+import { ApplicationLayoutContext } from "../utils/application-layout/context";
+import { useContextProvider } from "../utils/context";
+import { iconContextMenu } from "@siemens/ix-icons/icons";
+export class MapNavigation {
+    constructor() {
+        /**
+         * Hide the sidebar context menu button when set to true
+         */
+        this.hideContextMenu = true;
+        this.isSidebarOpen = true;
+        this.hasContentHeader = false;
+    }
+    get menu() {
+        return this.hostElement.querySelector('ix-menu');
+    }
+    get menuOverlay() {
+        return this.hostElement.querySelector('ix-menu-overlay');
+    }
+    get mapNavMenu() {
+        return this.hostElement.shadowRoot.querySelector('.map-nav-menu');
+    }
+    get sidebar() {
+        return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');
+    }
+    get overlay() {
+        return this.hostElement.shadowRoot.querySelector('#overlay');
+    }
+    componentDidRender() {
+        this.appendMenu();
+        this.closeOverlay();
+    }
+    componentWillLoad() {
+        useContextProvider(this.hostElement, ApplicationLayoutContext, {
+            hideHeader: false,
+            host: 'map-navigation',
+        });
+    }
+    appendMenu() {
+        this.menu.addEventListener('mapExpandChange', (event) => {
+            const state = !event.detail;
+            this.toggleSidebar(state);
+        });
+        this.menu.enableMapExpand = true;
+    }
+    /**
+     * Change the visibility of the sidebar
+     *
+     * @param show new visibility state
+     * @since 1.6.0
+     */
+    async toggleSidebar(show) {
+        if (show !== undefined) {
+            this.isSidebarOpen = show;
+        }
+        else {
+            this.isSidebarOpen = !this.isSidebarOpen;
+        }
+        if (this.isSidebarOpen) {
+            this.openSidebar();
+        }
+        else {
+            this.closeSidebar();
+        }
+        this.navigationToggled.emit(this.isSidebarOpen);
+        this.menu.toggleMapExpand(this.isSidebarOpen);
+    }
+    closeSidebar() {
+        anime({
+            targets: this.sidebar,
+            duration: MapNavigation.defaultTime,
+            marginLeft: [0, '-29.75rem'],
+            opacity: [1, 0],
+            easing: 'easeInSine',
+            complete: () => {
+                this.sidebar.classList.add('display-none');
+            },
+        });
+    }
+    openSidebar() {
+        anime({
+            targets: this.sidebar,
+            duration: MapNavigation.defaultTime,
+            marginLeft: ['-29.75rem', 0],
+            opacity: [0, 1],
+            easing: 'easeOutSine',
+            begin: () => {
+                this.sidebar.classList.remove('display-none');
+            },
+        });
+    }
+    /**
+     * Open a overlay inside content area
+     * @deprecated Will be removed in 2.0.0. Use slot based approach
+     *
+     * @param name
+     * @param component
+     * @param icon
+     * @param color
+     */
+    async openOverlay(name, component, icon, color) {
+        anime({
+            targets: this.overlay,
+            duration: MapNavigation.slowTime,
+            backdropFilter: [0, 'blur(1rem)'],
+            translateX: ['-4rem', 0],
+            opacity: [0, 1],
+            easing: 'easeOutSine',
+            begin: () => {
+                this.overlay.classList.remove('display-none');
+            },
+        });
+        const overlayInstance = document.createElement('ix-map-navigation-overlay');
+        overlayInstance.setAttribute('color', color !== null && color !== void 0 ? color : '');
+        overlayInstance.setAttribute('name', name);
+        overlayInstance.setAttribute('icon', icon !== null && icon !== void 0 ? icon : '');
+        overlayInstance.setAttribute('slot', 'overlay');
+        overlayInstance.addEventListener('closeClick', () => this.closeOverlay());
+        overlayInstance.appendChild(component);
+        this.hostElement.appendChild(overlayInstance);
+    }
+    /**
+     * Close current shown overlay
+     * @deprecated Will be removed in 2.0.0. Use slot based approach
+     */
+    async closeOverlay() {
+        anime({
+            targets: this.overlay,
+            duration: MapNavigation.slowTime,
+            backdropFilter: ['blur(1rem)', 0],
+            translateX: [0, '-4rem'],
+            opacity: [1, 0],
+            easing: 'easeInSine',
+            complete: () => {
+                var _a;
+                if (!this.overlay) {
+                    return;
+                }
+                (_a = this.overlay.firstChild) === null || _a === void 0 ? void 0 : _a.remove();
+                this.overlay.classList.add('display-none');
+            },
+        });
+    }
+    checkHasContentHeader(e) {
+        const nodes = e.currentTarget.assignedNodes({
+            flatten: true,
+        });
+        this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
+    }
+    render() {
+        return (h(Host, { key: '3e3241827aec837fdc348cf5d1213691f5780428' }, h("slot", { key: '5bd3dae6dd41bd53eed1551c8398ca302bab573c', name: "menu" }), h("div", { key: 'd6fb088fbedee4cd01cc83b8feedd5017f07060f', class: "map-nav" }, h("div", { key: '0e777bcbf889c0a101f6c4e44363b4d176813d47', class: "map-nav-sidebar" }, h("div", { key: '12de7debb9766ada7f0c5c26378d6cafab118cda', class: "map-nav-header" }, h("ix-application-header", { key: '74c65d9fb6b7be6b522411509fa8a5a71afc2244', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: '3513d27e844f2f5c0ae2052d64fd8f3f9cea70a7', slot: "logo", name: "logo" }))), h("div", { key: '3abae9f99b74404df5cd23f5d0b9715cbdd0b371', class: "map-nav-sidebar-content" }, h("div", { key: '5f62402dc4f5c3743a3fd79d5160b9ab75b132c6', class: "map-nav-sidebar-static-content" }, h("div", { key: '715c115bdf5178a311b04037005efc3230529b0c', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: iconContextMenu, ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'ea4894c17a372c76fc74680cddfd79a645391a76', class: "map-nav-sidebar-user-content" }, h("slot", { key: 'bb86645cbf9f71c710f12f78b68858fab7bdd38d', name: "sidebar-content" })))), h("div", { key: 'fbee95f2bac6e72acf639d4e788063e8cf36d528', class: "content" }, h("div", { key: 'dbadf99583818d8f62866e5073caa53e09d97a74', class: {
+                'map-nav-header-content': true,
+                'bg-2': true,
+                empty: !this.hasContentHeader,
+            } }, h("slot", { key: '32fdf4eed811b0bc4b6f043ae98e16b05ed2e267', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: 'ef909703d699998939dc77a96c9e2cebae80f300' }, h("slot", { key: '2dc6375d4004990560852d1e0497b6fe9ad6cbc6' }), h("slot", { key: '4f6fc515a05d2ff8feceb0381ffa6d80ea46ae5a', name: "overlay" }))))));
+    }
+    static get is() { return "ix-map-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["map-navigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["map-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "applicationName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Application name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "application-name",
+                "reflect": false
+            },
+            "navigationTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation title"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "navigation-title",
+                "reflect": false
+            },
+            "hideContextMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the sidebar context menu button when set to true"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-context-menu",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isSidebarOpen": {},
+            "hasContentHeader": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navigationToggled",
+                "name": "navigationToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation toggled"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "contextMenuClick",
+                "name": "contextMenuClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Context menu clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleSidebar": {
+                "complexType": {
+                    "signature": "(show?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "show",
+                            "type": "boolean",
+                            "docs": "new visibility state"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Change the visibility of the sidebar",
+                    "tags": [{
+                            "name": "param",
+                            "text": "show new visibility state"
+                        }, {
+                            "name": "since",
+                            "text": "1.6.0"
+                        }]
+                }
+            },
+            "openOverlay": {
+                "complexType": {
+                    "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "component",
+                            "type": "HTMLElement",
+                            "docs": ""
+                        }, {
+                            "name": "icon",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "color",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open a overlay inside content area",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Will be removed in 2.0.0. Use slot based approach"
+                        }, {
+                            "name": "param",
+                            "text": "name"
+                        }, {
+                            "name": "param",
+                            "text": "component"
+                        }, {
+                            "name": "param",
+                            "text": "icon"
+                        }, {
+                            "name": "param",
+                            "text": "color"
+                        }]
+                }
+            },
+            "closeOverlay": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close current shown overlay",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Will be removed in 2.0.0. Use slot based approach"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+MapNavigation.defaultTime = 150;
+MapNavigation.slowTime = 500;
+//# sourceMappingURL=map-navigation.js.map

package/dist/collection/components/map-navigation/map-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-navigation.js","sourceRoot":"","sources":["../../../src/components/map-navigation/map-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement!: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle?: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled!: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick!: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu')!;\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay')!;\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   * @since 1.6.0\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.sidebar.classList.add('display-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.sidebar.classList.remove('display-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.overlay.classList.remove('display-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color ?? '');\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon ?? '');\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('display-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={iconContextMenu}\n                    ghost\n                    size=\"24\"\n                    variant=\"secondary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}