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

package/dist/siemens-ix/p-030078b4.entry.js

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

package/dist/siemens-ix/p-030078b4.entry.js.map

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

package/dist/siemens-ix/p-24d2d95e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["categoryFilterCss","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","watchFilterState","newValue","setFilterState","componentDidLoad","initialState","undefined","filterState","setTimeout","_a","hostElement","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","querySelector","show","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","find","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","filterDuplicateTokens","isTokenAlreadySet","some","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","displayDropdown","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderCategoryValues","tabindex","options","renderDropdownContent","renderCategorySelection","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","variant","ghost","oval","icon","size","render","Host","ref","el","hideIcon","name","toString","animate__animated","animate__fadein","onCloseClick","type","placeholder","closeBehavior","trigger","triggerEvent","header"],"sources":["./src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=scoped","./src/components/category-filter/category-filter.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/shadows';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  position: relative;\n\n  .focus {\n    border-color: var(--theme-color-primary);\n    box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n  }\n\n  .reset-button {\n    position: absolute;\n    top: $tiny-space;\n    right: $tiny-space;\n  }\n\n  .reset-button.hide-reset-button {\n    display: none;\n  }\n\n  .input-container {\n    display: flex;\n    height: 100%;\n    max-height: 3.75rem;\n    padding: 1px $large-space 1px $x-large-space;\n\n    &.no-icon {\n      padding-left: $tiny-space;\n    }\n  }\n\n  .token-container {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .text-input {\n    @include ellipsis;\n    @include text-default;\n    background: transparent;\n    flex-grow: 1;\n    height: 1.75rem;\n\n    &,\n    &:hover,\n    &:focus-visible {\n      border: none;\n      outline: none;\n    }\n\n    &.hide-placeholder::placeholder {\n      opacity: 0;\n    }\n  }\n\n  .list-unstyled {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n  }\n\n  ix-icon {\n    position: absolute;\n    top: $small-space;\n    left: $small-space;\n  }\n\n  ix-filter-chip {\n    margin-right: $small-space;\n  }\n\n  .category-preview {\n    display: flex;\n    align-items: center;\n    height: $large-space;\n    background-color: var(--theme-bg-3);\n    border-top-left-radius: $default-space;\n    border-bottom-left-radius: $default-space;\n    padding: $small-space;\n    margin: 2px 0;\n  }\n\n  ul {\n    height: 100%;\n  }\n\n  ul > li,\n  input {\n    padding-top: 2px;\n    padding-bottom: 2px;\n  }\n\n  ix-dropdown {\n    min-width: 10rem !important;\n\n    .dropdown-item-container {\n      display: flex;\n      flex-direction: column;\n\n      .dropdown-item {\n        @include text-default-single;\n        @include ellipsis;\n        height: $large-control-height;\n        margin: $tiny-space $small-space;\n        padding-inline: $small-space;\n        border-radius: 100rem;\n        width: auto;\n      }\n\n      .category-item {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n      }\n\n      .category-item-value {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    .btn-toggle-operator {\n      margin-inline: $small-space;\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  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n  tag: 'ix-category-filter',\n  styleUrl: 'category-filter.scss',\n  scoped: true,\n})\nexport class CategoryFilter {\n  private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n  @State() private textInput?: HTMLInputElement;\n  private formElement?: HTMLFormElement;\n  private isScrollStateDirty: boolean;\n\n  @Element() hostElement: HTMLIxCategoryFilterElement;\n\n  @State() hasFocus: boolean;\n  @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n  @State() inputValue: string;\n  @State() category: string;\n  @State() filterTokens: Array<{\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }> = [];\n\n  /**\n   * When set this will initially populate the component with the provided search criteria.\n   * This will trigger all input events accordingly.\n   * @deprecated Will be removed with 2.0.0. Use the member filterState instead.\n   */\n  @Prop() initialState: FilterState;\n\n  /**\n   * A set of search criteria to populate the component with.\n   */\n  @Prop() filterState: FilterState;\n\n  /**\n   * Placeholder text to be displayed in an empty input field.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n   * Each ID maps to an object with a label and an array of options to select from.\n   */\n  @Prop() categories: {\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  };\n\n  /**\n   * In certain use cases some categories may not be available for selection anymore.\n   * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n   *\n   * Configuration object hash used to supply labels to the filter chips in the input field.\n   * Each ID maps to a string representing the label to display.\n   */\n  @Prop() nonSelectableCategories?: {\n    [id: string]: string;\n  } = {};\n\n  /**\n   * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n   */\n  @Prop() suggestions: string[];\n\n  /**\n   * The icon next to the actual text input\n   * Defaults to 'search'\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Allows to hide the icon inside the text input.\n   * Defaults to false\n   */\n  @Prop() hideIcon: boolean;\n\n  /**\n   * If set to true allows that a single category can be set more than once.\n   * An already set category will not appear in the category dropdown if set to false.\n   *\n   * Defaults to true\n   */\n  @Prop() repeatCategories = true;\n\n  /**\n   * @internal For debugging purposes only!\n   */\n  @Prop() tmpDisableScrollIntoView = true;\n\n  /**\n   * i18n\n   */\n  @Prop() labelCategories = 'Categories';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPlainText = 'Filter by text';\n\n  /**\n   * Event dispatched whenever the text input changes.\n   */\n  @Event() inputChanged: EventEmitter<InputState>;\n\n  /**\n   * Event dispatched whenever the filter state changes.\n   */\n  @Event() filterChanged: EventEmitter<FilterState>;\n\n  @Watch('filterState')\n  watchFilterState(newValue) {\n    this.setFilterState(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.initialState !== undefined) {\n      this.setFilterState(this.initialState);\n    } else if (this.filterState !== undefined) {\n      setTimeout(() => this.setFilterState(this.filterState));\n    }\n\n    this.hostElement?.addEventListener(\n      'keydown',\n      this.handleFormElementKeyDown.bind(this)\n    );\n\n    this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n    if (this.textInput == null) {\n      console.warn(\n        'ix-category-filter - unable to add event listeners to native input element'\n      );\n      return;\n    }\n\n    this.textInput.addEventListener('focusin', () => {\n      this.hasFocus = true;\n    });\n    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n    this.textInput.addEventListener('input', () => {\n      this.inputValue = this.textInput.value;\n      const inputState = new InputState(this.inputValue, this.category);\n      this.inputChanged.emit(inputState);\n    });\n    this.textInput.addEventListener(\n      'keydown',\n      this.handleInputElementKeyDown.bind(this)\n    );\n  }\n\n  private setFilterState(state: FilterState) {\n    this.filterTokens = [];\n\n    for (const token of state.tokens) {\n      this.addToken(\n        token,\n        this.ID_CUSTOM_FILTER_VALUE,\n        this.categoryLogicalOperator,\n        false\n      );\n    }\n\n    for (const category of state.categories) {\n      this.addToken(category.value, category.id, category.operator, false);\n    }\n\n    this.emitFilterEvent();\n  }\n\n  private closeDropdown() {\n    this.hostElement.querySelector('ix-dropdown').show = false;\n  }\n\n  private handleFormElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'Enter':\n      case 'NumpadEnter':\n        if (!document.activeElement.classList.contains('dropdown-item')) {\n          return;\n        }\n\n        const token = document.activeElement.getAttribute('data-id');\n\n        if (this.hasCategorySelection()) {\n          if (this.category) {\n            this.addToken(token, this.category);\n          } else if (\n            document.activeElement.classList.contains('category-item-id')\n          ) {\n            this.selectCategory(token);\n          }\n        } else {\n          this.addToken(token);\n        }\n\n        e.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        this.focusPreviousItem();\n        e.preventDefault();\n        break;\n\n      case 'ArrowDown':\n        this.focusNextItem();\n        e.preventDefault();\n        break;\n\n      case 'Escape':\n        this.closeDropdown();\n        break;\n    }\n  }\n\n  private focusPreviousItem() {\n    const sibling = document.activeElement.previousSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private focusNextItem() {\n    const sibling = document.activeElement.nextSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private handleInputElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'ArrowDown':\n        const selector = `.category-item-${this.category ? 'value' : 'id'}`;\n        let item = this.hostElement.querySelector(selector);\n\n        if (item instanceof HTMLElement) {\n          item.focus();\n          e.stopPropagation();\n        } else if (this.suggestions?.length) {\n          item = this.hostElement.querySelector('.category-item');\n          if (item instanceof HTMLElement) {\n            item.focus();\n            e.stopPropagation();\n          }\n        }\n        break;\n\n      case 'Backspace':\n        if (this.textInput.value !== '') {\n          return;\n        }\n\n        if (this.category) {\n          this.category = undefined;\n          return;\n        }\n\n        const tokenCount = this.filterTokens.length;\n        if (tokenCount > 0) {\n          this.removeToken(tokenCount - 1);\n        }\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n        this.addToken(this.inputValue, this.category);\n        e.preventDefault();\n        break;\n    }\n  }\n\n  private emitFilterEvent() {\n    const tokens = this.filterTokens\n      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n      .map((item) => item.value);\n    const categories = this.filterTokens.filter(\n      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n    );\n    const filterState: FilterState = {\n      tokens,\n      categories,\n    };\n\n    this.filterChanged.emit(filterState);\n  }\n\n  private addToken(\n    token: string,\n    category: string = this.ID_CUSTOM_FILTER_VALUE,\n    operator = this.categoryLogicalOperator,\n    emitEvent = true\n  ) {\n    if (token === undefined || token === null) {\n      return;\n    }\n\n    const newToken = token.trim();\n\n    if (newToken === '') {\n      return;\n    }\n\n    if (this.filterTokens.find((value) => value?.value === newToken)) {\n      return;\n    }\n\n    const pair = { id: category, value: newToken, operator };\n    this.filterTokens = [...this.filterTokens, pair];\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n    if (this.category) {\n      this.category = undefined;\n    }\n\n    this.isScrollStateDirty = true;\n\n    this.textInput.focus();\n\n    if (emitEvent) {\n      this.emitFilterEvent();\n    }\n\n    this.closeDropdown();\n  }\n\n  private removeToken(index: number) {\n    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n    this.emitFilterEvent();\n  }\n\n  private getCategoryIds() {\n    const ids = [];\n    for (const id in this.categories) {\n      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n        ids.push(id);\n      }\n    }\n\n    return ids;\n  }\n\n  private selectCategory(category: string) {\n    this.category = category;\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.textInput.focus();\n  }\n\n  private resetFilter() {\n    this.closeDropdown();\n    this.filterTokens = [];\n    this.emitFilterEvent();\n  }\n\n  private filterMultiples(value: string) {\n    if (this.repeatCategories) {\n      return true;\n    }\n\n    const isCategoryAlreadySet = this.filterTokens.find(\n      (token) => token.id === value\n    );\n\n    return !isCategoryAlreadySet;\n  }\n\n  private filterDuplicateTokens(value: string) {\n    const isTokenAlreadySet = this.filterTokens.some(\n      (token) => token.value === value\n    );\n    return !isTokenAlreadySet;\n  }\n\n  private filterByInput(value: string) {\n    if (this.inputValue === undefined || this.inputValue === '') {\n      return true;\n    }\n\n    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n  }\n\n  private toggleCategoryOperator() {\n    switch (this.categoryLogicalOperator) {\n      case LogicalFilterOperator.EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n        break;\n\n      case LogicalFilterOperator.NOT_EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n        break;\n    }\n  }\n\n  private getFilterChipLabel(value: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }): string {\n    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n      return value.value;\n    }\n\n    const operatorString =\n      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n    const label =\n      this.categories[value.id]?.label ??\n      this.nonSelectableCategories[value.id] ??\n      value.id;\n\n    return `${label} ${operatorString} ${value.value}`;\n  }\n\n  private getFilteredSuggestions() {\n    if (!this.suggestions?.length) {\n      return [];\n    }\n\n    return this.suggestions\n      ?.filter((value) => this.filterByInput(value))\n      .filter((value) => this.filterDuplicateTokens(value));\n  }\n\n  private hasCategorySelection() {\n    return this.categories !== undefined;\n  }\n\n  private displayDropdown() {\n    if (this.hasCategorySelection()) {\n      return true;\n    }\n\n    if (this.suggestions !== undefined) {\n      return this.getFilteredSuggestions().length > 0;\n    }\n\n    return false;\n  }\n\n  private renderPlainSuggestions() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getFilteredSuggestions().map((suggestion) => (\n          <button\n            class=\"dropdown-item\"\n            data-id={suggestion}\n            onClick={() => this.addToken(suggestion)}\n            key={suggestion}\n            title={suggestion}\n          >\n            {suggestion}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  private renderCategoryValues() {\n    return (\n      <div class=\"dropdown-item-container\">\n        <button\n          class=\"btn btn-invisible-secondary btn-icon btn-toggle-operator\"\n          onClick={() => this.toggleCategoryOperator()}\n          tabindex=\"-1\"\n        >\n          {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n            ? '='\n            : '!='}\n        </button>\n        <div class=\"dropdown-header\">\n          {this.categories[this.category]?.label}\n        </div>\n        {this.categories[this.category]?.options\n          .filter((value) => this.filterByInput(value))\n          .filter((value) => this.filterDuplicateTokens(value))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item-value\"\n              data-id={id}\n              title={id}\n              key={id}\n              onClick={() => this.addToken(id, this.category)}\n            >\n              {`${\n                this.categoryLogicalOperator === LogicalFilterOperator.EQUAL\n                  ? '='\n                  : '!='\n              } ${id}`}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private renderDropdownContent() {\n    if (this.hasCategorySelection()) {\n      if (this.category) {\n        return this.renderCategoryValues();\n      } else {\n        return this.renderCategorySelection();\n      }\n    } else return this.renderPlainSuggestions();\n  }\n\n  private renderCategorySelection() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getCategoryIds()\n          ?.filter((id) => this.filterByInput(this.categories[id].label))\n          .filter((id) => this.filterMultiples(id))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item category-item-id\"\n              data-id={id}\n              title={this.categories[id].label}\n              key={id}\n              onClick={() => this.selectCategory(id)}\n              tabindex=\"0\"\n            >\n              {this.categories[id]?.label}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private getDropdownHeader() {\n    if (this.categories) {\n      if (this.category) {\n        return null;\n      } else {\n        return this.labelCategories;\n      }\n    }\n\n    return this.i18nPlainText;\n  }\n\n  componentDidRender() {\n    if (this.isScrollStateDirty) {\n      if (!this.tmpDisableScrollIntoView) {\n        this.textInput.scrollIntoView();\n      }\n      this.isScrollStateDirty = false;\n    }\n  }\n\n  private getResetButton() {\n    return (\n      <ix-icon-button\n        onClick={() => this.resetFilter()}\n        class={{\n          'reset-button': true,\n          'hide-reset-button': !this.filterTokens.length && !this.category,\n        }}\n        variant=\"Primary\"\n        ghost\n        oval\n        icon=\"clear\"\n        size=\"16\"\n        tabindex=\"1\"\n      ></ix-icon-button>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <form ref={(el) => (this.formElement = el)}>\n          <div\n            class={{\n              'form-control': true,\n              'input-container': true,\n              focus: this.hasFocus,\n              'no-icon': this.hideIcon,\n            }}\n          >\n            <ix-icon\n              class={{ 'd-none': this.hideIcon }}\n              name={this.icon}\n              size=\"16\"\n            ></ix-icon>\n            <div class=\"token-container\">\n              <ul class=\"list-unstyled\">\n                {this.filterTokens.map((value, index) => (\n                  <li\n                    key={value.toString()}\n                    class={{\n                      animate__animated: true,\n                      animate__fadein: true,\n                    }}\n                  >\n                    <ix-filter-chip\n                      onCloseClick={() => this.removeToken(index)}\n                    >\n                      {this.getFilterChipLabel(value)}\n                    </ix-filter-chip>\n                  </li>\n                ))}\n                {this.categories === undefined ? (\n                  ''\n                ) : (\n                  <li\n                    class={{\n                      'category-preview': true,\n                      'd-none': !this.category,\n                    }}\n                  >\n                    {this.categories[this.category]?.label}\n                  </li>\n                )}\n                <input\n                  class={{\n                    'text-input': true,\n                    'hide-placeholder': this.category !== undefined,\n                  }}\n                  ref={(el) => (this.textInput = el)}\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                ></input>\n              </ul>\n            </div>\n            {this.getResetButton()}\n          </div>\n        </form>\n\n        <ix-dropdown\n          closeBehavior=\"outside\"\n          trigger={this.textInput}\n          triggerEvent={['click', 'focus']}\n          header={this.getDropdownHeader()}\n          class={{ 'd-none': !this.displayDropdown() }}\n        >\n          {this.renderDropdownContent()}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-28f50519.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","Dropdown","constructor","hostRef","this","autoUpdateCleanup","toggleBind","toggle","bind","openBind","open","dropdownItems","Array","from","hostElement","querySelectorAll","addEventListenersFor","triggerEvent","closeBehavior","triggerElement","addEventListener","removeEventListenersFor","removeEventListener","async","element","resolveElement","isArray","forEach","trigger","Promise","resolve","selector","document","querySelector","observer","MutationObserver","disconnect","observe","body","childList","subtree","newShow","anchorElement","anchor","applyDropdownPosition","changedTrigger","newTriggerValue","oldTriggerValue","registerListener","unregisterListener","clickOutside","event","target","show","_a","contains","_b","dropdownRef","close","isNestedDropdown","closest","isAnchorSubmenu","preventDefault","stopPropagation","showChanged","emit","defaultPrevented","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","placement","includes","push","flip","inline","shift","offset","autoUpdate","computeResponse","computePosition","Object","assign","style","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","disconnectedCallback","render","h","Host","ref","class","overflow","margin","minWidth","position","display","header","dropdownItemCss","DropdownItem","itemClick","checked","label","undefined","icon","disabled","type","hover","onClick","emitItemClick","name","size","glyph"],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-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 '~bootstrap/scss/functions';\n@import 'common-variables';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n@import '~bootstrap/scss/dropdown';\n\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'components/dropdown';\n\n:host {\n  min-width: 0px;\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BasePlacement, Placement, PlacementWithAlignment } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Close behavior\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * Adjust dropdown width to the parent width\n   * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.\n   */\n  @Prop() adjustDropdownWidthToReferenceWith = false;\n\n  /**\n   * Adjust dropdown width to the parent width\n   *\n   * @deprecated Will be removed. Not used anymore\n   */\n  @Prop() adjustDropdownWidthToReferenceWidth = false;\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          this.triggerElement.addEventListener('click', this.openBind);\n        } else {\n          this.triggerElement.addEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: Event) {\n    const target = event.target as HTMLElement;\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!this.dropdownRef.contains(target)) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) this.close();\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = !this.show;\n    this.showChanged.emit(this.show);\n  }\n\n  private open(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = true;\n    this.showChanged.emit(true);\n  }\n\n  private close(event?: Event) {\n    if (event?.defaultPrevented) {\n      return;\n    }\n\n    this.show = false;\n    this.showChanged.emit(false);\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (isSubmenu) {\n      positionConfig.placement = 'right-start';\n    }\n\n    if (this.placement.includes('auto') || isSubmenu) {\n      positionConfig.middleware.push(flip());\n    } else {\n      positionConfig.placement = this.placement as\n        | BasePlacement\n        | PlacementWithAlignment;\n    }\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    if (this.trigger) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-width: 10rem;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\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  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type=\"button\"\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-446a0a3f.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as d,H as n,g as l}from"./p-8fcd6f85.js";import{a as s}from"./p-810b5232.js";const r=".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind ix-icon.sc-ix-blind{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";const t=class{constructor(d){i(this,d);this.collapsedChange=e(this,"collapsedChange",7);this.collapsed=false;this.label=undefined;this.icon=undefined}onHeaderClick(i){if(i.target.closest(".header-actions")){return}i.preventDefault();i.stopImmediatePropagation();this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.querySelector(".blind-content")}animation(i){this.animateCollapse(i)}animateCollapse(i){if(i){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){s({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});s({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){s({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});s({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return d(n,null,d("div",{class:{"blind-header":true,closed:this.collapsed},onClick:i=>this.onHeaderClick(i)},d("span",{ref:i=>this.chevronRef=i,class:{glyph:true,"glyph-chevron-right-small":true}}),d("div",{class:"blind-header-title"},this.label!==undefined?d("span",{class:"blind-header-title-basic"},this.icon!==undefined?d("ix-icon",{name:this.icon}):"",d("span",{class:"blind-header-title-default"},this.label),d("span",{class:"header-actions"},d("slot",{name:"header-actions"}))):d("slot",{name:"custom-header"}))),d("div",{class:{"blind-content":true,hide:this.collapsed}},d("slot",null)))}get hostElement(){return l(this)}static get watchers(){return{collapsed:["animation"]}}};t.style=r;export{t as ix_blind};
-//# sourceMappingURL=p-446a0a3f.entry.js.map

package/dist/siemens-ix/p-446a0a3f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["blindCss","Blind","constructor","hostRef","registerInstance","this","collapsedChange","createEvent","collapsed","label","undefined","icon","onHeaderClick","e","target","closest","preventDefault","stopImmediatePropagation","emit","componentDidLoad","animateCollapse","content","hostElement","querySelector","animation","isCollapsed","rotateChevronRight","rotateChevronDown","anime","targets","chevronRef","duration","easing","rotateZ","opacity","render","h","Host","class","closed","onClick","ref","glyph","name","hide"],"sources":["./src/components/blind/blind.scss?tag=ix-blind&encapsulation=scoped","./src/components/blind/blind.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: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $default-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .glyph {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title,\n    .blind-header-title-basic {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n\n      .blind-header-title-default {\n        @include text-l-title;\n        flex-grow: 1;\n      }\n    }\n\n    .blind-header-title-basic ix-icon {\n      margin-inline-end: $small-space;\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-focus--border-color);\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\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  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            ref={(ref) => (this.chevronRef = ref)}\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n          ></span>\n          <div class=\"blind-header-title\">\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span class=\"header-actions\">\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </div>\n        <div\n          class={{\n            'blind-content': true,\n            hide: this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAW,osH,MC0BJC,EAAK,MA0BhBC,YAAAC,GAAAC,EAAAC,KAAAF,GAAAE,KAAAC,gBAAAC,EAAAF,KAAA,qBAAAA,KAAAG,UAtBoD,MAAKH,KAAAI,MAAAC,UAAAL,KAAAM,KAAAD,SAAA,CAwBjDE,cAAcC,GACpB,GAAKA,EAAEC,OAAmBC,QAAQ,mBAAoB,CACpD,M,CAGFF,EAAEG,iBACFH,EAAEI,2BAEFZ,KAAKG,WAAaH,KAAKG,UACvBH,KAAKC,gBAAgBY,KAAKb,KAAKG,U,CAGjCW,mBACEd,KAAKe,gBAAgBf,KAAKG,U,CAGxBa,cACF,OAAOhB,KAAKiB,YAAYC,cAAc,iB,CAIxCC,UAAUC,GACRpB,KAAKe,gBAAgBK,E,CAGfL,gBAAgBK,GACtB,GAAIA,EAAa,CACfpB,KAAKqB,oB,KACA,CACLrB,KAAKsB,mB,EAIDA,oBACNC,EAAM,CACJC,QAASxB,KAAKyB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,KAEXL,EAAM,CACJC,QAASxB,KAAKgB,QACdU,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAILR,qBACNE,EAAM,CACJC,QAASxB,KAAKyB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,IAEXL,EAAM,CACJC,QAASxB,KAAKgB,QACdU,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIbC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,eAAgB,KAChBC,OAAQlC,KAAKG,WAEfgC,QAAU3B,GAAMR,KAAKO,cAAcC,IAEnCuB,EAAA,QACEK,IAAMA,GAASpC,KAAKyB,WAAaW,EACjCH,MAAO,CACLI,MAAO,KACP,4BAA6B,QAGjCN,EAAA,OAAKE,MAAM,sBACRjC,KAAKI,QAAUC,UACd0B,EAAA,QAAME,MAAM,4BACTjC,KAAKM,OAASD,UACb0B,EAAA,WAASO,KAAMtC,KAAKM,OAAgB,GAItCyB,EAAA,QAAME,MAAM,8BAA8BjC,KAAKI,OAC/C2B,EAAA,QAAME,MAAM,kBACVF,EAAA,QAAMO,KAAK,qBAIfP,EAAA,QAAMO,KAAK,oBAIjBP,EAAA,OACEE,MAAO,CACL,gBAAiB,KACjBM,KAAMvC,KAAKG,YAGb4B,EAAA,c"}

package/dist/siemens-ix/p-58ef1328.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as s,g as n}from"./p-8fcd6f85.js";const l=".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 c=class{constructor(i){e(this,i);this.itemSelectionChange=t(this,"itemSelectionChange",7);this.addItem=t(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((e=>e.selected))}get addItemButton(){return this.hostElement.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}watchSelectedIndices(e){if(!e){this.selectValue([]);return}if(Array.isArray(e)){this.selectValue([...e]);return}this.selectValue([e])}onItemClicked(e){const t=e.detail;this.emitItemClick(t)}watchInputText(e){if(!this.editable){return}if(this.itemExists(e)){return}}emitItemClick(e){if(this.isMultipleMode&&Array.isArray(this.selectedIndices)){if(this.selectedIndices.includes(e)){this.selectedIndices=this.selectedIndices.filter((t=>t!==e))}else{this.selectedIndices=[...this.selectedIndices,e]}}else{this.selectedIndices=[e]}this.selectValue(this.selectedIndices);this.itemSelectionChange.emit(this.selectedIndices)}emitAddItem(e){if(e.trim()===""){return}const t=document.createElement("ix-select-item");t.value=e;t.label=e;this.addItemRef.appendChild(t);this.clearInput();this.emitItemClick(e);this.addItem.emit(e)}selectValue(e){var t;this.items.forEach((t=>{t.selected=e.some((e=>e===t.value))}));this.value=this.selectedItems.map((e=>e.label));if(this.isSingleMode){this.inputValue=((t=this.value)===null||t===void 0?void 0:t.length)?this.value[0]:null;return}this.inputValue=null}componentWillLoad(){if(this.selectedIndices){this.selectValue(Array.isArray(this.selectedIndices)?this.selectedIndices:[this.selectedIndices])}}onLabelChange(e){e.preventDefault();e.stopImmediatePropagation();this.selectValue(Array.isArray(this.selectedIndices)?this.selectedIndices:[this.selectedIndices])}disconnectedCallback(){if(this.labelMutationObserver){this.labelMutationObserver.disconnect()}}itemExists(e){return this.items.find((t=>t.label===e))}dropdownVisibilityChanged(e){this.dropdownShow=e.detail;if(e.detail){this.inputRef.focus();this.inputRef.select();this.navigationItem=this.items[0];this.setHoverEffectForNavigatedSelectItem();this.removeHiddenFromItems()}this.hasFocus=e.detail}async onKeyDown(e){if(!this.dropdownShow){return}if(e.code==="ArrowDown"||e.code==="ArrowUp"){this.onArrowNavigation(e)}if(e.code==="Enter"||e.code==="NumpadEnter"){await this.onEnterNavigation()}if(e.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(){var e,t;if(this.isMultipleMode){return}if(this.editable&&!this.itemExists(this.inputFilterText)){this.emitAddItem(this.inputFilterText);this.navigationItem=this.items[this.items.length-1]}(e=this.navigationItem)===null||e===void 0?void 0:e.onItemClick();await((t=this.dropdownRef)===null||t===void 0?void 0:t.updatePosition());if(this.isSingleMode&&!this.editable){this.dropdownShow=false}}onArrowNavigation(e){e.stopPropagation();e.preventDefault();const t=this.items.filter((e=>!e.classList.contains("d-none")));const i=t.indexOf(this.navigationItem);if(e.code==="ArrowDown"&&i<t.length-1){this.navigationItem=t[i+1]}else if(e.code==="ArrowUp"&&i>0){this.navigationItem=t[i-1]}this.setHoverEffectForNavigatedSelectItem()}setHoverEffectForNavigatedSelectItem(){this.items.forEach((e=>{e.hover=e===this.navigationItem}))}filterItemsWithTypeahead(){this.inputFilterText=this.inputRef.value;if(this.inputFilterText){this.items.forEach((e=>{e.classList.remove("d-none");if(!e.label.toLowerCase().includes(this.inputFilterText.toLowerCase())){e.classList.add("d-none")}}))}else{this.removeHiddenFromItems()}this.isDropdownEmpty=this.items.every((e=>e.classList.contains("d-none")))}removeHiddenFromItems(){this.items.forEach((e=>{e.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 e,t,n;return i(s,null,i("div",{class:{"form-control":true,select:true,focus:this.hasFocus,editable:this.editable,disabled:this.disabled,readonly:this.readonly},ref:e=>{this.dropdownAnchor=e;if(!this.editable)this.dropdownWrapperRef=e}},i("div",{class:"input-container"},i("div",{class:"chips"},this.isMultipleMode?(e=this.selectedItems)===null||e===void 0?void 0:e.map((e=>i("ix-filter-chip",{disabled:this.disabled||this.readonly,key:e.value,onCloseClick:t=>{t.preventDefault();t.stopPropagation();this.emitItemClick(e.value)}},e.label))):"",i("div",{class:"trigger"},i("input",{"data-testid":"input",disabled:this.disabled,readOnly:this.readonly,type:"text",class:{"allow-clear":this.allowClear&&!!((t=this.value)===null||t===void 0?void 0:t.length)},placeholder:this.editable?this.i18nPlaceholderEditable:this.i18nPlaceholder,value:this.inputValue,ref:e=>this.inputRef=e,onInput:()=>this.filterItemsWithTypeahead()}),this.isMultipleMode&&this.allowClear&&(((n=this.value)===null||n===void 0?void 0:n.length)||this.inputFilterText)?i("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:i("div",{class:"chevron-down-container",ref:e=>{if(this.editable)this.dropdownWrapperRef=e}},i("ix-icon",{class:"chevron",name:"chevron-down-small"})))))),i("ix-dropdown",{ref:e=>this.dropdownRef=e,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()=>({width:`${this.hostElement.clientWidth}px`})},i("div",{class:"select-list-header",title:this.i18nSelectListHeader},this.i18nSelectListHeader),i("slot",null),i("div",{ref:e=>this.addItemRef=e,class:"d-contents"}),this.itemExists(this.inputFilterText)?"":i("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 n(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"],inputFilterText:["watchInputText"]}}};c.style=l;class h extends CustomEvent{constructor(e){super("ix-select-item:labelChange",{bubbles:true,detail:e})}}const o=".sc-ix-select-item-h{display:block}.sc-ix-select-item-h ix-dropdown-item.sc-ix-select-item button.sc-ix-select-item{margin-left:1rem}";const r=class{constructor(i){e(this,i);this.itemClick=t(this,"itemClick",7);this.label=undefined;this.value=undefined;this.selected=false;this.hover=false}async onItemClick(e){e===null||e===void 0?void 0:e.preventDefault();e===null||e===void 0?void 0:e.stopPropagation();this.itemClick.emit(this.value)}componentDidRender(){if(!this.value){throw Error("ix-select-item must have a `value` property")}}labelChange(e,t){this.hostElement.dispatchEvent(new h({newValue:e,oldValue:t}))}render(){return i(s,null,i("ix-dropdown-item",{checked:this.selected,hover:this.hover,label:this.label?this.label:this.value,onItemClick:e=>this.onItemClick(e)}))}get hostElement(){return n(this)}static get watchers(){return{label:["labelChange"]}}};r.style=o;export{c as ix_select,r as ix_select_item};
-//# sourceMappingURL=p-58ef1328.entry.js.map

