@siemens/ix 1.4.0-beta.0 → 1.4.0-beta.2

package/dist/collection/components/icon/icon.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/icon/icon.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/input-group/input-group.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/input-group/input-group.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/kpi/kpi.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -35,7 +35,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/kpi/kpi.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -179,7 +179,7 @@ a {
 }
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu/burger-menu.css

@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  width: 2.5rem;
+  border-radius: var(--theme-btn--border-radius);
+}
+:host svg {
+  display: inline-block;
+  position: relative;
+}
+:host .line {
+  fill: var(--theme-menu-btn--color);
+  opacity: 1;
+  x: 2px;
+  transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;
+  transform-origin: center;
+}
+
+:host(:hover) {
+  background-color: var(--theme-menu-btn--background--hover);
+  border-radius: var(--theme-btn--border-radius);
+}
+
+:host(:active) {
+  background-color: var(--theme-menu-btn--background--active);
+  border-radius: var(--theme-btn--border-radius);
+}
+
+:host(.expanded) svg .line-1 {
+  opacity: 1;
+  transform: rotate(-45deg);
+  y: 11px;
+}
+:host(.expanded) svg .line-2 {
+  opacity: 0;
+  x: 9;
+}
+:host(.expanded) svg .line-3 {
+  opacity: 1;
+  transform: rotate(45deg);
+  y: 11px;
+}

package/dist/collection/components/menu/burger-menu.js

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+/**
+ * @internal
+ */
+export class BurgerMenu {
+  constructor() {
+    this.expanded = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+  }
+  static get is() { return "ix-burger-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./burger-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["burger-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Is menu displayed as expanded"
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/menu/menu.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -43,46 +43,15 @@ ix-menu .menu {
   height: 100%;
   -webkit-padding-after: 1rem;
           padding-block-end: 1rem;
+  overflow: hidden;
   background-color: var(--theme-nav--background);
   transition: width var(--animate-duration);
 }
 ix-menu .menu.expanded {
   box-shadow: var(--theme-navigation--box-shadow);
 }
-ix-menu .menu .burger-menu-button {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.75rem;
-  margin-left: 0.75rem;
-  margin-bottom: 1rem;
-  height: 2rem;
-  width: 2.5rem;
-  border-radius: 0.25rem;
-}
-ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled).hover, ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-ghost--background--hover);
-}
-ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled).active, ix-menu .menu .burger-menu-button:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-ghost--background--active);
-}
-ix-menu .menu .burger-menu-button svg {
-  display: inline-block;
-  fill: var(--theme-menu-btn--color);
-  position: relative;
-}
-ix-menu .menu .burger-menu-button svg .line {
-  opacity: 1;
-  transform: rotate(0) translateY(0) translateX(0);
-  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
-}
-ix-menu .menu .burger-menu-button.expanded svg .line-1 {
-  transform: translate(0.6875rem, -0.05rem) rotate(45deg);
-}
-ix-menu .menu .burger-menu-button.expanded svg .line-2 {
-  opacity: 0;
-}
-ix-menu .menu .burger-menu-button.expanded svg .line-3 {
-  transform: translate(-0.75625rem, 0.8125rem) rotate(-45deg);
+ix-menu .menu .burger-menu {
+  margin: 0.75rem 0 1rem 0.75rem;
 }
 ix-menu .menu-overlay {
   display: block;
@@ -126,6 +95,20 @@ ix-menu .bottom-tab-divider {
   margin-top: auto;
 }
 
+ix-menu.mode-mobile .menu:not(.expanded) {
+  width: 0;
+}
+ix-menu.mode-mobile .menu {
+  padding-top: 2rem;
+}
+ix-menu.mode-mobile .menu .burger-menu {
+  display: none;
+}
+ix-menu.mode-mobile .menu-overlay {
+  left: 0px;
+  width: 100vw;
+}
+
 a[href]:has(> ix-menu-item) {
   text-decoration: none;
 }

package/dist/collection/components/menu/menu.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
+import { menuController } from '../utils/menu-service/menu-service';
 import { convertToRemString } from '../utils/rwd.util';
+import { hostContext, isBasicNavigationLayout } from '../utils/screen/context';
+import { screenMode } from '../utils/screen/service';
 import { themeSwitcher } from '../utils/theme-switcher';
 export class Menu {
   constructor() {
@@ -39,6 +42,7 @@ export class Menu {
     this.mapExpand = true;
     this.activeTab = undefined;
     this.isMoreTabEmpty = false;
+    this.mode = 'desktop';
   }
   onWindowResize() {
     this.visibleMenuItems = this.getMaxTabCount();
@@ -76,7 +80,7 @@ export class Menu {
     return this.hostElement.querySelector('.menu');
   }
   get menuItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab)')).filter(this.isVisible);
+    return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible);
   }
   get menuBottomItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)')).filter(this.isVisible);
@@ -158,7 +162,14 @@ export class Menu {
       subtree: true,
     });
   }
