@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/link-button/link-button.css

@@ -81,25 +81,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-primary.selected {
-  background-color: var(--theme-btn-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary.hover, .btn-primary:hover {
-  border-color: var(--theme-btn-primary--border-color--hover) !important;
-  background-color: var(--theme-btn-primary--background--hover) !important;
-  color: var(--theme-btn-primary--color--hover) !important;
+  border-color: var(--theme-btn-primary--border-color--hover);
+  background-color: var(--theme-btn-primary--background--hover);
+  color: var(--theme-btn-primary--color--hover);
 }
 .btn-primary.selected.hover, .btn-primary.selected:hover {
-  background-color: var(--theme-btn-primary--background--selected-hover);
-  color: var(--theme-btn-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
-  border-color: var(--theme-btn-primary--border-color--active) !important;
-  background-color: var(--theme-btn-primary--background--active) !important;
-  color: var(--theme-btn-primary--color--active) !important;
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
 }
 .btn-primary.selected:not(:disabled):not(.disabled):active, .btn-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-primary--background--selected-active);
-  color: var(--theme-btn-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary.disabled, .btn-primary:disabled {
   pointer-events: none;
@@ -127,25 +128,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-outline-primary.selected {
-  background-color: var(--theme-btn-outline-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary.hover, .btn-outline-primary:hover {
-  border-color: var(--theme-btn-outline-primary--border-color--hover) !important;
-  background-color: var(--theme-btn-outline-primary--background--hover) !important;
-  color: var(--theme-btn-outline-primary--color--hover) !important;
+  border-color: var(--theme-btn-outline-primary--border-color--hover);
+  background-color: var(--theme-btn-outline-primary--background--hover);
+  color: var(--theme-btn-outline-primary--color--hover);
 }
 .btn-outline-primary.selected.hover, .btn-outline-primary.selected:hover {
-  background-color: var(--theme-btn-outline-primary--background--selected-hover);
-  color: var(--theme-btn-outline-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
-  border-color: var(--theme-btn-outline-primary--border-color--active) !important;
-  background-color: var(--theme-btn-outline-primary--background--active) !important;
-  color: var(--theme-btn-outline-primary--color--active) !important;
+  border-color: var(--theme-btn-outline-primary--border-color--active);
+  background-color: var(--theme-btn-outline-primary--background--active);
+  color: var(--theme-btn-outline-primary--color--active);
 }
 .btn-outline-primary.selected:not(:disabled):not(.disabled):active, .btn-outline-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-outline-primary--background--selected-active);
-  color: var(--theme-btn-outline-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
   pointer-events: none;
@@ -173,23 +175,24 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-invisible-primary.selected {
-  background-color: var(--theme-btn-invisible-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary.hover, .btn-invisible-primary:hover {
-  background-color: var(--theme-btn-invisible-primary--background--hover) !important;
-  color: var(--theme-btn-invisible-primary--color--hover) !important;
+  background-color: var(--theme-btn-invisible-primary--background--hover);
+  color: var(--theme-btn-invisible-primary--color--hover);
 }
 .btn-invisible-primary.selected.hover, .btn-invisible-primary.selected:hover {
-  background-color: var(--theme-btn-invisible-primary--background--selected-hover);
-  color: var(--theme-btn-invisible-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary:not(:disabled):not(.disabled):active, .btn-invisible-primary:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-primary--background--active) !important;
-  color: var(--theme-btn-invisible-primary--color--active) !important;
+  background-color: var(--theme-btn-invisible-primary--background--active);
+  color: var(--theme-btn-invisible-primary--color--active);
 }
 .btn-invisible-primary.selected:not(:disabled):not(.disabled):active, .btn-invisible-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-primary--background--selected-active);
-  color: var(--theme-btn-invisible-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
   pointer-events: none;
@@ -216,25 +219,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-secondary.selected {
-  background-color: var(--theme-btn-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary.hover, .btn-secondary:hover {
-  border-color: var(--theme-btn-secondary--border-color--hover) !important;
-  background-color: var(--theme-btn-secondary--background--hover) !important;
-  color: var(--theme-btn-secondary--color--hover) !important;
+  border-color: var(--theme-btn-secondary--border-color--hover);
+  background-color: var(--theme-btn-secondary--background--hover);
+  color: var(--theme-btn-secondary--color--hover);
 }
 .btn-secondary.selected.hover, .btn-secondary.selected:hover {
-  background-color: var(--theme-btn-secondary--background--selected-hover);
-  color: var(--theme-btn-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
-  border-color: var(--theme-btn-secondary--border-color--active) !important;
-  background-color: var(--theme-btn-secondary--background--active) !important;
-  color: var(--theme-btn-secondary--color--active) !important;
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
 }
 .btn-secondary.selected:not(:disabled):not(.disabled):active, .btn-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-secondary--background--selected-active);
-  color: var(--theme-btn-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary.disabled, .btn-secondary:disabled {
   pointer-events: none;
@@ -262,25 +266,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-outline-secondary.selected {
-  background-color: var(--theme-btn-outline-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary.hover, .btn-outline-secondary:hover {
-  border-color: var(--theme-btn-outline-secondary--border-color--hover) !important;
-  background-color: var(--theme-btn-outline-secondary--background--hover) !important;
-  color: var(--theme-btn-outline-secondary--color--hover) !important;
+  border-color: var(--theme-btn-outline-secondary--border-color--hover);
+  background-color: var(--theme-btn-outline-secondary--background--hover);
+  color: var(--theme-btn-outline-secondary--color--hover);
 }
 .btn-outline-secondary.selected.hover, .btn-outline-secondary.selected:hover {
-  background-color: var(--theme-btn-outline-secondary--background--selected-hover);
-  color: var(--theme-btn-outline-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
-  border-color: var(--theme-btn-outline-secondary--border-color--active) !important;
-  background-color: var(--theme-btn-outline-secondary--background--active) !important;
-  color: var(--theme-btn-outline-secondary--color--active) !important;
+  border-color: var(--theme-btn-outline-secondary--border-color--active);
+  background-color: var(--theme-btn-outline-secondary--background--active);
+  color: var(--theme-btn-outline-secondary--color--active);
 }
 .btn-outline-secondary.selected:not(:disabled):not(.disabled):active, .btn-outline-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-outline-secondary--background--selected-active);
-  color: var(--theme-btn-outline-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
   pointer-events: none;
@@ -308,23 +313,24 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-invisible-secondary.selected {
-  background-color: var(--theme-btn-invisible-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary.hover, .btn-invisible-secondary:hover {
-  background-color: var(--theme-btn-invisible-secondary--background--hover) !important;
-  color: var(--theme-btn-invisible-secondary--color--hover) !important;
+  background-color: var(--theme-btn-invisible-secondary--background--hover);
+  color: var(--theme-btn-invisible-secondary--color--hover);
 }
 .btn-invisible-secondary.selected.hover, .btn-invisible-secondary.selected:hover {
-  background-color: var(--theme-btn-invisible-secondary--background--selected-hover);
-  color: var(--theme-btn-invisible-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary:not(:disabled):not(.disabled):active, .btn-invisible-secondary:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-secondary--background--active) !important;
-  color: var(--theme-btn-invisible-secondary--color--active) !important;
+  background-color: var(--theme-btn-invisible-secondary--background--active);
+  color: var(--theme-btn-invisible-secondary--color--active);
 }
 .btn-invisible-secondary.selected:not(:disabled):not(.disabled):active, .btn-invisible-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-secondary--background--selected-active);
-  color: var(--theme-btn-invisible-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
   pointer-events: none;
@@ -411,20 +417,20 @@
 :host .link-button:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .link-button:not(.disabled):not(:disabled):hover {
+:host .link-button:not(.disabled):not(:disabled):hover, :host .link-button:not(.disabled):not(:disabled):hover {
   color: var(--theme-color-dynamic--hover);
 }
-:host .link-button:not(.disabled):not(:disabled):hover .link {
+:host .link-button:not(.disabled):not(:disabled):hover .link, :host .link-button:not(.disabled):not(:disabled):hover .link {
   text-decoration: underline;
   text-underline-offset: 0.2rem;
 }
 :host .link-button:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .link-button:not(.disabled):not(:disabled):active {
+:host .link-button:not(.disabled):not(:disabled):active, :host .link-button:not(.disabled):not(:disabled).active {
   color: var(--theme-color-dynamic--active);
 }
-:host .link-button:not(.disabled):not(:disabled):active .link {
+:host .link-button:not(.disabled):not(:disabled):active .link, :host .link-button:not(.disabled):not(:disabled).active .link {
   text-decoration: underline;
   text-underline-offset: 0.2rem;
 }

package/dist/collection/components/link-button/link-button.js

@@ -20,7 +20,7 @@ export class LinkButton {
     return (h(Host, null, h("a", { title: this.url, tabindex: "0", class: {
         'link-button': true,
         disabled: this.disabled,
-      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: "chevron-right-small", size: "16" }), h("div", { class: {
+      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { class: {
         link: true,
         disabled: this.disabled,
       } }, h("slot", null)))));

package/dist/collection/components/link-button/link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button/link-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM;QAEnB,eAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW;QACrE,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;WACxB;UAED,eAAa,CACT,CACJ,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon class=\"icon\" name=\"chevron-right-small\" size=\"16\"></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button/link-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM;QAEnB,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,GACA;QACX,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;WACxB;UAED,eAAa,CACT,CACJ,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon\n            class=\"icon\"\n            name={'chevron-right-small'}\n            size=\"16\"\n          ></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,7 +42,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * 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.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   position: relative;
   width: 100%;
@@ -53,6 +65,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+: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;

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

@@ -8,6 +8,8 @@
  */
 import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { useContextProvider } from '../utils/context';
 export class MapNavigation {
   constructor() {
     this.applicationName = undefined;
@@ -35,6 +37,12 @@ export class MapNavigation {
     this.appendMenu();
     this.closeOverlay();
   }
+  componentWillLoad() {
+    useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'map-navigation',
+    });
+  }
   appendMenu() {
     this.menu.addEventListener('mapExpandChange', (event) => {
       const state = !event.detail;
@@ -147,7 +155,7 @@ export class MapNavigation {
     this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
   }
   render() {
-    return (h(Host, null, h("slot", { name: "menu" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { slot: "logo", name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: {
+    return (h(Host, null, h("slot", { name: "menu" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { slot: "logo", name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: {
         'map-nav-header-content': true,
         'bg-2': true,
         empty: !this.hasContentHeader,

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

@@ -1 +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';\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  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('d-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('d-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('d-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('d-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=\"context-menu\"\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"]}
+{"version":3,"file":"map-navigation.js","sourceRoot":"","sources":["../../../src/components/map-navigation/map-navigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,MAAM,OAAO,aAAa;;;;2BAmBE,IAAI;yBAYL,IAAI;4BACD,KAAK;;EAEjC,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAED,IAAI,WAAW;IACb,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EAC3D,CAAC;EAED,IAAI,UAAU;IACZ,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EACpE,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EACvE,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;EAC/D,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,iBAAiB;IACf,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,wBAAwB,EAAE;MAC7D,UAAU,EAAE,KAAK;MACjB,IAAI,EAAE,gBAAgB;KACvB,CAAC,CAAC;EACL,CAAC;EAEO,UAAU;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,iBAAiB,EACjB,CAAC,KAA2B,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;MAC5B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CACF,CAAC;IACF,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;EACnC,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,aAAa,CAAC,IAAc;IAChC,IAAI,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1C;IAED,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;SAAM;MACL,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EAChD,CAAC;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,aAAa,CAAC,WAAW;MACnC,UAAU,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC;MAC5B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MACvC,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAEO,WAAW;IACjB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,aAAa,CAAC,WAAW;MACnC,UAAU,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;MAC5B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE,GAAG,EAAE;QACV,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MAC1C,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAED;;;;;;;;KAQG;EAEH,KAAK,CAAC,WAAW,CACf,IAAY,EACZ,SAAsB,EACtB,IAAa,EACb,KAAc;IAEd,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,aAAa,CAAC,QAAQ;MAChC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE,GAAG,EAAE;QACV,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MAC1C,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC5E,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC7C,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC3C,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC3C,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChD,eAAe,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAC1E,eAAe,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;EAChD,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,YAAY;IAChB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,aAAa,CAAC,QAAQ;MAChC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,GAAG,EAAE;;QACb,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;UACjB,OAAO;SACR;QACD,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,0CAAE,MAAM,EAAE,CAAC;QAClC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MACvC,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAEO,qBAAqB,CAAC,CAAQ;IACpC,MAAM,KAAK,GAAI,CAAC,CAAC,aAAiC,CAAC,aAAa,CAAC;MAC/D,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,MAAM,GAAQ;MACzB,WAAK,KAAK,EAAC,SAAS;QAClB,WAAK,KAAK,EAAC,iBAAiB;UAC1B,WAAK,KAAK,EAAC,gBAAgB;YACzB,6BACE,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAC,sBAAsB;cAE5B,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,CACpB;UACN,WAAK,KAAK,EAAC,yBAAyB;YAClC,WAAK,KAAK,EAAC,gCAAgC;cACzC,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,eAAe,CAAO;cACtD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,EAAE,CACH,CAAC,CAAC,CAAC,CACF,sBACE,IAAI,EAAE,cAAc,EACpB,KAAK,QACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAC5B,CACnB,CACG;YACN,WAAK,KAAK,EAAC,8BAA8B;cACvC,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,CACF,CACF;QACN,WAAK,KAAK,EAAC,SAAS;UAClB,WACE,KAAK,EAAE;cACL,wBAAwB,EAAE,IAAI;cAC9B,MAAM,EAAE,IAAI;cACZ,KAAK,EAAE,CAAC,IAAI,CAAC,gBAAgB;aAC9B;YAED,YACE,IAAI,EAAC,gBAAgB,EACrB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC5C,CACJ;UACN;YACE,eAAa;YACb,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACH,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1PuB,yBAAW,GAAG,GAAG,CAAC;AAClB,sBAAQ,GAAG,GAAG,CAAC","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';\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('d-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('d-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('d-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('d-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={'context-menu'}\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"]}

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

@@ -1,3 +1,19 @@
+/*
+ * 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: 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: 2023 Siemens AG
  *
@@ -187,6 +203,10 @@ a {
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   position: absolute;
   width: 100%;
   height: 100%;
@@ -195,6 +215,35 @@ a {
   left: 0;
   background-color: var(--theme-overlay--background);
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+: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 .overlay-header {
   display: flex;
   position: relative;
@@ -240,4 +289,11 @@ a {
           margin-inline-start: auto;
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
+}
+:host .d-none {
+  display: none;
+}
+
+:host(.d-none) {
+  display: none;
 }

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

@@ -49,10 +49,10 @@ export class MapNavigationOverlay {
         'background-color': this.color
           ? `var(--theme-${this.color})`
           : '',
-      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", ghost: true, icon: "close", size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
   }
   static get is() { return "ix-map-navigation-overlay"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["map-navigation-overlay.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"map-navigation-overlay.js","sourceRoot":"","sources":["../../../src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAO5B,MAAM,OAAO,oBAAoB;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE,GAAG,EAAE;QACV,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MAC9C,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC3C,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,gBAAgB;QACzB,WACE,KAAK,EAAE;YACL,iBAAiB,EAAE,IAAI;YACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;WACjE,EACD,KAAK,EAAE;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;cAC5B,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG;cAC9B,CAAC,CAAC,EAAE;WACP,GACI;QACP,WAAK,KAAK,EAAC,wBAAwB;UACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;UAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH;QACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAClB,CACd;MAEN,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC","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  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-map-navigation-overlay',\n  styleUrl: 'map-navigation-overlay.scss',\n  scoped: true,\n})\nexport class MapNavigationOverlay {\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n  /**\n   * Title of overlay\n   */\n  @Prop() name: string;\n\n  /**\n   * Icon of overlay\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Event closed\n   */\n  @Event() closeClick: EventEmitter;\n\n  componentWillLoad() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.hostElement.classList.remove('d-none');\n      },\n    });\n  }\n\n  private closeOverlay() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.closeClick.emit();\n        this.hostElement.classList.add('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"overlay-header\">\n          <div\n            class={{\n              'color-indicator': true,\n              'd-none': this.color === 'undefined' || this.color === undefined,\n            }}\n            style={{\n              'background-color': this.color\n                ? `var(--theme-${this.color})`\n                : '',\n            }}\n          ></div>\n          <div class=\"overlay-header-content\">\n            <ix-icon size=\"32\" name={this.icon}></ix-icon>\n            <span class=\"overlay-header-title\" title={this.name}>\n              {this.name}\n            </span>\n          </div>\n          <ix-icon-button\n            class=\"overlay-close\"\n            ghost\n            icon=\"close\"\n            size=\"24\"\n            onClick={() => this.closeOverlay()}\n          ></ix-icon-button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"map-navigation-overlay.js","sourceRoot":"","sources":["../../../src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAO5B,MAAM,OAAO,oBAAoB;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE,GAAG,EAAE;QACV,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MAC9C,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC3C,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,gBAAgB;QACzB,WACE,KAAK,EAAE;YACL,iBAAiB,EAAE,IAAI;YACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;WACjE,EACD,KAAK,EAAE;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;cAC5B,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG;cAC9B,CAAC,CAAC,EAAE;WACP,GACI;QACP,WAAK,KAAK,EAAC,wBAAwB;UACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;UAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH;QACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAClB,CACd;MAEN,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC","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  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-map-navigation-overlay',\n  styleUrl: 'map-navigation-overlay.scss',\n  shadow: true,\n})\nexport class MapNavigationOverlay {\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n  /**\n   * Title of overlay\n   */\n  @Prop() name: string;\n\n  /**\n   * Icon of overlay\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Event closed\n   */\n  @Event() closeClick: EventEmitter;\n\n  componentWillLoad() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.hostElement.classList.remove('d-none');\n      },\n    });\n  }\n\n  private closeOverlay() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.closeClick.emit();\n        this.hostElement.classList.add('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"overlay-header\">\n          <div\n            class={{\n              'color-indicator': true,\n              'd-none': this.color === 'undefined' || this.color === undefined,\n            }}\n            style={{\n              'background-color': this.color\n                ? `var(--theme-${this.color})`\n                : '',\n            }}\n          ></div>\n          <div class=\"overlay-header-content\">\n            <ix-icon size=\"32\" name={this.icon}></ix-icon>\n            <span class=\"overlay-header-title\" title={this.name}>\n              {this.name}\n            </span>\n          </div>\n          <ix-icon-button\n            class=\"overlay-close\"\n            ghost\n            icon={'close'}\n            size=\"24\"\n            onClick={() => this.closeOverlay()}\n          ></ix-icon-button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}