package/dist/siemens-ix/p-58ef1328.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","Select","items","Array","from","this","hostElement","querySelectorAll","selectedItems","filter","item","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","watchSelectedIndices","newId","selectValue","isArray","onItemClicked","event","detail","emitItemClick","watchInputText","newValue","editable","itemExists","selectedIndices","includes","i","itemSelectionChange","emit","emitAddItem","value","trim","test","document","createElement","label","addItemRef","appendChild","clearInput","addItem","ids","forEach","some","map","inputValue","_a","length","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","find","dropdownVisibilityChanged","dropdownShow","inputRef","focus","select","navigationItem","setHoverEffectForNavigatedSelectItem","removeHiddenFromItems","hasFocus","async","code","onArrowNavigation","onEnterNavigation","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","selectItems","classList","contains","index","indexOf","hover","filterItemsWithTypeahead","remove","toLowerCase","add","isDropdownEmpty","every","clear","render","h","Host","class","disabled","readonly","ref","dropdownAnchor","dropdownWrapperRef","key","onCloseClick","e","readOnly","type","allowClear","placeholder","i18nPlaceholderEditable","i18nPlaceholder","onInput","_c","icon","ghost","oval","size","onClick","name","show","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","width","clientWidth","title","i18nSelectListHeader","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","itemClick","componentDidRender","Error","labelChange","oldValue","dispatchEvent","checked"],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./src/components/select-item/select-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/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","/*\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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n\n  ix-dropdown-item {\n    button {\n      margin-left: 1rem;\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  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          checked={this.selected}\n          hover={this.hover}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-6facc3cc.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as e,F as o,H as t,g as r,c as i}from"./p-8fcd6f85.js";const l=".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center;position:relative}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";const c=class{constructor(e){s(this,e);this.vertical=false;this.disabled=false;this.status="open";this.clickable=false;this.selected=false;this.position="undefined";this.iconName="circle";this.iconColor="workflow-step-icon-default--color"}select(){if(!this.clickable)return;if(this.disabled)return;this.selected=true;this.selectedHandler()}selectedHandler(){const s=this.selected?"--selected":"";if(this.status==="open"){this.iconName=this.selected?"circle-dot":"circle";this.iconColor=`workflow-step-icon-default--color${s}`}if(this.status==="done"&&!this.disabled){this.iconColor=`workflow-step-icon-done--color${s}`}}watchPropHandler(){switch(this.status){case"open":this.iconName="circle";this.iconColor="workflow-step-icon-default--color";break;case"success":this.iconName="success";this.iconColor="color-success";break;case"done":this.iconName="success";this.iconColor="workflow-step-icon-done--color";break;case"warning":this.iconName="warning";this.iconColor="color-warning";break;case"error":this.iconName="error";this.iconColor="color-alarm";break;default:this.iconName="circle";break}if(this.disabled){this.iconColor="workflow-step-icon-success--color--disabled"}}componentDidLoad(){this.watchPropHandler();this.selectedHandler();this.customIconSlot=!!this.hostElement.querySelector('[slot="custom-icon"]')}render(){const s=!this.customIconSlot?e(o,null,e("ix-icon",{color:"color-1",name:this.iconName==="warning"?"triangle-filled":"circle-filled",class:"absolute",size:"24"}),e("ix-icon",{color:this.iconColor,name:this.iconName,class:"absolute",size:"24"})):"";return e(t,null,e("div",{tabIndex:0,onClick:()=>this.select(),class:{step:true,selected:this.selected,vertical:this.vertical,disabled:this.disabled}},e("div",{class:"wrapper"},e("div",{class:{line:true,selected:this.selected,[this.status]:true,[this.position]:true}}),e("div",{class:"iconWrapper"},s,e("slot",{name:"custom-icon"}))),e("div",{class:"text"},e("slot",null))))}get hostElement(){return r(this)}static get watchers(){return{selected:["selectedHandler"],status:["watchPropHandler"]}}};c.style=l;const w=".sc-ix-workflow-steps-h .steps.sc-ix-workflow-steps{display:flex}.sc-ix-workflow-steps-h .steps.vertical.sc-ix-workflow-steps{display:block}";const p=class{constructor(e){s(this,e);this.stepSelected=i(this,"stepSelected",7);this.vertical=false;this.linear=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}deselectAll(){const s=this.getSteps();s.forEach((s=>{s.setAttribute("selected","false")}))}componentDidRender(){const s=this.getSteps();s.forEach(((e,o)=>{e.setAttribute("vertical",this.vertical===true?"true":"false");e.setAttribute("clickable",this.clickable===true?"true":"false");e.setAttribute("selected",this.selectedIndex===o?"true":"false");if(o===0)e.setAttribute("position","first");if(o===s.length-1)e.setAttribute("position","last")}))}componentWillRender(){const s=this.getSteps();s.forEach(((e,o)=>{e.addEventListener("click",(()=>{if(!this.clickable)return;const t=s[o-1];if(this.linear&&t&&!["done","success"].includes(t===null||t===void 0?void 0:t.status)){return e.setAttribute("selected","false")}this.deselectAll();e.setAttribute("selected","true");this.stepSelected.emit(o)}))}))}render(){return e(t,null,e("div",{class:{steps:true,vertical:this.vertical}},e("slot",null)))}get hostElement(){return r(this)}};p.style=w;export{c as ix_workflow_step,p as ix_workflow_steps};
-//# sourceMappingURL=p-6facc3cc.entry.js.map

