@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -8,10 +8,12 @@
  */
 import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
+import { ApplicationSidebarToggleEvent } from '../application-sidebar/events';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { applicationLayoutService } from '../utils/application-layout/service';
+import { useContextConsumer } from '../utils/context';
 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() {
@@ -33,8 +35,6 @@ export class Menu {
     this.i18nExpandSidebar = 'Expand sidebar';
     this.expand = false;
     this.pinned = false;
-    this.forceLayout = undefined;
-    this.supportedModes = ['small', 'medium', 'large'];
     this.i18nLegal = 'About & legal information';
     this.i18nSettings = 'Settings';
     this.i18nToggleTheme = 'Toggle theme';
@@ -43,33 +43,24 @@ export class Menu {
     this.showPinned = false;
     this.mapExpand = true;
     this.activeTab = undefined;
-    this.mode = 'large';
+    this.breakpoint = 'lg';
     this.itemsScrollShadowTop = false;
     this.itemsScrollShadowBottom = false;
+    this.applicationLayoutContext = undefined;
   }
   pinnedChange(newPinned) {
-    this.setPinned(this.pinned);
-    if (newPinned) {
-      screenMode.disableModeDetection();
-      screenMode.setMode('large');
-      return;
-    }
-    screenMode.enableModeDetection();
-  }
-  forceLayoutChange(newMode) {
-    if (this.pinned) {
-      console.warn('You cannot force a layout while pinned property is set!');
+    var _a;
+    if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+      console.warn('ix-map-navigation does not support pinning of the menu');
       return;
     }
-    if (!newMode) {
-      screenMode.enableModeDetection();
+    this.setPinned(this.pinned);
+    if (newPinned) {
+      applicationLayoutService.disableBreakpointDetection();
+      applicationLayoutService.setBreakpoint('lg');
       return;
     }
-    screenMode.disableModeDetection();
-    screenMode.setMode(newMode);
-  }
-  supportedModesChange(modes) {
-    screenMode.setSupportedMods(modes);
+    applicationLayoutService.enableBreakpointDetection();
   }
   get popoverArea() {
     return this.hostElement.shadowRoot.querySelector('#popover-area');
@@ -110,7 +101,7 @@ export class Menu {
   get aboutPopoverContainer() {
     return this.hostElement.querySelector('.about-news');
   }
-  get aboutsNewsPopover() {
+  get aboutNewsPopover() {
     var _a;
     return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
   }
@@ -136,20 +127,19 @@ export class Menu {
     if (this.pinned) {
       this.pinnedChange(this.pinned);
     }
-    if (this.forceLayout) {
-      this.forceLayoutChange(this.forceLayout);
-    }
-    if (this.supportedModes !== undefined && this.supportedModes.length > 0) {
-      this.supportedModesChange(this.supportedModes);
-    }
   }
   componentWillLoad() {
+    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+      this.applicationLayoutContext = ctx;
+      if (ctx.hideHeader === true) {
+        this.onBreakpointChange('md');
+        return;
+      }
+      this.onBreakpointChange(applicationLayoutService.breakpoint);
+    }, true);
     menuController.register(this.hostElement);
-    const layout = hostContext('ix-basic-navigation', this.hostElement);
-    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {
-      screenMode.onChange.on((mode) => this.onModeChange(mode));
-      this.onModeChange(screenMode.mode);
-    }
+    applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
+    this.onBreakpointChange(applicationLayoutService.breakpoint);
   }
   componentWillRender() {
     this.appendTabs();
@@ -161,12 +151,23 @@ export class Menu {
     this.showPinned = pinned;
     menuController.setIsPinned(pinned);
   }
-  onModeChange(mode) {
-    if (!this.supportedModes.includes(mode)) {
+  onBreakpointChange(mode) {
+    var _a;
+    if (!this.applicationLayoutContext && mode === 'sm') {
+      return;
+    }
+    if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+      this.breakpoint = 'md';
       return;
     }
-    this.mode = mode;
-    if (this.mode === 'large') {
+    if (!this.applicationLayoutContext) {
+      return;
+    }
+    if (this.applicationLayoutContext.hideHeader && mode === 'sm') {
+      return;
+    }
+    this.breakpoint = mode;
+    if (this.breakpoint === 'lg') {
       this.setPinned(true);
       this.toggleMenu(true);
       return;
@@ -193,21 +194,20 @@ export class Menu {
   }
   appendAboutNewsPopover() {
     var _a;
-    if (!this.aboutsNewsPopover) {
+    if (!this.aboutNewsPopover) {
       return;
     }
-    this.aboutsNewsPopover.style.bottom =
-      this.getAboutPopoverVerticalPosition();
-    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutsNewsPopover))) {
+    this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();
+    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutNewsPopover))) {
       const showMore = () => {
         var _a;
-        if (((_a = this.aboutsNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
-          this.about.activeTabLabel = this.aboutsNewsPopover.aboutItemLabel;
+        if (((_a = this.aboutNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
+          this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;
           this.toggleAbout(true);
         }
       };
-      this.aboutsNewsPopover.addEventListener('showMore', showMore.bind(this));
-      document.body.appendChild(this.aboutsNewsPopover);
+      this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));
+      document.body.appendChild(this.aboutNewsPopover);
     }
   }
   /**
@@ -233,8 +233,8 @@ export class Menu {
     else {
       this.expand = !this.expand;
     }
-    if (this.aboutsNewsPopover) {
-      this.aboutsNewsPopover.expanded = this.expand;
+    if (this.aboutNewsPopover) {
+      this.aboutNewsPopover.expanded = this.expand;
     }
     this.expandChange.emit(this.expand);
     this.isTransitionDisabled = false;
@@ -370,10 +370,18 @@ export class Menu {
       this.onOverlayClose();
     }
   }
+  isHiddenFromViewport() {
+    return this.breakpoint === 'sm' && this.expand === false;
+  }
+  sidebarToggle() {
+    this.mapExpandChange.emit(this.mapExpand);
+    this.hostElement.dispatchEvent(new ApplicationSidebarToggleEvent(this.mapExpand));
+  }
   render() {
+    var _a;
     return (h(Host, { class: {
         expanded: this.expand,
-        [`mode-${this.mode}`]: true,
+        [`breakpoint-${this.breakpoint}`]: true,
       }, slot: "menu" }, h("aside", { class: {
         menu: true,
         expanded: this.expand,
@@ -387,26 +395,26 @@ export class Menu {
         'tabs--shadow': true,
         'tabs--shadow-top': true,
         'tabs--shadow--show': this.itemsScrollShadowTop,
-      } }), h("div", { class: "tabs", onScroll: () => this.handleOverflowIndicator() }, h("slot", null)), h("div", { class: {
+      } }), h("div", { class: "tabs", onScroll: () => this.handleOverflowIndicator() }, this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { class: {
         'tabs--shadow': true,
         'tabs--shadow-bottom': true,
         'tabs--shadow--show': this.itemsScrollShadowBottom,
-      } }))), h("div", { class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { id: "settings", class: {
+      } }))), h("div", { class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showSettings,
-      }, icon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("slot", { name: "bottom" }), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { id: "aboutAndLegal", class: {
+      }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("div", { onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { name: "bottom" })), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showAbout,
-      }, icon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
+      }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'bulb' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
         'menu-overlay': true,
         visible: this.isOverlayVisible(),
         expanded: this.expand,
       }, onTransitionEnd: () => {
         this.isTransitionDisabled = true;
         this.checkTransition();
-      } }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null)));
+      } }, h("div", { class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
   }
   static get is() { return "ix-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -619,49 +627,6 @@ export class Menu {
         "reflect": false,
         "defaultValue": "false"
       },
-      "forceLayout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Mode | undefined",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "Mode": {
-              "location": "import",
-              "path": "../utils/screen/mode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Change the responsive layout of the menu structure"
-        },
-        "attribute": "force-layout",
-        "reflect": false
-      },
-      "supportedModes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Mode[]",
-          "resolved": "Mode[]",
-          "references": {
-            "Mode": {
-              "location": "import",
-              "path": "../utils/screen/mode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Supported layouts"
-        },
-        "defaultValue": "['small', 'medium', 'large']"
-      },
       "i18nLegal": {
         "type": "string",
         "mutable": false,
@@ -759,9 +724,10 @@ export class Menu {
       "showPinned": {},
       "mapExpand": {},
       "activeTab": {},
-      "mode": {},
+      "breakpoint": {},
       "itemsScrollShadowTop": {},
-      "itemsScrollShadowBottom": {}
+      "itemsScrollShadowBottom": {},
+      "applicationLayoutContext": {}
     };
   }
   static get events() {
@@ -906,9 +872,6 @@ export class Menu {
     return [{
         "propName": "pinned",
         "methodName": "pinnedChange"
-      }, {
-        "propName": "supportedModes",
-        "methodName": "supportedModesChange"
       }];
   }
   static get listeners() {

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.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  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { hostContext, isBasicNavigationLayout } from '../utils/screen/context';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   * Accessibility i18n label for the burger menu of the sidebar\n   */\n  @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n  /**\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu stays pinned to the left\n   */\n  @Prop() pinned = false;\n  @Watch('pinned')\n  pinnedChange(newPinned: boolean) {\n    this.setPinned(this.pinned);\n    if (newPinned) {\n      screenMode.disableModeDetection();\n      screenMode.setMode('large');\n      return;\n    }\n\n    screenMode.enableModeDetection();\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceLayout: Mode | undefined;\n  forceLayoutChange(newMode: Mode | undefined) {\n    if (this.pinned) {\n      console.warn('You cannot force a layout while pinned property is set!');\n      return;\n    }\n\n    if (!newMode) {\n      screenMode.enableModeDetection();\n      return;\n    }\n\n    screenMode.disableModeDetection();\n    screenMode.setMode(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() supportedModes: Mode[] = ['small', 'medium', 'large'];\n  @Watch('supportedModes')\n  supportedModesChange(modes: Mode[]) {\n    screenMode.setSupportedMods(modes);\n  }\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n\n  @State() showPinned = false;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement | null;\n  @State() mode: Mode = 'large';\n  @State() itemsScrollShadowTop = false;\n  @State() itemsScrollShadowBottom = false;\n\n  private isTransitionDisabled = false;\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.shadowRoot!.querySelector('#popover-area');\n  }\n\n  get menu() {\n    return this.hostElement.shadowRoot!.querySelector('.menu');\n  }\n\n  get menuItemsContainer(): HTMLDivElement {\n    return this.menu!.querySelector('.tabs')!;\n  }\n\n  get overlayContainer() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.menu-overlay'\n    ) as HTMLDivElement;\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.internal-tab ix-dropdown'\n    )!;\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.shadowRoot!.querySelectorAll(\n        '.internal-tab ix-dropdown .appended'\n      ).length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.shadowRoot!.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.active-more-tab ix-menu-item'\n    );\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news')!;\n  }\n\n  get aboutsNewsPopover(): HTMLIxMenuAboutNewsElement {\n    return (\n      document.querySelector('ix-menu-about-news') ??\n      this.hostElement.querySelector('ix-menu-about-news')!\n    );\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement | null {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement | null {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(\n        this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n      ).length === 0\n    );\n  }\n\n  get tabsContainer() {\n    return this.hostElement;\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.handleOverflowIndicator();\n    });\n\n    if (this.pinned) {\n      this.pinnedChange(this.pinned);\n    }\n\n    if (this.forceLayout) {\n      this.forceLayoutChange(this.forceLayout);\n    }\n\n    if (this.supportedModes !== undefined && this.supportedModes.length > 0) {\n      this.supportedModesChange(this.supportedModes);\n    }\n  }\n\n  componentWillLoad() {\n    menuController.register(this.hostElement);\n    const layout = hostContext('ix-basic-navigation', this.hostElement);\n    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {\n      screenMode.onChange.on((mode) => this.onModeChange(mode));\n      this.onModeChange(screenMode.mode);\n    }\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.appendFragments();\n  }\n\n  private setPinned(pinned: boolean) {\n    this.showPinned = pinned;\n    menuController.setIsPinned(pinned);\n  }\n\n  private onModeChange(mode: Mode) {\n    if (!this.supportedModes.includes(mode)) {\n      return;\n    }\n    this.mode = mode;\n\n    if (this.mode === 'large') {\n      this.setPinned(true);\n      this.toggleMenu(true);\n      return;\n    }\n\n    this.setPinned(false);\n    this.toggleMenu(false);\n  }\n\n  private appendFragments() {\n    this.appendAboutNewsPopover();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutsNewsPopover) {\n      return;\n    }\n\n    this.aboutsNewsPopover.style.bottom =\n      this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutsNewsPopover)) {\n      const showMore = () => {\n        if (this.aboutsNewsPopover?.aboutItemLabel && this.about) {\n          this.about.activeTabLabel = this.aboutsNewsPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutsNewsPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutsNewsPopover);\n    }\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutsNewsPopover) {\n      this.aboutsNewsPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n\n    this.isTransitionDisabled = false;\n    this.checkTransition();\n  }\n\n  /**\n   * Disable transition of overlay while menu animation is running.\n   */\n  private checkTransition() {\n    const container = this.overlayContainer;\n\n    if (!container) {\n      return;\n    }\n\n    if (this.isTransitionDisabled) {\n      container.style.transitionProperty = 'left';\n    } else {\n      container.style.transitionProperty = 'all';\n    }\n  }\n\n  private isOverlayVisible() {\n    return this.showAbout || this.showSettings;\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (!this.settings) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showSettings = show;\n      this.settings.show = this.showSettings;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (!this.about) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showAbout = show;\n      this.about.show = this.showAbout;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = false;\n    }\n\n    if (this.about) {\n      this.about.show = false;\n    }\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'navigation-left' : 'navigation-right';\n  }\n\n  private isMenuItemClicked(event: Event) {\n    if (event.target instanceof HTMLElement) {\n      return event.target.tagName === 'IX-MENU-ITEM';\n    }\n\n    return false;\n  }\n\n  @Listen('resize', { target: 'window' })\n  private handleOverflowIndicator() {\n    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n    this.itemsScrollShadowTop = scrollTop > 0;\n    this.itemsScrollShadowBottom =\n      Math.round(scrollTop + clientHeight) < scrollHeight;\n  }\n\n  @Listen('close')\n  onOverlayClose() {\n    this.animateOverlayFadeOut(() => {\n      this.resetOverlay();\n    });\n  }\n\n  private animateOverlayFadeIn() {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: [0, 'blur(1rem)'],\n        translateX: ['-4rem', 0],\n        opacity: [0, 1],\n        easing: 'easeInSine',\n        begin: () => {\n          if (this.showPinned) {\n            return;\n          }\n\n          this.toggleMenu(false);\n        },\n      });\n    });\n  }\n\n  private animateOverlayFadeOut(onComplete: Function) {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: ['blur(1rem)', 0],\n        translateX: [0, '-4rem'],\n        opacity: [1, 0],\n        easing: 'easeInSine',\n        complete: () => onComplete(),\n      });\n    });\n  }\n\n  private onMenuItemsClick(event: Event) {\n    if (this.isMenuItemClicked(event)) {\n      if (!this.showPinned) {\n        this.toggleMenu(false);\n      }\n      this.onOverlayClose();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`mode-${this.mode}`]: true,\n        }}\n        slot=\"menu\"\n      >\n        <aside\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            ixAriaLabel={this.i18nExpandSidebar}\n            pinned={this.showPinned}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div class=\"menu-avatar\">\n            <slot name=\"ix-menu-avatar\"></slot>\n          </div>\n\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(e) => this.onMenuItemsClick(e)}\n          >\n            <div class=\"tabs-top\">\n              <slot name=\"home\"></slot>\n            </div>\n            <div class=\"tabs-shadow-container\">\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-top': true,\n                  'tabs--shadow--show': this.itemsScrollShadowTop,\n                }}\n              ></div>\n              <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n                <slot></slot>\n              </div>\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-bottom': true,\n                  'tabs--shadow--show': this.itemsScrollShadowBottom,\n                }}\n              ></div>\n            </div>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.settings ? (\n            <ix-menu-item\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              icon=\"cogwheel\"\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <slot name=\"bottom\"></slot>\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              icon=\"info\"\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              tabIcon=\"bulb\"\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand ? (\n            <ix-menu-item\n              id=\"menu-collapse\"\n              onClick={() => this.mapExpandChange.emit(this.mapExpand)}\n              class=\"internal-tab bottom-tab\"\n              icon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </aside>\n        <div\n          class={{\n            'menu-overlay': true,\n            visible: this.isOverlayVisible(),\n            expanded: this.expand,\n          }}\n          onTransitionEnd={() => {\n            this.isTransitionDisabled = true;\n            this.checkTransition();\n          }}\n        >\n          {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n          {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.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  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   * Accessibility i18n label for the burger menu of the sidebar\n   */\n  @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n  /**\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu stays pinned to the left\n   */\n  @Prop() pinned = false;\n  @Watch('pinned')\n  pinnedChange(newPinned: boolean) {\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      console.warn('ix-map-navigation does not support pinning of the menu');\n      return;\n    }\n    this.setPinned(this.pinned);\n    if (newPinned) {\n      applicationLayoutService.disableBreakpointDetection();\n      applicationLayoutService.setBreakpoint('lg');\n      return;\n    }\n\n    applicationLayoutService.enableBreakpointDetection();\n  }\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n\n  @State() showPinned = false;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement | null;\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() itemsScrollShadowTop = false;\n  @State() itemsScrollShadowBottom = false;\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n  private isTransitionDisabled = false;\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.shadowRoot!.querySelector('#popover-area');\n  }\n\n  get menu() {\n    return this.hostElement.shadowRoot!.querySelector('.menu');\n  }\n\n  get menuItemsContainer(): HTMLDivElement {\n    return this.menu!.querySelector('.tabs')!;\n  }\n\n  get overlayContainer() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.menu-overlay'\n    ) as HTMLDivElement;\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.internal-tab ix-dropdown'\n    )!;\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.shadowRoot!.querySelectorAll(\n        '.internal-tab ix-dropdown .appended'\n      ).length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.shadowRoot!.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.active-more-tab ix-menu-item'\n    );\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news')!;\n  }\n\n  get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n    return (\n      document.querySelector('ix-menu-about-news') ??\n      this.hostElement.querySelector('ix-menu-about-news')!\n    );\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement | null {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement | null {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(\n        this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n      ).length === 0\n    );\n  }\n\n  get tabsContainer() {\n    return this.hostElement;\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.handleOverflowIndicator();\n    });\n\n    if (this.pinned) {\n      this.pinnedChange(this.pinned);\n    }\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        this.applicationLayoutContext = ctx;\n        if (ctx.hideHeader === true) {\n          this.onBreakpointChange('md');\n          return;\n        }\n\n        this.onBreakpointChange(applicationLayoutService.breakpoint);\n      },\n      true\n    );\n\n    menuController.register(this.hostElement);\n    applicationLayoutService.onChange.on((breakpoint) =>\n      this.onBreakpointChange(breakpoint)\n    );\n    this.onBreakpointChange(applicationLayoutService.breakpoint);\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.appendFragments();\n  }\n\n  private setPinned(pinned: boolean) {\n    this.showPinned = pinned;\n    menuController.setIsPinned(pinned);\n  }\n\n  private onBreakpointChange(mode: Breakpoint) {\n    if (!this.applicationLayoutContext && mode === 'sm') {\n      return;\n    }\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      this.breakpoint = 'md';\n      return;\n    }\n    if (!this.applicationLayoutContext) {\n      return;\n    }\n\n    if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n      return;\n    }\n\n    this.breakpoint = mode;\n\n    if (this.breakpoint === 'lg') {\n      this.setPinned(true);\n      this.toggleMenu(true);\n      return;\n    }\n\n    this.setPinned(false);\n    this.toggleMenu(false);\n  }\n\n  private appendFragments() {\n    this.appendAboutNewsPopover();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutNewsPopover) {\n      return;\n    }\n\n    this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n      const showMore = () => {\n        if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n          this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutNewsPopover);\n    }\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutNewsPopover) {\n      this.aboutNewsPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n\n    this.isTransitionDisabled = false;\n    this.checkTransition();\n  }\n\n  /**\n   * Disable transition of overlay while menu animation is running.\n   */\n  private checkTransition() {\n    const container = this.overlayContainer;\n\n    if (!container) {\n      return;\n    }\n\n    if (this.isTransitionDisabled) {\n      container.style.transitionProperty = 'left';\n    } else {\n      container.style.transitionProperty = 'all';\n    }\n  }\n\n  private isOverlayVisible() {\n    return this.showAbout || this.showSettings;\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (!this.settings) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showSettings = show;\n      this.settings.show = this.showSettings;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (!this.about) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showAbout = show;\n      this.about.show = this.showAbout;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = false;\n    }\n\n    if (this.about) {\n      this.about.show = false;\n    }\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'navigation-left' : 'navigation-right';\n  }\n\n  private isMenuItemClicked(event: Event) {\n    if (event.target instanceof HTMLElement) {\n      return event.target.tagName === 'IX-MENU-ITEM';\n    }\n\n    return false;\n  }\n\n  @Listen('resize', { target: 'window' })\n  private handleOverflowIndicator() {\n    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n    this.itemsScrollShadowTop = scrollTop > 0;\n    this.itemsScrollShadowBottom =\n      Math.round(scrollTop + clientHeight) < scrollHeight;\n  }\n\n  @Listen('close')\n  onOverlayClose() {\n    this.animateOverlayFadeOut(() => {\n      this.resetOverlay();\n    });\n  }\n\n  private animateOverlayFadeIn() {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: [0, 'blur(1rem)'],\n        translateX: ['-4rem', 0],\n        opacity: [0, 1],\n        easing: 'easeInSine',\n        begin: () => {\n          if (this.showPinned) {\n            return;\n          }\n\n          this.toggleMenu(false);\n        },\n      });\n    });\n  }\n\n  private animateOverlayFadeOut(onComplete: Function) {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: ['blur(1rem)', 0],\n        translateX: [0, '-4rem'],\n        opacity: [1, 0],\n        easing: 'easeInSine',\n        complete: () => onComplete(),\n      });\n    });\n  }\n\n  private onMenuItemsClick(event: Event) {\n    if (this.isMenuItemClicked(event)) {\n      if (!this.showPinned) {\n        this.toggleMenu(false);\n      }\n      this.onOverlayClose();\n    }\n  }\n\n  private isHiddenFromViewport() {\n    return this.breakpoint === 'sm' && this.expand === false;\n  }\n\n  private sidebarToggle() {\n    this.mapExpandChange.emit(this.mapExpand);\n\n    this.hostElement.dispatchEvent(\n      new ApplicationSidebarToggleEvent(this.mapExpand)\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"menu\"\n      >\n        <aside\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            ixAriaLabel={this.i18nExpandSidebar}\n            pinned={this.showPinned}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div class=\"menu-avatar\">\n            <slot name=\"ix-menu-avatar\"></slot>\n          </div>\n\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(e) => this.onMenuItemsClick(e)}\n          >\n            <div class=\"tabs-top\">\n              <slot name=\"home\"></slot>\n            </div>\n            <div class=\"tabs-shadow-container\">\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-top': true,\n                  'tabs--shadow--show': this.itemsScrollShadowTop,\n                }}\n              ></div>\n              <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n                {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n                  <slot></slot>\n                ) : null}\n              </div>\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-bottom': true,\n                  'tabs--shadow--show': this.itemsScrollShadowBottom,\n                }}\n              ></div>\n            </div>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.settings ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              icon={'cogwheel'}\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <div onClick={(e) => this.onMenuItemsClick(e)}>\n            <slot name=\"bottom\"></slot>\n          </div>\n\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              icon={'info'}\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              icon={'bulb'}\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"menu-collapse\"\n              onClick={() => this.sidebarToggle()}\n              class=\"internal-tab bottom-tab\"\n              icon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </aside>\n        <div\n          class={{\n            'menu-overlay': true,\n            visible: this.isOverlayVisible(),\n            expanded: this.expand,\n          }}\n          onTransitionEnd={() => {\n            this.isTransitionDisabled = true;\n            this.checkTransition();\n          }}\n        >\n          <div class={'menu-overlay-container'}>\n            {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n          </div>\n          <div class={'menu-overlay-container'}>\n            {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,7 +18,8 @@ test('renders', async ({ mount, page }) => {
       </ix-menu>
     `);
   const element = page.locator('ix-menu');
-  await expect(element).toHaveClass('mode-large hydrated');
+  await expect(element).toHaveClass(/hydrated/);
+  await expect(element).toHaveClass(/breakpoint-lg/);
 });
 test('should stay close after menu click when NOT pinned', async ({ mount, page, }) => {
   await mount(`
