@siemens/ix 1.6.2 → 2.0.0-beta.0

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

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
+import anime from 'animejs';
 import { menuController } from '../utils/menu-service/menu-service';
 import { convertToRemString } from '../utils/rwd.util';
 import { hostContext, isBasicNavigationLayout } from '../utils/screen/context';
@@ -14,7 +15,7 @@ import { screenMode } from '../utils/screen/service';
 import { themeSwitcher } from '../utils/theme-switcher';
 export class Menu {
   constructor() {
-    this.domObserver = new MutationObserver(this.onDomChange.bind(this));
+    this.isTransitionDisabled = false;
     // FBC IAM workaround #488
     this.isVisible = (elm) => {
       var _a, _b;
@@ -29,55 +30,58 @@ export class Menu {
     this.applicationName = undefined;
     this.applicationDescription = '';
     this.maxVisibleMenuItems = 9;
+    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';
     this.i18nExpand = ' Expand';
     this.i18nCollapse = 'Collapse';
-    this.i18nMore = 'More…';
-    this.expand = false;
-    this.showMoreItems = false;
-    this.visibleMenuItems = 0;
-    this.countMoreNotifications = 0;
+    this.showPinned = false;
     this.mapExpand = true;
     this.activeTab = undefined;
-    this.isMoreTabEmpty = false;
-    this.mode = 'desktop';
-  }
-  onWindowResize() {
-    this.visibleMenuItems = this.getMaxTabCount();
-  }
-  handleNodeMutation(node) {
-    if (!(node instanceof HTMLElement)) {
+    this.mode = 'large';
+    this.itemsScrollShadowTop = false;
+    this.itemsScrollShadowBottom = false;
+  }
+  pinnedChange(newPinned) {
+    this.setPinned(this.pinned);
+    if (newPinned) {
+      screenMode.disableModeDetection();
+      screenMode.setMode('large');
       return;
     }
-    if (node.matches('.tab')) {
-      this.onWindowResize();
-    }
-    if (node.matches('ix-menu-about') && this.menu.contains(node)) {
-      this.appendAbout();
+    screenMode.enableModeDetection();
+  }
+  forceLayoutChange(newMode) {
+    if (this.pinned) {
+      console.warn('You cannot force a layout while pinned property is set!');
+      return;
     }
-    if (node.matches('ix-menu-settings') && this.menu.contains(node)) {
-      this.appendSettings();
+    if (!newMode) {
+      screenMode.enableModeDetection();
+      return;
     }
+    screenMode.disableModeDetection();
+    screenMode.setMode(newMode);
   }
-  onDomChange(mutations) {
-    mutations.forEach((mutationRecord) => {
-      mutationRecord.addedNodes.forEach(this.handleNodeMutation.bind(this));
-      mutationRecord.removedNodes.forEach(this.handleNodeMutation.bind(this));
-    });
+  supportedModesChange(modes) {
+    screenMode.setSupportedMods(modes);
   }
   get popoverArea() {
-    return this.hostElement.querySelector('#popover-area');
+    return this.hostElement.shadowRoot.querySelector('#popover-area');
   }
-  get overlayContainer() {
-    return this.hostElement.querySelector('.menu-overlay');
+  get menu() {
+    return this.hostElement.shadowRoot.querySelector('.menu');
   }
-  get invisibleContainer() {
-    return this.hostElement.querySelector('.menu-overlay-invisible');
+  get menuItemsContainer() {
+    return this.menu.querySelector('.tabs');
   }
-  get menu() {
-    return this.hostElement.querySelector('.menu');
+  get overlayContainer() {
+    return this.hostElement.shadowRoot.querySelector('.menu-overlay');
   }
   get menuItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible);
@@ -89,29 +93,29 @@ export class Menu {
     return this.hostElement.querySelector('ix-menu-item.home-tab');
   }
   get moreItemsDropdown() {
-    return this.hostElement.querySelector('.internal-tab ix-dropdown');
+    return this.hostElement.shadowRoot.querySelector('.internal-tab ix-dropdown');
   }
   get isMoreItemsDropdownEmpty() {
-    return (this.hostElement.querySelectorAll('.internal-tab ix-dropdown .appended')
-      .length === 0);
+    return (this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown .appended').length === 0);
   }
   get moreItemsDropdownItems() {
-    return this.hostElement.querySelectorAll('.internal-tab ix-dropdown ix-menu-item');
+    return this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown ix-menu-item');
   }
   get activeMoreTabContainer() {
-    return this.hostElement.querySelector('.active-more-tab');
+    return this.hostElement.shadowRoot.querySelector('.active-more-tab');
   }
   get activeMoreTab() {
-    return this.hostElement.querySelector('.active-more-tab ix-menu-item');
+    return this.hostElement.shadowRoot.querySelector('.active-more-tab ix-menu-item');
   }
   get aboutPopoverContainer() {
     return this.hostElement.querySelector('.about-news');
   }
-  get aboutPopover() {
-    return document.querySelector('ix-menu-about-news');
+  get aboutsNewsPopover() {
+    var _a;
+    return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
   }
   get aboutTab() {
-    return this.hostElement.querySelector('#aboutAndLegal');
+    return this.hostElement.shadowRoot.querySelector('#aboutAndLegal');
   }
   get about() {
     return this.hostElement.querySelector('ix-menu-about');
@@ -120,108 +124,64 @@ export class Menu {
     return this.hostElement.querySelector('ix-menu-settings');
   }
   get isSettingsEmpty() {
-    return (Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'))
-      .length === 0);
-  }
-  get avatarItem() {
-    return this.hostElement.querySelector('ix-menu-avatar');
+    return (Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-menu-settings-item')).length === 0);
   }
   get tabsContainer() {
-    return this.hostElement.querySelector('#menu-tabs');
-  }
-  showTab(index) {
-    return index + 1 <= this.visibleMenuItems;
+    return this.hostElement;
   }
   componentDidLoad() {
-    var _a, _b, _c, _d;
-    (_a = this.settings) === null || _a === void 0 ? void 0 : _a.addEventListener('close', () => {
-      this.showSettings = false;
-      this.settings.show = this.showSettings;
-    });
-    (_b = this.settings) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', () => {
-      if (!this.showSettings) {
-        this.settings.classList.add('d-none');
-        this.overlayContainer.classList.add('d-none');
-      }
-    });
-    (_c = this.about) === null || _c === void 0 ? void 0 : _c.addEventListener('close', () => {
-      this.showAbout = false;
-      this.about.show = this.showAbout;
-    });
-    (_d = this.about) === null || _d === void 0 ? void 0 : _d.addEventListener('animationend', () => {
-      if (!this.showAbout) {
-        this.about.classList.add('d-none');
-        this.overlayContainer.classList.add('d-none');
-      }
-    });
-    this.overlayContainer.classList.add('d-none');
-    this.onWindowResize();
-    this.domObserver.observe(this.hostElement, {
-      attributes: false,
-      childList: true,
-      subtree: true,
+    requestAnimationFrame(() => {
+      this.handleOverflowIndicator();
     });
+    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() {
     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;
+      screenMode.onChange.on((mode) => this.onModeChange(mode));
+      this.onModeChange(screenMode.mode);
     }
   }
   componentWillRender() {
     this.appendTabs();
   }
   componentDidRender() {
-    this.visibleMenuItems = this.getMaxTabCount();
     this.appendFragments();
   }
+  setPinned(pinned) {
+    this.showPinned = pinned;
+    menuController.setIsPinned(pinned);
+  }
+  onModeChange(mode) {
+    if (!this.supportedModes.includes(mode)) {
+      return;
+    }
+    this.mode = mode;
+    if (this.mode === 'large') {
+      this.setPinned(true);
+      this.toggleMenu(true);
+      return;
+    }
+    this.setPinned(false);
+    this.toggleMenu(false);
+  }
   appendFragments() {
-    this.appendAvatar();
-    this.appendAbout();
-    this.appendSettings();
     this.appendAboutNewsPopover();
-    // This lead to none infinite-loops and other bugs.
-    this.isMoreTabEmpty = this.isMoreItemsDropdownEmpty;
-    this.countMoreNotifications = this.getMoreNotificationsCount();
   }
   resetActiveTab() {
     this.activeTab = null;
   }
-  isMenuItemActive(item) {
-    return item.active || item.classList.contains('active');
-  }
   appendTabs() {
     this.activeTab = null;
-    if (this.homeTab) {
-      this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);
-      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));
-    }
-    this.menuItems.forEach((item, index) => {
-      var _a;
-      if (this.showTab(index)) {
-        item.classList.remove('d-none');
-      }
-      else {
-        item.classList.add('d-none');
-        if (this.isMenuItemActive(item)) {
-          this.activeTab = item;
-        }
-      }
-      // 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.bind(this));
-    });
-  }
-  appendAvatar() {
-    var _a;
-    const avatar = this.avatarItem;
-    if (avatar) {
-      avatar.style.marginBottom = '1rem';
-      (_a = this.hostElement
-        .querySelector('#avatar-tab-placeholder')) === null || _a === void 0 ? void 0 : _a.appendChild(avatar);
-    }
   }
   getAboutPopoverVerticalPosition() {
     const heightArrow = 12;
@@ -233,111 +193,28 @@ export class Menu {
   }
   appendAboutNewsPopover() {
     var _a;
-    if (!this.aboutPopover) {
+    if (!this.aboutsNewsPopover) {
       return;
     }
-    this.aboutPopover.style.bottom = this.getAboutPopoverVerticalPosition();
-    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutPopover))) {
+    this.aboutsNewsPopover.style.bottom =
+      this.getAboutPopoverVerticalPosition();
+    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutsNewsPopover))) {
       const showMore = () => {
         var _a;
-        if ((_a = this.aboutPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) {
-          this.about.activeTabLabel = this.aboutPopover.aboutItemLabel;
+        if (((_a = this.aboutsNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
+          this.about.activeTabLabel = this.aboutsNewsPopover.aboutItemLabel;
           this.toggleAbout(true);
         }
       };
-      this.aboutPopover.addEventListener('showMore', showMore.bind(this));
-      document.body.appendChild(this.aboutPopover);
-    }
-  }
-  appendSettings() {
-    if (this.settings) {
-      this.overlayContainer.appendChild(this.settings);
-    }
-  }
-  appendAbout() {
-    if (this.about) {
-      this.overlayContainer.appendChild(this.about);
-    }
-  }
-  getMoreNotificationsCount() {
-    var _a;
-    const moreTabs = (_a = this.moreItemsDropdown) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.appended');
-    let count = 0;
-    moreTabs === null || moreTabs === void 0 ? void 0 : moreTabs.forEach((tab) => {
-      if (tab['notifications']) {
-        count += tab['notifications'];
-      }
-    });
-    return count;
-  }
-  getAvailableHeight() {
-    const heightBurgerMenu = 60;
-    const heightHome = 72;
-    const heightAvatar = 56;
-    const heightBottomTab = 36;
-    let availableHeight = this.hostElement.clientHeight;
-    availableHeight -= heightBurgerMenu;
-    if (this.avatarItem) {
-      availableHeight -= heightAvatar;
-    }
-    if (this.homeTab) {
-      availableHeight -= heightHome;
-    }
-    if (this.showAbout) {
-      availableHeight -= heightBottomTab;
-    }
-    if (this.showSettings) {
-      availableHeight -= heightBottomTab;
-    }
-    if (this.menuBottomItems.length) {
-      availableHeight -= this.menuBottomItems.length * heightBottomTab;
-    }
-    if (this.enableMapExpand) {
-      availableHeight -= heightBottomTab;
-    }
-    // Subtract height of imprint and theme toggle tabs
-    availableHeight -= 2 * heightBottomTab;
-    // Subtract bottom margin of bottom tabs
-    availableHeight -= 16;
-    return availableHeight;
-  }
-  getMaxTabCount() {
-    const heightTab = 48;
-    const availableHeight = this.getAvailableHeight();
-    const visibleCount = Math.floor(availableHeight / heightTab);
-    const menuItemCount = this.menuItems.length;
-    if (menuItemCount === 1) {
-      return 1;
-    }
-    if (menuItemCount < this.maxVisibleMenuItems) {
-      if (visibleCount > menuItemCount) {
-        return menuItemCount;
-      }
-      return Math.min(visibleCount - 2, menuItemCount);
-    }
-    if (menuItemCount === this.maxVisibleMenuItems) {
-      if (visibleCount < this.maxVisibleMenuItems) {
-        return visibleCount - 2;
-      }
-      if (visibleCount === this.maxVisibleMenuItems) {
-        return this.maxVisibleMenuItems - 2;
-      }
-      return Math.min(visibleCount, this.maxVisibleMenuItems);
-    }
-    if (visibleCount === this.maxVisibleMenuItems) {
-      return this.maxVisibleMenuItems - 2;
-    }
-    if (visibleCount >= this.maxVisibleMenuItems) {
-      return this.maxVisibleMenuItems - 1;
+      this.aboutsNewsPopover.addEventListener('showMore', showMore.bind(this));
+      document.body.appendChild(this.aboutsNewsPopover);
     }
-    return Math.min(visibleCount - 2, this.maxVisibleMenuItems);
   }
   /**
    * Toggle map sidebar expand
    * @param show
    */
   async toggleMapExpand(show) {
-    this.skipAllOverlayAnimations();
     if (show !== undefined) {
       this.mapExpand = show;
     }
@@ -345,162 +222,194 @@ export class Menu {
       this.mapExpand = !this.mapExpand;
     }
   }
-  skipAllOverlayAnimations() {
-    if (this.about) {
-      this.skipOverlayAnimationFor(this.about);
-    }
-    if (this.settings) {
-      this.skipOverlayAnimationFor(this.settings);
-    }
-  }
-  skipOverlayAnimationFor(element) {
-    const animateClass = 'animate__animated';
-    element === null || element === void 0 ? void 0 : element.classList.remove(animateClass);
-    setTimeout(() => {
-      element === null || element === void 0 ? void 0 : element.classList.add(animateClass);
-    }, 300);
-  }
   /**
    * Toggle menu
    * @param show
    */
   async toggleMenu(show) {
-    this.skipAllOverlayAnimations();
     if (show !== undefined) {
       this.expand = show;
     }
     else {
       this.expand = !this.expand;
     }
-    if (this.aboutPopover) {
-      this.aboutPopover.expanded = this.expand;
+    if (this.aboutsNewsPopover) {
+      this.aboutsNewsPopover.expanded = this.expand;
     }
     this.expandChange.emit(this.expand);
+    this.isTransitionDisabled = false;
+    this.checkTransition();
+  }
+  /**
+   * Disable transition of overlay while menu animation is running.
+   */
+  checkTransition() {
+    const container = this.overlayContainer;
+    if (!container) {
+      return;
+    }
+    if (this.isTransitionDisabled) {
+      container.style.transitionProperty = 'left';
+    }
+    else {
+      container.style.transitionProperty = 'all';
+    }
+  }
+  isOverlayVisible() {
+    return this.showAbout || this.showSettings;
   }
   /**
    * Toggle Settings tabs
    * @param show
    */
   async toggleSettings(show) {
-    var _a;
-    if (this.showAbout) {
-      this.skipAllOverlayAnimations();
+    if (!this.settings) {
+      return;
+    }
+    if (!this.isOverlayVisible()) {
+      this.animateOverlayFadeIn();
+    }
+    if (show) {
+      this.resetOverlay();
+      this.showSettings = show;
+      this.settings.show = this.showSettings;
     }
     else {
-      this.skipOverlayAnimationFor(this.about);
+      this.onOverlayClose();
     }
-    (_a = this.about) === null || _a === void 0 ? void 0 : _a.classList.add('d-none');
-    this.resetOverlay();
-    this.showSettings = show;
-    this.settings.show = this.showSettings;
-    this.settings.classList.remove('d-none');
-    this.overlayContainer.classList.remove('d-none');
   }
   /**
    * Toggle About tabs
    * @param show
    */
   async toggleAbout(show) {
-    var _a;
-    if (this.showSettings) {
-      this.skipAllOverlayAnimations();
+    if (!this.about) {
+      return;
+    }
+    if (!this.isOverlayVisible()) {
+      this.animateOverlayFadeIn();
+    }
+    if (show) {
+      this.resetOverlay();
+      this.showAbout = show;
+      this.about.show = this.showAbout;
     }
     else {
-      this.skipOverlayAnimationFor(this.settings);
+      this.onOverlayClose();
     }
-    (_a = this.settings) === null || _a === void 0 ? void 0 : _a.classList.add('d-none');
-    this.resetOverlay();
-    this.showAbout = show;
-    this.about.show = this.showAbout;
-    this.about.classList.remove('d-none');
-    this.overlayContainer.classList.remove('d-none');
   }
   resetOverlay() {
     this.showSettings = false;
     this.showAbout = false;
     if (this.settings) {
-      this.settings.show = this.showSettings;
+      this.settings.show = false;
     }
     if (this.about) {
-      this.about.show = this.showAbout;
+      this.about.show = false;
     }
-    this.toggleMenu(false);
-  }
-  showMoreButton() {
-    const menuItemCount = this.menuItems.length;
-    if (menuItemCount === 1) {
-      return false;
-    }
-    if (menuItemCount < this.maxVisibleMenuItems) {
-      return this.visibleMenuItems < menuItemCount;
-    }
-    if (menuItemCount > this.maxVisibleMenuItems) {
-      return this.visibleMenuItems < this.maxVisibleMenuItems;
-    }
-    return this.visibleMenuItems <= this.maxVisibleMenuItems - 2;
   }
   getCollapseText() {
     return this.mapExpand ? this.i18nCollapse : this.i18nExpand;
   }
   getCollapseIcon() {
-    return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';
+    return this.mapExpand ? 'navigation-left' : 'navigation-right';
   }
   isMenuItemClicked(event) {
-    const path = event.composedPath();
-    const menuItems = path
-      .filter((element) => element.id !== 'ix-menu-more-tab')
-      .filter((element) => {
-      return element.tagName === 'IX-MENU-ITEM';
+    if (event.target instanceof HTMLElement) {
+      return event.target.tagName === 'IX-MENU-ITEM';
+    }
+    return false;
+  }
+  handleOverflowIndicator() {
+    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;
+    this.itemsScrollShadowTop = scrollTop > 0;
+    this.itemsScrollShadowBottom =
+      Math.round(scrollTop + clientHeight) < scrollHeight;
+  }
+  onOverlayClose() {
+    this.animateOverlayFadeOut(() => {
+      this.resetOverlay();
+    });
+  }
+  animateOverlayFadeIn() {
+    requestAnimationFrame(() => {
+      anime({
+        targets: this.overlayContainer,
+        duration: 300,
+        backdropFilter: [0, 'blur(1rem)'],
+        translateX: ['-4rem', 0],
+        opacity: [0, 1],
+        easing: 'easeInSine',
+        begin: () => {
+          if (this.showPinned) {
+            return;
+          }
+          this.toggleMenu(false);
+        },
+      });
+    });
+  }
+  animateOverlayFadeOut(onComplete) {
+    requestAnimationFrame(() => {
+      anime({
+        targets: this.overlayContainer,
+        duration: 300,
+        backdropFilter: ['blur(1rem)', 0],
+        translateX: [0, '-4rem'],
+        opacity: [1, 0],
+        easing: 'easeInSine',
+        complete: () => onComplete(),
+      });
     });
-    return menuItems.some((menu) => this.tabsContainer.contains(menu));
+  }
+  onMenuItemsClick(event) {
+    if (this.isMenuItemClicked(event)) {
+      if (!this.showPinned) {
+        this.toggleMenu(false);
+      }
+      this.onOverlayClose();
+    }
   }
   render() {
     return (h(Host, { class: {
         expanded: this.expand,
         [`mode-${this.mode}`]: true,
-      } }, h("div", { class: {
+      }, slot: "menu" }, h("aside", { class: {
         menu: true,
         expanded: this.expand,
       }, onClick: () => {
         this.resetActiveTab();
-      } }, h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, class: {
+      } }, h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, ixAriaLabel: this.i18nExpandSidebar, pinned: this.showPinned, class: {
         'burger-menu': true,
-      } }), h("div", { id: "avatar-tab-placeholder" }), h("div", { id: "menu-tabs", style: {
+      } }), h("div", { class: "menu-avatar" }, h("slot", { name: "ix-menu-avatar" })), h("div", { id: "menu-tabs", style: {
         display: 'contents',
-      }, onClick: (event) => {
-        if (this.isMenuItemClicked(event)) {
-          this.resetOverlay();
-        }
-      } }, h("div", { class: "tabs-top" }), h("slot", null), h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null), h("ix-menu-item", { id: "ix-menu-more-tab", tabIcon: "more-menu", class: {
-        'internal-tab': true,
-      }, style: {
-        display: this.showMoreButton() ? 'block' : 'none',
-      }, title: "Show more", notifications: this.countMoreNotifications }, this.i18nMore, h("ix-dropdown", { trigger: 'ix-menu-more-tab', positioningStrategy: 'fixed', placement: 'right-start' }, this.menuItems
-      .filter((elm, index) => !this.showTab(index) &&
-      !this.isMenuItemActive(elm) &&
-      this.isVisible(elm))
-      .map((e) => {
-      return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, disabled: e.disabled, 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: {
+      }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { class: "tabs-top" }, h("slot", { name: "home" })), h("div", { class: "tabs-shadow-container" }, h("div", { class: {
+        '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: {
+        '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: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showSettings,
-      }, tabIcon: "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("slot", { name: "bottom" }), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { id: "aboutAndLegal", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showAbout,
-      }, tabIcon: "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", tabIcon: `${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", { 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: {
         'menu-overlay': true,
+        visible: this.isOverlayVisible(),
         expanded: this.expand,
-        'd-block': this.showAbout || this.showSettings,
-      }, style: {
-        opacity: this.showAbout || this.showSettings ? '1' : '0',
-      } }), h("div", { class: "menu-overlay-invisible" })));
+      }, onTransitionEnd: () => {
+        this.isTransitionDisabled = true;
+        this.checkTransition();
+      } }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null)));
   }
   static get is() { return "ix-menu"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["menu.scss"]
@@ -656,7 +565,7 @@ export class Menu {
         "reflect": false,
         "defaultValue": "9"
       },
-      "i18nLegal": {
+      "i18nExpandSidebar": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -668,18 +577,18 @@ export class Menu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Accessibility i18n label for the burger menu of the sidebar"
         },
-        "attribute": "i-1-8n-legal",
+        "attribute": "i-1-8n-expand-sidebar",
         "reflect": false,
-        "defaultValue": "'About & legal information'"
+        "defaultValue": "'Expand sidebar'"
       },
-      "i18nSettings": {
-        "type": "string",
-        "mutable": false,
+      "expand": {
+        "type": "boolean",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -688,11 +597,72 @@ export class Menu {
           "tags": [],
           "text": ""
         },
-        "attribute": "i-1-8n-settings",
+        "attribute": "expand",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "pinned": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Menu stays pinned to the left"
+        },
+        "attribute": "pinned",
         "reflect": false,
-        "defaultValue": "'Settings'"
+        "defaultValue": "false"
       },
-      "i18nToggleTheme": {
+      "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,
         "complexType": {
@@ -706,11 +676,11 @@ export class Menu {
           "tags": [],
           "text": ""
         },
-        "attribute": "i-1-8n-toggle-theme",
+        "attribute": "i-1-8n-legal",
         "reflect": false,
-        "defaultValue": "'Toggle theme'"
+        "defaultValue": "'About & legal information'"
       },
-      "i18nExpand": {
+      "i18nSettings": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -724,11 +694,11 @@ export class Menu {
           "tags": [],
           "text": ""
         },
-        "attribute": "i-1-8n-expand",
+        "attribute": "i-1-8n-settings",
         "reflect": false,
-        "defaultValue": "' Expand'"
+        "defaultValue": "'Settings'"
       },
-      "i18nCollapse": {
+      "i18nToggleTheme": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -742,11 +712,11 @@ export class Menu {
           "tags": [],
           "text": ""
         },
-        "attribute": "i-1-8n-collapse",
+        "attribute": "i-1-8n-toggle-theme",
         "reflect": false,
-        "defaultValue": "'Collapse'"
+        "defaultValue": "'Toggle theme'"
       },
-      "i18nMore": {
+      "i18nExpand": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -760,39 +730,38 @@ export class Menu {
           "tags": [],
           "text": ""
         },
-        "attribute": "i-1-8n-more",
+        "attribute": "i-1-8n-expand",
         "reflect": false,
-        "defaultValue": "'More\u2026'"
+        "defaultValue": "' Expand'"
       },
-      "expand": {
-        "type": "boolean",
-        "mutable": true,
+      "i18nCollapse": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Expand menu"
+          "text": ""
         },
-        "attribute": "expand",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "i-1-8n-collapse",
+        "reflect": false,
+        "defaultValue": "'Collapse'"
       }
     };
   }
   static get states() {
     return {
-      "showMoreItems": {},
-      "visibleMenuItems": {},
-      "countMoreNotifications": {},
+      "showPinned": {},
       "mapExpand": {},
       "activeTab": {},
-      "isMoreTabEmpty": {},
-      "mode": {}
+      "mode": {},
+      "itemsScrollShadowTop": {},
+      "itemsScrollShadowBottom": {}
     };
   }
   static get events() {
@@ -933,13 +902,28 @@ export class Menu {
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "pinned",
+        "methodName": "pinnedChange"
+      }, {
+        "propName": "supportedModes",
+        "methodName": "supportedModesChange"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "resize",
-        "method": "onWindowResize",
+        "method": "handleOverflowIndicator",
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "close",
+        "method": "onOverlayClose",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }