@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/siemens-ix/p-caae2fa5.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","isEveryDropdownItemHidden","every","classList","contains","watchSelectedIndices","newId","selectValue","isArray","onItemClicked","event","detail","emitItemClick","selectedIndices","includes","i","itemSelectionChange","emit","emitAddItem","value","trim","newItem","document","createElement","label","addItemRef","appendChild","clearInput","addItem","ids","forEach","some","map","inputValue","_a","length","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","itemExists","find","dropdownVisibilityChanged","dropdownShow","hasFocus","inputRef","focus","select","removeHiddenFromItems","isDropdownEmpty","navigationItem","undefined","async","code","onArrowNavigation","onEnterNavigation","editable","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","focusItem","activeElement","selectItems","index","indexOf","setHoverEffectForNavigatedSelectItem","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","e","target","placeholderValue","i18nPlaceholderEditable","readonly","i18nPlaceholder","render","h","Host","class","disabled","ref","dropdownAnchor","dropdownWrapperRef","key","onCloseClick","readOnly","type","allowClear","placeholder","onBlur","onInput","_c","icon","ghost","oval","size","onClick","name","show","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","minWidth","clientWidth","hidden","hideListHeader","title","i18nSelectListHeader","i18nNoMatches","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","itemClick","componentDidRender","Error","labelChange","newValue","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  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .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   * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.\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   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\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  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\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  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 newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\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    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\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 focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\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.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.value;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\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={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\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=\"16\"\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': this.disabled || this.readonly,\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              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\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          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\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","/*\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          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,qjH,MC4BLC,EAAM,M,wIAO6C,G,gBAKzC,M,UAKiB,S,cAKnB,M,cAKA,M,cAKA,M,qBAKO,mB,6BAKQ,wB,0BAKH,0B,mBAOP,a,oBAQC,M,kBAYD,M,0GAIG,M,cACP,M,uFAWhBC,YACF,OAAOC,MAAMC,KAAKC,KAAKC,YAAYC,iBAAiB,kB,CAGlDC,oBACF,OAAOH,KAAKH,MAAMO,QAAQC,GAASA,EAAKC,U,CAGtCC,oBACF,OAAOP,KAAKC,YAAYO,cAAc,Y,CAGpCC,mBACF,OAAOT,KAAKU,OAAS,Q,CAGnBC,qBACF,OAAOX,KAAKU,OAAS,U,CAGnBE,gCACF,OAAOZ,KAAKH,MAAMgB,OAAOR,GAASA,EAAKS,UAAUC,SAAS,W,CAI5DC,qBAAqBC,GACnB,IAAKA,EAAO,CACVjB,KAAKkB,YAAY,IACjB,M,CAGF,GAAIpB,MAAMqB,QAAQF,GAAQ,CACxBjB,KAAKkB,YAAY,IAAID,IACrB,M,CAGFjB,KAAKkB,YAAY,CAACD,G,CAIpBG,cAAcC,GACZ,MAAMJ,EAAQI,EAAMC,OACpBtB,KAAKuB,cAAcN,E,CAGbM,cAAcN,GACpB,GAAIjB,KAAKW,gBAAkBb,MAAMqB,QAAQnB,KAAKwB,iBAAkB,CAC9D,GAAIxB,KAAKwB,gBAAgBC,SAASR,GAAQ,CACxCjB,KAAKwB,gBAAkBxB,KAAKwB,gBAAgBpB,QAAQsB,GAAMA,IAAMT,G,KAC3D,CACLjB,KAAKwB,gBAAkB,IAAIxB,KAAKwB,gBAAiBP,E,MAE9C,CACLjB,KAAKwB,gBAAkB,CAACP,E,CAG1BjB,KAAKkB,YAAYlB,KAAKwB,iBACtBxB,KAAK2B,oBAAoBC,KAAK5B,KAAKwB,gB,CAG7BK,YAAYC,GAClB,GAAIA,EAAMC,SAAW,GAAI,CACvB,M,CAGF,MAAMC,EAAUC,SAASC,cAAc,kBACvCF,EAAQF,MAAQA,EAChBE,EAAQG,MAAQL,EAEhB9B,KAAKoC,WAAWC,YAAYL,GAE5BhC,KAAKsC,aACLtC,KAAKuB,cAAcO,GACnB9B,KAAKuC,QAAQX,KAAKE,E,CAGZZ,YAAYsB,G,MAClBxC,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKC,SAAWkC,EAAIE,MAAMhB,GAAMA,IAAMrB,EAAKyB,OAAM,IAGnD9B,KAAK8B,MAAQ9B,KAAKG,cAAcwC,KAAKtC,GAASA,EAAK8B,QAEnD,GAAInC,KAAKS,aAAc,CACrBT,KAAK4C,aAAaC,EAAA7C,KAAK8B,SAAK,MAAAe,SAAA,SAAAA,EAAEC,QAAS9C,KAAK8B,MAAM,GAAK,KACvD,M,CAGF9B,KAAK4C,WAAa,I,CAGpBG,oBACE,GAAI/C,KAAKwB,gBAAiB,CACxBxB,KAAKkB,YACHpB,MAAMqB,QAAQnB,KAAKwB,iBACfxB,KAAKwB,gBACL,CAACxB,KAAKwB,iB,EAMhBwB,cAAc3B,GACZA,EAAM4B,iBACN5B,EAAM6B,2BACNlD,KAAKkB,YACHpB,MAAMqB,QAAQnB,KAAKwB,iBACfxB,KAAKwB,gBACL,CAACxB,KAAKwB,iB,CAId2B,uBACE,GAAInD,KAAKoD,sBAAuB,CAC9BpD,KAAKoD,sBAAsBC,Y,EAIvBC,WAAWjD,GACjB,OAAOL,KAAKH,MAAM0D,MAAM7B,GAAMA,EAAES,QAAU9B,G,CAGpCmD,0BAA0BnC,GAChCrB,KAAKyD,aAAepC,EAAMC,OAC1BtB,KAAK0D,SAAWrC,EAAMC,OAEtB,GAAID,EAAMC,OAAQ,CAChBtB,KAAK2D,SAASC,QACd5D,KAAK2D,SAASE,SAEd7D,KAAK8D,wBACL9D,KAAK+D,gBAAkB/D,KAAKY,yB,KACvB,CACLZ,KAAKgE,eAAiBC,S,EAO1BC,gBAAgB7C,GACd,IAAKrB,KAAKyD,aAAc,CACtB,M,CAGF,GAAIpC,EAAM8C,OAAS,aAAe9C,EAAM8C,OAAS,UAAW,CAC1DnE,KAAKoE,kBAAkB/C,E,CAGzB,GAAIA,EAAM8C,OAAS,SAAW9C,EAAM8C,OAAS,cAAe,OACpDnE,KAAKqE,mB,CAGb,GAAIhD,EAAM8C,OAAS,SAAU,CAC3BnE,KAAKyD,aAAe,K,EAIhBS,0B,QACN,GAAIlE,KAAKW,eAAgB,CACvB,M,CAGF,GAAIX,KAAKsE,WAAatE,KAAKsD,WAAWtD,KAAKuE,iBAAkB,CAC3DvE,KAAK6B,YAAY7B,KAAKuE,iBACtBvE,KAAKgE,eAAiBhE,KAAKH,MAAMG,KAAKH,MAAMiD,OAAS,E,EAGvDD,EAAA7C,KAAKgE,kBAAc,MAAAnB,SAAA,SAAAA,EAAE2B,qBACfC,EAAAzE,KAAK0E,eAAW,MAAAD,SAAA,SAAAA,EAAEE,kBAExB,GAAI3E,KAAKS,eAAiBT,KAAKsE,SAAU,CACvCtE,KAAKyD,aAAe,K,EAIhBW,kBAAkB/C,GACxBA,EAAMuD,kBACNvD,EAAM4B,iBAEN,MAAM4B,EAAY7E,KAAKH,MAAM0D,MAC1BlD,GAAS4B,SAAS6C,gBAAkBzE,EAAKG,cAAc,YAE1DR,KAAKgE,eAAiBa,EAEtB,MAAME,EAAc/E,KAAKH,MAAMO,QAC5BsB,IAAOA,EAAEZ,UAAUC,SAAS,YAG/B,MAAMiE,EAAQD,EAAYE,QAAQjF,KAAKgE,gBAEvC,GAAI3C,EAAM8C,OAAS,aAAea,EAAQD,EAAYjC,OAAS,EAAG,CAChE9C,KAAKgE,eAAiBe,EAAYC,EAAQ,E,MACrC,GAAI3D,EAAM8C,OAAS,WAAaa,EAAQ,EAAG,CAChDhF,KAAKgE,eAAiBe,EAAYC,EAAQ,E,CAG5ChF,KAAKkF,sC,CAGCA,uC,OACNrC,EAAA7C,KAAKgE,kBAAc,MAAAnB,SAAA,SAAAA,EAAErC,cAAc,UAAUoD,O,CAGvCuB,2BACNnF,KAAKuE,gBAAkBvE,KAAK2D,SAAS7B,MAErC,GAAI9B,KAAKuE,gBAAiB,CACxBvE,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKS,UAAUsE,OAAO,UACtB,IACG/E,EAAK8B,MAAMkD,cAAc5D,SAASzB,KAAKuE,gBAAgBc,eACxD,CACAhF,EAAKS,UAAUwE,IAAI,S,SAGlB,CACLtF,KAAK8D,uB,CAGP9D,KAAK+D,gBAAkB/D,KAAKY,yB,CAGtBkD,wBACN9D,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKS,UAAUsE,OAAO,SAAS,G,CAI3B9C,aACNtC,KAAK2D,SAAS7B,MAAQ,GACtB9B,KAAKuE,gBAAkB,E,CAGjBgB,QACNvF,KAAKsC,aACLtC,KAAK8B,MAAQ,GACb9B,KAAKwB,gBAAkB,GACvBxB,KAAK2B,oBAAoBC,KAAK,MAC9B5B,KAAKyD,aAAe,K,CAGd+B,YAAYC,GAClB,GAAIzF,KAAKsE,SAAU,CACjB,M,CAGF,GAAItE,KAAKS,aAAc,CACrB,GAAIT,KAAKyD,cAAgBzD,KAAK+D,gBAAiB,CAC7C/D,KAAKyD,aAAe,K,EAIxB,IAAKzD,KAAKyD,cAAgBzD,KAAKU,OAAS,WAAY,CAClD+E,EAAEC,OAAO,SAAW1F,KAAK8B,K,EAIrB6D,mBACN,GAAI3F,KAAKsE,SAAU,CACjB,OAAOtE,KAAK4F,uB,CAGd,GAAI5F,KAAK6F,SAAU,CACjB,MAAO,E,CAGT,OAAO7F,KAAK8F,e,CAGdC,S,UACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,eAAgB,KAChBrC,OAAQ,KACRD,MAAO5D,KAAK0D,SACZY,SAAUtE,KAAKsE,SACf6B,SAAUnG,KAAKmG,SACfN,SAAU7F,KAAK6F,UAEjBO,IAAMA,IACJpG,KAAKqG,eAAiBD,EACtB,IAAKpG,KAAKsE,SAAUtE,KAAKsG,mBAAqBF,CAAG,GAGnDJ,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,SACRlG,KAAKW,gBACFkC,EAAA7C,KAAKG,iBAAa,MAAA0C,SAAA,SAAAA,EAAEF,KAAKtC,GACvB2F,EAAA,kBACEG,SAAUnG,KAAKmG,UAAYnG,KAAK6F,SAChCU,IAAKlG,EAAKyB,MACV0E,aAAef,IACbA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAKuB,cAAclB,EAAKyB,MAAM,GAG/BzB,EAAK8B,SAGV,GACJ6D,EAAA,OAAKE,MAAM,WACTF,EAAA,uBACc,QACZG,SAAUnG,KAAKmG,SACfM,SAAUzG,KAAK6F,SACfa,KAAK,OACLR,MAAO,CACL,cAAelG,KAAK2G,gBAAgBlC,EAAAzE,KAAK8B,SAAK,MAAA2C,SAAA,SAAAA,EAAE3B,SAElD8D,YAAa5G,KAAK2F,mBAClB7D,MAAO9B,KAAK4C,WACZwD,IAAMA,GAASpG,KAAK2D,SAAWyC,EAC/BS,OAASpB,GAAMzF,KAAKwF,YAAYC,GAChCqB,QAAS,IAAM9G,KAAKmF,6BAErBnF,KAAK2G,eACLI,EAAA/G,KAAK8B,SAAK,MAAAiF,SAAA,SAAAA,EAAEjE,SAAU9C,KAAKuE,iBAC1ByB,EAAA,kBACEE,MAAM,QACNc,KAAK,QACLC,MAAK,KACLC,KAAI,KACJC,KAAK,KACLC,QAAU3B,IACRA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAKuF,OAAO,IAGd,KACHvF,KAAKmG,UAAYnG,KAAK6F,SAAW,KAChCG,EAAA,OACEE,MAAM,yBACNE,IAAMA,IACJ,GAAIpG,KAAKsE,SAAUtE,KAAKsG,mBAAqBF,CAAG,GAGlDJ,EAAA,WAASE,MAAM,UAAUmB,KAAK,4BAO1CrB,EAAA,eACEI,IAAMA,GAASpG,KAAK0E,YAAc0B,EAClCkB,KAAMtH,KAAKyD,aACXyC,MAAO,CACL,SAAUlG,KAAKmG,UAAYnG,KAAK6F,UAElC0B,OAAQvH,KAAKqG,eACbmB,QAASxH,KAAKsG,mBACdmB,cAAgBhC,GAAMzF,KAAKwD,0BAA0BiC,GACrDiC,UAAU,aACVC,uBAAwBzD,UACf,CACL0D,SAAU,GAAG5H,KAAKC,YAAY4H,mBAIlC7B,EAAA,OACEE,MAAO,CACL,qBAAsB,KACtB4B,OAAQ9H,KAAK+H,gBAAkB/H,KAAK+D,iBAEtCiE,MAAOhI,KAAKiI,sBAEXjI,KAAKiI,sBAERjC,EAAA,aACAA,EAAA,OAAKI,IAAMA,GAASpG,KAAKoC,WAAagE,EAAMF,MAAM,eACjDlG,KAAKsD,WAAWtD,KAAKuE,iBAAgB,GAGpCyB,EAAA,kCACc,WACZgB,KAAK,OACLd,MAAO,CACL,WAAY,KACZ,WAAYlG,KAAKsE,UAAYtE,KAAKuE,kBAEpCpC,MAAOnC,KAAKuE,gBACZC,YAAciB,IACZA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAK6B,YAAY7B,KAAKuE,gBAAgB,IAI3CvE,KAAK+D,kBAAoB/D,KAAKsE,SAC7B0B,EAAA,OAAKE,MAAM,sBAAsBlG,KAAKkI,eAAoB,I,2HCxfzDC,UAAqCC,YAIhDC,YAAY/G,GACVgH,MAAM,6BAA8B,CAClCC,QAAS,KACTjH,U,ECfN,MAAMkH,EAAgB,sC,MC2BTC,EAAU,M,sHAgBF,M,WAKH,K,CAYhBvE,kBAAkB7C,GAChBA,IAAK,MAALA,SAAK,SAALA,EAAO4B,iBACP5B,IAAK,MAALA,SAAK,SAALA,EAAOuD,kBAEP5E,KAAK0I,UAAU9G,KAAK5B,KAAK8B,M,CAG3B6G,qBACE,IAAK3I,KAAK8B,MAAO,CACf,MAAM8G,MAAM,8C,EAKhBC,YAAYC,EAAkBC,GAC5B/I,KAAKC,YAAY+I,cACf,IAAIb,EAA6B,CAC/BW,SAAUA,EACVC,SAAUA,I,CAKhBhD,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,oBACEiD,QAASjJ,KAAKM,SACd6B,MAAOnC,KAAKmC,MAAQnC,KAAKmC,MAAQnC,KAAK8B,MACtC0C,YAAciB,GAAMzF,KAAKwE,YAAYiB,K"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as i}from"./p-8fcd6f85.js";import{g as h}from"./p-5b39e04e.js";const e=".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";const o=class{constructor(s){t(this,s);this.variant="Primary";this.outline=false;this.invisible=false;this.ghost=false;this.selected=false;this.disabled=false;this.type="button"}render(){return s(i,{class:{disabled:this.disabled}},s("button",{type:this.type,class:h(this.variant,this.outline,this.ghost||this.invisible,false,false,this.selected,this.disabled)},s("slot",null)))}};o.style=e;export{o as ix_button};
-//# sourceMappingURL=p-d7a3acce.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","Button","render","h","Host","class","disabled","this","type","getButtonClasses","variant","outline","ghost","invisible","selected"],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=scoped","./src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,qK,MCmBLC,EAAM,M,sCAIgB,U,aAKf,M,eAOE,M,WAKJ,M,cAKG,M,cAKiB,M,UAKA,Q,CAEpCC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAUC,KAAKD,WAGjBH,EAAA,UACEK,KAAMD,KAAKC,KACXH,MAAOI,EACLF,KAAKG,QACLH,KAAKI,QACLJ,KAAKK,OAASL,KAAKM,UACnB,MACA,MACAN,KAAKO,SACLP,KAAKD,WAGPH,EAAA,c"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i}from"./p-8fcd6f85.js";import{a as s}from"./p-810b5232.js";const r=".drawer-container.sc-ix-drawer{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}.toggle.sc-ix-drawer{z-index:100;visibility:visible}.drawer-container.full-height.sc-ix-drawer{min-height:100%}.header.sc-ix-drawer{display:flex;position:relative;align-items:center;justify-content:flex-end;height:3.5rem;padding:0.5rem 1rem;width:100%;order:1}.header.sc-ix-drawer .header-content.sc-ix-drawer{flex-grow:1;margin-right:1rem}.content.sc-ix-drawer{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";const n=class{constructor(i){t(this,i);this.open=e(this,"open",7);this.drawerClose=e(this,"drawerClose",7);this.callback=this.clickedOutside.bind(this);this.show=false;this.closeOnClickOutside=true;this.fullHeight=false;this.minWidth=16;this.maxWidth=28;this.width=this.minWidth}onShowChanged(t){this.show=t!==undefined?t:!this.show;this.toggleDrawer(this.show)}async toggleDrawer(t){this.show=t!==undefined?t:!this.show;if(t){this.open.emit();this.slideInRight(this.divElement);setTimeout((()=>{window.addEventListener("mousedown",this.callback)}),300)}else{this.drawerClose.emit();this.slideOutRight(this.divElement);window.removeEventListener("mousedown",this.callback)}return Promise.resolve()}onCloseClicked(){this.show=false}clickedOutside(t){if(!this.closeOnClickOutside){return}const e=t.target;const i=e.closest("#div-container");const s=e.closest("#drawer-btn");if(t.target.type!=="button"&&i!==this.divElement&&e!==s){this.show=false}}slideOutRight(t){s({targets:t,duration:n.duration,translateX:[0,"16rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{t.classList.add("d-none")}})}slideInRight(t){s({targets:t,duration:n.duration,translateX:["16rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{t.classList.remove("d-none")}})}render(){return i("div",{class:{"drawer-container":true,toggle:this.show,"full-height":this.fullHeight,"d-none":true},style:{width:this.width==="auto"?this.width:`${this.width}rem`,"min-width":`${this.minWidth}rem`,"max-width":`${this.maxWidth}rem`},ref:t=>this.divElement=t,"data-testid":"container",id:"div-container"},i("div",{class:"header"},i("div",{class:"header-content"},i("slot",{name:"header"})),i("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>this.onCloseClicked(),"data-testid":"close-button"})),i("div",{class:"content"},i("slot",null)))}static get watchers(){return{show:["onShowChanged"]}}};n.duration=300;n.style=r;export{n as ix_drawer};
-//# sourceMappingURL=p-d7cf7a1a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["drawerCss","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","async","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","render","h","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=scoped","./src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadows';\n@import 'common-variables';\n\n.drawer-container {\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all $medium-time ease-out;\n}\n\n.toggle {\n  z-index: 100;\n  visibility: visible;\n}\n\n.drawer-container.full-height {\n  min-height: 100%;\n}\n\n.header {\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: flex-end;\n  height: 3.5rem;\n  padding: $small-space $default-space;\n  width: 100%;\n  order: 1;\n\n  .header-content {\n    flex-grow: 1;\n    margin-right: $default-space;\n  }\n}\n\n.content {\n  position: relative;\n  flex: 1;\n  flex-grow: 1;\n  order: 2;\n  height: 100%;\n  width: 100%;\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  Component,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  scoped: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            icon=\"close\"\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,6wB,MCyBLC,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtCC,cAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzBG,mBAAmBH,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKW,KAAKC,OACVZ,KAAKa,aAAab,KAAKc,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAajB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKkB,YAAYN,OACjBZ,KAAKmB,cAAcnB,KAAKc,YACxBE,OAAOI,oBAAoB,YAAapB,KAAKC,S,CAG/C,OAAOoB,QAAQC,S,CAGTC,iBACNvB,KAAKO,KAAO,K,CAGNL,eAAesB,GACrB,IAAKxB,KAAKyB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB3B,KAAKc,YACxBY,IAAWG,EACX,CACA7B,KAAKO,KAAO,K,EAIRY,cAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB3B,aAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnCC,SACE,OACEC,EAAA,OACEC,MAAO,CACL,mBAAoB,KACpBC,OAAQ9C,KAAKO,KACb,cAAeP,KAAK+C,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOjD,KAAKiD,QAAU,OAASjD,KAAKiD,MAAQ,GAAGjD,KAAKiD,WACpD,YAAa,GAAGjD,KAAKI,cACrB,YAAa,GAAGJ,KAAKkD,eAEvBC,IAAMpB,GAAQ/B,KAAKc,WAAaiB,EAAkB,cACtC,YACZqB,GAAG,iBAEHR,EAAA,OAAKC,MAAM,UACTD,EAAA,OAAKC,MAAM,kBACTD,EAAA,QAAMS,KAAK,YAEbT,EAAA,kBACEU,KAAK,QACLC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAMzD,KAAKuB,iBAAgB,cACxB,kBAGhBqB,EAAA,OAAKC,MAAM,WACTD,EAAA,c,wDAhHO7C,EAAAmC,SAAW,I"}

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

