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

package/dist/components/ix-workflow-step.js.map

@@ -1 +1 @@
-{"file":"ix-workflow-step.js","mappings":"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","names":[],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=scoped","./src/components/workflow-step/workflow-step.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/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\n@import 'common-variables';\n\n:host {\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    width: auto;\n    padding: 1.125rem 0 $small-space 0;\n    height: 4rem;\n    width: 12.75rem;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.selected {\n          background-color: var(\n            --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n              --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: $default-space;\n      width: auto;\n      padding: 0 $small-space;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 4rem;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n        }\n      }\n\n      .text {\n        margin-top: 0;\n        margin-left: $default-space;\n        padding: 0;\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-workflow-step--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-workflow-step--background--active);\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\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\n/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  scoped: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() position: 'first' | 'last' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  private customIconSlot: boolean;\n\n  private select() {\n    if (!this.clickable) return;\n    if (this.disabled) return;\n\n    this.selected = true;\n    this.selectedHandler();\n  }\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentDidLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : (\n      ''\n    );\n\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          onClick={() => this.select()}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-workflow-step.js","mappings":"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","names":[],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=scoped","./src/components/workflow-step/workflow-step.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/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\n@import 'common-variables';\n\n:host {\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    width: auto;\n    padding: 1.125rem 0 $small-space 0;\n    height: 4rem;\n    width: 12.75rem;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.selected {\n          background-color: var(--theme-workflow-step-icon-default--color--selected);\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(--theme-workflow-step-icon-done--color--selected);\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: $default-space;\n      width: auto;\n      padding: 0 $small-space;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 4rem;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n        }\n      }\n\n      .text {\n        margin-top: 0;\n        margin-left: $default-space;\n        padding: 0;\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-workflow-step--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-workflow-step--background--active);\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(--theme-workflow-step-icon-default--color--disabled) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\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/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  scoped: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() position: 'first' | 'last' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  private customIconSlot: boolean;\n\n  private select() {\n    if (!this.clickable) return;\n    if (this.disabled) return;\n\n    this.selected = true;\n    this.selectedHandler();\n  }\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentDidLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : (\n      ''\n    );\n\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          onClick={() => this.select()}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/menu-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected){cursor:pointer}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).active,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;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}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{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}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-color-1)}";
+const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block;cursor:pointer}.sc-ix-menu-item-h:not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h:not(.disabled):not(:disabled).active,.sc-ix-menu-item-h:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;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}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{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}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem;background-color:transparent}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:hover,.bottom-tab.selected.sc-ix-menu-item-h:hover,[slot=bottom].active.sc-ix-menu-item-h:hover,[slot=bottom].selected.sc-ix-menu-item-h:hover{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:active,.bottom-tab.selected.sc-ix-menu-item-h:active,[slot=bottom].active.sc-ix-menu-item-h:active,[slot=bottom].selected.sc-ix-menu-item-h:active{background-color:var(--theme-nav-item-secondary--background--selected)}";
 
 const MenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/menu-item.js.map

@@ -1 +1 @@
-{"file":"menu-item.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wzGAAwzG;;MCgB/zG,QAAQ;;;;gBAIJ,KAAK;kBASH,KAAK;mBAKJ,UAAU;;;;;;EAqB5B,IAAI,QAAQ;IACV,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GACpD;EAED,kBAAkB;IAChB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC7D,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAC3B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IAED,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAC/B,SAAG,KAAK,EAAE,eAAe,IAAI,CAAC,OAAO,EAAE,IACrC,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,CACJ,EACJ,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=scoped","./src/components/menu-item/menu-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/text-truncation';\n\n:host {\n  position: relative;\n  display: block;\n\n  .tab {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: 3rem;\n    z-index: 500;\n    padding-left: 1.25rem;\n\n    &:not(.selected) {\n      cursor: pointer;\n\n      @include ghost-hover-pressed;\n    }\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: -$small-space;\n    right: -50%;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 1rem;\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  }\n\n  &.active,\n  &.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: 3rem;\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  &.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  &.home-tab,\n  &[slot='home'] {\n    margin-bottom: 1.5rem;\n  }\n\n  &.bottom-tab,\n  &[slot='bottom'] {\n    $bottom-height: 2.25rem;\n\n    height: $bottom-height;\n\n    .tab {\n      height: $bottom-height;\n    }\n\n    .tab::before {\n      height: $bottom-height;\n    }\n\n    &.active,\n    &.selected {\n      .tab {\n        background-color: var(--theme-color-1);\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  scoped: 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   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Show notification cound 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  get tabLabel() {\n    return this.hostElement.querySelector('.tab-text');\n  }\n\n  componentDidRender() {\n    const spanElement = this.tabLabel;\n    const newTitle = spanElement.innerHTML.replace('&amp;', '&');\n    if (this.title !== newTitle) {\n      this.title = newTitle;\n    }\n  }\n\n  render() {\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      >\n        <li class=\"tab\" title={this.title}>\n          <i class={`glyph glyph-${this.tabIcon}`}>\n            <div class=\"notification\">\n              {this.notifications ? (\n                <div class=\"pill\">{this.notifications}</div>\n              ) : null}\n            </div>\n          </i>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"menu-item.js","mappings":";;AAAA,MAAM,WAAW,GAAG,yqHAAyqH;;MCgBhrH,QAAQ;;;;gBAIJ,KAAK;kBASH,KAAK;mBAKJ,UAAU;;;;;;EAqB5B,IAAI,QAAQ;IACV,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GACpD;EAED,kBAAkB;IAChB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC7D,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAC3B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IAED,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAC/B,SAAG,KAAK,EAAE,eAAe,IAAI,CAAC,OAAO,EAAE,IACrC,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,CACJ,EACJ,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=scoped","./src/components/menu-item/menu-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/text-truncation';\n\n:host {\n  position: relative;\n  display: block;\n  cursor: pointer;\n  @include ghost-hover-pressed;\n\n  .tab {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: 3rem;\n    z-index: 500;\n    padding-left: 1.25rem;\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: -$small-space;\n    right: -50%;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 1rem;\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  }\n\n  &.active,\n  &.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: 3rem;\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  &.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  &.home-tab,\n  &[slot='home'] {\n    margin-bottom: 1.5rem;\n  }\n\n  &.bottom-tab,\n  &[slot='bottom'] {\n    $bottom-height: 2.25rem;\n\n    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      .tab {\n        background-color: var(--theme-nav-item-secondary--background--selected);\n      }\n\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","/*\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';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  scoped: 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   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Show notification cound 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  get tabLabel() {\n    return this.hostElement.querySelector('.tab-text');\n  }\n\n  componentDidRender() {\n    const spanElement = this.tabLabel;\n    const newTitle = spanElement.innerHTML.replace('&amp;', '&');\n    if (this.title !== newTitle) {\n      this.title = newTitle;\n    }\n  }\n\n  render() {\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      >\n        <li class=\"tab\" title={this.title}>\n          <i class={`glyph glyph-${this.tabIcon}`}>\n            <div class=\"notification\">\n              {this.notifications ? (\n                <div class=\"pill\">{this.notifications}</div>\n              ) : null}\n            </div>\n          </i>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/select.js

@@ -0,0 +1,345 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './dropdown-item.js';
+import { d as defineCustomElement$4 } from './filter-chip.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './select-item.js';
+
+const selectCss = ".sc-ix-select-h{display:inline-block;position:relative;height:auto;width:100%}.sc-ix-select-h .select.sc-ix-select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}.sc-ix-select-h .select.sc-ix-select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff !important;outline-offset:var(--theme-input--focus--outline-offset)}.sc-ix-select-h .trigger.sc-ix-select{display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-select-h .input-container.sc-ix-select{display:flex;position:relative;align-items:flex-start;width:100%}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin:0 0.1rem}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);background:transparent;height:1.75rem;width:100%}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:hover,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:focus-visible{border:none;outline:none}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::-moz-placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::-moz-placeholder{opacity:0}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::placeholder{opacity:0}.sc-ix-select-h .chevron-down-container.sc-ix-select{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:100%}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{background-color:var(--theme-btn-invisible-secondary--background--active)}.sc-ix-select-h .add-item.sc-ix-select{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}.sc-ix-select-h .select-list-header.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 2rem}";
+
+const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
+    this.addItem = createEvent(this, "addItem", 7);
+    this.selectedIndices = [];
+    this.allowClear = false;
+    this.mode = 'single';
+    this.editable = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.i18nPlaceholder = 'Select an option';
+    this.i18nPlaceholderEditable = 'Type of select option';
+    this.i18nSelectListHeader = 'Please select an option';
+    this.dropdownShow = false;
+    this.value = undefined;
+    this.dropdownWrapperRef = undefined;
+    this.dropdownAnchor = undefined;
+    this.isDropdownEmpty = false;
+    this.hasFocus = false;
+    this.navigationItem = undefined;
+    this.inputFilterText = undefined;
+    this.inputValue = undefined;
+  }
+  get items() {
+    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+  }
+  get selectedItems() {
+    return this.items.filter((item) => item.selected);
+  }
+  get addItemButton() {
+    return this.hostElement.querySelector('.add-item');
+  }
+  get isSingleMode() {
+    return this.mode === 'single';
+  }
+  get isMultipleMode() {
+    return this.mode === 'multiple';
+  }
+  watchSelectedIndices(newId) {
+    if (!newId) {
+      this.selectValue([]);
+      return;
+    }
+    if (Array.isArray(newId)) {
+      this.selectValue([...newId]);
+      return;
+    }
+    this.selectValue([newId]);
+  }
+  onItemClicked(event) {
+    const newId = event.detail;
+    this.emitItemClick(newId);
+  }
+  watchInputText(newValue) {
+    if (!this.editable) {
+      return;
+    }
+    if (this.itemExists(newValue)) {
+      return;
+    }
+  }
+  emitItemClick(newId) {
+    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
+      if (this.selectedIndices.includes(newId)) {
+        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
+      }
+      else {
+        this.selectedIndices = [...this.selectedIndices, newId];
+      }
+    }
+    else {
+      this.selectedIndices = [newId];
+    }
+    this.selectValue(this.selectedIndices);
+    this.itemSelectionChange.emit(this.selectedIndices);
+  }
+  emitAddItem(value) {
+    if (value.trim() === '') {
+      return;
+    }
+    const test = document.createElement('ix-select-item');
+    test.value = value;
+    test.label = value;
+    this.addItemRef.appendChild(test);
+    this.clearInput();
+    this.emitItemClick(value);
+    this.addItem.emit(value);
+  }
+  selectValue(ids) {
+    var _a;
+    this.items.forEach((item) => {
+      item.selected = ids.some((i) => i === item.value);
+    });
+    this.value = this.selectedItems.map((item) => item.label);
+    if (this.isSingleMode) {
+      this.inputValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
+      return;
+    }
+    this.inputValue = null;
+  }
+  componentWillLoad() {
+    if (this.selectedIndices) {
+      this.selectValue(Array.isArray(this.selectedIndices)
+        ? this.selectedIndices
+        : [this.selectedIndices]);
+    }
+  }
+  onLabelChange(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.selectValue(Array.isArray(this.selectedIndices)
+      ? this.selectedIndices
+      : [this.selectedIndices]);
+  }
+  disconnectedCallback() {
+    if (this.labelMutationObserver) {
+      this.labelMutationObserver.disconnect();
+    }
+  }
+  itemExists(item) {
+    return this.items.find((i) => i.label === item);
+  }
+  dropdownVisibilityChanged(event) {
+    this.dropdownShow = event.detail;
+    if (event.detail) {
+      this.inputRef.focus();
+      this.inputRef.select();
+      this.navigationItem = this.items[0];
+      this.setHoverEffectForNavigatedSelectItem();
+      this.removeHiddenFromItems();
+    }
+    this.hasFocus = event.detail;
+  }
+  async onKeyDown(event) {
+    if (!this.dropdownShow) {
+      return;
+    }
+    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+      this.onArrowNavigation(event);
+    }
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      await this.onEnterNavigation();
+    }
+    if (event.code === 'Escape') {
+      this.dropdownShow = false;
+    }
+  }
+  async onEnterNavigation() {
+    var _a, _b;
+    if (this.isMultipleMode) {
+      return;
+    }
+    if (this.editable && !this.itemExists(this.inputFilterText)) {
+      this.emitAddItem(this.inputFilterText);
+      this.navigationItem = this.items[this.items.length - 1];
+    }
+    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
+    await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
+    if (this.isSingleMode && !this.editable) {
+      this.dropdownShow = false;
+    }
+  }
+  onArrowNavigation(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const selectItems = this.items.filter((i) => !i.classList.contains('d-none'));
+    const index = selectItems.indexOf(this.navigationItem);
+    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
+      this.navigationItem = selectItems[index + 1];
+    }
+    else if (event.code === 'ArrowUp' && index > 0) {
+      this.navigationItem = selectItems[index - 1];
+    }
+    this.setHoverEffectForNavigatedSelectItem();
+  }
+  setHoverEffectForNavigatedSelectItem() {
+    this.items.forEach((item) => {
+      item.hover = item === this.navigationItem;
+    });
+  }
+  filterItemsWithTypeahead() {
+    this.inputFilterText = this.inputRef.value;
+    if (this.inputFilterText) {
+      this.items.forEach((item) => {
+        item.classList.remove('d-none');
+        if (!item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())) {
+          item.classList.add('d-none');
+        }
+      });
+    }
+    else {
+      this.removeHiddenFromItems();
+    }
+    this.isDropdownEmpty = this.items.every((item) => item.classList.contains('d-none'));
+  }
+  removeHiddenFromItems() {
+    this.items.forEach((item) => {
+      item.classList.remove('d-none');
+    });
+  }
+  clearInput() {
+    this.inputRef.value = '';
+    this.inputFilterText = '';
+  }
+  clear() {
+    this.clearInput();
+    this.value = [];
+    this.selectedIndices = [];
+    this.itemSelectionChange.emit(null);
+    this.dropdownShow = false;
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, null, h("div", { class: {
+        'form-control': true,
+        select: true,
+        focus: this.hasFocus,
+        editable: this.editable,
+        disabled: this.disabled,
+        readonly: this.readonly,
+      }, ref: (ref) => {
+        this.dropdownAnchor = ref;
+        if (!this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
+      ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.emitItemClick(item.value);
+        } }, item.label)))
+      : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+        'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
+      }, placeholder: this.editable
+        ? this.i18nPlaceholderEditable
+        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.isMultipleMode &&
+      this.allowClear &&
+      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.clear();
+      } })) : null, this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
+        if (this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, class: {
+        'd-none': this.disabled ||
+          this.readonly ||
+          (this.isDropdownEmpty && !this.editable),
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
+        return {
+          width: `${this.hostElement.clientWidth}px`,
+        };
+      } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+        'add-item': true,
+        'd-none': !(this.editable && this.inputFilterText),
+      }, label: this.inputFilterText, onItemClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitAddItem(this.inputFilterText);
+      } })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "selectedIndices": ["watchSelectedIndices"],
+    "inputFilterText": ["watchInputText"]
+  }; }
+  static get style() { return selectCss; }
+}, [6, "ix-select", {
+    "selectedIndices": [1025, "selected-indices"],
+    "allowClear": [4, "allow-clear"],
+    "mode": [1],
+    "editable": [4],
+    "disabled": [4],
+    "readonly": [4],
+    "i18nPlaceholder": [1, "i-1-8n-placeholder"],
+    "i18nPlaceholderEditable": [1, "i-1-8n-placeholder-editable"],
+    "i18nSelectListHeader": [1, "i-1-8n-select-list-header"],
+    "dropdownShow": [32],
+    "value": [32],
+    "dropdownWrapperRef": [32],
+    "dropdownAnchor": [32],
+    "isDropdownEmpty": [32],
+    "hasFocus": [32],
+    "navigationItem": [32],
+    "inputFilterText": [32],
+    "inputValue": [32]
+  }, [[0, "itemClick", "onItemClicked"], [0, "ix-select-item:labelChange", "onLabelChange"], [8, "keydown", "onKeyDown"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-select", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon", "ix-icon-button", "ix-select-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Select);
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-filter-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-select-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Select as S, defineCustomElement as d };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"file":"select.js","mappings":"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","names":[],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./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 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: 100%;\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\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\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 !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\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\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 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  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: $x-large-space;\n    min-width: $x-large-space;\n    height: 100%;\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\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 $x-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  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   */\n  @Prop({ mutable: true }) selectedIndices: 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   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.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  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  @Watch('inputFilterText')\n  watchInputText(newValue: string) {\n    if (!this.editable) {\n      return;\n    }\n\n    if (this.itemExists(newValue)) {\n      return;\n    }\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const test = document.createElement('ix-select-item');\n    test.value = value;\n    test.label = value;\n\n    this.addItemRef.appendChild(test);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.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.navigationItem = this.items[0];\n      this.setHoverEffectForNavigatedSelectItem();\n      this.removeHiddenFromItems();\n    }\n    this.hasFocus = event.detail;\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\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    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.items.forEach((item: HTMLIxSelectItemElement) => {\n      item.hover = item === this.navigationItem;\n    });\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\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    this.isDropdownEmpty = this.items.every((item) =>\n      item.classList.contains('d-none')\n    );\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.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\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.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={\n                    this.editable\n                      ? this.i18nPlaceholderEditable\n                      : this.i18nPlaceholder\n                  }\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.isMultipleMode &&\n                this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"24\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          class={{\n            'd-none':\n              this.disabled ||\n              this.readonly ||\n              (this.isDropdownEmpty && !this.editable),\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              width: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div class=\"select-list-header\" title={this.i18nSelectListHeader}>\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.itemExists(this.inputFilterText) ? (\n            ''\n          ) : (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n                'd-none': !(this.editable && this.inputFilterText),\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/upload-file-state.js

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var UploadFileState;
+(function (UploadFileState) {
+  UploadFileState["SELECT_FILE"] = "SELECT_FILE";
+  UploadFileState["LOADING"] = "LOADING";
+  UploadFileState["UPLOAD_FAILED"] = "UPLOAD_FAILED";
+  UploadFileState["UPLOAD_SUCCESSED"] = "UPLOAD_SUCCESSED";
+})(UploadFileState || (UploadFileState = {}));
+
+export { UploadFileState as U };
+
+//# sourceMappingURL=upload-file-state.js.map

package/dist/components/upload-file-state.js.map

@@ -0,0 +1 @@
+{"file":"upload-file-state.js","mappings":"AAAA;;;;;;;;IASY;AAAZ,WAAY,eAAe;EACzB,8CAA2B,CAAA;EAC3B,sCAAmB,CAAA;EACnB,kDAA+B,CAAA;EAC/B,wDAAqC,CAAA;AACvC,CAAC,EALW,eAAe,KAAf,eAAe;;;;","names":[],"sources":["./src/components/upload/upload-file-state.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 enum UploadFileState {\n  SELECT_FILE = 'SELECT_FILE',\n  LOADING = 'LOADING',\n  UPLOAD_FAILED = 'UPLOAD_FAILED',\n  UPLOAD_SUCCESSED = 'UPLOAD_SUCCESSED',\n}\n"],"version":3}

package/dist/esm/index-3d163acd.js

@@ -2325,6 +2325,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-modal-example.entry.js').then(processMod, consoleError);
+        case 'ix-pagination':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-pagination.entry.js').then(processMod, consoleError);
         case 'ix-tooltip':
           return import(
             /* webpackMode: "lazy" */
@@ -2345,6 +2349,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-group-context-menu.entry.js').then(processMod, consoleError);
+        case 'ix-index-button':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-index-button.entry.js').then(processMod, consoleError);
         case 'ix-typography':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { I as InputState, L as LogicalFilterOperator } from './logical-filter-op
 export { F as FlipTileState } from './flip-tile-state-051bb2fd.js';
 export { c as closeModal, d as dismissModal, m as modal } from './modal-utils-aecbcba5.js';
 export { r as renderDefaultItem } from './default-tree-item-91ff2c08.js';
+export { U as UploadFileState } from './upload-file-state-532a36d3.js';
 export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util-cfc2ea72.js';
 export { T as ThemeSwitcher, t as themeSwitcher } from './theme-switcher-7498e4f2.js';
 import './typed-event-a230184a.js';
@@ -39,6 +40,9 @@ function getToastContainer() {
   }
   return container;
 }
+function setToastPosition(position) {
+  getToastContainer().position = position;
+}
 async function toast(config) {
   const context = getToastContainer();
   const toast = await context.showToast(config);
@@ -57,6 +61,6 @@ toast.warning = (config) => {
   return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
 };
 
-export { FilterState, toast };
+export { FilterState, getToastContainer, setToastPosition, toast };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;AAqBA,SAAS,iBAAiB;EACxB,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.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\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\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\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nfunction getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast container are found. Only there first is used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nasync function toast(config: ToastConfig) {\n  const context = getToastContainer();\n  const toast = await context.showToast(config);\n  return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;SAsBgB,iBAAiB;EAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;EACtD,iBAAiB,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.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\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\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\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast container are found. Only there first is used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  getToastContainer().position = position;\n}\n\nasync function toast(config: ToastConfig) {\n  const context = getToastContainer();\n  const toast = await context.showToast(config);\n  return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"],"version":3}