@@ -29,13 +30,13 @@ test('should stay close after menu click when NOT pinned', async ({ mount, page,
       </ix-basic-navigation>
     `);
   const menu = page.locator('ix-menu');
-  await menu.evaluate((menu) => {
-    menu.supportedModes = ['medium'];
-  });
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate((menu) => (menu.breakpoints = ['md']));
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
   await expect(menu).toHaveClass(/expanded/);
-  await page.getByRole('listitem').click();
+  await page.locator('ix-menu-item').click();
   await expect(menu).not.toHaveClass(/expanded/);
 });
 test('should stay open after menu click when pinned', async ({ mount, page, }) => {
@@ -50,7 +51,7 @@ test('should stay open after menu click when pinned', async ({ mount, page, }) =
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
   await expect(menu).not.toHaveClass(/expanded/);
-  await page.getByRole('listitem').click();
+  await page.locator('ix-menu-item').click();
   await expect(menu).not.toHaveClass(/expanded/);
 });
 test('should open and close settings', async ({ mount, page }) => {
@@ -143,21 +144,38 @@ test('should close about by item click', async ({ mount, page }) => {
   await clickAboutButton(element, page);
   let about = page.locator('ix-menu-about');
   let settings = page.locator('ix-menu-settings');
-  const menuItem = page
-    .locator('ix-menu-item')
-    .filter({ hasText: 'Random' })
-    .getByRole('listitem');
+  const menuItem = page.locator('ix-menu-item').filter({ hasText: 'Random' });
   await menuItem.click();
   await expect(about).not.toBeVisible();
   await expect(settings).not.toBeVisible();
 });
+test('should close menu by bottom icon click', async ({ mount, page }) => {
+  await mount(`
+    <ix-menu>
+      <ix-menu-item>Random</ix-menu-item>
+      <ix-menu-item slot="bottom">BottomMenuItem</ix-menu-item>
+      <ix-menu-about>
+      </ix-menu-about>
+      <ix-menu-settings>
+      </ix-menu-settings>
+    </ix-menu>
+  `);
+  const element = page.locator('ix-menu');
+  await element.getByRole('button', { name: 'Expand sidebar' }).click();
+  const innerMenu = element.locator('.menu');
+  await expect(innerMenu).toHaveClass(/expanded/);
+  const bottomMenu = element.locator('ix-menu-item[slot="bottom"]');
+  await bottomMenu.click();
+  await expect(innerMenu).not.toHaveClass(/expanded/);
+  await expect(element).toBeVisible();
+});
 async function clickAboutButton(element, page) {
-  const aboutButton = element.locator('#aboutAndLegal');
+  const aboutButton = element.locator('ix-menu-item#aboutAndLegal');
   await aboutButton.click();
   await page.waitForTimeout(1000);
 }
 async function clickSettingsButton(element, page) {
-  const settingsButton = element.locator('#settings');
+  const settingsButton = element.locator('ix-menu-item#settings');
   await settingsButton.click();
   await page.waitForTimeout(1000);
 }

package/dist/collection/components/menu/test/menu.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.ct.js","sourceRoot":"","sources":["../../../../src/components/menu/test/menu.ct.ts"],"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 */\nimport { expect, Locator, Page } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n  await expect(element).toHaveClass('mode-large hydrated');\n});\n\ntest('should stay close after menu click when NOT pinned', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n      <ix-basic-navigation>\n        <ix-menu>\n          <ix-menu-item>Item</ix-menu-item>\n        </ix-menu>\n      </ix-basic-navigation>\n    `);\n  const menu = page.locator('ix-menu');\n  await menu.evaluate((menu: HTMLIxMenuElement) => {\n    menu.supportedModes = ['medium'];\n  });\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  await expect(menu).toHaveClass(/expanded/);\n  await page.getByRole('listitem').click();\n  await expect(menu).not.toHaveClass(/expanded/);\n});\n\ntest('should stay open after menu click when pinned', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n      <ix-basic-navigation>\n        <ix-menu pinned>\n          <ix-menu-item>Item</ix-menu-item>\n        </ix-menu>\n      </ix-basic-navigation>\n    `);\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  await expect(menu).not.toHaveClass(/expanded/);\n\n  await page.getByRole('listitem').click();\n\n  await expect(menu).not.toHaveClass(/expanded/);\n});\n\ntest('should open and close settings', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickSettingsButton(element, page);\n  let settings = page.locator('ix-menu-settings');\n  await expect(settings).toBeVisible();\n\n  const closeButton = settings.getByRole('button');\n  await closeButton.click();\n  await expect(settings).not.toBeVisible();\n\n  // Click same button twice\n  await clickSettingsButton(element, page);\n  await clickSettingsButton(element, page);\n  await expect(settings).not.toBeVisible();\n});\n\ntest('should close settings by about', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickSettingsButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n\n  await clickAboutButton(element, page);\n  await expect(about).toBeVisible();\n  await expect(settings).not.toBeVisible();\n});\n\ntest('should open and close about', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  await expect(about).toBeVisible();\n\n  const closeButton = about.getByRole('button');\n  await closeButton.click();\n  await expect(about).not.toBeVisible();\n\n  // Click same button twice\n  await clickAboutButton(element, page);\n  await clickAboutButton(element, page);\n  await expect(about).not.toBeVisible();\n});\n\ntest('should close about by settings', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n\n  await clickSettingsButton(element, page);\n  await expect(about).not.toBeVisible();\n  await expect(settings).toBeVisible();\n});\n\ntest('should close about by item click', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-item>Random</ix-menu-item>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n  const menuItem = page\n    .locator('ix-menu-item')\n    .filter({ hasText: 'Random' })\n    .getByRole('listitem');\n\n  await menuItem.click();\n  await expect(about).not.toBeVisible();\n  await expect(settings).not.toBeVisible();\n});\n\nasync function clickAboutButton(element: Locator, page: Page) {\n  const aboutButton = element.locator('#aboutAndLegal');\n  await aboutButton.click();\n  await page.waitForTimeout(1000);\n}\n\nasync function clickSettingsButton(element: Locator, page: Page) {\n  const settingsButton = element.locator('#settings');\n  await settingsButton.click();\n  await page.waitForTimeout(1000);\n}\n"]}
+{"version":3,"file":"menu.ct.js","sourceRoot":"","sources":["../../../../src/components/menu/test/menu.ct.ts"],"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 */\nimport { expect, Locator, Page } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n  await expect(element).toHaveClass(/hydrated/);\n  await expect(element).toHaveClass(/breakpoint-lg/);\n});\n\ntest('should stay close after menu click when NOT pinned', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n      <ix-basic-navigation>\n        <ix-menu>\n          <ix-menu-item>Item</ix-menu-item>\n        </ix-menu>\n      </ix-basic-navigation>\n    `);\n  const menu = page.locator('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  await expect(menu).toHaveClass(/expanded/);\n  await page.locator('ix-menu-item').click();\n  await expect(menu).not.toHaveClass(/expanded/);\n});\n\ntest('should stay open after menu click when pinned', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n      <ix-basic-navigation>\n        <ix-menu pinned>\n          <ix-menu-item>Item</ix-menu-item>\n        </ix-menu>\n      </ix-basic-navigation>\n    `);\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  await expect(menu).not.toHaveClass(/expanded/);\n\n  await page.locator('ix-menu-item').click();\n\n  await expect(menu).not.toHaveClass(/expanded/);\n});\n\ntest('should open and close settings', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickSettingsButton(element, page);\n  let settings = page.locator('ix-menu-settings');\n  await expect(settings).toBeVisible();\n\n  const closeButton = settings.getByRole('button');\n  await closeButton.click();\n  await expect(settings).not.toBeVisible();\n\n  // Click same button twice\n  await clickSettingsButton(element, page);\n  await clickSettingsButton(element, page);\n  await expect(settings).not.toBeVisible();\n});\n\ntest('should close settings by about', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickSettingsButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n\n  await clickAboutButton(element, page);\n  await expect(about).toBeVisible();\n  await expect(settings).not.toBeVisible();\n});\n\ntest('should open and close about', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  await expect(about).toBeVisible();\n\n  const closeButton = about.getByRole('button');\n  await closeButton.click();\n  await expect(about).not.toBeVisible();\n\n  // Click same button twice\n  await clickAboutButton(element, page);\n  await clickAboutButton(element, page);\n  await expect(about).not.toBeVisible();\n});\n\ntest('should close about by settings', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n\n  await clickSettingsButton(element, page);\n  await expect(about).not.toBeVisible();\n  await expect(settings).toBeVisible();\n});\n\ntest('should close about by item click', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-item>Random</ix-menu-item>\n        <ix-menu-about>\n        </ix-menu-about>\n        <ix-menu-settings>\n        </ix-menu-settings>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu');\n\n  await clickAboutButton(element, page);\n  let about = page.locator('ix-menu-about');\n  let settings = page.locator('ix-menu-settings');\n  const menuItem = page.locator('ix-menu-item').filter({ hasText: 'Random' });\n\n  await menuItem.click();\n  await expect(about).not.toBeVisible();\n  await expect(settings).not.toBeVisible();\n});\n\ntest('should close menu by bottom icon click', async ({ mount, page }) => {\n  await mount(`\n    <ix-menu>\n      <ix-menu-item>Random</ix-menu-item>\n      <ix-menu-item slot=\"bottom\">BottomMenuItem</ix-menu-item>\n      <ix-menu-about>\n      </ix-menu-about>\n      <ix-menu-settings>\n      </ix-menu-settings>\n    </ix-menu>\n  `);\n\n  const element = page.locator('ix-menu');\n  await element.getByRole('button', { name: 'Expand sidebar' }).click();\n  const innerMenu = element.locator('.menu');\n  await expect(innerMenu).toHaveClass(/expanded/);\n\n  const bottomMenu = element.locator('ix-menu-item[slot=\"bottom\"]');\n  await bottomMenu.click();\n\n  await expect(innerMenu).not.toHaveClass(/expanded/);\n  await expect(element).toBeVisible();\n});\n\nasync function clickAboutButton(element: Locator, page: Page) {\n  const aboutButton = element.locator('ix-menu-item#aboutAndLegal');\n  await aboutButton.click();\n  await page.waitForTimeout(1000);\n}\n\nasync function clickSettingsButton(element: Locator, page: Page) {\n  const settingsButton = element.locator('ix-menu-item#settings');\n  await settingsButton.click();\n  await page.waitForTimeout(1000);\n}\n"]}

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

@@ -197,9 +197,9 @@ a {
 }
 :host .about-header h2 {
   color: var(--theme-nav-overlay-header--color);
-  margin-bottom: 0;
+  margin-bottom: 1rem;
 }
-:host .about-tabs {
+:host ix-tabs {
   margin-bottom: 1.5rem;
 }
 :host ix-menu-about-item {

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

@@ -56,12 +56,12 @@ export class MenuAbout {
     });
   }
   render() {
-    return (h(Host, { class: {
+    return (h(Host, { slot: "ix-menu-about", class: {
         show: this.show,
-      }, slot: "ix-menu-about" }, h("div", { class: "about-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit({
+      } }, h("div", { class: "about-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: 'close', onClick: (e) => this.close.emit({
         name: 'ix-menu-about',
         nativeEvent: e,
-      }) })), h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.getTabItems()), h("div", { class: "about-items" }, h("slot", null))));
+      }) })), h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel) }, this.getTabItems()), h("div", { class: "about-items" }, h("slot", null))));
   }
   static get is() { return "ix-menu-about"; }
   static get encapsulation() { return "shadow"; }