@@ -1,2 +0,0 @@
-import{r as i,h as e,H as s}from"./p-8fcd6f85.js";const r=".sc-ix-kpi-h{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}.sc-ix-kpi-h span.sc-ix-kpi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-kpi-h .kpi-container.sc-ix-kpi{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}.sc-ix-kpi-h .kpi-container.alarm.sc-ix-kpi{border-block-end-color:var(--theme-color-alarm)}.sc-ix-kpi-h .kpi-container.warning.sc-ix-kpi{border-block-end-color:var(--theme-color-warning)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi ix-icon.sc-ix-kpi{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value-container.sc-ix-kpi{display:flex;align-items:flex-end}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value.sc-ix-kpi{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi,.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}.stacked.sc-ix-kpi-h{height:3.75rem}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi{justify-content:center;flex-wrap:wrap}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{width:100%;justify-content:center}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):active{background-color:var(--theme-kpi-display--background--active)}.sc-ix-kpi-h:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}";const t=class{constructor(e){i(this,e);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return e("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return e("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let i=`${this.label}: ${this.value}`;if(this.unit){i=i.concat(` ${this.unit}`)}return i}render(){return e(s,{title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},e("div",{class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},e("span",{class:"kpi-label"},this.getStateIcon(),e("span",{class:"kpi-label-text"},this.label)),e("span",{class:"kpi-value-container"},e("span",{class:"kpi-value"},this.value),this.unit?e("span",{class:"kpi-unit"},this.unit):"")))}};t.style=r;export{t as ix_kpi};
-//# sourceMappingURL=p-eb301ea2.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["kpiCss","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=scoped","./src/components/kpi/kpi.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-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  &.stacked {\n    height: 3.75rem;\n\n    .kpi-container {\n      justify-content: center;\n      flex-wrap: wrap;\n\n      .kpi-label {\n        width: 100%;\n        justify-content: center;\n      }\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  scoped: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"alarm\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"warning\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ksE,MCgBFC,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzCC,eACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAK,QACLC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAK,UACLC,KAAK,OAIX,QACE,MAAO,G,CAILC,iBACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGTK,SACE,OACEV,EAACW,EAAI,CACHC,MAAOd,KAAKM,iBACZS,SAAS,IACTC,MAAO,CACLC,QAASjB,KAAKkB,cAAgB,aAGhChB,EAAA,OACEc,MAAO,CACL,gBAAiB,KACjBG,MAAOnB,KAAKC,QAAU,QACtBmB,QAASpB,KAAKC,QAAU,YAG1BC,EAAA,QAAMc,MAAM,aACThB,KAAKD,eACNG,EAAA,QAAMc,MAAM,kBAAkBhB,KAAKQ,QAErCN,EAAA,QAAMc,MAAM,uBACVd,EAAA,QAAMc,MAAM,aAAahB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMc,MAAM,YAAYhB,KAAKU,MAAe,K"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as s,H as i}from"./p-8fcd6f85.js";import{a}from"./p-810b5232.js";const t=".message-container.sc-ix-message-bar{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}.danger.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}.warning.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}.info.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}.message-content.sc-ix-message-bar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}ix-icon.sc-ix-message-bar{margin-top:0.25rem}";const o=class{constructor(s){e(this,s);this.closedChange=r(this,"closedChange",7);this.type="info";this.dismissible=true;this.icon=undefined;this.color=undefined}componentWillRender(){if(this.type==="danger"){this.icon="error";this.color="color-alarm"}if(this.type==="info"){this.icon="info";this.color="color-info"}if(this.type==="warning"){this.icon="warning";this.color="color-warning"}}closeAlert(e){a({targets:e,duration:o.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("d-none")}});this.closedChange.emit()}render(){return s(i,null,s("div",{class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},s("ix-icon",{color:this.color,name:this.icon}),s("div",{class:"message-content"},s("slot",null)),this.dismissible?s("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>{this.closeAlert(this.divElement)},"data-testid":"close-btn"}):""))}};o.duration=300;o.style=t;export{o as ix_message_bar};
-//# sourceMappingURL=p-f6509805.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["messageBarCss","MessageBar","componentWillRender","this","type","icon","color","closeAlert","el","anime","targets","duration","opacity","easing","complete","classList","add","closedChange","emit","render","h","Host","class","role","ref","divElement","name","dismissible","size","ghost","onClick"],"sources":["./src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=scoped","./src/components/message-bar/message-bar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n.message-container {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  min-height: 3.375rem;\n  margin: $small-space $small-space 0rem $small-space;\n  padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n    $medium-space\n    calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n    $default-space;\n  border-radius: var(--theme-message-bar--border-radius);\n  background-color: var(--theme-messagebar--background);\n}\n\n.danger {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-alarm);\n}\n\n.warning {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-warning);\n}\n\n.info {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-info);\n}\n\n.message-content {\n  @include ellipsis;\n  flex-grow: 1;\n  align-self: center;\n  min-height: 1.25rem;\n  padding: 0 $default-space;\n  font-weight: bold;\n  white-space: normal;\n}\n\nix-icon {\n  margin-top: $tiny-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  scoped: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAgB,w+B,MC0BTC,EAAU,M,8EAIyB,O,iBAKxB,K,yCAetBC,sBACE,GAAIC,KAAKC,OAAS,SAAU,CAC1BD,KAAKE,KAAO,QACZF,KAAKG,MAAQ,a,CAGf,GAAIH,KAAKC,OAAS,OAAQ,CACxBD,KAAKE,KAAO,OACZF,KAAKG,MAAQ,Y,CAGf,GAAIH,KAAKC,OAAS,UAAW,CAC3BD,KAAKE,KAAO,UACZF,KAAKG,MAAQ,e,EAITC,WAAWC,GACjBC,EAAM,CACJC,QAASF,EACTG,SAAUV,EAAWU,SACrBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,SAAU,KACRN,EAAGO,UAAUC,IAAI,SAAS,IAG9Bb,KAAKc,aAAaC,M,CAGpBC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CAAE,oBAAqB,KAAM,CAACnB,KAAKC,MAAO,MACjDmB,KAAK,QACLC,IAAMhB,GAAQL,KAAKsB,WAAajB,GAEhCY,EAAA,WAASd,MAAOH,KAAKG,MAAOoB,KAAMvB,KAAKE,OACvCe,EAAA,OAAKE,MAAM,mBACTF,EAAA,cAEDjB,KAAKwB,YACJP,EAAA,kBACEf,KAAK,QACLuB,KAAK,KACLC,MAAO,KACPC,QAAS,KACP3B,KAAKI,WAAWJ,KAAKsB,WAAW,EACjC,cACW,cACI,I,GAvDJxB,EAAAU,SAAW,I"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as s,H as t}from"./p-8fcd6f85.js";const n=".sc-ix-expanding-search-h{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between}.right-position.sc-ix-expanding-search-h{width:11.5625rem !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow)}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";const a=class{expandInput(){setTimeout(this.focusTextInput,300);this.expanded=true}collapseInput(){if(!this.isFieldChanged&&this.expanded){this.expanded=false}}clearInput(){this.value="";this.isFieldChanged=false}onChange(i){this.value=i.target.value;if(this.isFieldChanged&&this.value===""){this.isFieldChanged=false}else{this.isFieldChanged=true}this.valueChange.emit(this.value)}constructor(s){i(this,s);this.valueChange=e(this,"valueChange",7);this.icon="search";this.placeholder="Enter text here";this.value="";this.isFieldChanged=false;this.expanded=false;this.hasFocus=false;this.focusTextInput=this.focusTextInput.bind(this)}focusTextInput(){var i;(i=this.textInput)===null||i===void 0?void 0:i.focus()}clearClicked(){var i;this.clearInput();(i=this.textInput)===null||i===void 0?void 0:i.focus();this.valueChange.emit(this.value)}render(){return s(t,{class:{expanded:this.expanded,"right-position":this.expanded}},s("button",{class:{btn:true,"btn-invisible-primary":true,"btn-icon":true,"btn-search":true,"disable-pointer":this.expanded},"data-testid":"button",onClick:()=>this.expandInput(),tabindex:this.expanded?-1:0},s("ix-icon",{class:"btn-search-icon",name:this.icon,size:this.expanded?"16":"24",color:this.hasFocus?"input-search-icon--color--focus":undefined})),s("div",{class:{expanded:this.expanded,collapsed:!this.expanded,"disable-pointer":!this.expanded,"input-container":true},"data-testid":"input-wrapper"},s("input",{class:{"form-control":true,input:this.expanded,"disable-pointer":!this.expanded,"opacity-before":!this.expanded,"opacity-after":this.expanded},ref:i=>this.textInput=i,"data-testid":"input",placeholder:this.placeholder,type:"text",value:this.value,onBlur:()=>{this.collapseInput();this.hasFocus=false},onFocus:()=>this.hasFocus=true,onInput:i=>this.onChange(i),tabindex:this.expanded?0:-1}),this.isFieldChanged?s("ix-icon-button",{class:"btn-clear",icon:"clear",ghost:true,size:"16","data-testid":"clear-button",onClick:()=>this.clearClicked()}):null))}};a.style=n;export{a as ix_expanding_search};
-//# sourceMappingURL=p-f6c54047.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["expandingSearchCss","ExpandingSearch","expandInput","setTimeout","this","focusTextInput","expanded","collapseInput","isFieldChanged","clearInput","value","onChange","e","target","valueChange","emit","constructor","hostRef","bind","_a","textInput","focus","clearClicked","render","h","Host","class","btn","onClick","tabindex","name","icon","size","color","hasFocus","undefined","collapsed","input","ref","el","placeholder","type","onBlur","onFocus","onInput","ghost"],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=scoped","./src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n\n  &.right-position {\n    width: $container-width !important;\n  }\n\n  .input-container {\n    transition: all 0.3s ease-in-out;\n  }\n\n  .disable-pointer {\n    pointer-events: none;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n  }\n\n  .expanded {\n    width: $container-width;\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all 0.15s ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  scoped: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  @State() isFieldChanged = false;\n\n  @State() expanded = false;\n\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n        }}\n      >\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': true,\n            'btn-icon': true,\n            'btn-search': true,\n            'disable-pointer': this.expanded,\n          }}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n        >\n          <ix-icon\n            class=\"btn-search-icon\"\n            name={this.icon}\n            size={this.expanded ? '16' : '24'}\n            color={\n              this.hasFocus ? 'input-search-icon--color--focus' : undefined\n            }\n          ></ix-icon>\n        </button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,g7E,MCwBdC,EAAe,MA2BlBC,cACNC,WAAWC,KAAKC,eAAgB,KAChCD,KAAKE,SAAW,I,CAGVC,gBACN,IAAKH,KAAKI,gBAAkBJ,KAAKE,SAAU,CACzCF,KAAKE,SAAW,K,EAIZG,aACNL,KAAKM,MAAQ,GACbN,KAAKI,eAAiB,K,CAGhBG,SAASC,GACfR,KAAKM,MAASE,EAAEC,OAA4BH,MAC5C,GAAIN,KAAKI,gBAAkBJ,KAAKM,QAAU,GAAI,CAC5CN,KAAKI,eAAiB,K,KACjB,CACLJ,KAAKI,eAAiB,I,CAGxBJ,KAAKU,YAAYC,KAAKX,KAAKM,M,CAK7BM,YAAAC,G,6DApDe,S,iBAKO,kB,WAKW,G,oBAEP,M,cAEN,M,cAEA,MAqClBb,KAAKC,eAAiBD,KAAKC,eAAea,KAAKd,K,CAGzCC,iB,OACNc,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,O,CAGVC,e,MACNlB,KAAKK,cACLU,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAChBjB,KAAKU,YAAYC,KAAKX,KAAKM,M,CAG7Ba,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLpB,SAAUF,KAAKE,SACf,iBAAkBF,KAAKE,WAGzBkB,EAAA,UACEE,MAAO,CACLC,IAAK,KACL,wBAAyB,KACzB,WAAY,KACZ,aAAc,KACd,kBAAmBvB,KAAKE,UACzB,cACW,SACZsB,QAAS,IAAMxB,KAAKF,cACpB2B,SAAUzB,KAAKE,UAAY,EAAI,GAE/BkB,EAAA,WACEE,MAAM,kBACNI,KAAM1B,KAAK2B,KACXC,KAAM5B,KAAKE,SAAW,KAAO,KAC7B2B,MACE7B,KAAK8B,SAAW,kCAAoCC,aAK1DX,EAAA,OACEE,MAAO,CACLpB,SAAUF,KAAKE,SACf8B,WAAYhC,KAAKE,SACjB,mBAAoBF,KAAKE,SACzB,kBAAmB,MACpB,cACW,iBAEZkB,EAAA,SACEE,MAAO,CACL,eAAgB,KAChBW,MAAOjC,KAAKE,SACZ,mBAAoBF,KAAKE,SACzB,kBAAmBF,KAAKE,SACxB,gBAAiBF,KAAKE,UAExBgC,IAAMC,GAAQnC,KAAKgB,UAAYmB,EAAG,cACtB,QACZC,YAAapC,KAAKoC,YAClBC,KAAK,OACL/B,MAAON,KAAKM,MACZgC,OAAQ,KACNtC,KAAKG,gBACLH,KAAK8B,SAAW,KAAK,EAEvBS,QAAS,IAAOvC,KAAK8B,SAAW,KAChCU,QAAUhC,GAAkBR,KAAKO,SAASC,GAC1CiB,SAAUzB,KAAKE,SAAW,GAAK,IAGhCF,KAAKI,eACJgB,EAAA,kBACEE,MAAM,YACNK,KAAK,QACLc,MAAO,KACPb,KAAK,KAAI,cACG,eACZJ,QAAS,IAAMxB,KAAKkB,iBAEpB,M"}

package/dist/types/components/icon/icon.d.ts

@@ -1,15 +0,0 @@
-export declare class Icon {
-  /**
-   * Size of the icon
-   */
-  size: '12' | '16' | '24' | '32';
-  /**
-   * Color of the icon
-   */
-  color: string;
-  /**
-   * Use one of our defined icon names e.g. `copy`.
-   */
-  name: string;
-  render(): any;
-}