-  disconnectedCallback() { }
+  componentWillLoad() {
+    menuController.register(this.hostElement);
+    const layout = hostContext('ix-basic-navigation', this.hostElement);
+    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {
+      screenMode.onChange.on((mode) => (this.mode = mode));
+      this.mode = screenMode.mode;
+    }
+  }
   componentWillRender() {
     this.appendTabs();
   }
@@ -185,7 +196,7 @@ export class Menu {
     this.activeTab = null;
     if (this.homeTab) {
       this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);
-      this.homeTab.addEventListener('click', this.resetOverlay);
+      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));
     }
     this.menuItems.forEach((item, index) => {
       var _a;
@@ -200,7 +211,7 @@ export class Menu {
       }
       // TODO: Find better solution to handle home tab
       (_a = this.homeTab) === null || _a === void 0 ? void 0 : _a.classList.remove('d-none');
-      item.addEventListener('click', this.resetOverlay);
+      item.addEventListener('click', this.resetOverlay.bind(this));
     });
   }
   appendAvatar() {
@@ -413,6 +424,7 @@ export class Menu {
     if (this.about) {
       this.about.show = this.showAbout;
     }
+    this.toggleMenu(false);
   }
   showMoreButton() {
     const menuItemCount = this.menuItems.length;
@@ -445,15 +457,15 @@ export class Menu {
   render() {
     return (h(Host, { class: {
         expanded: this.expand,
+        [`mode-${this.mode}`]: true,
       } }, h("div", { class: {
         menu: true,
         expanded: this.expand,
       }, onClick: () => {
         this.resetActiveTab();
-      } }, h("div", { onClick: async () => this.toggleMenu(), class: {
-        'burger-menu-button': true,
-        expanded: this.expand,
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32", height: "32" }, h("rect", { class: "line line-1", x: "5", y: "9.5", width: "22", height: "2" }), h("rect", { class: "line line-2", x: "5", y: "15.5", width: "22", height: "2" }), h("rect", { class: "line line-3", x: "5", y: "21.5", width: "22", height: "2" }))), h("div", { id: "avatar-tab-placeholder" }), h("div", { id: "menu-tabs", style: {
+      } }, h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, class: {
+        'burger-menu': true,
+      } }), h("div", { id: "avatar-tab-placeholder" }), h("div", { id: "menu-tabs", style: {
         display: 'contents',
       }, onClick: (event) => {
         if (this.isMenuItemClicked(event)) {
@@ -468,7 +480,10 @@ export class Menu {
       !this.isMenuItemActive(elm) &&
       this.isVisible(elm))
       .map((e) => {
-      return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => e.dispatchEvent(new CustomEvent('click')) }, e.innerText));
+      return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => {
+          this.resetOverlay();
+          e.dispatchEvent(new CustomEvent('click'));
+        } }, e.innerText));
     })))), h("div", { class: "bottom-tab-divider" }), this.enableSettings && !this.isSettingsEmpty ? (h("ix-menu-item", { id: "settings", class: {
         'internal-tab': true,
         'bottom-tab': true,
@@ -776,7 +791,8 @@ export class Menu {
       "countMoreNotifications": {},
       "mapExpand": {},
       "activeTab": {},
-      "isMoreTabEmpty": {}
+      "isMoreTabEmpty": {},
+      "mode": {}
     };
   }
   static get events() {

package/dist/collection/components/menu-about/menu-about.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu-about/menu-about.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu-about-item/menu-about-item.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu-about-item/menu-about-item.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu-about-news/menu-about-news.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *