@siemens/ix 1.6.2 → 2.0.0-beta.0

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

@@ -0,0 +1,2 @@
+import{r,h as e,H as t}from"./p-b899b25b.js";const o=":host *,:host *::after,:host *::before{box-sizing:border-box}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.individual{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0px 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";const a=class{constructor(e){r(this,e);this.individual=true;this.corners="rounded"}cardClasses(){return{card:true,individual:this.individual,left:this.corners==="left",right:this.corners==="right"}}render(){return e(t,null,e("div",{class:this.cardClasses()},e("div",{class:"header"},e("slot",{name:"header"})),e("div",{class:"separator"}),e("div",{class:"content"},e("slot",null))))}};a.style=o;export{a as ix_date_time_card};
+//# sourceMappingURL=p-e8f2e141.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dateTimeCardCss","DateTimeCard","cardClasses","card","individual","this","left","corners","right","render","h","Host","class","name"],"sources":["./src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","./src/components/date-time-card/date-time-card.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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.individual {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0px rgba(0, 0, 0, 0.1);\n      border: 1px solid var(--theme-menu--border-color);\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0px $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\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\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      individual: this.individual,\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAkB,oyB,MCqBXC,EAAY,M,yCAIO,K,aAKS,S,CAE/BC,cACN,MAAO,CACLC,KAAM,KACNC,WAAYC,KAAKD,WACjBE,KAAMD,KAAKE,UAAY,OACvBC,MAAOH,KAAKE,UAAY,Q,CAI5BE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOP,KAAKH,eACfQ,EAAA,OAAKE,MAAM,UACTF,EAAA,QAAMG,KAAK,YAGbH,EAAA,OAAKE,MAAM,cAEXF,EAAA,OAAKE,MAAM,WACTF,EAAA,e"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as i,g as s}from"./p-b899b25b.js";import{a as o}from"./p-810b5232.js";import{c as n}from"./p-c0454c9a.js";import{m as a}from"./p-e275814e.js";const h=":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-chevron{margin-left:auto;margin-right:0px;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0px;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}";const r=40;const d=150;const m=class{constructor(e){t(this,e);this.label=undefined;this.icon=undefined;this.notifications=undefined;this.menuExpand=false;this.showItems=false;this.showDropdown=false;this.nestedItems=[]}isNestedItemActive(){return this.getNestedItems().some((t=>t.active))}getNestedItems(){return Array.from(this.hostElement.querySelectorAll(":scope > ix-menu-item"))}getNestedItemsHeight(){const t=this.getNestedItems();return t.length*r}onExpandCategory(t){if(t){this.animateFadeIn()}else{this.animateFadeOut()}}animateFadeOut(){const t=25;o({targets:this.menuItemsContainer,duration:d,easing:"easeInSine",opacity:[1,0],maxHeight:[this.getNestedItemsHeight()+r,0],complete:()=>{setTimeout((()=>{this.showItems=false;this.showDropdown=false}),d+t)}})}animateFadeIn(){o({targets:this.menuItemsContainer,duration:d,easing:"easeInSine",opacity:[0,1],maxHeight:[0,this.getNestedItemsHeight()+r],begin:()=>{this.showItems=true;this.showDropdown=false}})}onCategoryClicked(t){if(this.ixMenu.expand){t===null||t===void 0?void 0:t.stopPropagation();this.onExpandCategory(!this.showItems);return}this.showDropdown=!this.showDropdown}onNestedItemsChanged(){this.nestedItems=this.getNestedItems()}isCategoryItemListVisible(){return this.menuExpand&&(this.showItems||this.isNestedItemActive())}componentDidLoad(){const t=a(this.hostElement);if(!t){throw Error("ix-menu-category can only be used as a child of ix-menu")}this.ixMenu=t;this.observer=n((()=>this.onNestedItemsChanged()));this.observer.observe(this.hostElement,{attributes:true,childList:true,subtree:true});requestAnimationFrame((()=>{this.onNestedItemsChanged()}));this.ixMenu.addEventListener("expandChange",(({detail:t})=>{this.menuExpand=t;this.showItems=this.isCategoryItemListVisible()}))}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return e(i,{class:{expanded:this.showItems}},e("ix-menu-item",{class:"category-parent",active:this.isNestedItemActive(),notifications:this.notifications,icon:this.icon,onClick:t=>this.onCategoryClicked(t)},e("div",{class:"category"},this.label,e("ix-icon",{name:"chevron-down-small",class:{"category-chevron":true,"category-chevron--open":this.showItems}}))),e("div",{ref:t=>this.menuItemsContainer=t,class:{"menu-items":true,"menu-items--expanded":this.showItems}},this.showItems?e("slot",null):null),e("ix-dropdown",{closeBehavior:"both",show:this.showDropdown,onShowChanged:({detail:t})=>{this.showDropdown=t},class:"category-dropdown",anchor:this.hostElement,placement:"right-start",offset:{mainAxis:3},onClick:t=>{if(t.target instanceof HTMLElement){if(t.target.tagName==="IX-MENU-ITEM"){this.showDropdown=false}}}},e("ix-dropdown-item",{class:"category-dropdown-header"},e("ix-typography",{variant:"default-title-single",color:"std"},this.label)),e("ix-divider",null),e("slot",null)))}get hostElement(){return s(this)}};m.style=h;export{m as ix_menu_category};
+//# sourceMappingURL=p-eca0b89c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["menuCategoryCss","DefaultIxMenuItemHeight","DefaultAnimationTimeout","MenuCategory","isNestedItemActive","this","getNestedItems","some","item","active","Array","from","hostElement","querySelectorAll","getNestedItemsHeight","items","length","onExpandCategory","showItems","animateFadeIn","animateFadeOut","slotHideThresholdMs","anime","targets","menuItemsContainer","duration","easing","opacity","maxHeight","complete","setTimeout","showDropdown","begin","onCategoryClicked","e","ixMenu","expand","stopPropagation","onNestedItemsChanged","nestedItems","isCategoryItemListVisible","menuExpand","componentDidLoad","closestMenu","menuContext","Error","observer","createMutationObserver","observe","attributes","childList","subtree","requestAnimationFrame","addEventListener","detail","disconnectedCallback","disconnect","render","h","Host","class","expanded","notifications","icon","onClick","label","name","ref","closeBehavior","show","onShowChanged","dropdownShown","anchor","placement","offset","mainAxis","target","HTMLElement","tagName","variant","color"],"sources":["./src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","./src/components/menu-category/menu-category.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  .category {\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .category-chevron {\n    margin-left: auto;\n    margin-right: 0px;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .category-chevron--open {\n    transform: rotate(-180deg);\n  }\n\n  .menu-items {\n    overflow: hidden;\n    max-height: 0px;\n    transition: var(--theme-default-time) max-height ease-in-out;\n  }\n\n  .menu-items--expanded {\n    max-height: 999999999px;\n  }\n\n  .category-dropdown {\n    ::slotted(ix-menu-item) {\n      --ix-menu-item-height: 2.5rem;\n    }\n  }\n\n  .category-dropdown-header {\n    pointer-events: none;\n    min-width: 256px;\n  }\n\n  ::slotted(ix-menu-item) {\n    --ix-menu-item-height: 2.5rem;\n  }\n}\n\n:host(.expanded) {\n  background-color: var(--theme-color-ghost--active);\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { menuContext } from '../utils/screen/context';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications: number;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer: MutationObserver;\n  private menuItemsContainer: HTMLDivElement;\n  private ixMenu: HTMLIxMenuElement;\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope > ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\n  }\n\n  private onNestedItemsChanged() {\n    this.nestedItems = this.getNestedItems();\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentDidLoad() {\n    const closestMenu = menuContext(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\n            <ix-icon\n              name=\"chevron-down-small\"\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography variant=\"default-title-single\" color=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as o,g as r}from"./p-b899b25b.js";const e=":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .dropdown{width:auto !important;inset:auto !important;transform:unset !important}:host(.disabled){pointer-events:none}";const s=class{constructor(i){t(this,i);this.variant="primary";this.outline=false;this.ghost=false;this.active=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.dropdownAnchor=undefined}getTriangle(){return i("div",{class:{triangle:true,hide:this.label!=="",primary:this.variant==="primary",secondary:this.variant==="secondary",ghost:this.ghost,outline:this.outline,disabled:this.disabled}})}render(){return i(o,{class:{disabled:this.disabled}},i("div",{class:"dropdown-button",ref:t=>{this.dropdownAnchor=t}},this.label?i("ix-button",{variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled},i("ix-icon",{name:this.icon,size:"24",class:{hide:this.icon===""||this.icon===undefined}}),i("div",{class:"button-label"},this.label),i("ix-icon",{name:"chevron-down-small",size:"24"})):i("div",null,i("ix-icon-button",{icon:this.icon,variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled}),this.getTriangle())),i("ix-dropdown",{class:"dropdown",trigger:this.dropdownAnchor,positioningStrategy:"fixed"},i("slot",null)))}get hostElement(){return r(this)}};s.style=e;export{s as ix_dropdown_button};
+//# sourceMappingURL=p-ef73f7e3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownButtonCss","DropdownButton","getTriangle","h","class","triangle","hide","this","label","primary","variant","secondary","ghost","outline","disabled","render","Host","ref","dropdownAnchor","name","icon","size","undefined","trigger","positioningStrategy"],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","./src/components/dropdown-button/dropdown-button.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .dropdown {\n    width: auto !important;\n    inset: auto !important;\n    transform: unset !important;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: 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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button (has no effect)\n   * @deprecated Will be removed in 3.0.0\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n            >\n              <ix-icon\n                name={this.icon}\n                size=\"24\"\n                class={{ hide: this.icon === '' || this.icon === undefined }}\n              ></ix-icon>\n              <div class={'button-label'}>{this.label}</div>\n              <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          positioningStrategy={'fixed'}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,soD,MCsBbC,EAAc,M,sCAMgB,U,aAKvB,M,WAKF,M,YAMC,M,cAKE,M,uEAcXC,cACN,OACEC,EAAA,OACEC,MAAO,CACLC,SAAU,KACVC,KAAMC,KAAKC,QAAU,GACrBC,QAASF,KAAKG,UAAY,UAC1BC,UAAWJ,KAAKG,UAAY,YAC5BE,MAAOL,KAAKK,MACZC,QAASN,KAAKM,QACdC,SAAUP,KAAKO,W,CAMvBC,SACE,OACEZ,EAACa,EAAI,CACHZ,MAAO,CACLU,SAAUP,KAAKO,WAGjBX,EAAA,OACEC,MAAM,kBACNa,IAAMA,IACJV,KAAKW,eAAiBD,CAAG,GAG1BV,KAAKC,MACJL,EAAA,aACEO,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,UAEfX,EAAA,WACEgB,KAAMZ,KAAKa,KACXC,KAAK,KACLjB,MAAO,CAAEE,KAAMC,KAAKa,OAAS,IAAMb,KAAKa,OAASE,aAEnDnB,EAAA,OAAKC,MAAO,gBAAiBG,KAAKC,OAClCL,EAAA,WAASgB,KAAK,qBAAqBE,KAAK,QAG1ClB,EAAA,WACEA,EAAA,kBACEiB,KAAMb,KAAKa,KACXV,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,WAEhBP,KAAKL,gBAKZC,EAAA,eACEC,MAAM,WACNmB,QAAShB,KAAKW,eACdM,oBAAqB,SAErBrB,EAAA,c"}

