@siemens/ix 2.6.0 → 2.7.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","IxSelectStyle0","Select","this","dropdownWrapperRef","makeRef","dropdownAnchor","itemObserver","createMutationObserver","arrowFocusController","items","visibleNonShadowItems","focusControllerCallbackBind","focusDropdownItem","bind","nonShadowItems","Array","from","hostElement","querySelectorAll","filter","item","classList","contains","shadowItems","shadowRoot","visibleShadowItems","visibleItems","selectedItems","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","isEveryDropdownItemHidden","every","watchSelectedIndices","value","updateSelection","watchValue","selectedIndices","watchDropdownShow","show","ArrowFocusController","dropdownRef","wrap","editable","observe","childList","subtree","cleanupResources","_a","disconnect","undefined","_b","onItemClicked","event","newId","detail","itemClick","updateFormInternalValue","isArray","formInternals","setFormValue","join","hasValidValue","required","hasValue","length","index","navigationItem","nestedDropdownItem","requestAnimationFrame","focus","oldValue","toggleValue","defaultPrevented","emitValueChange","emitAddItem","trim","addItem","emit","newItem","document","createElement","label","customItemsContainerRef","appendChild","clearInput","itemValue","includes","ids","forEach","some","i","toString","selectedLabels","map","inputValue","inputRef","valueChange","itemSelectionChange","componentDidLoad","addEventListener","dropdownShow","inputChange","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","itemExists","find","dropdownVisibilityChanged","select","removeHiddenFromItems","isDropdownEmpty","inputFilterText","onKeyDown","code","onArrowNavigation","onEnterNavigation","target","el","key","stopPropagation","activeElement","applyFocusTo","shift","isAddItemVisible","focusAddItemButton","moveUp","indexNonShadow","indexOf","pop","addItemRef","getDropdownItemElement","indexShadow","element","setTimeout","_d","_c","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","ixBlur","placeholderValue","disabled","readonly","i18nPlaceholderEditable","i18nPlaceholder","onValidationChange","isInvalid","isInvalidByRequired","isValid","isInfo","isWarning","getAssociatedFormElement","form","getNativeInputElement","Promise","resolve","focusInput","render","h","Host","a11yBoolean","class","helperText","invalidText","infoText","warningText","validText","showTextAsTooltip","controlRef","ref","onCloseClick","e","autocomplete","readOnly","type","allowClear","placeholder","onBlur","onFocus","onInput","icon","ghost","oval","size","onClick","closeBehavior","anchor","waitForCurrent","trigger","onShowChanged","placement","overwriteDropdownStyle","async","minWidth","getBoundingClientRect","width","hidden","hideListHeader","title","i18nSelectListHeader","onSlotchange","onItemClick","i18nNoMatches","__decorate","OnListener","self","HookValidationLifecycle"],"sources":["src/components/select/select.scss?tag=ix-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/field';\n@import 'mixins/validation/form-component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  min-height: 2rem;\n  height: auto;\n  border-radius: var(--theme-input--border-radius);\n\n  .d-none {\n    display: none;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n    box-shadow: var(--theme-inset-shadow-1) !important;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .select.readonly,\n  .select.disabled {\n    box-shadow: none !important;\n    border: none;\n    border-radius: 0;\n    cursor: pointer;\n\n    &,\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n\n    &:focus,\n    &:focus-within,\n    &:focus-visible {\n      outline: none;\n    }\n\n    input:focus,\n    input:focus-visible {\n      outline: none;\n    }\n  }\n\n  .select.disabled {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-weak-bdr);\n\n    input {\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  .select.readonly {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-soft-bdr);\n\n    input {\n      color: var(--theme-color-std-text);\n    }\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    ix-icon-button {\n      height: 1.875rem;\n      width: 1.875rem;\n      min-height: 1.875rem;\n      min-width: 1.875rem;\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .dropdown-visible {\n    --ix-icon-button-color: var(--theme-color-dynamic--hover);\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 1rem;\n  }\n}\n\n\n\n@include host-valid;\n\n@include host-info {\n  .select {\n    border-color: var(--theme-input--border-color--info);\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--info--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--info--active) !important;\n  }\n}\n\n@include host-warning {\n  .select {\n    border-color: var(--theme-input--border-color--warning);\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--warning--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--warning--active) !important;\n  }\n}\n\n@include host-invalid {\n  .select {\n    border-color: var(--theme-input--border-color--invalid);\n    background-color: var(--theme-input--background--invalid);\n    box-shadow: none;\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--invalid--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--invalid--active) !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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { ArrowFocusController } from '../utils/focus';\nimport { OnListener } from '../utils/listener';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport {\n  HookValidationLifecycle,\n  ValidationResults,\n  IxInputFieldComponent,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Select implements IxInputFieldComponent<string | string[]> {\n  @Element() hostElement!: HTMLIxSelectElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * A string that represents the element's name attribute,\n   * containing a name that identifies the element when submitting the form.\n   *\n   * @since 2.6.0\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected\n   *\n   * @since 2.6.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Label for the select component\n   *\n   * @since 2.6.0\n   */\n  @Prop() label?: string;\n\n  /**\n   * Warning text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() warningText?: string;\n\n  /**\n   * Info text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() infoText?: string;\n\n  /**\n   * Error text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() validText?: string;\n\n  /**\n   * Helper text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() helperText?: string;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   *\n   * @since 2.6.0\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Indices of selected items.\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   * @deprecated since 2.0.0. Use the `value` property instead.\n   */\n  @Prop({ mutable: true }) selectedIndices?: string | string[];\n\n  /**\n   * Current selected value.\n   * This corresponds to the value property of ix-select-items\n   * @since 2.0.0\n   */\n  @Prop({ mutable: true }) value: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Select an option';\n\n  /**\n   * Information inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Value changed\n   * @since 2.0.0\n   */\n  @Event() valueChange!: EventEmitter<string | string[]>;\n\n  /**\n   * Item selection changed\n   * @deprecated since 2.0.0. Use `valueChange` instead.\n   */\n  @Event() itemSelectionChange!: EventEmitter<string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange!: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem!: EventEmitter<string>;\n\n  /**\n   * Blur input\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() dropdownShow = false;\n  @State() selectedLabels: string[] = [];\n  @State() isDropdownEmpty = false;\n  @State() navigationItem?: DropdownItemWrapper;\n  @State() inputFilterText = '';\n  @State() inputValue = '';\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private readonly dropdownWrapperRef = makeRef<HTMLElement>();\n  private readonly dropdownAnchor = makeRef<HTMLElement>();\n\n  private inputRef?: HTMLInputElement;\n  private dropdownRef?: HTMLIxDropdownElement;\n  private customItemsContainerRef?: HTMLDivElement;\n  private addItemRef?: HTMLIxDropdownItemElement;\n  private arrowFocusController?: ArrowFocusController;\n\n  private readonly itemObserver = createMutationObserver(() => {\n    if (!this.arrowFocusController) {\n      return;\n    }\n    this.arrowFocusController.items = this.visibleNonShadowItems;\n  });\n  private readonly focusControllerCallbackBind =\n    this.focusDropdownItem.bind(this);\n\n  get nonShadowItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get visibleNonShadowItems() {\n    return this.nonShadowItems.filter(\n      (item) => !item.classList.contains('d-none')\n    );\n  }\n\n  get shadowItems() {\n    return Array.from(\n      this.hostElement.shadowRoot!.querySelectorAll('ix-select-item')\n    );\n  }\n\n  get visibleShadowItems() {\n    return this.shadowItems.filter(\n      (item) => !item.classList.contains('d-none')\n    );\n  }\n\n  get items() {\n    return [...this.nonShadowItems, ...this.shadowItems];\n  }\n\n  get visibleItems() {\n    return this.items.filter((item) => !item.classList.contains('d-none'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.shadowRoot!.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(value: string | string[]) {\n    this.value = value;\n    this.updateSelection();\n  }\n\n  @Watch('value')\n  watchValue(value: string | string[]) {\n    this.selectedIndices = value;\n    this.updateSelection();\n  }\n\n  @Watch('dropdownShow')\n  watchDropdownShow(show: boolean) {\n    if (show) {\n      this.arrowFocusController = new ArrowFocusController(\n        this.visibleNonShadowItems,\n        this.dropdownRef,\n        this.focusControllerCallbackBind\n      );\n\n      this.arrowFocusController.wrap = !this.editable;\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n    } else {\n      this.cleanupResources();\n    }\n  }\n\n  private cleanupResources() {\n    this.arrowFocusController?.disconnect();\n    this.arrowFocusController = undefined;\n    this.itemObserver?.disconnect();\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.itemClick(newId);\n  }\n\n  async updateFormInternalValue(value: string | string[]) {\n    if (Array.isArray(value)) {\n      this.formInternals.setFormValue(value.join(','));\n      return;\n    }\n\n    this.formInternals.setFormValue(value);\n  }\n\n  /** @internal */\n  @Method()\n  async hasValidValue(): Promise<boolean> {\n    return this.required && !!this.hasValue();\n  }\n\n  private hasValue() {\n    if (Array.isArray(this.value)) {\n      return !!this.value.length;\n    }\n\n    return !!this.value;\n  }\n\n  private focusDropdownItem(index: number) {\n    this.navigationItem = null;\n\n    if (index < this.visibleNonShadowItems.length) {\n      const nestedDropdownItem =\n        this.visibleNonShadowItems[index]?.shadowRoot?.querySelector(\n          'ix-dropdown-item'\n        );\n\n      if (!nestedDropdownItem) {\n        return;\n      }\n\n      requestAnimationFrame(() => {\n        nestedDropdownItem?.shadowRoot?.querySelector('button')?.focus();\n      });\n    }\n  }\n\n  private itemClick(newId: string) {\n    const oldValue = this.value;\n    const value = this.toggleValue(newId);\n    this.value = value;\n    const defaultPrevented = this.emitValueChange(value);\n\n    if (defaultPrevented) {\n      this.value = oldValue;\n      return;\n    }\n\n    this.updateSelection();\n  }\n\n  private emitAddItem(value: string) {\n    if (value === undefined || value.trim() === '') {\n      return false;\n    }\n\n    const { defaultPrevented } = this.addItem.emit(value);\n    if (defaultPrevented) {\n      return true;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.customItemsContainerRef.appendChild(newItem);\n\n    this.clearInput();\n    this.itemClick(value);\n\n    return false;\n  }\n\n  private toggleValue(itemValue: string) {\n    if (!this.isMultipleMode) {\n      return itemValue;\n    }\n\n    if (!this.value) {\n      return [itemValue];\n    }\n\n    let value = this.value;\n\n    if (!Array.isArray(value)) {\n      value = [value];\n    }\n\n    if (value.includes(itemValue)) {\n      return value.filter((value) => value !== itemValue);\n    } else {\n      return [...value, itemValue];\n    }\n  }\n\n  private updateSelection() {\n    let ids: string[] = [];\n\n    if (this.value) {\n      ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n    }\n\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => {\n        if (typeof i !== typeof item.value) {\n          return i.toString() === item.value.toString();\n        } else {\n          return i === item.value;\n        }\n      });\n    });\n\n    this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n    if (this.selectedLabels?.length && this.isSingleMode) {\n      this.inputValue = this.selectedLabels[0];\n    } else {\n      this.inputValue = '';\n    }\n\n    this.inputRef && (this.inputRef.value = this.inputValue);\n  }\n\n  private emitValueChange(value: string | string[]) {\n    const { defaultPrevented } = this.valueChange.emit(value);\n\n    if (defaultPrevented) {\n      return true;\n    }\n\n    if (!value) {\n      this.itemSelectionChange.emit(null);\n    } else {\n      this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);\n    }\n\n    this.updateFormInternalValue(value);\n    return false;\n  }\n\n  componentDidLoad() {\n    this.inputRef?.addEventListener('input', () => {\n      this.dropdownShow = true;\n      this.inputChange.emit(this.inputRef?.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices && !this.value) {\n      this.value = this.selectedIndices;\n    }\n\n    this.updateSelection();\n    this.updateFormInternalValue(this.value);\n  }\n\n  @Listen('ix-select-item:valueChange')\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.updateSelection();\n  }\n\n  disconnectedCallback() {\n    this.cleanupResources();\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n\n    if (event.detail) {\n      this.inputRef?.focus();\n      this.inputRef?.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = null;\n      this.updateSelection();\n      this.inputFilterText = '';\n    }\n  }\n\n  @OnListener<Select>('keydown', (self) => self.dropdownShow)\n  async onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      await this.onArrowNavigation(event, event.code);\n    }\n\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation(event.target as HTMLIxSelectItemElement);\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation(\n    el: HTMLIxSelectItemElement | HTMLInputElement\n  ) {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (\n      !this.itemExists(this.inputFilterText.trim()) &&\n      !this.itemExists((el as HTMLIxSelectItemElement)?.label)\n    ) {\n      if (this.editable) {\n        const defaultPrevented = this.emitAddItem(this.inputFilterText.trim());\n        if (defaultPrevented) {\n          return;\n        }\n      }\n    }\n\n    this.dropdownShow = false;\n    this.updateSelection();\n  }\n\n  private async onArrowNavigation(\n    event: KeyboardEvent,\n    key: 'ArrowDown' | 'ArrowUp'\n  ) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dropdownShow = true;\n\n    if (!this.navigationItem && document.activeElement === this.hostElement) {\n      if (this.visibleItems.length) {\n        this.applyFocusTo(this.visibleItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    const moveUp = key === 'ArrowUp';\n    const indexNonShadow = document.activeElement\n      ? this.visibleNonShadowItems.indexOf(\n          document.activeElement as HTMLIxSelectItemElement\n        )\n      : -1;\n\n    // Slotted select items\n    if (indexNonShadow === 0) {\n      if (!this.visibleShadowItems.length && this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      } else {\n        this.applyFocusTo(this.visibleShadowItems.pop());\n      }\n      return;\n    } else if (\n      indexNonShadow !== -1 &&\n      indexNonShadow === this.visibleNonShadowItems.length - 1\n    ) {\n      if (this.visibleShadowItems.length) {\n        this.applyFocusTo(this.visibleShadowItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    if (!this.navigationItem) {\n      return;\n    }\n\n    if (\n      this.isAddItemVisible() &&\n      this.addItemRef.contains(\n        await this.navigationItem.getDropdownItemElement()\n      )\n    ) {\n      if (moveUp) {\n        this.applyFocusTo(this.visibleItems.pop());\n      } else {\n        if (this.visibleItems.length) {\n          this.applyFocusTo(this.visibleItems.shift());\n        }\n      }\n      return;\n    }\n\n    // Custom select items\n    const indexShadow = this.visibleShadowItems.indexOf(\n      this.navigationItem as HTMLIxSelectItemElement\n    );\n\n    if (moveUp) {\n      if (indexShadow === 0) {\n        if (this.visibleNonShadowItems.length) {\n          this.applyFocusTo(this.visibleNonShadowItems.pop());\n        } else if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);\n      }\n    } else {\n      if (indexShadow === this.visibleShadowItems.length - 1) {\n        if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        } else {\n          this.applyFocusTo(this.visibleItems.shift());\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);\n      }\n    }\n  }\n\n  private applyFocusTo(element?: HTMLIxSelectItemElement) {\n    if (!element) {\n      return;\n    }\n\n    this.navigationItem = element;\n\n    setTimeout(() => {\n      element.shadowRoot\n        ?.querySelector('ix-dropdown-item')\n        ?.shadowRoot?.querySelector('button')\n        ?.focus();\n    });\n  }\n\n  private focusAddItemButton() {\n    if (this.addItemButton) {\n      this.addItemButton.shadowRoot?.querySelector('button')?.focus();\n      this.navigationItem = this.addItemRef;\n    }\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef?.value || '';\n\n    if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {\n      return;\n    }\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    if (this.arrowFocusController) {\n      this.arrowFocusController.items = this.visibleNonShadowItems;\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    if (this.inputRef) {\n      this.inputRef.value = '';\n    }\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.selectedLabels = [];\n    this.value = [];\n    this.emitValueChange([]);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(event: Event) {\n    this.ixBlur.emit();\n\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      return;\n    }\n\n    const target = event.target as HTMLInputElement;\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      target.value = this.selectedLabels.toString();\n    }\n  }\n\n  private placeholderValue() {\n    if (this.disabled) {\n      return '';\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  @HookValidationLifecycle()\n  onValidationChange({\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n    this.isInfo = isInfo;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /**\n   * Returns the native input element used in the component.\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return Promise.resolve(this.inputRef);\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={a11yBoolean(this.disabled)}\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <ix-field-wrapper\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}\n        >\n          <div\n            class={{\n              select: true,\n              disabled: this.disabled,\n              readonly: this.readonly,\n            }}\n            ref={(ref) => {\n              this.dropdownAnchor(ref);\n              if (!this.editable) this.dropdownWrapperRef(ref);\n            }}\n          >\n            <div class=\"input-container\">\n              <div class=\"chips\">\n                {this.isMultipleMode\n                  ? this.selectedItems?.map((item) => (\n                      <ix-filter-chip\n                        disabled={this.disabled || this.readonly}\n                        key={item.value}\n                        onCloseClick={(e) => {\n                          e.preventDefault();\n                          e.stopPropagation();\n                          this.itemClick(item.value);\n                        }}\n                      >\n                        {item.label}\n                      </ix-filter-chip>\n                    ))\n                  : ''}\n                <div class=\"trigger\">\n                  <input\n                    autocomplete=\"off\"\n                    data-testid=\"input\"\n                    disabled={this.disabled}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    type=\"text\"\n                    class={{\n                      'allow-clear':\n                        this.allowClear && !!this.selectedLabels?.length,\n                    }}\n                    placeholder={this.placeholderValue()}\n                    value={this.inputValue ?? ''}\n                    ref={(ref) => (this.inputRef = ref)}\n                    onBlur={(e) => this.onInputBlur(e)}\n                    onFocus={() => {\n                      this.navigationItem = null;\n                    }}\n                    onInput={() => this.filterItemsWithTypeahead()}\n                    onKeyDown={(e) => this.onKeyDown(e)}\n                  />\n                  {this.allowClear &&\n                  (this.selectedLabels?.length || this.inputFilterText) ? (\n                    <ix-icon-button\n                      class=\"clear\"\n                      icon={'clear'}\n                      ghost\n                      oval\n                      size=\"16\"\n                      onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.clear();\n                      }}\n                    />\n                  ) : null}\n                  {this.disabled || this.readonly ? null : (\n                    <ix-icon-button\n                      data-select-dropdown\n                      class={{ 'dropdown-visible': this.dropdownShow }}\n                      icon=\"chevron-down-small\"\n                      ghost\n                      ref={(ref) => {\n                        if (this.editable) this.dropdownWrapperRef(ref);\n                      }}\n                    ></ix-icon-button>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </ix-field-wrapper>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref!)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor.waitForCurrent()}\n          trigger={this.dropdownWrapperRef.waitForCurrent()}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            const minWidth = this.hostElement.shadowRoot\n              ?.querySelector('.select')\n              ?.getBoundingClientRect().width;\n\n            return {\n              minWidth: `${minWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n            onClick={(e) => e.preventDefault()}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot\n            onSlotchange={() => {\n              this.updateSelection();\n            }}\n          ></slot>\n          <div\n            ref={(ref) => (this.customItemsContainerRef = ref!)}\n            class=\"d-contents\"\n          ></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon={'plus'}\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n              onFocus={() => (this.navigationItem = this.addItemRef)}\n              ref={(ref) => {\n                this.addItemRef = ref!;\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["async","shouldSuppressInternalValidation","host","getAssociatedFormElement","form","noValidate","createClassMutationObserver","element","callback","options","observer","MutationObserver","observe","subtree","includeChildren","childList","attributes","attributeFilter","destroy","disconnect","containsClass","hostElement","className","classList","contains","querySelector","checkFieldClasses","isInvalid","isInvalidByRequired","isValid","isInfo","isWarning","HookValidationLifecycle","proto","methodName","checkIfRequiredFunction","classMutationObserver","componentWillLoad","disconnectedCallback","connectedCallback","getElement","this","skipValidation","hasValidValue","hasValue","required","toggle","remove","getValidityState","validityState","Object","keys","filter","key","includes","forEach","addEventListener","setTimeout","call","result","removeEventListener"],"sources":["src/components/utils/input/validation.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n  destroy: () => void;\n};\n\nexport async function shouldSuppressInternalValidation<T>(\n  host: IxFormComponent<T>\n) {\n  if (\n    host.getAssociatedFormElement &&\n    typeof host.getAssociatedFormElement === 'function'\n  ) {\n    const form = await host.getAssociatedFormElement();\n\n    if (!form) {\n      return false;\n    }\n\n    return form.noValidate;\n  }\n\n  return false;\n}\n\nexport function createClassMutationObserver(\n  element: HTMLElement,\n  callback: () => void,\n  options?: {\n    includeChildren?: boolean;\n  }\n): ClassMutationObserver {\n  const observer = new MutationObserver(callback);\n  observer.observe(element, {\n    subtree: options?.includeChildren,\n    childList: options?.includeChildren,\n    attributes: true,\n    attributeFilter: ['class'],\n  });\n\n  return {\n    destroy() {\n      observer.disconnect();\n    },\n  };\n}\n\nexport type ValidationResultProperty =\n  | 'isInvalid'\n  | 'isInvalidByRequired'\n  | 'isValid'\n  | 'isInfo'\n  | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction containsClass(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  className: string,\n  includeChildren: boolean\n) {\n  return (\n    hostElement.classList.contains(`${className}`) ||\n    (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n  );\n}\n\nexport function checkFieldClasses(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  includeChildren = false\n): ValidationResults {\n  return {\n    isInvalid: containsClass(hostElement, 'ix-invalid', includeChildren),\n    isInvalidByRequired: containsClass(\n      hostElement,\n      'ix-invalid--required',\n      includeChildren\n    ),\n    isValid: containsClass(hostElement, 'ix-valid', includeChildren),\n    isInfo: containsClass(hostElement, 'ix-info', includeChildren),\n    isWarning: containsClass(hostElement, 'ix-warning', includeChildren),\n  };\n}\n\nexport function HookValidationLifecycle(options?: {\n  includeChildren?: boolean;\n}) {\n  return (proto: IxComponent, methodName: string) => {\n    let checkIfRequiredFunction: () => Promise<void>;\n    let classMutationObserver: ClassMutationObserver | null;\n    const { componentWillLoad, disconnectedCallback, connectedCallback } =\n      proto;\n\n    proto.connectedCallback = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n      checkIfRequiredFunction = async () => {\n        const skipValidation = await shouldSuppressInternalValidation(host);\n        if (skipValidation) {\n          return;\n        }\n\n        if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n          const hasValue = await host.hasValidValue();\n          if (host.required) {\n            host.classList.toggle('ix-invalid--required', !hasValue);\n          } else {\n            host.classList.remove('ix-invalid--required');\n          }\n        }\n\n        if (\n          host.getValidityState &&\n          typeof host.getValidityState === 'function'\n        ) {\n          const validityState = await host.getValidityState();\n          Object.keys(validityState)\n            // Use only the keys that are relevant for the validation state\n            // patternMismatch used for `ix-date-input`\n            .filter((key) => ['patternMismatch'].includes(key))\n            .forEach((key) => {\n              host.classList.toggle(\n                `ix-invalid--${key}`,\n                validityState[key as keyof ValidityState]\n              );\n            });\n        }\n      };\n\n      host.addEventListener('valueChange', checkIfRequiredFunction);\n      setTimeout(checkIfRequiredFunction);\n      return connectedCallback?.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n      classMutationObserver = createClassMutationObserver(\n        host,\n        () => {\n          const result = checkFieldClasses(host, options?.includeChildren);\n          proto[methodName].call(this, result);\n        },\n        options\n      );\n      const result = checkFieldClasses(host, options?.includeChildren);\n      proto[methodName].call(this, result);\n      return componentWillLoad?.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      if (host && classMutationObserver) {\n        classMutationObserver.destroy();\n        classMutationObserver = null;\n      }\n\n      if (host && checkIfRequiredFunction) {\n        host.removeEventListener('valueChange', checkIfRequiredFunction);\n      }\n\n      return disconnectedCallback?.call(this);\n    };\n  };\n}\n"],"mappings":"oCAgBOA,eAAeC,EACpBC,GAEA,GACEA,EAAKC,iCACED,EAAKC,2BAA6B,WACzC,CACA,MAAMC,QAAaF,EAAKC,2BAExB,IAAKC,EAAM,CACT,OAAO,K,CAGT,OAAOA,EAAKC,U,CAGd,OAAO,KACT,C,SAEgBC,EACdC,EACAC,EACAC,GAIA,MAAMC,EAAW,IAAIC,iBAAiBH,GACtCE,EAASE,QAAQL,EAAS,CACxBM,QAASJ,IAAO,MAAPA,SAAO,SAAPA,EAASK,gBAClBC,UAAWN,IAAO,MAAPA,SAAO,SAAPA,EAASK,gBACpBE,WAAY,KACZC,gBAAiB,CAAC,WAGpB,MAAO,CACL,OAAAC,GACER,EAASS,Y,EAGf,CAUA,SAASC,EACPC,EACAC,EACAR,GAEA,OACEO,EAAYE,UAAUC,SAAS,GAAGF,OACjCR,IAAoBO,EAAYI,cAAc,IAAIH,KAAe,MAEtE,C,SAEgBI,EACdL,EACAP,EAAkB,OAElB,MAAO,CACLa,UAAWP,EAAcC,EAAa,aAAcP,GACpDc,oBAAqBR,EACnBC,EACA,uBACAP,GAEFe,QAAST,EAAcC,EAAa,WAAYP,GAChDgB,OAAQV,EAAcC,EAAa,UAAWP,GAC9CiB,UAAWX,EAAcC,EAAa,aAAcP,GAExD,C,SAEgBkB,EAAwBvB,GAGtC,MAAO,CAACwB,EAAoBC,KAC1B,IAAIC,EACJ,IAAIC,EACJ,MAAMC,kBAAEA,EAAiBC,qBAAEA,EAAoBC,kBAAEA,GAC/CN,EAEFA,EAAMM,kBAAoB,WACxB,MAAMrC,EAAOsC,EACXC,MAGFN,EAA0BnC,UACxB,MAAM0C,QAAuBzC,EAAiCC,GAC9D,GAAIwC,EAAgB,CAClB,M,CAGF,GAAIxC,EAAKyC,sBAAwBzC,EAAKyC,gBAAkB,WAAY,CAClE,MAAMC,QAAiB1C,EAAKyC,gBAC5B,GAAIzC,EAAK2C,SAAU,CACjB3C,EAAKqB,UAAUuB,OAAO,wBAAyBF,E,KAC1C,CACL1C,EAAKqB,UAAUwB,OAAO,uB,EAI1B,GACE7C,EAAK8C,yBACE9C,EAAK8C,mBAAqB,WACjC,CACA,MAAMC,QAAsB/C,EAAK8C,mBACjCE,OAAOC,KAAKF,GAGTG,QAAQC,GAAQ,CAAC,mBAAmBC,SAASD,KAC7CE,SAASF,IACRnD,EAAKqB,UAAUuB,OACb,eAAeO,IACfJ,EAAcI,GACf,G,GAKTnD,EAAKsD,iBAAiB,cAAerB,GACrCsB,WAAWtB,GACX,OAAOI,IAAiB,MAAjBA,SAAiB,SAAjBA,EAAmBmB,KAAKjB,K,EAGjCR,EAAMI,kBAAoB,WACxB,MAAMnC,EAAOsC,EACXC,MAEFL,EAAwB9B,EACtBJ,GACA,KACE,MAAMyD,EAASjC,EAAkBxB,EAAMO,IAAO,MAAPA,SAAO,SAAPA,EAASK,iBAChDmB,EAAMC,GAAYwB,KAAKjB,KAAMkB,EAAO,GAEtClD,GAEF,MAAMkD,EAASjC,EAAkBxB,EAAMO,IAAO,MAAPA,SAAO,SAAPA,EAASK,iBAChDmB,EAAMC,GAAYwB,KAAKjB,KAAMkB,GAC7B,OAAOtB,IAAiB,MAAjBA,SAAiB,SAAjBA,EAAmBqB,KAAKjB,K,EAGjCR,EAAMK,qBAAuB,WAC3B,MAAMpC,EAAOsC,EAAWC,MAExB,GAAIvC,GAAQkC,EAAuB,CACjCA,EAAsBlB,UACtBkB,EAAwB,I,CAG1B,GAAIlC,GAAQiC,EAAyB,CACnCjC,EAAK0D,oBAAoB,cAAezB,E,CAG1C,OAAOG,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBoB,KAAKjB,K,CACnC,CAEL,Q"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as s}from"./p-5806df2b.js";const a=":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";const o=a;const r=class{constructor(t){e(this,t);this.striped=undefined}render(){return t(s,{key:"fa00b89511cc190656652267cb8248aa962a787c",class:{keyValueList:true,"keyValueList--striped":this.striped}},t("slot",{key:"43a50b29be3802511b623891ea26e8f1495461b0"}))}};r.style=o;export{r as ix_key_value_list};
-//# sourceMappingURL=p-ffca56d6.entry.js.map