package/dist/siemens-ix/p-6facc3cc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["workflowStepCss","WorkflowStep","select","this","clickable","disabled","selected","selectedHandler","selectedStyle","status","iconName","iconColor","watchPropHandler","componentDidLoad","customIconSlot","hostElement","querySelector","render","icons","h","Fragment","color","name","class","size","Host","tabIndex","onClick","step","vertical","line","position","workflowStepsCss","WorkflowSteps","getSteps","Array","from","querySelectorAll","deselectAll","steps","forEach","element","setAttribute","componentDidRender","index","selectedIndex","length","componentWillRender","addEventListener","previousElement","linear","includes","stepSelected","emit"],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=scoped","./src/components/workflow-step/workflow-step.tsx","./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=scoped","./src/components/workflow-steps/workflow-steps.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","/*\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  .steps {\n    display: flex;\n\n    &.vertical {\n      display: block;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  scoped: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Select linear mode\n   */\n  @Prop() linear: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  private deselectAll() {\n    const steps = this.getSteps();\n    steps.forEach((element) => {\n      element.setAttribute('selected', 'false');\n    });\n  }\n\n  componentDidRender() {\n    const steps = this.getSteps();\n\n    steps.forEach((element, index) => {\n      element.setAttribute(\n        'vertical',\n        this.vertical === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'clickable',\n        this.clickable === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'selected',\n        this.selectedIndex === index ? 'true' : 'false'\n      );\n      if (index === 0) element.setAttribute('position', 'first');\n      if (index === steps.length - 1) element.setAttribute('position', 'last');\n    });\n  }\n\n  componentWillRender() {\n    const steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.addEventListener('click', () => {\n        if (!this.clickable) return;\n        const previousElement = steps[index - 1];\n        if (\n          this.linear &&\n          previousElement &&\n          !['done', 'success'].includes(previousElement?.status)\n        ) {\n          return element.setAttribute('selected', 'false');\n        }\n        this.deselectAll();\n        element.setAttribute('selected', 'true');\n        this.stepSelected.emit(index);\n      });\n      // const isEnabled = element.getAttribute('first');\n      // if(isEnabled){\n\n      // }\n      // console.log(isEnabled)\n      // const isDisabled = element.getAttribute('disabled') !== null;\n      // if (!isDisabled) element.addEventListener('click', () => '');\n      //element.addEventListener('mousedown', event => this.clicked(element, index));\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-73f7ef87.entry.js

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

package/dist/siemens-ix/p-73f7ef87.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","onMouseEnterBind","showTooltip","bind","onMouseLeaveBind","hideTooltip","tooltipCloseTimeInMS","arrowElement","hostElement","shadowRoot","querySelector","destroyAutoUpdate","disposeAutoUpdate","undefined","e","clearTimeout","hideTooltipTimeout","visible","computeTooltipPosition","target","setTimeout","async","autoUpdate","requestAnimationFrame","computeResponse","computePosition","strategy","placement","middleware","shift","offset","arrow","element","flip","fallbackStrategy","middlewareData","x","y","Object","assign","style","left","top","ancestorResize","ancestorScroll","elementResize","queryAnchorElements","Array","from","document","querySelectorAll","for","registerTriggerListener","elements","forEach","addEventListener","registerTooltipListener","interactive","componentDidLoad","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","disconnectedCallback","disconnect","render","tooltipContentClass","h","Host","class","name","variant","titleContent"],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        requestAnimationFrame(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: 'top',\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            let { x, y } = computeResponse.middlewareData.arrow;\n\n            if (computeResponse.placement === 'bottom') {\n              y = -4;\n            }\n\n            Object.assign(this.arrowElement.style, {\n              left: x != null ? `${x}px` : '',\n              top: y != null ? `${y}px` : '',\n            });\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gIAAA,MAAMA,EAAa,sxB,MC6BNC,EAAO,M,yBAsBVC,KAAAC,iBAAmBD,KAAKE,YAAYC,KAAKH,MACzCA,KAAAI,iBAAmBJ,KAAKK,YAAYF,KAAKH,MAEzCA,KAAAM,qBAAuB,G,gEAXT,M,aAEH,K,CAWPC,mBACV,OAAOP,KAAKQ,YAAYC,WAAWC,cAAc,S,CAG3CC,oBACN,GAAIX,KAAKY,oBAAsBC,UAAW,CACxCb,KAAKY,mB,EAIDV,YAAYY,GAClBC,aAAaf,KAAKgB,oBAClBhB,KAAKiB,QAAU,KACfjB,KAAKkB,uBAAuBJ,EAAEK,O,CAGxBd,cACNL,KAAKgB,mBAAqBI,YAAW,KACnCpB,KAAKiB,QAAU,KAAK,GACnBjB,KAAKM,sBACRN,KAAKW,mB,CAGCU,6BAA6BF,GACnCnB,KAAKY,kBAAoBU,EACvBH,EACAnB,KAAKQ,aACLa,UACEE,uBAAsBF,UACpB,MAAMG,QAAwBC,EAC5BN,EACAnB,KAAKQ,YACL,CACEkB,SAAU,QACVC,UAAW,MACXC,WAAY,CACVC,IACAC,EAAO,GACPC,EAAM,CACJC,QAAShC,KAAKO,eAEhB0B,EAAK,CACHC,iBAAkB,wBAM1B,GAAIV,EAAgBW,eAAeJ,MAAO,CACxC,IAAIK,EAAEA,EAACC,EAAEA,GAAMb,EAAgBW,eAAeJ,MAE9C,GAAIP,EAAgBG,YAAc,SAAU,CAC1CU,GAAK,C,CAGPC,OAAOC,OAAOvC,KAAKO,aAAaiC,MAAO,CACrCC,KAAML,GAAK,KAAO,GAAGA,MAAQ,GAC7BM,IAAKL,GAAK,KAAO,GAAGA,MAAQ,I,CAIhC,MAAMD,EAAEA,EAACC,EAAEA,GAAMb,EACjBc,OAAOC,OAAOvC,KAAKQ,YAAYgC,MAAO,CACpCC,KAAML,IAAM,KAAO,GAAGA,MAAQ,GAC9BM,IAAKL,IAAM,KAAO,GAAGA,MAAQ,IAC7B,GACF,GAEJ,CACEM,eAAgB,KAChBC,eAAgB,KAChBC,cAAe,M,CAKbC,sBACN,OAAOC,MAAMC,KAAKC,SAASC,iBAAiBlD,KAAKmD,K,CAG3CC,0BACN,MAAMC,EAAWrD,KAAK8C,sBACtBO,EAASC,SAASxC,IAChBA,EAAEyC,iBAAiB,aAAcvD,KAAKC,kBACtCa,EAAEyC,iBAAiB,aAAcvD,KAAKI,iBAAiB,G,CAInDoD,0BACNxD,KAAKQ,YAAY+C,iBAAiB,cAAc,KAC9C,GAAIvD,KAAKyD,YAAa,CACpB1C,aAAaf,KAAKgB,mB,KAGtBhB,KAAKQ,YAAY+C,iBAAiB,cAAc,KAC9CvD,KAAKK,aAAa,G,CAItBqD,mBACE,GAAI1D,KAAKyD,YAAa,CACpBzD,KAAKM,qBAAuB,G,CAG9BN,KAAK2D,SAAW,IAAIC,kBAAiB,KACnC5D,KAAKoD,yBAAyB,IAGhCpD,KAAK2D,SAASE,QAAQZ,SAASa,KAAM,CACnCC,WAAY,KACZC,gBAAiB,CAAC,mBAClBC,UAAW,KACXC,QAAS,OAGXlE,KAAKoD,0BACLpD,KAAKwD,yB,CAGPW,uBACEnE,KAAK2D,SAASS,aACdpE,KAAKW,mB,CAGP0D,SACE,MAAMC,EAAsB,CAC1B,kBAAmB,MAGrB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLxD,QAASjB,KAAKiB,UAGhBsD,EAAA,OAAKE,MAAO,iBACVF,EAAA,QAAMG,KAAK,eACXH,EAAA,iBAAeI,QAAQ,iBACpB3E,KAAK4E,aACNL,EAAA,QAAMG,KAAK,oBAGfH,EAAA,OAAKE,MAAOH,GACVC,EAAA,cAEFA,EAAA,OAAKE,MAAM,U"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,H as e}from"./p-8fcd6f85.js";const h=".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.done.sc-ix-datetime-picker{display:inline-flex;justify-content:flex-end;padding:1rem;width:100%}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";const n=class{constructor(s){i(this,s);this.done=t(this,"done",7);this.timeChange=t(this,"timeChange",7);this.dateChange=t(this,"dateChange",7);this.dateSelect=t(this,"dateSelect",7);this.range=true;this.showHour=false;this.showMinutes=false;this.showSeconds=false;this.minDate=undefined;this.maxDate=undefined;this.dateFormat="yyyy/LL/dd";this.timeFormat="TT";this.from=undefined;this.to=null;this.time=undefined;this.showTimeReference=undefined;this.eventDelimiter=" - ";this.timeReference=undefined;this.textSelectDate="Done"}onDone(){var i;this.done.emit([this._from,(i=this._to)!==null&&i!==void 0?i:"",this._time].join(this.eventDelimiter));this.dateSelect.emit({from:this._from,to:this._to,time:this._time})}async onDateChange(i){i.preventDefault();i.stopPropagation();const{detail:t}=i;this.dateChange.emit(t);const s=await this.datePickerElement.getCurrentDate();this._from=s.start;this._to=s.end}async onTimeChange(i){i.preventDefault();i.stopPropagation();const{detail:t}=i;this.timeChange.emit(t);const s=await this.timePickerElement.getCurrentTime();this._time=s}componentDidLoad(){this._from=this.from;this._to=this.to;this._time=this.time}render(){return s(e,null,s("div",{class:"flex"},s("div",{class:"separator"}),s("ix-date-picker",{ref:i=>this.datePickerElement=i,corners:"left",individual:false,range:this.range,onDateChange:i=>this.onDateChange(i),from:this.from,to:this.to,format:this.dateFormat,minDate:this.minDate,maxDate:this.maxDate,eventDelimiter:this.eventDelimiter}),s("ix-time-picker",{ref:i=>this.timePickerElement=i,corners:"right",individual:false,showHour:this.showHour,showMinutes:this.showMinutes,showSeconds:this.showSeconds,showTimeReference:this.showTimeReference,onTimeChange:i=>this.onTimeChange(i),time:this.time,format:this.timeFormat,timeReference:this.timeReference}),s("div",{class:"separator"})),s("div",{class:"done"},s("ix-button",{onClick:()=>this.onDone()},this.textSelectDate)))}};n.style=h;export{n as ix_datetime_picker};
-//# sourceMappingURL=p-a4178e26.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["datetimePickerCss","DateTimePicker","undefined","onDone","this","done","emit","_from","_a","_to","_time","join","eventDelimiter","dateSelect","from","to","time","async","event","preventDefault","stopPropagation","detail","date","dateChange","currentDateTime","datePickerElement","getCurrentDate","start","end","timeChange","timePickerElement","getCurrentTime","componentDidLoad","render","h","Host","class","ref","corners","individual","range","onDateChange","format","dateFormat","minDate","maxDate","showHour","showMinutes","showSeconds","showTimeReference","onTimeChange","timeFormat","timeReference","onClick","textSelectDate"],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=scoped","./src/components/datetime-picker/datetime-picker.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\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n}\n\n.flex {\n  display: flex;\n  justify-content: center;\n}\n\n.done {\n  display: inline-flex;\n  justify-content: flex-end;\n  padding: $default-space;\n  width: 100%;\n}\n\n.separator {\n  border: 1px solid var(--theme-datepicker-separator--background);\n  width: 100%;\n  margin-top: 72px;\n  height: 1px;\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';\nimport { DateChangeEvent } from 'src/components';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  scoped: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <div class=\"done\">\n          <ix-button onClick={() => this.onDone()}>\n            {this.textSelectDate}\n          </ix-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,kZ,MC2BbC,EAAc,M,oLAIT,K,cAKG,M,iBAKG,M,iBAKA,M,8DAwBO,a,gBAQA,K,4BAmBD,K,2CAeAC,U,oBAQH,M,iDAYA,M,CAqCjBC,S,MACNC,KAAKC,KAAKC,KACR,CAACF,KAAKG,OAAOC,EAAAJ,KAAKK,OAAG,MAAAD,SAAA,EAAAA,EAAI,GAAIJ,KAAKM,OAAOC,KAAKP,KAAKQ,iBAGrDR,KAAKS,WAAWP,KAAK,CACnBQ,KAAMV,KAAKG,MACXQ,GAAIX,KAAKK,IACTO,KAAMZ,KAAKM,O,CAIPO,mBAAmBC,GACzBA,EAAMC,iBACND,EAAME,kBACN,MAAQC,OAAQC,GAASJ,EACzBd,KAAKmB,WAAWjB,KAAKgB,GAErB,MAAME,QAAwBpB,KAAKqB,kBAAkBC,iBACrDtB,KAAKG,MAAQiB,EAAgBG,MAC7BvB,KAAKK,IAAMe,EAAgBI,G,CAGrBX,mBAAmBC,GACzBA,EAAMC,iBACND,EAAME,kBACN,MAAQC,OAAQL,GAASE,EACzBd,KAAKyB,WAAWvB,KAAKU,GAErB,MAAMQ,QAAwBpB,KAAK0B,kBAAkBC,iBACrD3B,KAAKM,MAAQc,C,CAGfQ,mBACE5B,KAAKG,MAAQH,KAAKU,KAClBV,KAAKK,IAAML,KAAKW,GAChBX,KAAKM,MAAQN,KAAKY,I,CAGpBiB,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,QACTF,EAAA,OAAKE,MAAM,cACXF,EAAA,kBACEG,IAAMA,GAASjC,KAAKqB,kBAAoBY,EACxCC,QAAQ,OACRC,WAAY,MACZC,MAAOpC,KAAKoC,MACZC,aAAevB,GAAUd,KAAKqC,aAAavB,GAC3CJ,KAAMV,KAAKU,KACXC,GAAIX,KAAKW,GACT2B,OAAQtC,KAAKuC,WACbC,QAASxC,KAAKwC,QACdC,QAASzC,KAAKyC,QACdjC,eAAgBR,KAAKQ,iBAGvBsB,EAAA,kBACEG,IAAMA,GAASjC,KAAK0B,kBAAoBO,EACxCC,QAAQ,QACRC,WAAY,MACZO,SAAU1C,KAAK0C,SACfC,YAAa3C,KAAK2C,YAClBC,YAAa5C,KAAK4C,YAClBC,kBAAmB7C,KAAK6C,kBACxBC,aAAehC,GAAUd,KAAK8C,aAAahC,GAC3CF,KAAMZ,KAAKY,KACX0B,OAAQtC,KAAK+C,WACbC,cAAehD,KAAKgD,gBAEtBlB,EAAA,OAAKE,MAAM,eAGbF,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWmB,QAAS,IAAMjD,KAAKD,UAC5BC,KAAKkD,iB"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o,H as i,g as t}from"./p-8fcd6f85.js";const s=".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:0.25rem;display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input--focus)}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;padding:0.5rem;padding-left:0;width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}";const n=class{get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-dropdown-item"))}get groupItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-item:not(.footer)"))}get groupContent(){return this.hostElement.querySelector(".group-content")}get footer(){return this.hostElement.querySelector(".footer")}constructor(o){e(this,o);this.selectGroup=r(this,"selectGroup",7);this.selectItem=r(this,"selectItem",7);this.collapsedChanged=r(this,"collapsedChanged",7);this.suppressHeaderSelection=false;this.header=undefined;this.subHeader=undefined;this.collapsed=true;this.selected=undefined;this.index=undefined;this.expandOnHeaderClick=false;this.dropdownTriggerRef=undefined}async onKeyDown(e){const r=e.target;if(!this.hostElement.contains(r)){return}if(e.code==="Enter"||e.code==="NumpadEnter"){if(r.classList.contains("group-header")){if(this.suppressHeaderSelection){this.collapsed=!this.collapsed}else{this.selected=!this.selected}}else if(r.matches("ix-group-item")){const e=r;e.selected=!e.selected}}}onExpandClick(e){const r=this.collapsed;this.collapsed=!this.collapsed;if(!r&&this.index!==undefined){this.index=undefined;this.setGroupSelection(true)}this.collapsedChanged.emit(this.collapsed);e.stopPropagation()}onHeaderClick(e){this.setGroupSelection(!this.selected);if(this.suppressHeaderSelection){this.onExpandClick(e)}}onItemClick(e){if(e===this.index){this.index=undefined;this.selectItem.emit(undefined)}else{this.index=e;this.selectItem.emit(e)}this.setGroupSelection(false)}setGroupSelection(e){if(!this.suppressHeaderSelection){this.selected=e;this.selectGroup.emit(this.selected)}}componentWillRender(){var e;this.groupItems.forEach(((e,r)=>{var o;e.selected=r===this.index;e.index=r;e.classList.remove("last");if(!((o=this.footer)===null||o===void 0?void 0:o.children.length)&&r===this.groupItems.length-1){e.classList.add("last")}}));if(((e=this.footer)===null||e===void 0?void 0:e.childElementCount)>1){this.groupContent.appendChild(this.footer)}}componentDidLoad(){this.groupContent.addEventListener("selectedChanged",(e=>{this.onItemClick(e.detail.index)}))}render(){return o(i,null,o("div",{class:{"group-header":true,expand:!this.collapsed,selected:this.selected},tabindex:"0"},o("div",{class:"group-header-clickable",onClick:e=>this.onHeaderClick(e)},o("div",{class:"group-header-selection-indicator"}),o("ix-icon",{class:"btn-expand-header",name:`chevron-${this.collapsed?"right":"down"}-small`,onClick:e=>this.onExpandClick(e)}),o("div",{class:"group-header-content"},this.header?o("div",{class:"group-header-props-container"},o("div",{class:"group-header-title"},o("span",{title:this.header},this.header)),o("div",{class:"group-subheader",title:this.subHeader},this.subHeader)):null,o("slot",{name:"header"}))),o("ix-group-context-menu",null,o("slot",{name:"dropdown"}))),o("div",{class:{"group-content":true,"d-none":this.collapsed}},o("slot",null)),o("div",{class:"d-none"},o("ix-group-item",{class:"footer last",suppressSelection:true,focusable:false},o("slot",{name:"footer"}))))}get hostElement(){return t(this)}};n.style=s;const d=".sc-ix-group-dropdown-item-h{display:contents}";const c=class{constructor(r){e(this,r);this.label=undefined;this.icon=undefined}render(){return o(i,null,o("ix-dropdown-item",{label:this.label,icon:this.icon},o("slot",null)))}};c.style=d;const h=".sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;justify-content:space-between;padding:0.5rem 1.5rem 0.5rem 2.5rem;position:relative;margin-top:0.0625rem;border:1px solid var(--theme-group-item--border-color);outline:none;background-color:var(--theme-group-item--background)}.last.sc-ix-group-item-h{border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem}.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:0;height:100%;width:0.25rem}.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text);font-size:0.875rem}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;border-color:var(--theme-group-item--border-color--selected);background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-color-input--focus)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color) !important}";const u=class{constructor(o){e(this,o);this.selectedChanged=r(this,"selectedChanged",7);this.icon=undefined;this.text=undefined;this.secondaryText=undefined;this.suppressSelection=false;this.selected=undefined;this.focusable=true;this.index=undefined}clickListen(){if(this.suppressSelection){return}this.selectedChanged.emit(this.hostElement)}render(){return o(i,{class:{selected:this.selected&&!this.suppressSelection,"suppress-selection":this.suppressSelection},tabindex:this.focusable?0:-1},o("div",{class:"group-entry-selection-indicator"}),this.icon?o("ix-icon",{size:"16",name:this.icon}):null,this.text?o("span",{class:"group-entry-text"},o("span",{title:this.text},this.text)):null,this.secondaryText?o("span",{class:"group-entry-text-secondary"},o("span",{title:this.secondaryText},this.secondaryText)):null,o("slot",null))}get hostElement(){return t(this)}};u.style=h;export{n as ix_group,c as ix_group_dropdown_item,u as ix_group_item};
-//# sourceMappingURL=p-a92126b5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["groupCss","Group","dropdownItems","Array","from","this","hostElement","querySelectorAll","groupItems","groupContent","querySelector","footer","constructor","hostRef","registerInstance","selectGroup","createEvent","selectItem","collapsedChanged","suppressHeaderSelection","header","undefined","subHeader","collapsed","selected","index","expandOnHeaderClick","dropdownTriggerRef","async","event","targetElement","target","contains","code","classList","matches","groupItem","onExpandClick","wasCollapsed","setGroupSelection","emit","stopPropagation","onHeaderClick","onItemClick","selection","componentWillRender","forEach","item","remove","_a","children","length","add","childElementCount","appendChild","componentDidLoad","addEventListener","evt","detail","render","h","Host","class","expand","tabindex","onClick","e","name","title","suppressSelection","focusable","groupDropdownItemCss","GroupDropdownItem","label","icon","groupItemCss","GroupItem","clickListen","selectedChanged","size","text","secondaryText"],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=scoped","./src/components/group/group.tsx","./src/components/group-dropdown-item/group-dropdown-item.scss?tag=ix-group-dropdown-item&encapsulation=scoped","./src/components/group-dropdown-item/group-dropdown-item.tsx","./src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=scoped","./src/components/group-item/group-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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: 0.25rem;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid var(--theme-group-item--border-color);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n\n    @include focus-visible {\n      border-color: var(--focus--border-color);\n      border-radius: var(--theme-group--border-radius--focus);\n      outline: none;\n    }\n\n    &.selected {\n      border: var(--theme-primary-bdr-2);\n      background-color: var(--theme-group-item--background--selected);\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header.expand {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n    width: 100%;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .footer {\n    height: auto;\n    min-height: 0;\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';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    const wasCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n\n    if (!wasCollapsed && this.index !== undefined) {\n      this.index = undefined;\n      this.setGroupSelection(true);\n    }\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (\n        !this.footer?.children.length &&\n        index === this.groupItems.length - 1\n      ) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  componentDidLoad() {\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div class=\"group-header-selection-indicator\"></div>\n            <ix-icon\n              class=\"btn-expand-header\"\n              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n              onClick={(e) => this.onExpandClick(e)}\n            ></ix-icon>\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-dropdown-item',\n  styleUrl: 'group-dropdown-item.scss',\n  scoped: true,\n})\nexport class GroupDropdownItem {\n  /**\n   * Group dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Group dropdown icon\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item label={this.label} icon={this.icon}>\n          <slot></slot>\n        </ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: $small-space $large-space $small-space 2.5rem;\n  position: relative;\n  margin-top: 0.0625rem;\n  border: 1px solid var(--theme-group-item--border-color);\n  outline: none;\n\n  background-color: var(--theme-group-item--background);\n\n  &.last {\n    border-bottom-left-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: 0;\n    height: 100%;\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include ellipsis();\n    flex-grow: 1;\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n    font-size: 0.875rem;\n  }\n\n  &:not(.suppress-selection) {\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n  }\n\n  &.selected {\n    border-top-width: 0.062rem !important;\n    border-color: var(--theme-group-item--border-color--selected);\n    background-color: var(--theme-group-item--background--selected);\n\n    .group-entry-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  @include focus-visible {\n    border-color: var(--focus--border-color) !important;\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} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  scoped: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n        tabindex={this.focusable ? 0 : -1}\n      >\n        <div class=\"group-entry-selection-indicator\"></div>\n        {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n        {this.text ? (\n          <span class=\"group-entry-text\">\n            <span title={this.text}>{this.text}</span>\n          </span>\n        ) : null}\n        {this.secondaryText ? (\n          <span class=\"group-entry-text-secondary\">\n            <span title={this.secondaryText}>{this.secondaryText}</span>\n          </span>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as o,H as s,g as a}from"./p-8fcd6f85.js";import{a as e}from"./p-810b5232.js";import{A as d}from"./p-3b97bb69.js";import{T as l}from"./p-9ee41861.js";const n=".sc-ix-modal-h{position:relative;width:100vw;height:100vh}.sc-ix-modal-h .modal.sc-ix-modal{display:flex}.sc-ix-modal-h .modal.animation.sc-ix-modal{animation:modal-fade 300ms ease-in-out}.sc-ix-modal-h .modal.backdrop.sc-ix-modal{background-color:var(--theme-color-lightbox);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:none}.sc-ix-modal-h .modal.backdrop.animation.sc-ix-modal{transition:-webkit-backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{flex-grow:1}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal{max-height:100%}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal .modal-body.sc-ix-modal{overflow-y:auto}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal{box-shadow:var(--theme-modal--box-shadow);flex-direction:row;background-color:var(--theme-modal--background);border:var(--modal--border-thickness) solid var(--theme-modal--border-color);padding:1.5rem;max-height:100vh}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .state-icon-container.sc-ix-modal{-webkit-margin-end:1rem;margin-inline-end:1rem}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .slot-container.sc-ix-modal{flex-grow:1}@media (min-width: 576px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal:not(.modal-dialog-centered){margin:2.5rem auto}}@media (max-width: 575.98px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{height:100%;margin:0}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal .modal-content.sc-ix-modal{height:100%;border-radius:0}}@keyframes modal-fade{from{opacity:0%}to{opacity:100%}}@keyframes slide-down{from{top:-100%}to{top:32px}}";const c=class{constructor(o){i(this,o);this.closed=t(this,"closed",7);this.dismissed=t(this,"dismissed",7);this.onKeydown=this.handleKeydown.bind(this);this.animation=true;this.ariaDescribedBy=undefined;this.ariaLabelledBy="modal-title";this.backdrop=true;this.backdropClass=undefined;this.beforeDismiss=undefined;this.centered=false;this.content=undefined;this.keyboard=true;this.icon=undefined;this.iconColor="color-std-text";this.modalDialogClass=undefined;this.scrollable=true;this.size="sm";this.headerTitle=undefined;this.windowClass=undefined}get modal(){return this.hostElement.querySelector(".modal")}get modalDialog(){return this.modal.querySelector(".modal-dialog")}get modalContent(){return this.modalDialog.querySelector(".modal-content")}get modalBackdrop(){return this.hostElement.querySelector(".backdrop")}slideDown(i){const t=this.animation?d.mediumTime:0;e({targets:i,duration:t,opacity:[0,1],translateY:["-100%",0],easing:"easeOutSine"})}slideUp(i,t){const o=this.animation?d.mediumTime:0;e({targets:i,duration:o,opacity:[1,0],translateY:[0,"-100%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onBackdropClick(i){const t=i.target;if(t.classList.contains("backdrop")){this.dismiss(i)}}componentDidLoad(){if(this.backdrop==="static"){this.modalBackdrop.addEventListener("click",(i=>this.onBackdropClick(i)))}if(this.backdropClass){this.modalBackdrop.classList.add(this.backdropClass)}if(this.modalDialogClass){this.modalDialog.classList.add(this.modalDialogClass)}if(this.windowClass){this.modal.classList.add(this.windowClass)}if(this.keyboard){window.addEventListener("keydown",this.onKeydown)}this.slideDown(this.modalContent)}handleKeydown(i){if(i.key==="Escape"){this.dismiss(i.key)}}disconnectedCallback(){window.removeEventListener("keydown",this.onKeydown)}async dismiss(i){if(this.beforeDismiss){const t=await this.beforeDismiss(i);if(t!==false){this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}else{this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}async close(i){this.slideUp(this.modalContent,(()=>this.closed.emit(i)))}render(){return o(s,null,o("div",{class:{animation:this.animation,modal:true,backdrop:this.backdrop==="static"||this.backdrop,"align-items-center":this.centered,scrollable:this.scrollable},"aria-describedby":this.ariaDescribedBy,"aria-labelledby":this.ariaLabelledBy},o("div",{class:{"modal-dialog":true,"modal-sm":this.size==="sm","modal-lg":this.size==="lg","modal-xl":this.size==="xl"}},o("div",{class:"modal-content"},this.icon===undefined||this.icon===""?"":o("div",{class:"state-icon-container"},o("ix-icon",{name:this.icon,size:"32",color:this.iconColor})),o("div",{class:"slot-container"},o("slot",null))))))}get hostElement(){return a(this)}};c.style=n;const m=".sc-ix-modal-container-h{position:absolute;top:0;left:0;z-index:9999}";var r=undefined&&undefined.__rest||function(i,t){var o={};for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&t.indexOf(s)<0)o[s]=i[s];if(i!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,s=Object.getOwnPropertySymbols(i);a<s.length;a++){if(t.indexOf(s[a])<0&&Object.prototype.propertyIsEnumerable.call(i,s[a]))o[s[a]]=i[s[a]]}return o};const h=class{constructor(t){i(this,t)}async showModal(i){const t=new l;const o=new l;const s=document.createElement("ix-modal");let{title:a,content:e}=i,d=r(i,["title","content"]);Object.assign(s,Object.assign({headerTitle:a},d));if(typeof e==="string"){const i=document.createElement("template");e=e.trim();i.innerHTML=e;s.appendChild(i.content.firstChild)}else{s.appendChild(e)}this.hostElement.appendChild(s);s.addEventListener("closed",(i=>{this.hostElement.removeChild(s);t.emit(i.detail)}));s.addEventListener("dismissed",(i=>{this.hostElement.removeChild(s);o.emit(i.detail)}));return{htmlElement:s,onClose:t,onDismiss:o}}render(){return o(s,null)}get hostElement(){return a(this)}};h.style=m;export{c as ix_modal,h as ix_modal_container};
-//# sourceMappingURL=p-b64e82ce.entry.js.map