package/dist/siemens-ix/{p-bd24f35f.entry.js → p-f0219d7a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as n,H as r}from"./p-1c64b073.js";const t=":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";const i=class{constructor(n){e(this,n)}render(){return n(r,null,n("slot",null))}};i.style=t;export{i as ix_dropdown_quick_actions};
-//# sourceMappingURL=p-bd24f35f.entry.js.map
+import{r as e,h as n,H as r}from"./p-b899b25b.js";const t=":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";const i=class{constructor(n){e(this,n)}render(){return n(r,null,n("slot",null))}};i.style=t;export{i as ix_dropdown_quick_actions};
+//# sourceMappingURL=p-f0219d7a.entry.js.map

package/dist/siemens-ix/p-f22423c2.js

@@ -0,0 +1,2 @@
+import{T as e}from"./p-9ee41861.js";let t=["small","medium","large"];const n=`only screen and (max-width: 40em)`;const r=`only screen and (min-width: 40.063em) and (max-width: 64em)`;const i=`only screen and (min-width: 64.063em)`;const s=e=>t=e;const o=(e,t)=>{const n=window.matchMedia(e);const r=e=>{t(e)};n.addEventListener("change",r);return{matchMedia:n,dispose:()=>{n.removeEventListener("change",r)}}};const a=(e,t)=>{if(e.length===1){return e[0]}if(t==="large"&&!e.includes(t)){return a(e,"medium")}if(t==="medium"&&!e.includes(t)){return a(e,"large")}if(t==="small"&&!e.includes(t)){return a(e,"medium")}return t};const d=e=>{const s=o(n,(({matches:n})=>{if(!n){return}e(a(t,"small"))}));const d=o(r,(({matches:n})=>{if(!n){return}e(a(t,"medium"))}));const c=o(i,(({matches:n})=>{if(!n){return}e(a(t,"large"))}));const f=s.matchMedia.matches;const m=d.matchMedia.matches;if(f){e(a(t,"small"))}else if(m){e(a(t,"medium"))}else{e(a(t,"large"))}return{dispose:()=>{s.dispose();d.dispose();c.dispose()},matchMedia:[s.matchMedia,d.matchMedia,c.matchMedia]}};var c=undefined&&undefined.__classPrivateFieldGet||function(e,t,n,r){if(n==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return n==="m"?r:n==="a"?r.call(e):r?r.value:t.get(e)};var f=undefined&&undefined.__classPrivateFieldSet||function(e,t,n,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(e,n):i?i.value=n:t.set(e,n),n};var m,h,u;class l{constructor(){m.set(this,new e);h.set(this,"large");u.set(this,true);d((e=>{if(!c(this,u,"f")){return}c(this,m,"f").emit(e);f(this,h,e,"f")}))}get mode(){return c(this,h,"f")}get onChange(){return c(this,m,"f")}get isDetectionEnabled(){return c(this,u,"f")}disableModeDetection(){f(this,u,false,"f")}enableModeDetection(){f(this,u,true,"f")}setMode(e){f(this,h,e,"f");c(this,m,"f").emit(e)}setSupportedMods(e){s(e);const t=a(e,c(this,h,"f"));this.setMode(t)}}m=new WeakMap,h=new WeakMap,u=new WeakMap;const w=new l;export{w as s};
+//# sourceMappingURL=p-f22423c2.js.map

package/dist/siemens-ix/p-f22423c2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["supportedModes","smallMediaQuery","mediumMediaQuery","largeMediaQuery","setSupportedModes","modes","createMediaQueryListener","query","callback","listener","window","matchMedia","fn","event","addEventListener","dispose","removeEventListener","getFallbackMode","detectedMode","length","includes","createModeListener","modeChangeCallback","smallListener","matches","mediumListener","largeListener","matchSmall","matchMedium","ScreenMode","constructor","_ScreenMode_modeChangeListener","set","this","TypedEvent","_ScreenMode_mode","_ScreenMode_isDetectionEnabled","mode","__classPrivateFieldGet","emit","__classPrivateFieldSet","onChange","isDetectionEnabled","disableModeDetection","enableModeDetection","setMode","setSupportedMods","screenMode"],"sources":["./src/components/utils/screen/mode.ts","./src/components/utils/screen/service.ts"],"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\nexport type Mode = 'large' | 'medium' | 'small';\n\nlet supportedModes: Mode[] = ['small', 'medium', 'large'];\n\nconst smallMediaQuery = `only screen and (max-width: 40em)`;\nconst mediumMediaQuery = `only screen and (min-width: 40.063em) and (max-width: 64em)`;\nconst largeMediaQuery = `only screen and (min-width: 64.063em)`;\n\nexport type MediaQueryListener = {\n  matchMedia: MediaQueryList;\n  dispose: () => void;\n};\n\nexport const setSupportedModes = (modes: Mode[]) => (supportedModes = modes);\n\nexport const createMediaQueryListener = (\n  query: string,\n  callback: (event: MediaQueryListEvent) => void\n): MediaQueryListener => {\n  const listener = window.matchMedia(query);\n  const fn = (event: MediaQueryListEvent) => {\n    callback(event);\n  };\n  listener.addEventListener('change', fn);\n\n  return {\n    matchMedia: listener,\n    dispose: () => {\n      listener.removeEventListener('change', fn);\n    },\n  };\n};\n\nexport const getFallbackMode = (modes: Mode[], detectedMode: Mode): Mode => {\n  if (modes.length === 1) {\n    return modes[0];\n  }\n\n  if (detectedMode === 'large' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  if (detectedMode === 'medium' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'large');\n  }\n  if (detectedMode === 'small' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  return detectedMode;\n};\n\nexport type ModeChangeCallback = (mode: Mode) => void;\n\nexport const createModeListener = (\n  modeChangeCallback: (mode: Mode) => void\n) => {\n  const smallListener = createMediaQueryListener(\n    smallMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n    }\n  );\n\n  const mediumListener = createMediaQueryListener(\n    mediumMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n    }\n  );\n\n  const largeListener = createMediaQueryListener(\n    largeMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n    }\n  );\n\n  const matchSmall = smallListener.matchMedia.matches;\n  const matchMedium = mediumListener.matchMedia.matches;\n\n  if (matchSmall) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n  } else if (matchMedium) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n  } else {\n    modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n  }\n\n  return {\n    dispose: () => {\n      smallListener.dispose();\n      mediumListener.dispose();\n      largeListener.dispose();\n    },\n    matchMedia: [\n      smallListener.matchMedia,\n      mediumListener.matchMedia,\n      largeListener.matchMedia,\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 { TypedEvent } from '../typed-event';\nimport {\n  createModeListener,\n  getFallbackMode,\n  Mode,\n  setSupportedModes,\n} from './mode';\n\nclass ScreenMode {\n  #modeChangeListener = new TypedEvent<Mode>();\n  #mode: Mode = 'large';\n\n  #isDetectionEnabled = true;\n\n  constructor() {\n    createModeListener((mode) => {\n      if (!this.#isDetectionEnabled) {\n        return;\n      }\n\n      this.#modeChangeListener.emit(mode);\n      this.#mode = mode;\n    });\n  }\n\n  get mode() {\n    return this.#mode;\n  }\n\n  get onChange() {\n    return this.#modeChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  public disableModeDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableModeDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setMode(mode: Mode) {\n    this.#mode = mode;\n    this.#modeChangeListener.emit(mode);\n  }\n\n  public setSupportedMods(modes: Mode[]) {\n    setSupportedModes(modes);\n    const mode = getFallbackMode(modes, this.#mode);\n\n    this.setMode(mode);\n  }\n}\n\nexport const screenMode = new ScreenMode();\n"],"mappings":"oCAWA,IAAIA,EAAyB,CAAC,QAAS,SAAU,SAEjD,MAAMC,EAAkB,oCACxB,MAAMC,EAAmB,8DACzB,MAAMC,EAAkB,wCAOjB,MAAMC,EAAqBC,GAAmBL,EAAiBK,EAE/D,MAAMC,EAA2B,CACtCC,EACAC,KAEA,MAAMC,EAAWC,OAAOC,WAAWJ,GACnC,MAAMK,EAAMC,IACVL,EAASK,EAAM,EAEjBJ,EAASK,iBAAiB,SAAUF,GAEpC,MAAO,CACLD,WAAYF,EACZM,QAAS,KACPN,EAASO,oBAAoB,SAAUJ,EAAG,EAE7C,EAGI,MAAMK,EAAkB,CAACZ,EAAea,KAC7C,GAAIb,EAAMc,SAAW,EAAG,CACtB,OAAOd,EAAM,E,CAGf,GAAIa,IAAiB,UAAYb,EAAMe,SAASF,GAAe,CAC7D,OAAOD,EAAgBZ,EAAO,S,CAEhC,GAAIa,IAAiB,WAAab,EAAMe,SAASF,GAAe,CAC9D,OAAOD,EAAgBZ,EAAO,Q,CAEhC,GAAIa,IAAiB,UAAYb,EAAMe,SAASF,GAAe,CAC7D,OAAOD,EAAgBZ,EAAO,S,CAEhC,OAAOa,CAAY,EAKd,MAAMG,EACXC,IAEA,MAAMC,EAAgBjB,EACpBL,GACA,EAAGuB,cACD,IAAKA,EAAS,CACZ,M,CAEFF,EAAmBL,EAAgBjB,EAAgB,SAAS,IAIhE,MAAMyB,EAAiBnB,EACrBJ,GACA,EAAGsB,cACD,IAAKA,EAAS,CACZ,M,CAEFF,EAAmBL,EAAgBjB,EAAgB,UAAU,IAIjE,MAAM0B,EAAgBpB,EACpBH,GACA,EAAGqB,cACD,IAAKA,EAAS,CACZ,M,CAEFF,EAAmBL,EAAgBjB,EAAgB,SAAS,IAIhE,MAAM2B,EAAaJ,EAAcZ,WAAWa,QAC5C,MAAMI,EAAcH,EAAed,WAAWa,QAE9C,GAAIG,EAAY,CACdL,EAAmBL,EAAgBjB,EAAgB,S,MAC9C,GAAI4B,EAAa,CACtBN,EAAmBL,EAAgBjB,EAAgB,U,KAC9C,CACLsB,EAAmBL,EAAgBjB,EAAgB,S,CAGrD,MAAO,CACLe,QAAS,KACPQ,EAAcR,UACdU,EAAeV,UACfW,EAAcX,SAAS,EAEzBJ,WAAY,CACVY,EAAcZ,WACdc,EAAed,WACfe,EAAcf,YAEjB,E,owBCpGH,MAAMkB,EAMJC,cALAC,EAAAC,IAAAC,KAAsB,IAAIC,GAC1BC,EAAAH,IAAAC,KAAc,SAEdG,EAAAJ,IAAAC,KAAsB,MAGpBZ,GAAoBgB,IAClB,IAAKC,EAAAL,KAAIG,EAAA,KAAsB,CAC7B,M,CAGFE,EAAAL,KAAIF,EAAA,KAAqBQ,KAAKF,GAC9BG,EAAAP,KAAIE,EAASE,EAAI,O,CAIjBA,WACF,OAAOC,EAAAL,KAAIE,EAAA,I,CAGTM,eACF,OAAOH,EAAAL,KAAIF,EAAA,I,CAGTW,yBACF,OAAOJ,EAAAL,KAAIG,EAAA,I,CAGNO,uBACLH,EAAAP,KAAIG,EAAuB,MAAK,I,CAG3BQ,sBACLJ,EAAAP,KAAIG,EAAuB,KAAI,I,CAG1BS,QAAQR,GACbG,EAAAP,KAAIE,EAASE,EAAI,KACjBC,EAAAL,KAAIF,EAAA,KAAqBQ,KAAKF,E,CAGzBS,iBAAiBzC,GACtBD,EAAkBC,GAClB,MAAMgC,EAAOpB,EAAgBZ,EAAOiC,EAAAL,KAAIE,EAAA,MAExCF,KAAKY,QAAQR,E,kDAIJU,EAAa,IAAIlB,S"}

