@siemens/ix 2.3.0 → 2.4.0

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

@@ -1,2 +0,0 @@
-import{r as s,h as t,H as o}from"./p-ac552df3.js";const c=":host{display:block}";const l=c;const n=class{constructor(t){s(this,t);this.contentVisible=false}render(){return t(o,{key:"42fe2007b429b2791c5f0a43758d55d4429c3255"},this.contentVisible?t("slot",null):null)}};n.style=l;export{n as ix_flip_tile_content};
-//# sourceMappingURL=p-af2ee1e2.entry.js.map

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

@@ -1,2 +0,0 @@
-export{a as ix_menu_settings}from"./p-c50cdde4.js";import"./p-ac552df3.js";
-//# sourceMappingURL=p-b331622d.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as t}from"./p-ac552df3.js";const s=":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";const o=s;const c=class{constructor(a){e(this,a)}render(){return a(t,{key:"f6d440918bef7125ac06449ab6d0cd4088f5fefb"},a("ix-spinner",{key:"3efc2e66c193f2af94f4f5d6dc3e91daa2049008",variant:"primary"}),a("span",{key:"4d81c46bedae034801a35637ca78bd8f2b618124",class:"loading-text"},a("slot",{key:"90bf6e1aeac791f70c203fb6bf32dcb7cb313719"})))}};c.style=o;export{c as ix_modal_loading};
-//# sourceMappingURL=p-ba68b58c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabItemCss","IxTabItemStyle0","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","key","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","IxTabsStyle0","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","arrowLeftElement","hostElement","shadowRoot","querySelector","arrowRightElement","onWindowResize","totalItems","getTabs","length","move","Array","from","querySelectorAll","getTab","getTabsWrapper","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","getArrowStyle","condition","opacity","zIndex","amount","click","maxScrollWidth","currentScrollAmount","styles","join","setAttribute","moveTabToView","tab","x","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","left","mousedownPositionX","clientX","dragMove","addEventListener","removeEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","previousArrow","Object","assign","style","componentDidLoad","forEach","onTabClick","target","scrollAmount","name"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\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\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * On tab click\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\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\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private get arrowLeftElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-left]'\n    ) as HTMLElement;\n  }\n\n  private get arrowRightElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-right]'\n    ) as HTMLElement;\n  }\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrameNoNgZone(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n\n      Object.assign(\n        this.arrowLeftElement.style,\n        this.getArrowStyle(previousArrow)\n      );\n      Object.assign(\n        this.arrowRightElement.style,\n        this.getArrowStyle(showNextArrow)\n      );\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          data-arrow-left\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          data-arrow-right\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as c,g as s}from"./p-ac552df3.js";import"./p-46a6cd9d.js";import{d,c as t}from"./p-6e6efb4c.js";import"./p-c4749812.js";const o=class{constructor(a){e(this,a)}dismiss(){d(this.host)}close(){t(this.host,"Done!")}render(){return a(c,{key:"e219bbf7bea6f929aa522982cbdf055b3fc45a92"},a("div",{key:"186e10c89c6fd9f626a8fa7642a3a2efe9b4e899"},a("div",{key:"2919c50fa62881cc689d659657bd5b55fb7c6f81",class:"modal-header"},"Message headline",a("ix-icon-button",{key:"3dc6851c96c9140f1b13a0c312100acd71762fcd","data-close-button":true,ghost:true,icon:"close",onClick:()=>this.dismiss()})),a("div",{key:"4b202214dad7f1502f4201969d7cf1a378a55957",class:"modal-body"},"Message text lorem ipsum"),a("div",{key:"b8df28789d9cede8b78117a8b2cd88b7088e9ea1",class:"modal-footer"},a("ix-button",{key:"eace38404f5761f3ead889d477481dfd33a5de3a",outline:true,onClick:()=>this.dismiss()},"Cancel"),a("ix-button",{key:"38d00bad14606c86ea9ca37bae984579a43475e6",onClick:()=>this.close()},"OK"))))}get host(){return s(this)}};export{o as ix_modal_example};
-//# sourceMappingURL=p-d6116286.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","IxSelectStyle0","Select","this","focusControllerCallbackBind","focusDropdownItem","bind","itemObserver","createMutationObserver","arrowFocusController","items","visibleNonShadowItems","nonShadowItems","Array","from","hostElement","querySelectorAll","filter","item","classList","contains","shadowItems","shadowRoot","visibleShadowItems","visibleItems","selectedItems","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","isEveryDropdownItemHidden","every","watchSelectedIndices","value","updateSelection","watchValue","selectedIndices","watchDropdownShow","show","ArrowFocusController","dropdownRef","wrap","editable","observe","childList","subtree","disconnect","undefined","onItemClicked","event","newId","detail","itemClick","index","navigationItem","length","nestedDropdownItem","_a","requestAnimationFrame","focus","toggleValue","emitValueChange","emitAddItem","trim","newItem","document","createElement","label","customItemsContainerRef","appendChild","clearInput","addItem","emit","itemValue","isArray","includes","ids","forEach","some","i","toString","selectedLabels","map","inputValue","inputRef","valueChange","itemSelectionChange","componentDidLoad","addEventListener","dropdownShow","inputChange","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","itemMutationObserver","itemExists","find","dropdownVisibilityChanged","select","removeHiddenFromItems","isDropdownEmpty","inputFilterText","onKeyDown","code","onArrowNavigation","onEnterNavigation","onItemClick","updatePosition","key","defaultPrevented","stopPropagation","activeElement","applyFocusTo","shift","isAddItemVisible","focusAddItemButton","moveUp","indexNonShadow","indexOf","pop","addItemRef","getDropdownItemElement","indexShadow","element","setTimeout","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","e","target","placeholderValue","disabled","readonly","i18nPlaceholderEditable","i18nPlaceholder","render","h","Host","class","ref","dropdownAnchor","dropdownWrapperRef","onCloseClick","autocomplete","readOnly","type","allowClear","_b","placeholder","onBlur","onFocus","onInput","_c","icon","ghost","oval","size","onClick","closeBehavior","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","async","minWidth","clientWidth","hidden","hideListHeader","title","i18nSelectListHeader","i18nNoMatches","__decorate","OnListener","self"],"sources":["src/components/select/select.scss?tag=ix-select&encapsulation=shadow","src/components/select/select.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  min-height: 2rem;\n  height: auto;\n  border-radius: var(--theme-input--border-radius);\n\n  .d-none {\n    display: none;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n    box-shadow: var(--theme-inset-shadow-1) !important;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .select.readonly,\n  .select.disabled {\n    box-shadow: none !important;\n    border: none;\n    border-radius: 0;\n    cursor: pointer;\n\n    &,\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n\n    &:focus,\n    &:focus-within,\n    &:focus-visible {\n      outline: none;\n    }\n\n    input:focus,\n    input:focus-visible {\n      outline: none;\n    }\n  }\n\n  .select.disabled {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-weak-bdr);\n\n    input {\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  .select.readonly {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-soft-bdr);\n\n    input {\n      color: var(--theme-color-std-text);\n    }\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .dropdown-visible {\n    --ix-icon-button-color: var(--theme-color-dynamic--hover);\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 1rem;\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  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { ArrowFocusController } from '../utils/focus';\nimport { OnListener } from '../utils/listener';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items.\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   * @deprecated since 2.0.0. Use the `value` property instead.\n   */\n  @Prop({ mutable: true }) selectedIndices?: string | string[];\n\n  /**\n   * Current selected value.\n   * This corresponds to the value property of ix-select-items\n   * @since 2.0.0\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Value changed\n   * @since 2.0.0\n   */\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item selection changed\n   * @deprecated since 2.0.0. Use `valueChange` instead.\n   */\n  @Event() itemSelectionChange: EventEmitter<string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() selectedLabels: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() navigationItem: DropdownItemWrapper;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private customItemsContainerRef!: HTMLDivElement;\n  private addItemRef!: HTMLIxDropdownItemElement;\n\n  private itemMutationObserver: MutationObserver;\n\n  private arrowFocusController: ArrowFocusController;\n  private focusControllerCallbackBind = this.focusDropdownItem.bind(this);\n\n  private itemObserver = createMutationObserver(() => {\n    this.arrowFocusController.items = this.visibleNonShadowItems;\n  });\n\n  get nonShadowItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get visibleNonShadowItems() {\n    return this.nonShadowItems.filter(\n      (item) => !item.classList.contains('d-none')\n    );\n  }\n\n  get shadowItems() {\n    return Array.from(\n      this.hostElement.shadowRoot.querySelectorAll('ix-select-item')\n    );\n  }\n\n  get visibleShadowItems() {\n    return this.shadowItems.filter(\n      (item) => !item.classList.contains('d-none')\n    );\n  }\n\n  get items() {\n    return [...this.nonShadowItems, ...this.shadowItems];\n  }\n\n  get visibleItems() {\n    return this.items.filter((item) => !item.classList.contains('d-none'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.shadowRoot.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(value: string | string[]) {\n    this.value = value;\n    this.updateSelection();\n  }\n\n  @Watch('value')\n  watchValue(value: string | string[]) {\n    this.selectedIndices = value;\n    this.updateSelection();\n  }\n\n  @Watch('dropdownShow')\n  watchDropdownShow(show: boolean) {\n    if (show) {\n      this.arrowFocusController = new ArrowFocusController(\n        this.visibleNonShadowItems,\n        this.dropdownRef,\n        this.focusControllerCallbackBind\n      );\n\n      this.arrowFocusController.wrap = !this.editable;\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n    } else {\n      this.arrowFocusController.disconnect();\n      this.arrowFocusController = undefined;\n      this.itemObserver.disconnect();\n    }\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.itemClick(newId);\n  }\n\n  private focusDropdownItem(index: number) {\n    this.navigationItem = undefined;\n\n    if (index < this.visibleNonShadowItems.length) {\n      const nestedDropdownItem =\n        this.visibleNonShadowItems[index]?.shadowRoot.querySelector(\n          'ix-dropdown-item'\n        );\n\n      requestAnimationFrame(() => {\n        nestedDropdownItem.shadowRoot.querySelector('button').focus();\n      });\n    }\n  }\n\n  private itemClick(newId: string) {\n    this.value = this.toggleValue(newId);\n    this.updateSelection();\n    this.emitValueChange();\n  }\n\n  private emitAddItem(value: string) {\n    if (value === undefined || value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.customItemsContainerRef.appendChild(newItem);\n\n    this.clearInput();\n    this.itemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private toggleValue(itemValue: string) {\n    if (!this.isMultipleMode) {\n      return itemValue;\n    }\n\n    if (!this.value) {\n      return [itemValue];\n    }\n\n    let value = this.value;\n\n    if (!Array.isArray(value)) {\n      value = [value];\n    }\n\n    if (value.includes(itemValue)) {\n      return value.filter((value) => value !== itemValue);\n    } else {\n      return [...value, itemValue];\n    }\n  }\n\n  private updateSelection() {\n    let ids = [];\n\n    if (this.value) {\n      ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n    }\n\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => {\n        if (typeof i !== typeof item.value) {\n          return i.toString() === item.value.toString();\n        } else {\n          return i === item.value;\n        }\n      });\n    });\n\n    this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode && this.selectedLabels?.length) {\n      this.inputValue = this.selectedLabels[0];\n      this.inputRef && (this.inputRef.value = this.inputValue);\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  private emitValueChange() {\n    this.valueChange.emit(this.value);\n\n    if (!this.value) {\n      this.itemSelectionChange.emit(null);\n    } else {\n      this.itemSelectionChange.emit(\n        Array.isArray(this.value) ? this.value : [this.value]\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.inputRef.addEventListener('input', () => {\n      this.dropdownShow = true;\n      this.inputChange.emit(this.inputRef.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices && !this.value) {\n      this.value = this.selectedIndices;\n    }\n\n    this.updateSelection();\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.updateSelection();\n  }\n\n  disconnectedCallback() {\n    if (this.itemMutationObserver) {\n      this.itemMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n      this.updateSelection();\n      this.inputFilterText = '';\n    }\n  }\n\n  @OnListener<Select>('keydown', (self) => self.dropdownShow)\n  async onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      await this.onArrowNavigation(event, event.code);\n    }\n\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    let item: HTMLIxSelectItemElement;\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      item = this.items[this.items.length - 1];\n    }\n\n    if (item) {\n      item.onItemClick();\n    }\n\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onArrowNavigation(\n    event: KeyboardEvent,\n    key: 'ArrowDown' | 'ArrowUp'\n  ) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dropdownShow = true;\n\n    if (!this.navigationItem && document.activeElement === this.hostElement) {\n      if (this.visibleItems.length) {\n        this.applyFocusTo(this.visibleItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    const moveUp = key === 'ArrowUp';\n    const indexNonShadow = this.visibleNonShadowItems.indexOf(\n      document.activeElement as any\n    );\n\n    // Slotted select items\n    if (indexNonShadow === 0) {\n      if (!this.visibleShadowItems.length && this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      } else {\n        this.applyFocusTo(this.visibleShadowItems.pop());\n      }\n      return;\n    } else if (\n      indexNonShadow !== -1 &&\n      indexNonShadow === this.visibleNonShadowItems.length - 1\n    ) {\n      if (this.visibleShadowItems.length) {\n        this.applyFocusTo(this.visibleShadowItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    if (\n      this.isAddItemVisible() &&\n      this.addItemRef.contains(\n        await this.navigationItem.getDropdownItemElement()\n      )\n    ) {\n      if (moveUp) {\n        this.applyFocusTo(this.visibleItems.pop());\n      } else {\n        if (this.visibleItems.length) {\n          this.applyFocusTo(this.visibleItems.shift());\n        }\n      }\n      return;\n    }\n\n    // Custom select items\n    const indexShadow = this.visibleShadowItems.indexOf(\n      this.navigationItem as any\n    );\n\n    if (moveUp) {\n      if (indexShadow === 0) {\n        if (this.visibleNonShadowItems.length) {\n          this.applyFocusTo(this.visibleNonShadowItems.pop());\n        } else if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);\n      }\n    } else {\n      if (indexShadow === this.visibleShadowItems.length - 1) {\n        if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        } else {\n          this.applyFocusTo(this.visibleItems.shift());\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);\n      }\n    }\n  }\n\n  private applyFocusTo(element: HTMLIxSelectItemElement) {\n    if (!element) {\n      return;\n    }\n\n    this.navigationItem = element;\n\n    setTimeout(() => {\n      element.shadowRoot\n        .querySelector('ix-dropdown-item')\n        .shadowRoot.querySelector('button')\n        .focus();\n    });\n  }\n\n  private focusAddItemButton() {\n    if (this.addItemButton) {\n      this.addItemButton.shadowRoot.querySelector('button').focus();\n      this.navigationItem = this.addItemRef;\n    }\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {\n      return;\n    }\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    if (this.arrowFocusController) {\n      this.arrowFocusController.items = this.visibleNonShadowItems;\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.selectedLabels = [];\n    this.value = [];\n    this.valueChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      return;\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.selectedLabels;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.disabled) {\n      return '';\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            select: true,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.itemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  autocomplete=\"off\"\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear':\n                      this.allowClear && !!this.selectedLabels?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onFocus={() => {\n                    this.navigationItem = undefined;\n                  }}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                  onKeyDown={(e) => this.onKeyDown(e)}\n                />\n                {this.allowClear &&\n                (this.selectedLabels?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon={'clear'}\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <ix-icon-button\n                    data-select-dropdown\n                    class={{ 'dropdown-visible': this.dropdownShow }}\n                    icon=\"chevron-down-small\"\n                    ghost\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  ></ix-icon-button>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n            onClick={(e) => e.preventDefault()}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div\n            ref={(ref) => (this.customItemsContainerRef = ref)}\n            class=\"d-contents\"\n          ></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon={'plus'}\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n              onFocus={() => (this.navigationItem = this.addItemRef)}\n              ref={(ref) => {\n                this.addItemRef = ref;\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as s,g as o}from"./p-ac552df3.js";import{a as r}from"./p-71206084.js";import{c as a}from"./p-7c36d3fa.js";import{c as n}from"./p-e898862b.js";import"./p-c4749812.js";function h(e,t,{debounceTimeEnter:i,debounceTimeLeave:s}={debounceTimeEnter:0,debounceTimeLeave:500}){let o;let r;return{onEnter:()=>{clearTimeout(r);o=setTimeout((()=>{e()}),i)},onLeave:()=>{clearTimeout(o);r=setTimeout((()=>{t()}),s)}}}const c=":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";const d=c;const l=40;const m=150;const b=class{constructor(i){e(this,i);this.closeOtherCategories=t(this,"closeOtherCategories",7);this.enterLeaveDebounce=h((()=>{this.onPointerEnter()}),(()=>{this.onPointerLeave()}));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((e=>e.active))}getNestedItems(){return Array.from(this.hostElement.querySelectorAll(":scope ix-menu-item"))}getNestedItemsHeight(){const e=this.getNestedItems();return e.length*l}onExpandCategory(e){if(e){this.animateFadeIn()}else{this.animateFadeOut()}}animateFadeOut(){const e=25;r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[1,0],maxHeight:[this.getNestedItemsHeight()+l,0],complete:()=>{setTimeout((()=>{this.showItems=false;this.showDropdown=false}),m+e)}})}animateFadeIn(){r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[0,1],maxHeight:[0,this.getNestedItemsHeight()+l],begin:()=>{this.showItems=true;this.showDropdown=false}})}onPointerEnter(){if(this.ixMenu.expand){return}this.closeOtherCategories.emit();this.showDropdown=true}onPointerLeave(){this.showDropdown=false}onCategoryClick(e){e.stopPropagation();if(this.ixMenu.expand){e===null||e===void 0?void 0:e.stopPropagation();this.onExpandCategory(!this.showItems);return}}onNestedItemsChanged(){this.nestedItems=this.getNestedItems()}isCategoryItemListVisible(){return this.menuExpand&&(this.showItems||this.isNestedItemActive())}componentWillLoad(){const e=a(this.hostElement);if(!e){throw Error("ix-menu-category can only be used as a child of ix-menu")}this.ixMenu=e;this.menuExpand=this.ixMenu.expand;this.showItems=this.isCategoryItemListVisible()}componentDidLoad(){this.observer=n((()=>this.onNestedItemsChanged()));this.observer.observe(this.hostElement,{attributes:true,childList:true,subtree:true});requestAnimationFrame((()=>{this.onNestedItemsChanged()}));this.ixMenu.addEventListener("expandChange",(({detail:e})=>{this.menuExpand=e;if(!e){this.clearMenuItemStyles()}this.showItems=this.isCategoryItemListVisible()}))}clearMenuItemStyles(){this.menuItemsContainer.style.removeProperty("max-height");this.menuItemsContainer.style.removeProperty("opacity")}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(s,{key:"e62e654ac84f229e1f669a732c051d96848c730d",class:{expanded:this.showItems},onPointerEnter:()=>{this.enterLeaveDebounce.onEnter()},onPointerLeave:e=>{if(e.pointerType==="touch"){return}this.enterLeaveDebounce.onLeave()}},i("ix-menu-item",{key:"f64066062bdd83ee3c49228d04877fbe78eb15ce",class:"category-parent",active:this.isNestedItemActive(),notifications:this.notifications,icon:this.icon,onClick:e=>this.onCategoryClick(e),onFocus:()=>this.onPointerEnter(),isCategory:true},i("div",{key:"89f722bf950f5428e5b090e14a1ea68be2a27536",class:"category"},i("div",{key:"d72fc532b76d2807a3fad5a54e5243dc712383b6",class:"category-text"},this.label),i("ix-icon",{key:"080cfeb2201ce391ca621fdb1b1bc3b5bfbbe6bb",name:"chevron-down-small",class:{"category-chevron":true,"category-chevron--open":this.showItems}}))),i("div",{key:"5f59b31543e5f71fb188a1b6e952e732ef1c3db4",ref:e=>this.menuItemsContainer=e,class:{"menu-items":true,"menu-items--expanded":this.showItems,"menu-items--collapsed":!this.showItems}},this.showItems?i("slot",null):null),i("ix-dropdown",{key:"15e78232c126dd820258c97a06b9429f5bd37315",closeBehavior:"both",show:this.showDropdown,onShowChanged:({detail:e})=>{this.showDropdown=e},class:"category-dropdown",anchor:this.hostElement,placement:"right-start",offset:{mainAxis:3},onClick:e=>{if(e.target instanceof HTMLElement){if(e.target.tagName==="IX-MENU-ITEM"){this.showDropdown=false}else{e.preventDefault()}}}},i("ix-dropdown-item",{key:"ab83604bfdad3f41d75b73b84703d4f6ea42db25",class:"category-dropdown-header"},i("ix-typography",{key:"1cc375c7695df21d8500f1cc7dd21dd8eed655ff",variant:"default-title-single",color:"std"},this.label)),i("ix-divider",{key:"4a98db042c11712d3e56fc81106d867d54e5022a"}),i("slot",{key:"7172d35ab8b379893be7f79e360c3a3843bb0a05"})))}get hostElement(){return o(this)}};b.style=d;export{b as ix_menu_category};
-//# sourceMappingURL=p-ea0c0738.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as r,H as t,g as o}from"./p-ac552df3.js";import{h as a}from"./p-712e0ee0.js";const c=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const s=c;const b=class{constructor(r){e(this,r);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return r(t,{key:"7298c4abd09355a3ee73d4a236e7025a72720cf7"},r("div",{key:"d7ba3fbc44d66ba0ae4e747a5cc5d77c7388b138",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},r("slot",{key:"233200870318a9276d3e0d5c5d5d03980fbe1793",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),r("div",{key:"ee7f8ceb237b4c33d578262c74d4eca9bdf36070",class:"content"},r("slot",{key:"fbbf86e9c454f04dbe33a9b0456f1cd02ec72c02"})))}get hostElement(){return o(this)}};b.style=s;export{b as ix_content};
-//# sourceMappingURL=p-f237ec25.entry.js.map

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

@@ -1,2 +0,0 @@
-import{h as t}from"./p-ac552df3.js";import{B as o}from"./p-719a3a11.js";function r(r){return t(o,Object.assign({},r,{type:"button"}))}export{r as B};
-//# sourceMappingURL=p-fa3283ea.js.map