@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/siemens-ix/p-f4d634f5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["menuCss","Menu","this","isTransitionDisabled","isVisible","elm","style","display","_b","_a","parentElement","pinnedChange","newPinned","setPinned","pinned","screenMode","disableModeDetection","setMode","enableModeDetection","forceLayoutChange","newMode","console","warn","supportedModesChange","modes","setSupportedMods","popoverArea","hostElement","shadowRoot","querySelector","menu","menuItemsContainer","overlayContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutsNewsPopover","document","aboutTab","about","settings","isSettingsEmpty","tabsContainer","componentDidLoad","requestAnimationFrame","handleOverflowIndicator","forceLayout","supportedModes","undefined","componentWillLoad","menuController","register","layout","hostContext","isBasicNavigationLayout","hideHeader","onChange","on","mode","onModeChange","componentWillRender","appendTabs","componentDidRender","appendFragments","showPinned","setIsPinned","includes","toggleMenu","appendAboutNewsPopover","resetActiveTab","activeTab","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","contains","showMore","aboutItemLabel","activeTabLabel","toggleAbout","addEventListener","bind","body","appendChild","async","show","mapExpand","expand","expanded","expandChange","emit","checkTransition","container","transitionProperty","isOverlayVisible","showAbout","showSettings","animateOverlayFadeIn","resetOverlay","onOverlayClose","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","target","HTMLElement","tagName","clientHeight","scrollTop","scrollHeight","itemsScrollShadowTop","itemsScrollShadowBottom","Math","round","animateOverlayFadeOut","anime","targets","duration","backdropFilter","translateX","opacity","easing","begin","onComplete","complete","onMenuItemsClick","render","h","Host","class","slot","onClick","ixAriaLabel","i18nExpandSidebar","name","id","e","onScroll","active","icon","toggleSettings","i18nSettings","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","tabIcon","i18nToggleTheme","enableMapExpand","mapExpandChange","visible","onTransitionEnd","menuAboutCss","MenuAbout","aboutItems","el","setTab","label","forEach","i","forceUpdate","updateLabels","labels","map","watchActiveTabLabel","value","setTimeout","getSelectedTabIndex","selectedItem","find","item","indexOf","getTabItems","ghost","size","close","nativeEvent","selected","menuAboutItemCss","MenuAboutItem","menuAboutNewsCss","MenuAboutNews","color","viewBox","xmlns","points","variant","closePopover","i18nShowMore","menuAvatarCss","MenuAvatar","avatarElementId","title","top","image","initials","trigger","placement","mainAxis","i18nLogout","logoutClick","menuAvatarItemCss","MenuAvatarItem","itemClick","menuItemCss","MenuItem","innerText","connectedCallback","observer","createMutationObserver","observe","subtree","childList","characterData","disconnectedCallback","disconnect","extendedAttributes","home","Object","assign","disabled","notifications","menuSettingsCss","settingsItems","menuSettingsItemCss","MenuSettingsItem"],"sources":["./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/menu.tsx","./src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","./src/components/menu-about/menu-about.tsx","./src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=shadow","./src/components/menu-about-item/menu-about-item.tsx","./src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","./src/components/menu-about-news/menu-about-news.tsx","./src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","./src/components/menu-avatar/menu-avatar.tsx","./src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","./src/components/menu-avatar-item/menu-avatar-item.tsx","./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","./src/components/menu-item/menu-item.tsx","./src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","./src/components/menu-settings/menu-settings.tsx","./src/components/menu-settings-item/menu-settings-item.css?tag=ix-menu-settings-item&encapsulation=shadow","./src/components/menu-settings-item/menu-settings-item.tsx"],"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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  height: 100%;\n  min-height: 22.75rem;\n  z-index: var(--theme-z-index-sticky);\n  width: auto;\n\n  bottom: 0px;\n\n  .tabs {\n    height: 100%;\n    position: relative;\n    overflow-y: auto;\n    pointer-events: all;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .tabs-shadow-container {\n    overflow: hidden;\n    display: block;\n    position: relative;\n    margin-bottom: 2rem;\n  }\n\n  .tabs--shadow {\n    opacity: 0;\n    position: absolute;\n    width: 100%;\n    height: 0.625rem;\n\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n    pointer-events: none;\n    z-index: var(--theme-z-index-sticky);\n\n    transition: opacity var(--theme-default-time);\n  }\n  .tabs--shadow-top {\n    top: 0px;\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n  }\n\n  .tabs--shadow-bottom {\n    bottom: 0px;\n    background: linear-gradient(transparent, var(--theme-color-shadow-1));\n  }\n\n  .tabs--shadow--show {\n    opacity: 1;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 3.25rem;\n    height: 100%;\n    padding-block-end: 1rem;\n    overflow: hidden;\n\n    &.expanded {\n      box-shadow: var(--theme-navigation--box-shadow);\n    }\n\n    background-color: var(--theme-nav--background);\n    transition: width var(--animate-duration) ease-in-out;\n\n    .burger-menu {\n      margin: 0.75rem 0 1rem 0.35rem;\n    }\n  }\n\n  .menu-overlay {\n    display: none;\n    position: absolute;\n    width: calc(100vw - 3.25rem);\n    height: 100%;\n    left: 3.25rem;\n    z-index: -1;\n    backdrop-filter: blur(1rem);\n    background-color: var(--theme-sidebar-overlay-blur);\n    transition: left var(--animate-duration) ease-in-out;\n  }\n\n  .menu-overlay.visible {\n    display: block;\n  }\n\n  .menu.expanded {\n    width: $menu-expanded-width;\n  }\n\n  .menu-overlay.expanded {\n    width: calc(100vw - $menu-expanded-width);\n    left: $menu-expanded-width;\n  }\n\n  .menu-avatar {\n    max-height: 3rem;\n  }\n\n  .avatar {\n    margin-bottom: 2rem;\n  }\n\n  #cui-imprint {\n    .cui-imprint-product-name {\n      margin-bottom: $default-space;\n    }\n\n    .cui-imprint-product-description {\n      margin-bottom: $x-large-space;\n    }\n\n    .cui-imprint-link-container {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .bottom-tab-divider {\n    margin-top: auto;\n  }\n}\n\n:host(.mode-small) {\n  .menu:not(.expanded) {\n    width: 0;\n  }\n\n  .menu {\n    padding-top: 2rem;\n  }\n\n  .menu .burger-menu {\n    display: none;\n  }\n\n  .menu-overlay {\n    left: 0px;\n    width: 100vw;\n  }\n}\n\n:host(.mode-large) {\n  position: relative;\n\n  .menu.expanded {\n    box-shadow: none;\n  }\n}\n\n:host {\n  ::slotted(a[href]) {\n    all: unset;\n  }\n}\n","/*\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","/*\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\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .about-tabs {\n    margin-bottom: $large-space;\n  }\n\n  ix-menu-about-item {\n    display: none;\n  }\n}\n","/*\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  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          show: this.show,\n        }}\n        slot=\"ix-menu-about\"\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) =>\n              this.close.emit({\n                name: 'ix-menu-about',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs\n          selected={this.getSelectedTabIndex(this.activeTabLabel)}\n          class=\"about-tabs\"\n        >\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\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\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  shadow: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\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\n@import 'common-variables';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n  @include ix-component;\n\n  --margin: 0.5rem;\n\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-1);\n  border: var(--theme-weak-bdr-1);\n  border-radius: $default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--animate-duration);\n\n  margin-left: var(--margin) !important;\n\n  @include box-shadow(4);\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: $default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: $small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2.5rem;\n    margin-left: 4rem;\n    margin-top: -$tiny-space;\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: $small-space;\n    right: $small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-1);\n    border-left: var(--theme-weak-bdr-1);\n    border-bottom: var(--theme-weak-bdr-1);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n\n:host(.expanded) {\n  left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name=\"shout\"\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography variant=\"default-title-single\">\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon=\"close-small\"\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n","/*\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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: 0.15s;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\n    }\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n}\n","/*\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 6,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n}\n","/*\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  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n","/*\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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n$menuItemHeight: 3rem;\n\n:host {\n  position: relative;\n  display: block;\n  cursor: pointer;\n\n  height: var(--ix-menu-item-height, $menuItemHeight);\n  min-height: var(--ix-menu-item-height, $menuItemHeight);\n  max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n  .tab {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    z-index: 500;\n    padding-left: 0.875rem;\n\n    @include ghost-hover-pressed;\n  }\n\n  i.glyph {\n    color: var(--theme-nav-item-primary-icon--color);\n    position: relative;\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: 0.25rem;\n    left: 1.75rem;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 0.5rem;\n      min-width: 1rem;\n      position: relative;\n      border-radius: 6.25rem;\n      background-color: var(--theme-color-primary);\n      border-radius: 6.25rem;\n      font-size: 0.75rem;\n      font-weight: bold;\n      line-height: 1;\n      font-family: Siemens Sans, Arial, sans-serif;\n      color: var(--theme-color-primary--contrast);\n      padding: $tiny-space;\n    }\n  }\n\n  .tab-text {\n    @include ellipsis;\n    color: var(--theme-nav-item-primary--color);\n    margin: 0 1.25rem;\n    user-select: none;\n    width: 100%;\n  }\n}\n\n:host(.active),\n:host(.selected) {\n  .tab {\n    background-color: var(--theme-nav-item-primary--background--selected);\n  }\n\n  .tab::before {\n    content: '';\n    background-color: var(--theme-nav-item-primary--border-color--selected);\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    width: 0.25rem;\n    left: 0;\n    position: absolute;\n  }\n\n  .tab > .glyph {\n    color: var(--theme-nav-item-primary-icon--color--selected);\n  }\n}\n\n:host(.disabled) {\n  color: var(--theme-color-weak-text);\n  pointer-events: none;\n  cursor: default;\n\n  .tab > .glyph {\n    color: var(--theme-color-weak-text);\n  }\n\n  .tab-text {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n  $bottom-height: 2.25rem;\n\n  min-height: $bottom-height;\n  height: $bottom-height;\n  max-height: $bottom-height;\n\n  .tab {\n    height: $bottom-height;\n  }\n\n  .tab::before {\n    height: $bottom-height;\n    background-color: transparent;\n  }\n\n  &.active,\n  &.selected {\n    &:hover {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n\n    &:active {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n  }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n  .tab {\n    background-color: var(--theme-nav-item-secondary--background--selected);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   *\n   * @deprecated Use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n        }}\n        {...extendedAttributes}\n      >\n        <li class=\"tab\" title={this.title}>\n          <ix-icon name={this.icon ?? this.tabIcon}></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n","/*\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\n@import 'common-variables';\n@import 'fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\n  }\n}\n","/*\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  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"ix-menu-settings\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) =>\n              this.close.emit({\n                nativeEvent: e,\n                name: 'ix-menu-settings',\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\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\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  shadow: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-fafe1aeb.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,H as n,g as e}from"./p-b899b25b.js";const a=".sc-ix-pagination-h,.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination,.sc-ix-pagination-h .item-count.sc-ix-pagination{display:inline-flex;align-items:center}.sc-ix-pagination-h .basic-pagination.sc-ix-pagination{padding:0 0.125rem}.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination{padding:0 0.75rem}.sc-ix-pagination-h input.sc-ix-pagination{width:4.125rem;text-align:center;margin:0 0.5rem}.sc-ix-pagination-h .page-buttons.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .total-count.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .item-count.sc-ix-pagination{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h .item-count.sc-ix-pagination ix-select.sc-ix-pagination{width:4.5rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h ix-index-button.sc-ix-pagination+ix-index-button.sc-ix-pagination{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";const h=class{constructor(s){i(this,s);this.pageSelected=t(this,"pageSelected",7);this.itemCountChanged=t(this,"itemCountChanged",7);this.maxCountPages=7;this.advanced=undefined;this.itemCount=15;this.showItemCount=true;this.count=undefined;this.selectedPage=0;this.i18nPage="Page";this.i18nOf="of";this.i18nItems="Items"}get pageInput(){return this.hostElement.querySelector(".advanced-pagination input.form-control")}selectPage(i){if(i<0){this.selectedPage=0}else if(i>this.count-1){this.selectedPage=this.count-1}else{this.selectedPage=i}this.pageSelected.emit(this.selectedPage)}increase(){if(this.selectedPage===this.count-1){return}this.selectPage(this.selectedPage+1)}decrease(){if(this.selectedPage===0){return}this.selectPage(this.selectedPage-1)}getPageButton(i){return s("ix-index-button",{variant:"primary",onClick:()=>{this.selectPage(i)},selected:this.selectedPage===i},i+1)}renderPageButtons(){const i=Math.floor(this.maxCountPages/2);const t=this.count>this.maxCountPages;const n=t&&this.selectedPage>i;const e=t&&this.selectedPage<this.count-i-1;const a=[];let h=0;let o=Math.min(this.count,this.maxCountPages);let c=Math.floor((this.maxCountPages-4)/2);if(n){a.push(this.getPageButton(0));a.push(s("ix-index-button",{variant:"secondary",onClick:()=>{if(e){this.selectPage(this.selectedPage-Math.max(0,2*c+1))}else{this.selectPage(this.count-this.maxCountPages)}}},"..."));if(e){h=this.count-this.maxCountPages+2}else{h=this.count-this.maxCountPages+2;o=this.count}}if(e){if(n){h=this.selectedPage-c;o=this.selectedPage+c+1}else{o=this.maxCountPages-2}}for(let i=h;i<o;i++){a.push(this.getPageButton(i))}if(e){a.push(s("ix-index-button",{variant:"secondary",onClick:()=>{if(n){this.selectPage(this.selectedPage+Math.max(0,2*c+1))}else{this.selectPage(this.maxCountPages-1)}}},"..."));a.push(this.getPageButton(this.count-1))}return s("span",{class:"page-buttons"},a)}render(){return s(n,null,s("ix-icon-button",{disabled:this.selectedPage===0,ghost:true,icon:"chevron-left-small",onClick:()=>this.decrease()}),this.advanced?s("div",{class:"advanced-pagination"},this.i18nPage,s("input",{class:"form-control",type:"number",min:"1",max:this.count,value:this.selectedPage+1,onChange:i=>{const t=Number.parseInt(i.target["value"]);this.selectPage(t-1)}}),s("span",{class:"total-count"},this.i18nOf," ",this.count)):s("span",{class:"basic-pagination"},this.renderPageButtons()," "),s("ix-icon-button",{disabled:this.selectedPage===this.count-1,ghost:true,icon:"chevron-right-small",onClick:()=>this.increase()}),this.advanced&&this.showItemCount?s("span",{class:"item-count"},this.i18nItems,s("ix-select",{hideListHeader:true,i18nPlaceholder:"",i18nSelectListHeader:"","selected-indices":this.itemCount,onItemSelectionChange:i=>{const t=Number.parseInt(i.detail[0]);this.itemCountChanged.emit(t)}},s("ix-select-item",{label:"10",value:"10"}),s("ix-select-item",{label:"15",value:"15"}),s("ix-select-item",{label:"20",value:"20"}),s("ix-select-item",{label:"40",value:"40"}),s("ix-select-item",{label:"100",value:"100"}))):"")}get hostElement(){return e(this)}};h.style=a;export{h as ix_pagination};
-//# sourceMappingURL=p-fafe1aeb.entry.js.map

package/dist/siemens-ix/p-fafe1aeb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["paginationCss","Pagination","this","maxCountPages","pageInput","hostElement","querySelector","selectPage","index","selectedPage","count","pageSelected","emit","increase","decrease","getPageButton","h","variant","onClick","selected","renderPageButtons","pagesBeforeOverflow","Math","floor","hasOverflow","hasOverflowStart","hasOverflowEnd","pageButtons","start","end","min","pageCount","push","max","i","class","render","Host","disabled","ghost","icon","advanced","i18nPage","type","value","onChange","e","Number","parseInt","target","i18nOf","showItemCount","i18nItems","hideListHeader","i18nPlaceholder","i18nSelectListHeader","itemCount","onItemSelectionChange","detail","itemCountChanged","label"],"sources":["./src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=scoped","./src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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\n@import 'common-variables';\n\n:host {\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  input {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  ix-index-button + ix-index-button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  scoped: true,\n})\nexport class Pagination {\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  get pageInput() {\n    return this.hostElement.querySelector(\n      '.advanced-pagination input.form-control'\n    );\n  }\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    return (\n      <ix-index-button\n        variant=\"primary\"\n        onClick={() => {\n          this.selectPage(index);\n        }}\n        selected={this.selectedPage === index}\n      >\n        {index + 1}\n      </ix-index-button>\n    );\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(\n        <ix-index-button\n          variant=\"secondary\"\n          onClick={() => {\n            if (hasOverflowEnd) {\n              this.selectPage(\n                this.selectedPage - Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.count - this.maxCountPages);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      pageButtons.push(\n        <ix-index-button\n          variant=\"secondary\"\n          onClick={() => {\n            if (hasOverflowStart) {\n              this.selectPage(\n                this.selectedPage + Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.maxCountPages - 1);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            {this.i18nPage}\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              {this.i18nOf} {this.count}\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            {this.i18nItems}\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-fe073f2a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as s,g as o}from"./p-b899b25b.js";import{f as r,i as h,s as n,o as d,a,c as l}from"./p-45738e84.js";const c=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";const m=new Map;let u=0;const f=class{constructor(e){t(this,e);this.showChanged=i(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${u++}-${(new Date).valueOf()}`;this.suppressAutomaticPlacement=false;this.show=false;this.trigger=undefined;this.anchor=undefined;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.header=undefined;this.offset=undefined;this.triggerEvent="click";this.overwriteDropdownStyle=undefined;this.toggleBind=this.toggle.bind(this);this.openBind=this.open.bind(this);if(m.has(this.localUId)){console.warn("Dropdown with duplicated id detected")}m.set(this.localUId,this.close.bind(this))}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}addEventListenersFor(t){switch(t){case"click":if(this.closeBehavior==="outside"){this.triggerElement.addEventListener("click",this.openBind)}else{this.triggerElement.addEventListener("click",this.toggleBind)}break;case"hover":this.triggerElement.addEventListener("mouseenter",this.openBind);break;case"focus":this.triggerElement.addEventListener("focusin",this.openBind);break}}removeEventListenersFor(t,i){switch(t){case"click":if(this.closeBehavior==="outside"){i.removeEventListener("click",this.openBind)}else{i.removeEventListener("click",this.toggleBind)}break;case"hover":i.removeEventListener("mouseenter",this.openBind);break;case"focus":i.removeEventListener("focusin",this.openBind);break}}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){if(Array.isArray(this.triggerEvent)){this.triggerEvent.forEach((t=>{this.addEventListenersFor(t)}))}else{this.addEventListenersFor(this.triggerEvent)}}}async unregisterListener(t){const i=await this.resolveElement(t);if(Array.isArray(this.triggerEvent)){this.triggerEvent.forEach((t=>{this.removeEventListenersFor(t,i)}))}else{this.removeEventListenersFor(this.triggerEvent,i)}}resolveElement(t){if(typeof t!=="string"){return Promise.resolve(t)}const i=`#${t}`;return new Promise((t=>{if(document.querySelector(i)){return t(document.querySelector(i))}const e=new MutationObserver((()=>{if(document.querySelector(i)){t(document.querySelector(i));e.disconnect()}}));e.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}}if(t){m.forEach(((t,i)=>{if(i!==this.localUId&&!this.isAnchorSubmenu()){t()}}))}}changedTrigger(t,i){if(t){this.registerListener(t)}if(i){this.unregisterListener(i)}}clickOutside(t){var i,e;const s=t.target;if(this.show===false||this.closeBehavior===false||((i=this.anchorElement)===null||i===void 0?void 0:i.contains(s))||((e=this.triggerElement)===null||e===void 0?void 0:e.contains(s))){return}switch(this.closeBehavior){case"outside":if(!this.dropdownRef.contains(s)){this.close(t)}break;case"inside":if(this.dropdownRef.contains(s)&&this.hostElement!==s){this.close(t)}break;case"both":if(this.hostElement!==s){this.close(t)}break;default:this.close(t)}}keydown(t){if(this.show===true&&t.code==="Escape"){this.close()}}isNestedDropdown(t){return t.closest("ix-dropdown")}isAnchorSubmenu(){var t;const i=(t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item");if(!i){return false}return true}toggle(t){t===null||t===void 0?void 0:t.preventDefault();if(this.isNestedDropdown(t.target)){t===null||t===void 0?void 0:t.stopPropagation()}this.show=!this.show;this.showChanged.emit(this.show)}open(t){t===null||t===void 0?void 0:t.preventDefault();if(this.isNestedDropdown(t.target)){t===null||t===void 0?void 0:t.stopPropagation()}this.show=true;this.showChanged.emit(true)}close(t){if(t===null||t===void 0?void 0:t.defaultPrevented){const i=t.target;if(i.contains(this.anchorElement)||i.contains(this.triggerElement)||i.shadowRoot.contains(this.anchorElement)||i.shadowRoot.contains(this.triggerElement))return}this.show=false;this.showChanged.emit(false)}async applyDropdownPosition(){if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let i={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){i.middleware.push(r({fallbackStrategy:"initialPlacement"}))}i.placement=t?"right-start":this.placement;i.middleware=[...i.middleware,h(),n()];if(this.offset){i.middleware.push(d(this.offset))}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=null}this.autoUpdateCleanup=a(this.anchorElement,this.dropdownRef,(async()=>{const t=await l(this.anchorElement,this.dropdownRef,i);Object.assign(this.dropdownRef.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`});if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.dropdownRef,triggerRef:this.triggerElement});Object.assign(this.dropdownRef.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}async componentDidLoad(){if(this.trigger){this.changedTrigger(this.trigger,null)}}async componentDidRender(){var t;await this.applyDropdownPosition();this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.isAnchorSubmenu()&&((t=this.anchorElement)===null||t===void 0?void 0:t.tagName)==="IX-DROPDOWN-ITEM"){this.anchorElement.isSubMenu=true}}disconnectedCallback(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(m.has(this.localUId)){m.delete(this.localUId)}}async updatePosition(){this.applyDropdownPosition()}render(){return e(s,{ref:t=>this.dropdownRef=t,class:{"dropdown-menu":true,show:this.show,overflow:true},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list"},e("div",{style:{display:"contents"}},this.header?e("div",{class:"dropdown-header"},this.header):"",e("slot",null)))}get hostElement(){return o(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};f.style=c;const p="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>chevron-right-small</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(187.520000, 134.186667)'><polygon id='arrowhead-right' points='30.2933333 243.626667 0 213.333333 91.7333333 121.813333 0 30.2933333 30.2933333 0 151.893333 121.813333'/></g></g></svg>";const w=":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem - 0.125rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem - 0.125rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";const g=class{constructor(e){t(this,e);this.itemClick=i(this,"itemClick",7);this.label=undefined;this.icon=undefined;this.hover=false;this.disabled=false;this.checked=false;this.isSubMenu=false;this.suppressChecked=false}async emitItemClick(){this.itemClick.emit(this.hostElement)}isIconOnly(){return this.label===undefined&&this.hostElement.innerText===""&&this.icon!==undefined}render(){return e(s,{class:{hover:this.hover,"icon-only":this.isIconOnly(),disabled:this.disabled,submenu:this.isSubMenu},role:"listitem"},e("button",{type:"button",tabIndex:0,class:{"dropdown-item":true,"no-checked-field":this.suppressChecked},onClick:()=>this.emitItemClick()},!this.suppressChecked?e("div",{class:"dropdown-item-checked"},this.checked?e("ix-icon",{class:"checkmark",name:"single-check",size:"16"}):null):null,this.icon?e("ix-icon",{class:"dropdown-item-icon",name:this.icon}):null,e("div",{class:"dropdown-item-text"},this.label,e("slot",null)),this.isSubMenu?e("ix-icon",{name:p,class:"submenu-icon"}):null))}get hostElement(){return o(this)}};g.style=w;export{f as ix_dropdown,g as ix_dropdown_item};
-//# sourceMappingURL=p-fe073f2a.entry.js.map