package/dist/siemens-ix/{p-1e8ee4af.entry.js → p-f38e7420.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as e,g as s}from"./p-1c64b073.js";import{a as o,c as r,s as a,o as l,b as n,f as h}from"./p-f34a16c6.js";const c=':host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}';const p=t=>t!=null?`${t}px`:"";const d=class{constructor(i){t(this,i);this.onMouseEnterBind=this.showTooltip.bind(this);this.onMouseLeaveBind=this.hideTooltip.bind(this);this.tooltipCloseTimeInMS=50;this.for=undefined;this.titleContent=undefined;this.interactive=false;this.placement="top";this.visible=false}get arrowElement(){return this.hostElement.shadowRoot.querySelector(".arrow")}destroyAutoUpdate(){if(this.disposeAutoUpdate!==undefined){this.disposeAutoUpdate()}}showTooltip(t){clearTimeout(this.hideTooltipTimeout);this.visible=true;this.computeTooltipPosition(t.target)}hideTooltip(){this.hideTooltipTimeout=setTimeout((()=>{this.visible=false}),this.tooltipCloseTimeInMS);this.destroyAutoUpdate()}computeArrowPosition({placement:t,middlewareData:i}){let{x:e,y:s}=i.arrow;if(t.startsWith("top")){return{left:p(e),top:p(s)}}if(t.startsWith("right")){return{left:p(-4),top:p(s)}}if(t.startsWith("bottom")){return{left:p(e),top:p(-4)}}if(t.startsWith("left")){return{right:p(-4),top:p(s)}}}async computeTooltipPosition(t){this.disposeAutoUpdate=o(t,this.hostElement,(async()=>{setTimeout((async()=>{const i=await r(t,this.hostElement,{strategy:"fixed",placement:this.placement,middleware:[a(),l(8),n({element:this.arrowElement}),h({fallbackStrategy:"initialPlacement",padding:10})]});if(i.middlewareData.arrow){const t=this.computeArrowPosition(i);Object.assign(this.arrowElement.style,t)}const{x:e,y:s}=i;Object.assign(this.hostElement.style,{left:e!==null?`${e}px`:"",top:s!==null?`${s}px`:""})}))}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}queryAnchorElements(){return Array.from(document.querySelectorAll(this.for))}registerTriggerListener(){const t=this.queryAnchorElements();t.forEach((t=>{t.addEventListener("mouseenter",this.onMouseEnterBind);t.addEventListener("mouseleave",this.onMouseLeaveBind)}))}registerTooltipListener(){this.hostElement.addEventListener("mouseenter",(()=>{if(this.interactive){clearTimeout(this.hideTooltipTimeout)}}));this.hostElement.addEventListener("mouseleave",(()=>{this.hideTooltip()}))}componentDidLoad(){if(this.interactive){this.tooltipCloseTimeInMS=150}this.observer=new MutationObserver((()=>{this.registerTriggerListener()}));this.observer.observe(document.body,{attributes:true,attributeFilter:["data-ix-tooltip"],childList:true,subtree:true});this.registerTriggerListener();this.registerTooltipListener()}disconnectedCallback(){this.observer.disconnect();this.destroyAutoUpdate()}render(){const t={"tooltip-content":true};return i(e,{class:{visible:this.visible}},i("div",{class:"tooltip-title"},i("slot",{name:"title-icon"}),i("ix-typography",{variant:"default-title"},this.titleContent,i("slot",{name:"title-content"}))),i("div",{class:t},i("slot",null)),i("div",{class:"arrow"}))}get hostElement(){return s(this)}};d.style=c;export{d as ix_tooltip};
-//# sourceMappingURL=p-1e8ee4af.entry.js.map
+import{r as t,h as i,H as e,g as s}from"./p-b899b25b.js";import{a as o,c as r,s as a,o as l,b as n,f as h}from"./p-45738e84.js";const c=':host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}';const p=t=>t!=null?`${t}px`:"";const d=class{constructor(i){t(this,i);this.onMouseEnterBind=this.showTooltip.bind(this);this.onMouseLeaveBind=this.hideTooltip.bind(this);this.tooltipCloseTimeInMS=50;this.for=undefined;this.titleContent=undefined;this.interactive=false;this.placement="top";this.visible=false}get arrowElement(){return this.hostElement.shadowRoot.querySelector(".arrow")}destroyAutoUpdate(){if(this.disposeAutoUpdate!==undefined){this.disposeAutoUpdate()}}showTooltip(t){clearTimeout(this.hideTooltipTimeout);this.visible=true;this.computeTooltipPosition(t.target)}hideTooltip(){this.hideTooltipTimeout=setTimeout((()=>{this.visible=false}),this.tooltipCloseTimeInMS);this.destroyAutoUpdate()}computeArrowPosition({placement:t,middlewareData:i}){let{x:e,y:s}=i.arrow;if(t.startsWith("top")){return{left:p(e),top:p(s)}}if(t.startsWith("right")){return{left:p(-4),top:p(s)}}if(t.startsWith("bottom")){return{left:p(e),top:p(-4)}}if(t.startsWith("left")){return{right:p(-4),top:p(s)}}}async computeTooltipPosition(t){this.disposeAutoUpdate=o(t,this.hostElement,(async()=>{setTimeout((async()=>{const i=await r(t,this.hostElement,{strategy:"fixed",placement:this.placement,middleware:[a(),l(8),n({element:this.arrowElement}),h({fallbackStrategy:"initialPlacement",padding:10})]});if(i.middlewareData.arrow){const t=this.computeArrowPosition(i);Object.assign(this.arrowElement.style,t)}const{x:e,y:s}=i;Object.assign(this.hostElement.style,{left:e!==null?`${e}px`:"",top:s!==null?`${s}px`:""})}))}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}queryAnchorElements(){return Array.from(document.querySelectorAll(this.for))}registerTriggerListener(){const t=this.queryAnchorElements();t.forEach((t=>{t.addEventListener("mouseenter",this.onMouseEnterBind);t.addEventListener("mouseleave",this.onMouseLeaveBind)}))}registerTooltipListener(){this.hostElement.addEventListener("mouseenter",(()=>{if(this.interactive){clearTimeout(this.hideTooltipTimeout)}}));this.hostElement.addEventListener("mouseleave",(()=>{this.hideTooltip()}))}componentDidLoad(){if(this.interactive){this.tooltipCloseTimeInMS=150}this.observer=new MutationObserver((()=>{this.registerTriggerListener()}));this.observer.observe(document.body,{attributes:true,attributeFilter:["data-ix-tooltip"],childList:true,subtree:true});this.registerTriggerListener();this.registerTooltipListener()}disconnectedCallback(){this.observer.disconnect();this.destroyAutoUpdate()}render(){const t={"tooltip-content":true};return i(e,{class:{visible:this.visible}},i("div",{class:"tooltip-title"},i("slot",{name:"title-icon"}),i("ix-typography",{variant:"default-title"},this.titleContent,i("slot",{name:"title-content"}))),i("div",{class:t},i("slot",null)),i("div",{class:"arrow"}))}get hostElement(){return s(this)}};d.style=c;export{d as ix_tooltip};
+//# sourceMappingURL=p-f38e7420.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as a,a as e,h as i,H as n,g as o,f as s}from"./p-b899b25b.js";import{a as r}from"./p-810b5232.js";import{m}from"./p-d43bf856.js";import{a as l}from"./p-21aa3602.js";import{h as c,i as f}from"./p-e275814e.js";import{s as h}from"./p-f22423c2.js";import{t as d}from"./p-323d5529.js";import{c as p}from"./p-c0454c9a.js";import"./p-9ee41861.js";const u="/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;-webkit-backface-visibility:visible !important;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto;bottom:0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:2rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0px;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0px;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--animate-duration) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host(.mode-small) .menu:not(.expanded){width:0}:host(.mode-small) .menu{padding-top:2rem}:host(.mode-small) .menu .burger-menu{display:none}:host(.mode-small) .menu-overlay{left:0px;width:100vw}:host(.mode-large){position:relative}:host(.mode-large) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";const g=class{constructor(e){t(this,e);this.expandChange=a(this,"expandChange",7);this.mapExpandChange=a(this,"mapExpandChange",7);this.isTransitionDisabled=false;this.isVisible=t=>{var a,e;return t.style.display!=="none"&&((e=(a=t.parentElement)===null||a===void 0?void 0:a.parentElement)===null||e===void 0?void 0:e.style.display)!=="none"};this.showSettings=false;this.showAbout=false;this.enableToggleTheme=false;this.enableSettings=true;this.enableMapExpand=false;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.showPinned=false;this.mapExpand=true;this.activeTab=undefined;this.mode="large";this.itemsScrollShadowTop=false;this.itemsScrollShadowBottom=false}pinnedChange(t){this.setPinned(this.pinned);if(t){h.disableModeDetection();h.setMode("large");return}h.enableModeDetection()}forceLayoutChange(t){if(this.pinned){console.warn("You cannot force a layout while pinned property is set!");return}if(!t){h.enableModeDetection();return}h.disableModeDetection();h.setMode(t)}supportedModesChange(t){h.setSupportedMods(t)}get popoverArea(){return this.hostElement.shadowRoot.querySelector("#popover-area")}get menu(){return this.hostElement.shadowRoot.querySelector(".menu")}get menuItemsContainer(){return this.menu.querySelector(".tabs")}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)}get menuBottomItems(){return Array.from(this.hostElement.querySelectorAll("ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)")).filter(this.isVisible)}get homeTab(){return this.hostElement.querySelector("ix-menu-item.home-tab")}get moreItemsDropdown(){return this.hostElement.shadowRoot.querySelector(".internal-tab ix-dropdown")}get isMoreItemsDropdownEmpty(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown .appended").length===0}get moreItemsDropdownItems(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown ix-menu-item")}get activeMoreTabContainer(){return this.hostElement.shadowRoot.querySelector(".active-more-tab")}get activeMoreTab(){return this.hostElement.shadowRoot.querySelector(".active-more-tab ix-menu-item")}get aboutPopoverContainer(){return this.hostElement.querySelector(".about-news")}get aboutsNewsPopover(){var t;return(t=document.querySelector("ix-menu-about-news"))!==null&&t!==void 0?t:this.hostElement.querySelector("ix-menu-about-news")}get aboutTab(){return this.hostElement.shadowRoot.querySelector("#aboutAndLegal")}get about(){return this.hostElement.querySelector("ix-menu-about")}get settings(){return this.hostElement.querySelector("ix-menu-settings")}get isSettingsEmpty(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-menu-settings-item")).length===0}get tabsContainer(){return this.hostElement}componentDidLoad(){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(){m.register(this.hostElement);const t=c("ix-basic-navigation",this.hostElement);if(f(t)&&t.hideHeader===false){h.onChange.on((t=>this.onModeChange(t)));this.onModeChange(h.mode)}}componentWillRender(){this.appendTabs()}componentDidRender(){this.appendFragments()}setPinned(t){this.showPinned=t;m.setIsPinned(t)}onModeChange(t){if(!this.supportedModes.includes(t)){return}this.mode=t;if(this.mode==="large"){this.setPinned(true);this.toggleMenu(true);return}this.setPinned(false);this.toggleMenu(false)}appendFragments(){this.appendAboutNewsPopover()}resetActiveTab(){this.activeTab=null}appendTabs(){this.activeTab=null}getAboutPopoverVerticalPosition(){const t=12;const a=6;const e=this.aboutTab.getBoundingClientRect();const i=window.innerHeight-(e.bottom-e.height/2+t/2+a);return l(i)}appendAboutNewsPopover(){var t;if(!this.aboutsNewsPopover){return}this.aboutsNewsPopover.style.bottom=this.getAboutPopoverVerticalPosition();if(!((t=this.popoverArea)===null||t===void 0?void 0:t.contains(this.aboutsNewsPopover))){const t=()=>{var t;if(((t=this.aboutsNewsPopover)===null||t===void 0?void 0:t.aboutItemLabel)&&this.about){this.about.activeTabLabel=this.aboutsNewsPopover.aboutItemLabel;this.toggleAbout(true)}};this.aboutsNewsPopover.addEventListener("showMore",t.bind(this));document.body.appendChild(this.aboutsNewsPopover)}}async toggleMapExpand(t){if(t!==undefined){this.mapExpand=t}else{this.mapExpand=!this.mapExpand}}async toggleMenu(t){if(t!==undefined){this.expand=t}else{this.expand=!this.expand}if(this.aboutsNewsPopover){this.aboutsNewsPopover.expanded=this.expand}this.expandChange.emit(this.expand);this.isTransitionDisabled=false;this.checkTransition()}checkTransition(){const t=this.overlayContainer;if(!t){return}if(this.isTransitionDisabled){t.style.transitionProperty="left"}else{t.style.transitionProperty="all"}}isOverlayVisible(){return this.showAbout||this.showSettings}async toggleSettings(t){if(!this.settings){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showSettings=t;this.settings.show=this.showSettings}else{this.onOverlayClose()}}async toggleAbout(t){if(!this.about){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showAbout=t;this.about.show=this.showAbout}else{this.onOverlayClose()}}resetOverlay(){this.showSettings=false;this.showAbout=false;if(this.settings){this.settings.show=false}if(this.about){this.about.show=false}}getCollapseText(){return this.mapExpand?this.i18nCollapse:this.i18nExpand}getCollapseIcon(){return this.mapExpand?"navigation-left":"navigation-right"}isMenuItemClicked(t){if(t.target instanceof e){return t.target.tagName==="IX-MENU-ITEM"}return false}handleOverflowIndicator(){const{clientHeight:t,scrollTop:a,scrollHeight:e}=this.menuItemsContainer;this.itemsScrollShadowTop=a>0;this.itemsScrollShadowBottom=Math.round(a+t)<e}onOverlayClose(){this.animateOverlayFadeOut((()=>{this.resetOverlay()}))}animateOverlayFadeIn(){requestAnimationFrame((()=>{r({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(t){requestAnimationFrame((()=>{r({targets:this.overlayContainer,duration:300,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>t()})}))}onMenuItemsClick(t){if(this.isMenuItemClicked(t)){if(!this.showPinned){this.toggleMenu(false)}this.onOverlayClose()}}render(){return i(n,{class:{expanded:this.expand,[`mode-${this.mode}`]:true},slot:"menu"},i("aside",{class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},i("ix-burger-menu",{onClick:async()=>this.toggleMenu(),expanded:this.expand,ixAriaLabel:this.i18nExpandSidebar,pinned:this.showPinned,class:{"burger-menu":true}}),i("div",{class:"menu-avatar"},i("slot",{name:"ix-menu-avatar"})),i("div",{id:"menu-tabs",style:{display:"contents"},onClick:t=>this.onMenuItemsClick(t)},i("div",{class:"tabs-top"},i("slot",{name:"home"})),i("div",{class:"tabs-shadow-container"},i("div",{class:{"tabs--shadow":true,"tabs--shadow-top":true,"tabs--shadow--show":this.itemsScrollShadowTop}}),i("div",{class:"tabs",onScroll:()=>this.handleOverflowIndicator()},i("slot",null)),i("div",{class:{"tabs--shadow":true,"tabs--shadow-bottom":true,"tabs--shadow--show":this.itemsScrollShadowBottom}}))),i("div",{class:"bottom-tab-divider"}),this.settings?i("ix-menu-item",{id:"settings",class:{"internal-tab":true,"bottom-tab":true,active:this.showSettings},icon:"cogwheel",onClick:async()=>this.toggleSettings(!this.showSettings)},this.i18nSettings):null,i("slot",{name:"bottom"}),i("div",{id:"popover-area"}),this.about?i("ix-menu-item",{id:"aboutAndLegal",class:{"internal-tab":true,"bottom-tab":true,active:this.showAbout},icon:"info",onClick:async()=>this.toggleAbout(!this.showAbout)},this.i18nLegal):null,this.enableToggleTheme?i("ix-menu-item",{id:"toggleTheme",onClick:()=>d.toggleMode(),class:"internal-tab bottom-tab",tabIcon:"bulb"},this.i18nToggleTheme):null,this.enableMapExpand?i("ix-menu-item",{id:"menu-collapse",onClick:()=>this.mapExpandChange.emit(this.mapExpand),class:"internal-tab bottom-tab",icon:`${this.getCollapseIcon()}`},this.getCollapseText()):null),i("div",{class:{"menu-overlay":true,visible:this.isOverlayVisible(),expanded:this.expand},onTransitionEnd:()=>{this.isTransitionDisabled=true;this.checkTransition()}},this.showSettings?i("slot",{name:"ix-menu-settings"}):null,this.showAbout?i("slot",{name:"ix-menu-about"}):null))}get hostElement(){return o(this)}static get watchers(){return{pinned:["pinnedChange"],supportedModes:["supportedModesChange"]}}};g.style=u;const b=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:0}:host .about-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";const y=class{constructor(e){t(this,e);this.close=a(this,"close",7);this.activeTabLabel=undefined;this.label="About & legal information";this.show=false;this.labels=[]}get aboutItems(){return Array.from(this.el.querySelectorAll("ix-menu-about-item"))}setTab(t){this.activeTabLabel=t;this.aboutItems.forEach((t=>{t.style.display="none";if(t.label===this.activeTabLabel){t.style.display="block"}}))}componentWillLoad(){if(this.aboutItems.length){this.setTab(this.activeTabLabel||this.aboutItems[0].label)}}componentDidLoad(){s(this.el)}componentWillRender(){this.updateLabels()}updateLabels(){this.labels=this.aboutItems.map((t=>t.label))}watchActiveTabLabel(t){setTimeout((()=>this.setTab(t)))}getSelectedTabIndex(t){const a=this.aboutItems.find((a=>a.label===t));return this.aboutItems.indexOf(a)}getTabItems(){return this.aboutItems.map((({label:t})=>i("ix-tab-item",{class:{active:t===this.activeTabLabel},onClick:()=>this.setTab(t)},t)))}render(){return i(n,{class:{show:this.show},slot:"ix-menu-about"},i("div",{class:"about-header"},i("h2",{class:"text-h2"},this.label),i("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:t=>this.close.emit({name:"ix-menu-about",nativeEvent:t})})),i("ix-tabs",{selected:this.getSelectedTabIndex(this.activeTabLabel),class:"about-tabs"},this.getTabItems()),i("div",{class:"about-items"},i("slot",null)))}get el(){return o(this)}static get watchers(){return{activeTabLabel:["watchActiveTabLabel"]}}};y.style=b;const v=":host{display:block}";const x=class{constructor(a){t(this,a);this.label=undefined}render(){return i(n,null,i("slot",null))}};x.style=v;const k=":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-left:4rem;margin-top:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}";const _=class{constructor(e){t(this,e);this.showMore=a(this,"showMore",7);this.closePopover=a(this,"closePopover",7);this.show=false;this.label=undefined;this.i18nShowMore="Show more";this.aboutItemLabel=undefined;this.offsetBottom=0;this.expanded=false}render(){return i(n,{class:{expanded:this.expanded,show:!this.show}},i("div",{class:"banner-container"},i("ix-icon",{color:"color-inv-contrast-text",name:"shout",size:"32"}),i("svg",{viewBox:"0 0 48 56",xmlns:"http://www.w3.org/2000/svg"},i("polygon",{points:"0 0 48 0 48 56 24 48 0 56"}))),i("div",{class:"cui-popover-news-header"},i("ix-typography",{variant:"default-title-single"},this.label)),i("ix-icon-button",{size:"24",icon:"close-small",ghost:true,onClick:()=>{this.show=false;this.closePopover.emit()}}),i("slot",null),this.aboutItemLabel?i("div",{class:"cui-popover-news-footer"},i("ix-button",{variant:"primary",onClick:t=>{this.show=false;this.showMore.emit(t)}},this.i18nShowMore)):null,i("div",{id:"arrow"}))}};_.style=k;const w=":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:0.15s;border-radius:1.25rem}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";const I=class{constructor(e){t(this,e);this.logoutClick=a(this,"logoutClick",7);this.avatarElementId="ix-menu-avatar-id";this.top=undefined;this.bottom=undefined;this.image=undefined;this.initials=undefined;this.i18nLogout="Logout"}render(){return i(n,{slot:"ix-menu-avatar"},i("li",{class:"nav-item top-item avatar no-hover",title:this.top,id:this.avatarElementId},i("ix-avatar",{image:this.image,initials:this.initials}),i("div",{class:"avatar-name"},i("span",{class:"text-default-single",title:this.top},this.top),i("span",{class:"text-default-single",title:this.bottom},this.bottom))),i("ix-dropdown",{trigger:this.hostElement,placement:"right-start",offset:{mainAxis:6}},i("slot",null),i("ix-menu-avatar-item",{label:this.i18nLogout,icon:"log-out",onClick:t=>{this.logoutClick.emit(t)}})))}get hostElement(){return o(this)}};I.style=w;const O=":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}";const z=class{constructor(e){t(this,e);this.itemClick=a(this,"itemClick",7);this.icon=undefined;this.label=undefined}render(){return i("ix-dropdown-item",{icon:this.icon,label:this.label,onClick:t=>this.itemClick.emit(t)})}get hostElement(){return o(this)}};z.style=O;const L=':host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:"";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}';const S=class{constructor(a){t(this,a);this.home=false;this.bottom=false;this.tabIcon="document";this.icon=undefined;this.notifications=undefined;this.active=undefined;this.disabled=undefined;this.title=undefined}componentWillRender(){this.title=this.hostElement.innerText}connectedCallback(){this.observer=p((()=>{this.title=this.hostElement.innerText}));this.observer.observe(this.hostElement,{subtree:true,childList:true,characterData:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){var t;let a={};if(this.home){a={slot:"home"}}if(this.bottom){a={slot:"bottom"}}return i(n,Object.assign({class:{disabled:this.disabled,"home-tab":this.home,"bottom-tab":this.bottom,active:this.active}},a),i("li",{class:"tab",title:this.title},i("ix-icon",{name:(t=this.icon)!==null&&t!==void 0?t:this.tabIcon}),i("div",{class:"notification"},this.notifications?i("div",{class:"pill"},this.notifications):null),i("span",{class:"tab-text text-default"},i("slot",null))))}get hostElement(){return o(this)}};S.style=L;const X=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:0}:host .settings-tabs{margin-bottom:1.5rem}";const R=class{constructor(e){t(this,e);this.close=a(this,"close",7);this.activeTabLabel=undefined;this.label="Settings";this.show=false}get settingsItems(){return Array.from(this.el.querySelectorAll("ix-menu-settings-item"))}setTab(t){this.activeTabLabel=t;this.settingsItems.forEach((t=>{t.style.display="none";if(t.label===this.activeTabLabel){t.style.display="block"}}))}componentWillLoad(){if(this.settingsItems.length){this.setTab(this.activeTabLabel||this.settingsItems[0].label)}}componentDidLoad(){s(this.el)}watchActiveTabLabel(t){this.setTab(t)}getTabItems(){return this.settingsItems.map((({label:t})=>i("ix-tab-item",{class:{active:t===this.activeTabLabel},onClick:()=>this.setTab(t)},t)))}render(){return i(n,{slot:"ix-menu-settings",class:{show:this.show}},i("div",{class:"settings-header"},i("h2",{class:"text-h2"},this.label),i("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:t=>this.close.emit({nativeEvent:t,name:"ix-menu-settings"})})),i("ix-tabs",null,this.getTabItems()),i("slot",null))}get el(){return o(this)}static get watchers(){return{activeTabLabel:["watchActiveTabLabel"]}}};R.style=X;const Y=":host{display:block}";const D=class{constructor(a){t(this,a);this.label=undefined}render(){return i(n,null,i("slot",null))}};D.style=Y;export{g as ix_menu,y as ix_menu_about,x as ix_menu_about_item,_ as ix_menu_about_news,I as ix_menu_avatar,z as ix_menu_avatar_item,S as ix_menu_item,R as ix_menu_settings,D as ix_menu_settings_item};
+//# sourceMappingURL=p-f4d634f5.entry.js.map

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

@@ -0,0 +1 @@
+{"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-94ab7c1c.entry.js → p-fafe1aeb.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s,H as n,g as e}from"./p-1c64b073.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-94ab7c1c.entry.js.map
+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-94ab7c1c.entry.js.map → p-fafe1aeb.entry.js.map}

@@ -1 +1 @@
-{"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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"}
+{"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

@@ -0,0 +1,2 @@
+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