@siemens/ix 2.6.0 → 2.7.0

package/dist/siemens-ix/p-8039ec6b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","IxSelectStyle0","Select","this","dropdownWrapperRef","makeRef","dropdownAnchorRef","inputRef","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","dropdownElement","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","customItemsContainerElement","appendChild","clearInput","itemValue","includes","ids","forEach","some","i","toString","selectedLabels","map","inputValue","inputElement","valueChange","itemSelectionChange","componentDidLoad","addEventListener","dropdownShow","inputChange","componentWillLoad","componentDidRender","ArrowFocusController","wrap","isAddItemVisible","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","itemExists","find","dropdownVisibilityChanged","select","removeHiddenFromItems","isDropdownEmpty","inputFilterText","onKeyDown","code","onArrowNavigation","onEnterNavigation","target","el","trimmedInput","itemLabel","editable","key","stopPropagation","activeElement","applyFocusTo","shift","focusAddItemButton","moveUp","indexNonShadow","indexOf","pop","addItemElement","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","reject","Error","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","styleOverwrites","minWidth","getBoundingClientRect","width","dropdownWidth","dropdownMaxWidth","maxWidth","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  ix-dropdown {\n    max-width: 100%;\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 { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { a11yBoolean } from '../utils/a11y';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\nimport { createMutationObserver } from '../utils/mutation-observer';\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   * The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\n   *\n   * @since 2.7.0\n   */\n  @Prop() dropdownWidth?: string;\n\n  /**\n   * The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\n   * By default the maximum width of the dropdown element is set to 100%.\n   *\n   * @since 2.7.0\n   *\n   */\n  @Prop() dropdownMaxWidth?: string;\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 | undefined)[] = [];\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 dropdownAnchorRef = makeRef<HTMLElement>();\n  private readonly inputRef = makeRef<HTMLInputElement>();\n\n  private inputElement?: HTMLInputElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n  private customItemsContainerElement?: HTMLDivElement;\n  private addItemElement?: 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 && this.dropdownElement) {\n      this.itemObserver.observe(this.dropdownElement, {\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 = undefined;\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.customItemsContainerElement?.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.inputElement && (this.inputElement.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([]);\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.inputElement?.addEventListener('input', () => {\n      this.dropdownShow = true;\n      this.inputChange.emit(this.inputElement?.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  componentDidRender(): void {\n    if (\n      !this.dropdownShow ||\n      this.arrowFocusController ||\n      !this.dropdownElement\n    ) {\n      return;\n    }\n\n    this.arrowFocusController = new ArrowFocusController(\n      this.visibleNonShadowItems,\n      this.dropdownElement,\n      this.focusControllerCallbackBind\n    );\n\n    this.arrowFocusController.wrap =\n      !this.isAddItemVisible() && !this.visibleShadowItems.length;\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 | undefined) {\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.inputElement?.focus();\n      this.inputElement?.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n      this.updateSelection();\n      this.inputFilterText = '';\n    }\n  }\n\n  @OnListener<Select>('keydown', (self) => self.dropdownShow)\n  async onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      await this.onArrowNavigation(event, event.code);\n    }\n\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation(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    const trimmedInput = this.inputFilterText.trim();\n    const itemLabel = (el as HTMLIxSelectItemElement)?.label;\n    const item = this.itemExists(trimmedInput);\n\n    if (item) {\n      this.itemClick(item.value);\n    } else if (this.editable && !this.itemExists(itemLabel)) {\n      const defaultPrevented = this.emitAddItem(trimmedInput);\n      if (defaultPrevented) {\n        return;\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.addItemElement?.contains(\n        await this.navigationItem.getDropdownItemElement()\n      )\n    ) {\n      if (moveUp) {\n        this.applyFocusTo(this.visibleItems.pop());\n      } else if (this.visibleItems.length) {\n        this.applyFocusTo(this.visibleItems.shift());\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.addItemElement;\n    }\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputElement?.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\n            ?.toLowerCase()\n            .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.inputElement) {\n      this.inputElement.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    if (this.inputElement) {\n      return Promise.resolve(this.inputElement);\n    } else {\n      return Promise.reject(new Error('Input element not found'));\n    }\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    const inputElement = await this.getNativeInputElement();\n    if (inputElement) {\n      inputElement.focus();\n    }\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}\n        >\n          <div\n            class={{\n              select: true,\n              disabled: this.disabled,\n              readonly: this.readonly,\n            }}\n            ref={(ref) => {\n              this.dropdownAnchorRef(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) => {\n                      this.inputElement = ref;\n                      this.inputRef(ref);\n                    }}\n                    onBlur={(e) => this.onInputBlur(e)}\n                    onFocus={() => {\n                      this.navigationItem = undefined;\n                    }}\n                    onInput={() => this.filterItemsWithTypeahead()}\n                    onKeyDown={(e) => this.onKeyDown(e)}\n                  />\n                  {this.allowClear &&\n                  !this.disabled &&\n                  !this.readonly &&\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.dropdownElement = ref!)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchorRef.waitForCurrent()}\n          trigger={this.dropdownWrapperRef.waitForCurrent()}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            const styleOverwrites: Partial<CSSStyleDeclaration> = {};\n\n            const minWidth = this.hostElement.shadowRoot\n              ?.querySelector('.select')\n              ?.getBoundingClientRect().width;\n\n            if (minWidth) {\n              styleOverwrites.minWidth = `${minWidth}px`;\n            }\n\n            if (this.dropdownWidth) {\n              styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`;\n            }\n\n            if (this.dropdownMaxWidth) {\n              styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;\n            }\n\n            return styleOverwrites;\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.customItemsContainerElement = 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.addItemElement)}\n              ref={(ref) => {\n                this.addItemElement = 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-8964b303.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as r,g as s}from"./p-5806df2b.js";import{c as o}from"./p-e898862b.js";const l=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:1rem}:host .CardList_Title__Label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px;flex-shrink:0}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center;height:100%}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";const a=l;function n(t){if(!t.label){return null}return i("div",{class:"CardList_Title"},i("ix-icon-button",{ghost:true,icon:"chevron-down",onClick:t.onClick,color:"color-primary",class:{CardList__Title__Button:true,CardList__Title__Button__Collapsed:t.isCollapsed}}),i("ix-typography",{class:"CardList_Title__Label",format:"body-lg"},t.label),!t.hideShowAll&&i("ix-button",{class:"CardList__Title__Show__All",ghost:true,onClick:t.onShowAllClick},i("span",null,t.showAllLabel),i("span",null,!isNaN(t.showAllCounter)?` (${t.showAllCounter})`:null)))}const h=class{constructor(i){t(this,i);this.collapseChanged=e(this,"collapseChanged",7);this.showAllClick=e(this,"showAllClick",7);this.showMoreCardClick=e(this,"showMoreCardClick",7);this.label=undefined;this.collapse=false;this.listStyle="stack";this.maxVisibleCards=12;this.showAllCount=undefined;this.suppressOverflowHandling=false;this.hideShowAll=false;this.i18nShowAll="Show all";this.i18nMoreCards="There are more cards available";this.hasOverflowingElements=false;this.numberOfOverflowingElements=0;this.numberOfAllChildElements=0;this.leftScrollDistance=0;this.rightScrollDistance=0}onCardListVisibilityToggle(){this.collapse=!this.collapse;this.collapseChanged.emit(this.collapse)}onShowAllClick(t){this.showAllClick.emit({nativeEvent:t})}getListChildren(){const t=this.hostElement.shadowRoot.querySelector(".CardList__Content > slot");return t.assignedElements({flatten:true})}changeVisibilityOfSlotChildren(){const t=this.getListChildren();t.forEach(((t,e)=>{if(t instanceof HTMLElement){if(e>this.maxVisibleCards-1){t.classList.add("d-none");return}t.classList.remove("d-none")}}));this.hasOverflowingElements=t.length>this.maxVisibleCards;this.numberOfOverflowingElements=t.length-this.maxVisibleCards;this.numberOfAllChildElements=t.length;this.detectOverflow()}registerOverflowHandler(){this.observer=o((()=>{this.changeVisibilityOfSlotChildren()}));this.observer.observe(this.hostElement.shadowRoot.querySelector(".CardList__Content"),{childList:true,subtree:true});requestAnimationFrame((()=>{this.changeVisibilityOfSlotChildren()}))}shouldHandleOverflow(){if(this.suppressOverflowHandling){return false}if(this.listStyle==="stack"||this.listStyle==="scroll"){return true}}get listElement(){return this.hostElement.shadowRoot.querySelector(".CardList__Content")}onCardListScroll(){this.detectOverflow()}isShowMoreCardVisible(){return this.suppressOverflowHandling===false&&this.hasOverflowingElements}getOpacityFromScrollDistance(t){if(!this.listElement){return 0}if(t===0){return 0}if(t>100){return 1}return t/100}computeMaskLayer(){const t=80;const e=`linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${t*(this.getOpacityFromScrollDistance(this.leftScrollDistance)>0?1:0)}px,\n      black calc(100% - ${t*(this.getOpacityFromScrollDistance(this.rightScrollDistance)>0?1:0)}px),\n      transparent 100%\n    )`;return{"--ix-card-list-overflow":e}}detectOverflow(){if(!this.listElement){return}const{clientWidth:t,scrollWidth:e,scrollLeft:i}=this.listElement;this.leftScrollDistance=i;this.rightScrollDistance=e-i-t}componentDidLoad(){if(this.shouldHandleOverflow()){this.registerOverflowHandler()}}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(r,{key:"317a088e7cf0ac2ff01d46fabe293b6dafa55d49"},i(n,{key:"1eb6e1e6c43432737bd9d1718c89539ae9dce42b",isCollapsed:this.collapse,label:this.label,showAllLabel:this.i18nShowAll,showAllCounter:this.showAllCount===undefined?this.numberOfAllChildElements:this.showAllCount,onClick:()=>this.onCardListVisibilityToggle(),onShowAllClick:t=>this.onShowAllClick(t),hideShowAll:this.hideShowAll}),i("div",{key:"0c47be401efa5bd5dec00ad948b15d9d46a1a29f",class:{CardList__Overflow:true},style:this.computeMaskLayer()},i("div",{key:"32cd8526bf44cef7249b08c8fc68d446ff6962af",class:{CardList__Content:true,CardList__Content__Collapsed:this.collapse,CardList__Style__Flexbox__Scroll:this.listStyle==="stack",CardList__Style__Infinite__Scroll:this.listStyle==="scroll"},onScroll:()=>this.onCardListScroll()},i("slot",{key:"a75fd0e0d1a4abd96d00db8bbbe78cc4f9b1c100",onSlotchange:()=>this.changeVisibilityOfSlotChildren()}),this.isShowMoreCardVisible()?i("ix-card",{class:{Show__All__Card:true},onClick:t=>this.showMoreCardClick.emit({nativeEvent:t})},i("ix-card-content",null,i("div",{class:"Show__All__Card__Content"},i("ix-icon",{name:"more-menu",size:"32",class:"Show__All__Card__Icon"}),i("span",{class:"Show__All__Card__Text"},this.i18nMoreCards," (",this.numberOfOverflowingElements,")")))):null)))}get hostElement(){return s(this)}};h.style=a;export{h as ix_card_list};
+//# sourceMappingURL=p-8964b303.entry.js.map

package/dist/siemens-ix/p-8964b303.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardListCss","IxCardListStyle0","CardListTitle","props","label","h","class","ghost","icon","onClick","color","CardList__Title__Button","CardList__Title__Button__Collapsed","isCollapsed","format","hideShowAll","onShowAllClick","showAllLabel","isNaN","showAllCounter","CardList","onCardListVisibilityToggle","this","collapse","collapseChanged","emit","event","showAllClick","nativeEvent","getListChildren","slot","hostElement","shadowRoot","querySelector","assignedElements","flatten","changeVisibilityOfSlotChildren","childElements","forEach","element","index","HTMLElement","maxVisibleCards","classList","add","remove","hasOverflowingElements","length","numberOfOverflowingElements","numberOfAllChildElements","detectOverflow","registerOverflowHandler","observer","createMutationObserver","observe","childList","subtree","requestAnimationFrame","shouldHandleOverflow","suppressOverflowHandling","listStyle","listElement","onCardListScroll","isShowMoreCardVisible","getOpacityFromScrollDistance","distance","computeMaskLayer","maxOverflowWidth","maskLayer","leftScrollDistance","rightScrollDistance","clientWidth","scrollWidth","scrollLeft","componentDidLoad","disconnectedCallback","disconnect","render","Host","key","i18nShowAll","showAllCount","undefined","e","CardList__Overflow","style","CardList__Content","CardList__Content__Collapsed","CardList__Style__Flexbox__Scroll","CardList__Style__Infinite__Scroll","onScroll","onSlotchange","Show__All__Card","showMoreCardClick","name","size","i18nMoreCards"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={'more-menu'}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{a as o}from"./p-559cdf73.js";const s=o;export{s as g};
+//# sourceMappingURL=p-89734934.js.map

package/dist/siemens-ix/{p-50096707.js.map → p-89734934.js.map}

@@ -1 +1 @@
-{"version":3,"names":["globalScripts","appGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import appGlobalScript from '/home/runner/work/ix/ix/packages/core/src/setup.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"+BACY,MAACA,EAAgBC,S"}
+{"version":3,"names":["globalScripts","appGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import appGlobalScript from '/home/runner/work/ix/ix/packages/core/src/setup.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"oCACY,MAACA,EAAgBC,S"}

package/dist/siemens-ix/{p-b74a8cdc.entry.js → p-8a6d403c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as r}from"./p-5806df2b.js";import{T as s}from"./p-c4749812.js";const e=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";const a=e;const n=class{constructor(o){t(this,o);this.PREFIX_POSITION_CLASS="toast-container--";this.containerId="toast-container";this.containerClass="toast-container";this.position="bottom-right"}get hostContainer(){return new Promise((t=>{const o=setInterval((()=>{const r=document.getElementById(this.containerId);if(r){clearInterval(o);t(r)}}))}))}componentDidLoad(){if(!document.getElementById(this.containerId)){const t=document.createElement("div");t.id=this.containerId;t.classList.add(this.containerClass);t.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);document.body.appendChild(t)}}onPositionChange(t,o){const r=document.getElementById(this.containerId);r.classList.remove(`${this.PREFIX_POSITION_CLASS}${o}`);r.classList.add(`${this.PREFIX_POSITION_CLASS}${t}`)}async showToast(t){var o,r;const e=document.createElement("ix-toast");const a=new s;function n(t){e.remove();a.emit(t)}e.toastTitle=t.title;e.type=t.type;e.autoClose=(o=t.autoClose)!==null&&o!==void 0?o:true;e.autoCloseDelay=(r=t.autoCloseDelay)!==null&&r!==void 0?r:5e3;e.icon=t.icon;e.iconColor=t.iconColor;e.addEventListener("closeToast",(t=>{const{detail:o}=t;n(o)}));if(typeof t.message==="string"){e.innerText=t.message}else{e.appendChild(t.message)}(await this.hostContainer).appendChild(e);return{onClose:a,close:t=>{n(t)}}}render(){return o(r,{key:"0bfccf7c84f68735f44d9b7fb79eddd5cc9f7720",class:{"toast-container--bottom-right":this.position==="bottom-right","toast-container--top-right":this.position==="top-right"}},o("slot",{key:"936e1593293b6c445651a9838a676b9412dfb648"}))}static get watchers(){return{position:["onPositionChange"]}}};n.style=a;export{n as ix_toast_container};
-//# sourceMappingURL=p-b74a8cdc.entry.js.map
+import{r as t,h as o,H as r}from"./p-5806df2b.js";import{T as s}from"./p-c4749812.js";const e=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";const n=e;const a=class{constructor(o){t(this,o);this.PREFIX_POSITION_CLASS="toast-container--";this.containerId="toast-container";this.containerClass="toast-container";this.position="bottom-right"}get hostContainer(){return new Promise((t=>{const o=setInterval((()=>{const r=document.getElementById(this.containerId);if(r){clearInterval(o);t(r)}}))}))}componentDidLoad(){if(!document.getElementById(this.containerId)){const t=document.createElement("div");t.id=this.containerId;t.classList.add(this.containerClass);t.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);document.body.appendChild(t)}}onPositionChange(t,o){const r=document.getElementById(this.containerId);if(!r){console.warn("No toast container found, cannot configure toast position");return}r.classList.remove(`${this.PREFIX_POSITION_CLASS}${o}`);r.classList.add(`${this.PREFIX_POSITION_CLASS}${t}`)}async showToast(t){var o,r,e;const n=document.createElement("ix-toast");const a=new s;function i(t){n.remove();a.emit(t)}n.toastTitle=t.title;n.type=(o=t.type)!==null&&o!==void 0?o:"info";n.autoClose=(r=t.autoClose)!==null&&r!==void 0?r:true;n.autoCloseDelay=(e=t.autoCloseDelay)!==null&&e!==void 0?e:5e3;n.icon=t.icon;n.iconColor=t.iconColor;n.addEventListener("closeToast",(t=>{const{detail:o}=t;i(o)}));if(typeof t.message==="string"){n.innerText=t.message}else{n.appendChild(t.message)}(await this.hostContainer).appendChild(n);return{onClose:a,close:t=>{i(t)}}}render(){return o(r,{key:"e68ed9ab280f5371d912d00e0de80bf4b2d0f73a",class:{"toast-container--bottom-right":this.position==="bottom-right","toast-container--top-right":this.position==="top-right"}},o("slot",{key:"e18da090109cfd3ce359825cf4b21c05720e08e1"}))}static get watchers(){return{position:["onPositionChange"]}}};a.style=n;export{a as ix_toast_container};
+//# sourceMappingURL=p-8a6d403c.entry.js.map

package/dist/siemens-ix/p-8a6d403c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toastContainerCss","IxToastContainerStyle0","ToastContainer","this","PREFIX_POSITION_CLASS","hostContainer","Promise","resolve","interval","setInterval","containerElement","document","getElementById","containerId","clearInterval","componentDidLoad","toastContainer","createElement","id","classList","add","containerClass","position","body","appendChild","onPositionChange","newPosition","oldPosition","console","warn","remove","showToast","config","toast","onClose","TypedEvent","removeToast","result","emit","toastTitle","title","type","_a","autoClose","_b","autoCloseDelay","_c","icon","iconColor","addEventListener","event","detail","message","innerText","close","render","h","Host","key","class"],"sources":["src/components/toast/styles/toast-container.scss?tag=ix-toast-container&encapsulation=shadow","src/components/toast/toast-container.tsx"],"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 */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n}\n\n#toast-container {\n  > :not(:last-child) {\n    margin-block-end: $default-space;\n  }\n}\n\n.toast-container {\n  display: block;\n  position: fixed;\n}\n\n.toast-container--top-right {\n  right: 1rem;\n  top: 2rem;\n}\n\n.toast-container--bottom-right {\n  right: 1rem;\n  bottom: 2rem;\n}\n","/*\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 */\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n  onClose: TypedEvent<any | undefined>;\n  close: (result?: any) => void;\n};\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return new Promise<HTMLElement>((resolve) => {\n      const interval = setInterval(() => {\n        const containerElement = document.getElementById(this.containerId);\n        if (containerElement) {\n          clearInterval(interval);\n          resolve(containerElement);\n        }\n      });\n    });\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    if (!toastContainer) {\n      console.warn('No toast container found, cannot configure toast position');\n      return;\n    }\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig): Promise<ShowToastResult> {\n    const toast = document.createElement('ix-toast');\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type ?? 'info';\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    (await this.hostContainer).appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,+8BAC1B,MAAAC,EAAeD,E,MCsBFE,EAAc,M,yBAaRC,KAAAC,sBAAwB,oB,iBAVnB,kB,oBAIG,kB,cAIwB,c,CAIjD,iBAAIC,GACF,OAAO,IAAIC,SAAsBC,IAC/B,MAAMC,EAAWC,aAAY,KAC3B,MAAMC,EAAmBC,SAASC,eAAeT,KAAKU,aACtD,GAAIH,EAAkB,CACpBI,cAAcN,GACdD,EAAQG,E,IAEV,G,CAIN,gBAAAK,GACE,IAAKJ,SAASC,eAAeT,KAAKU,aAAc,CAC9C,MAAMG,EAAiBL,SAASM,cAAc,OAC9CD,EAAeE,GAAKf,KAAKU,YACzBG,EAAeG,UAAUC,IAAIjB,KAAKkB,gBAClCL,EAAeG,UAAUC,IACvB,GAAGjB,KAAKC,wBAAwBD,KAAKmB,YAEvCX,SAASY,KAAKC,YAAYR,E,EAK9B,gBAAAS,CAAiBC,EAAqBC,GACpC,MAAMX,EAAiBL,SAASC,eAAeT,KAAKU,aACpD,IAAKG,EAAgB,CACnBY,QAAQC,KAAK,6DACb,M,CAEFb,EAAeG,UAAUW,OACvB,GAAG3B,KAAKC,wBAAwBuB,KAElCX,EAAeG,UAAUC,IAAI,GAAGjB,KAAKC,wBAAwBsB,I,CAQ/D,eAAMK,CAAUC,G,UACd,MAAMC,EAAQtB,SAASM,cAAc,YACrC,MAAMiB,EAAU,IAAIC,EAEpB,SAASC,EAAYC,GACnBJ,EAAMH,SACNI,EAAQI,KAAKD,E,CAGfJ,EAAMM,WAAaP,EAAOQ,MAC1BP,EAAMQ,MAAOC,EAAAV,EAAOS,QAAI,MAAAC,SAAA,EAAAA,EAAI,OAC5BT,EAAMU,WAAYC,EAAAZ,EAAOW,aAAS,MAAAC,SAAA,EAAAA,EAAI,KACtCX,EAAMY,gBAAiBC,EAAAd,EAAOa,kBAAc,MAAAC,SAAA,EAAAA,EAAI,IAChDb,EAAMc,KAAOf,EAAOe,KACpBd,EAAMe,UAAYhB,EAAOgB,UACzBf,EAAMgB,iBACJ,cACCC,IACC,MAAMC,OAAEA,GAAWD,EACnBd,EAAYe,EAAO,IAIvB,UAAWnB,EAAOoB,UAAY,SAAU,CACtCnB,EAAMoB,UAAYrB,EAAOoB,O,KACpB,CACLnB,EAAMT,YAAYQ,EAAOoB,Q,QAGpBjD,KAAKE,eAAemB,YAAYS,GAEvC,MAAO,CACLC,UACAoB,MAAQjB,IACND,EAAYC,EAAO,E,CAKzB,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,gCAAiCxD,KAAKmB,WAAa,eACnD,6BAA8BnB,KAAKmB,WAAa,cAGlDkC,EAAA,QAAAE,IAAA,6C"}

package/dist/siemens-ix/{p-a3364116.entry.js → p-8df3318f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,H as s,g as o}from"./p-5806df2b.js";import{c as i}from"./p-e898862b.js";const c=":host{display:block;position:relative;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;min-width:2rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex;height:100%}:host .steps.vertical{flex-direction:column}";const a=c;const h=class{constructor(r){t(this,r);this.stepSelected=e(this,"stepSelected",7);this.vertical=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}updateSteps(){let t=this.getSteps();t.forEach(((e,r)=>{e.vertical=this.vertical;e.clickable=this.clickable;e.selected=this.selectedIndex===r;if(t.length===1){e.position="single";return}if(r===0){e.position="first"}else if(r===t.length-1){e.position="last"}else{e.position="undefined"}}))}onStepSelectionChanged(t){const e=t.detail;const r=this.getSteps();const s=r.findIndex((t=>t===e));const o=this.stepSelected.emit(s);if(o.defaultPrevented){return}r.forEach(((t,e)=>{t.selected=e===s}))}componentWillLoad(){this.updateSteps()}componentDidLoad(){this.observer=i((t=>{for(let e of t){if(e.type==="childList"){this.updateSteps()}}}));this.observer.observe(this.hostElement,{childList:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentDidRender(){this.updateSteps()}render(){return r(s,{key:"052bc92640371b56974c12c8b07b49cc24233a4f"},r("div",{key:"00d19de2fda034b1024c0a793e46ad401eed46ee",class:{steps:true,vertical:this.vertical}},r("slot",{key:"4a6a73538d83c4d8f49c2404dadc5e130e6ba6e7"})))}get hostElement(){return o(this)}};h.style=a;export{h as ix_workflow_steps};
-//# sourceMappingURL=p-a3364116.entry.js.map
+import{r as t,c as e,h as r,H as s,g as o}from"./p-5806df2b.js";import{c as i}from"./p-e898862b.js";const c=":host{display:block;position:relative;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;min-width:2rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex;height:100%}:host .steps.vertical{flex-direction:column}";const a=c;const h=class{constructor(r){t(this,r);this.stepSelected=e(this,"stepSelected",7);this.vertical=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}updateSteps(){let t=this.getSteps();t.forEach(((e,r)=>{e.vertical=this.vertical;e.clickable=this.clickable;e.selected=this.selectedIndex===r;if(t.length===1){e.position="single";return}if(r===0){e.position="first"}else if(r===t.length-1){e.position="last"}else{e.position="undefined"}}))}onStepSelectionChanged(t){const e=t.detail;const r=this.getSteps();const s=r.findIndex((t=>t===e));const o=this.stepSelected.emit(s);if(o.defaultPrevented){return}r.forEach(((t,e)=>{t.selected=e===s}))}componentWillLoad(){this.updateSteps()}componentDidLoad(){this.observer=i((t=>{for(let e of t){if(e.type==="childList"){this.updateSteps()}}}));this.observer.observe(this.hostElement,{childList:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentDidRender(){this.updateSteps()}render(){return r(s,{key:"192c534bab7bc83c33b9c479817b9bec7967f759"},r("div",{key:"9b35cb1aa638c73acf3cca0fb359e4b26ed8004e",class:{steps:true,vertical:this.vertical}},r("slot",{key:"5feb3ad4a26faed8f4071673980ab1bb3fe27970"})))}get hostElement(){return o(this)}};h.style=a;export{h as ix_workflow_steps};
+//# sourceMappingURL=p-8df3318f.entry.js.map

package/dist/siemens-ix/p-8df3318f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["workflowStepsCss","IxWorkflowStepsStyle0","WorkflowSteps","getSteps","Array","from","this","hostElement","querySelectorAll","updateSteps","steps","forEach","element","index","vertical","clickable","selected","selectedIndex","length","position","onStepSelectionChanged","event","eventTarget","detail","clickIndex","findIndex","step","clientEvent","stepSelected","emit","defaultPrevented","componentWillLoad","componentDidLoad","observer","createMutationObserver","mutations","mutation","type","observe","childList","disconnectedCallback","disconnect","componentDidRender","render","h","Host","key","class"],"sources":["src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","src/components/workflow-steps/workflow-steps.tsx"],"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 */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  min-width: 2rem;\n\n  .steps {\n    display: flex;\n    height: 100%;\n\n    &.vertical {\n      flex-direction: column;\n    }\n  }\n}\n","/*\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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  shadow: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected!: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  updateSteps() {\n    let steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.vertical = this.vertical;\n      element.clickable = this.clickable;\n      element.selected = this.selectedIndex === index;\n\n      if (steps.length === 1) {\n        element.position = 'single';\n        return;\n      }\n\n      if (index === 0) {\n        element.position = 'first';\n      } else if (index === steps.length - 1) {\n        element.position = 'last';\n      } else {\n        element.position = 'undefined';\n      }\n    });\n  }\n\n  private observer?: MutationObserver;\n\n  @Listen('selectedChanged')\n  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n    const eventTarget = event.detail;\n\n    const steps = this.getSteps();\n    const clickIndex = steps.findIndex((step) => step === eventTarget);\n    const clientEvent = this.stepSelected.emit(clickIndex);\n\n    if (clientEvent.defaultPrevented) {\n      return;\n    }\n\n    steps.forEach((step, index) => {\n      step.selected = index === clickIndex;\n    });\n  }\n\n  componentWillLoad() {\n    this.updateSteps();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.updateSteps();\n        }\n      }\n    });\n\n    this.observer.observe(this.hostElement, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentDidRender() {\n    this.updateSteps();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,s9BACzB,MAAAC,EAAeD,E,MCyBFE,EAAa,M,kFAMI,M,eAKC,M,mBAKG,C,CAOxB,QAAAC,GACN,OAAOC,MAAMC,KAAKC,KAAKC,YAAYC,iBAAiB,oB,CAGtD,WAAAC,GACE,IAAIC,EAAQJ,KAAKH,WACjBO,EAAMC,SAAQ,CAACC,EAASC,KACtBD,EAAQE,SAAWR,KAAKQ,SACxBF,EAAQG,UAAYT,KAAKS,UACzBH,EAAQI,SAAWV,KAAKW,gBAAkBJ,EAE1C,GAAIH,EAAMQ,SAAW,EAAG,CACtBN,EAAQO,SAAW,SACnB,M,CAGF,GAAIN,IAAU,EAAG,CACfD,EAAQO,SAAW,O,MACd,GAAIN,IAAUH,EAAMQ,OAAS,EAAG,CACrCN,EAAQO,SAAW,M,KACd,CACLP,EAAQO,SAAW,W,KAQzB,sBAAAC,CAAuBC,GACrB,MAAMC,EAAcD,EAAME,OAE1B,MAAMb,EAAQJ,KAAKH,WACnB,MAAMqB,EAAad,EAAMe,WAAWC,GAASA,IAASJ,IACtD,MAAMK,EAAcrB,KAAKsB,aAAaC,KAAKL,GAE3C,GAAIG,EAAYG,iBAAkB,CAChC,M,CAGFpB,EAAMC,SAAQ,CAACe,EAAMb,KACnBa,EAAKV,SAAWH,IAAUW,CAAU,G,CAIxC,iBAAAO,GACEzB,KAAKG,a,CAGP,gBAAAuB,GACE1B,KAAK2B,SAAWC,GAAwBC,IACtC,IAAK,IAAIC,KAAYD,EAAW,CAC9B,GAAIC,EAASC,OAAS,YAAa,CACjC/B,KAAKG,a,MAKXH,KAAK2B,SAASK,QAAQhC,KAAKC,YAAa,CAAEgC,UAAW,M,CAGvD,oBAAAC,GACE,GAAIlC,KAAK2B,SAAU,CACjB3B,KAAK2B,SAASQ,Y,EAIlB,kBAAAC,GACEpC,KAAKG,a,CAGP,MAAAkC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAErC,MAAO,KAAMI,SAAUR,KAAKQ,WACxC8B,EAAA,QAAAE,IAAA,8C"}

package/dist/siemens-ix/p-8efd9181.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,F as s,H as a,g as o}from"./p-5806df2b.js";import{D as h}from"./p-f5e574da.js";import{m as r}from"./p-ce563a48.js";const n=":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0 1rem 0.75rem 1rem}";const d=n;const c=class{constructor(e){t(this,e);this.dateRangeChange=i(this,"dateRangeChange",7);this.triggerRef=r();this.datePickerTouched=false;this.disabled=false;this.format="yyyy/LL/dd";this.range=true;this.from="";this.to="";this.minDate="";this.maxDate="";this.dateRangeId="custom";this.variant="primary";this.outline=false;this.ghost=false;this.loading=false;this.customRangeAllowed=true;this.dateRangeOptions=[];this.locale=undefined;this.weekStartIndex=0;this.i18nCustomItem="Custom...";this.i18nDone="Done";this.i18nNoRange="No range set";this.today=h.now().toISO();this.selectedDateRangeId="";this.currentRangeValue=undefined}onDateRangeIdChange(){this.onRangeListSelect(this.dateRangeId);this.updateCurrentDate();this.setDateRangeSelection(this.dateRangeId);if(!this.currentRangeValue){return}this.onDateSelect({from:this.currentRangeValue.from,to:this.currentRangeValue.to,id:this.currentRangeValue.id})}onDateRangeOptionsChange(){this.initialize();this.onDateRangeIdChange()}onDisabledChange(){if(this.disabled){this.closeDropdown()}}componentWillLoad(){this.initialize();this.setDateRangeSelection(this.dateRangeId)}async getDateRange(){return this.currentRangeValue||{id:"",from:"",to:""}}initialize(){const t=this.dateRangeId==="custom"||!this.dateRangeId&&!!this.from&&!!this.to;if(t&&this.customRangeAllowed){this.selectedDateRangeId="custom";this.updateCurrentDate();return}const i=!t&&!this.from;if(!i){console.warn('"from" and "range-date-id" is provided this is an invalid combination. Using "custom".');this.selectedDateRangeId="custom";this.updateCurrentDate();return}}updateCurrentDate(){this.currentRangeValue={id:this.selectedDateRangeId,from:this.from,to:this.to}}onDateSelect(t,i=true){this.dateRangeChange.emit(t);if(i){this.closeDropdown()}this.datePickerTouched=false}onRangeListSelect(t){if(this.setDateRangeSelection(t)&&this.currentRangeValue){this.onDateSelect(this.currentRangeValue)}}setDateRangeSelection(t){this.selectedDateRangeId=t;const i=this.dateRangeOptions.find((i=>i.id===t));if(i){this.currentRangeValue=i}return i}closeDropdown(){const t=this.hostElement.shadowRoot.querySelector("ix-dropdown");if(t){t.show=false}}getButtonLabel(){var t,i;if(this.selectedDateRangeId==="custom"&&((t=this.currentRangeValue)===null||t===void 0?void 0:t.from)){let t=this.currentRangeValue.from;if(this.currentRangeValue.to){t+=` - ${this.currentRangeValue.to}`}return t}if(!this.selectedDateRangeId){return this.i18nNoRange}if(!this.dateRangeOptions||((i=this.dateRangeOptions)===null||i===void 0?void 0:i.length)===0){return this.i18nNoRange}const e=this.dateRangeOptions.find((t=>t.id===this.selectedDateRangeId));if(!e){console.error(`Cannot find range option with id ${this.selectedDateRangeId}`);return this.i18nNoRange}return e.label}render(){var t,i,o;return e(a,{key:"b4d969756a441b41db705ed2e0e3c869923df58a"},e("ix-button",{key:"aa79503137737514e6c3ff00a89beebdc6020600","data-testid":"date-dropdown-trigger","data-date-dropdown-trigger":true,variant:this.variant,ghost:this.ghost,outline:this.outline,loading:this.loading,icon:"history",ref:this.triggerRef,disabled:this.disabled},this.getButtonLabel()),e("ix-dropdown",{key:"e812b148194e5c0d28137b1f9acae0be678c37da","data-testid":"date-dropdown","data-date-dropdown":true,class:"min-width max-height",trigger:this.triggerRef.waitForCurrent(),closeBehavior:"outside",placement:"bottom-start",onShowChanged:({detail:t})=>{if(!t&&this.selectedDateRangeId==="custom"&&this.datePickerTouched&&this.currentRangeValue){this.onDateSelect(this.currentRangeValue)}}},e("ix-layout-grid",{key:"bd671f13b233e9286a707895622c77350b54f993","no-margin":"true"},e("ix-row",{key:"f4f88f2b7c70afc88968aa3ccaf635dc5d011c09"},((t=this.dateRangeOptions)===null||t===void 0?void 0:t.length)>1&&e("ix-col",{key:"4509fe366560787efcef157279900475640a7d1c",class:{"no-margin":true,"border-right":this.selectedDateRangeId==="custom"}},this.dateRangeOptions.map((t=>e("ix-dropdown-item",{label:t.label,onClick:()=>this.onRangeListSelect(t.id),checked:this.selectedDateRangeId===t.id}))),e("div",{key:"25ebfe04bab64152ce9c901a7899e95964891b8a",hidden:!this.customRangeAllowed},e("ix-dropdown-item",{key:"9ea2297749b7c20743e592129e3c03a6c96ae3dc",label:this.i18nCustomItem,checked:this.selectedDateRangeId==="custom",onClick:()=>this.onRangeListSelect("custom")}))),e("ix-col",{key:"de1b089479091b6daf75a3c575dbfc14b378b808",class:"no-margin"},this.selectedDateRangeId==="custom"&&e(s,{key:"ff476d3ea38df74580130098b3ae1a46b2e4f99c"},e("ix-date-picker",{key:"b45fba5a5fdf01f2bdbe774f1123012b98eeb2ab",standaloneAppearance:false,locale:this.locale,onDateChange:t=>{t.stopPropagation();this.currentRangeValue=Object.assign(Object.assign({},t.detail),{id:"custom"});this.datePickerTouched=true},onDateRangeChange:t=>t.stopPropagation(),format:this.format,range:this.range,from:this.from||((i=this.currentRangeValue)===null||i===void 0?void 0:i.from),to:this.to||((o=this.currentRangeValue)===null||o===void 0?void 0:o.to),minDate:this.minDate,maxDate:this.maxDate,today:this.today,weekStartIndex:this.weekStartIndex}),e("div",{key:"66e6a835d23b3308df952ad924fc8a095893a9e9",class:"pull-right"},e("ix-button",{key:"facd509b601f962bcca5e8363320ce392dd9e582",onClick:()=>{if(this.currentRangeValue){this.onDateSelect(this.currentRangeValue)}}},this.i18nDone))))))))}get hostElement(){return o(this)}static get watchers(){return{dateRangeId:["onDateRangeIdChange"],to:["onDateRangeIdChange"],from:["onDateRangeIdChange"],dateRangeOptions:["onDateRangeOptionsChange"],disabled:["onDisabledChange"]}}};c.style=d;export{c as ix_date_dropdown};
+//# sourceMappingURL=p-8efd9181.entry.js.map

package/dist/siemens-ix/p-8efd9181.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dateDropdownCss","IxDateDropdownStyle0","DateDropdown","this","triggerRef","makeRef","datePickerTouched","DateTime","now","toISO","onDateRangeIdChange","onRangeListSelect","dateRangeId","updateCurrentDate","setDateRangeSelection","currentRangeValue","onDateSelect","from","to","id","onDateRangeOptionsChange","initialize","onDisabledChange","disabled","closeDropdown","componentWillLoad","getDateRange","isCustomRange","customRangeAllowed","selectedDateRangeId","isValidConfiguration","console","warn","rangeValue","preserveDropdown","dateRangeChange","emit","option","dateRangeOptions","find","range","dropdown","hostElement","shadowRoot","querySelector","show","getButtonLabel","_a","i18nNoRange","_b","length","error","label","render","h","Host","key","variant","ghost","outline","loading","icon","ref","class","trigger","waitForCurrent","closeBehavior","placement","onShowChanged","detail","map","dateRangeOption","onClick","checked","hidden","i18nCustomItem","Fragment","standaloneAppearance","locale","onDateChange","e","stopPropagation","Object","assign","onDateRangeChange","format","_c","minDate","maxDate","today","weekStartIndex","i18nDone"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: 0 $default-space $medium-space $default-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  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { type LiteralStringUnion } from '../utils/type-helper';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown\n  implements\n    Omit<IxDatePickerComponent, 'corners'>,\n    Omit<IxButtonComponent, 'type' | 'icon'>\n{\n  @Element() hostElement!: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from = '';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to = '';\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    if (!this.currentRangeValue) {\n      return;\n    }\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.6.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event()\n  private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: LiteralStringUnion<'custom'> = '';\n  @State() private currentRangeValue?: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  private readonly triggerRef = makeRef<HTMLElement>();\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue || { id: '', from: '', to: '' };\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant={this.variant}\n          ghost={this.ghost}\n          outline={this.outline}\n          loading={this.loading}\n          icon=\"history\"\n          ref={this.triggerRef}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef.waitForCurrent()}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched &&\n              this.currentRangeValue\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      locale={this.locale}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                      weekStartIndex={this.weekStartIndex}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          if (this.currentRangeValue) {\n                            this.onDateSelect(this.currentRangeValue);\n                          }\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-d0b38ae2.entry.js → p-9213afda.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as a,H as r}from"./p-5806df2b.js";const o=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";const c=o;const s=class{constructor(a){t(this,a);this.actionClick=e(this,"actionClick",7);this.layout="large";this.icon=undefined;this.header=undefined;this.subHeader=undefined;this.action=undefined}render(){return a(r,{key:"724769e68ca03e809c7c1b520fd27ddf0f851e00",class:`emptyState emptyState--${this.layout}`},this.icon&&a("div",{key:"30038117755c9f30e0a90a6c4e2ab03fb559fa2d",class:"emptyState__icon"},a("ix-icon",{key:"96c477d16bec8a73843981731ff6cb8830c27d39",name:this.icon,size:this.layout==="large"?"32":"32",color:"color-soft-text"})),a("div",{key:"eac1e4371be1427d7126f134bee2f74550f09fe9",class:"emptyState__content"},a("div",{key:"462298153f1e35f9fcc43fe7d42e15fe6efa2351",class:"content__label"},a("ix-typography",{key:"d52a79a4e27938d59231a3e39cc38b53a5799a5f",format:this.layout==="large"?"h3":"body"},this.header),this.subHeader&&a("div",{key:"9667dc6eaba88a1ce663e66deda0d447f91db7f0",class:"label__subHeader"},this.subHeader)),this.action&&a("div",{key:"6b435724ffb7e2cc758b43cd76e452b241aab028",class:"content__action"},a("ix-button",{key:"a6257e01ae753fee88b61de3b9ffccdc68596485",onClick:()=>this.actionClick.emit()},this.action))))}};s.style=c;export{s as ix_empty_state};
-//# sourceMappingURL=p-d0b38ae2.entry.js.map
+import{r as t,c as e,h as a,H as r}from"./p-5806df2b.js";const o=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";const c=o;const s=class{constructor(a){t(this,a);this.actionClick=e(this,"actionClick",7);this.layout="large";this.icon=undefined;this.header=undefined;this.subHeader=undefined;this.action=undefined}render(){return a(r,{key:"cb312e54bc903b7f3d59faed9850e9500847869e",class:`emptyState emptyState--${this.layout}`},this.icon&&a("div",{key:"c901252f66e6f97ef42808c1e881bac76b40674a",class:"emptyState__icon"},a("ix-icon",{key:"1ee24a795580830a364f8b541b94e230d7797365",name:this.icon,size:this.layout==="large"?"32":"32",color:"color-soft-text"})),a("div",{key:"ab641cce5937da8014ec76af23349dd629575a2e",class:"emptyState__content"},a("div",{key:"8d6340d04768a47ccd1333d628342bb894d7387a",class:"content__label"},a("ix-typography",{key:"f27adb6c7a93e36117022dd2294b46a34b0f4c79",format:this.layout==="large"?"h3":"body"},this.header),this.subHeader&&a("div",{key:"ca49901be387ce044c5aa6da90fab8d8f2dc06a1",class:"label__subHeader"},this.subHeader)),this.action&&a("div",{key:"76755b670cae1926e6d976244a81f1b3c9eca76b",class:"content__action"},a("ix-button",{key:"937d705608063a0e586d112f7c848883abd361fb",onClick:()=>this.actionClick.emit()},this.action))))}};s.style=c;export{s as ix_empty_state};
+//# sourceMappingURL=p-9213afda.entry.js.map

package/dist/siemens-ix/{p-d0b38ae2.entry.js.map → p-9213afda.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["emptyStateCss","IxEmptyStateStyle0","EmptyState","render","h","Host","key","class","this","layout","icon","name","size","color","format","header","subHeader","action","onClick","actionClick","emit"],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n\n  .label__subHeader,\n  ix-typography {\n    text-align: center;\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,0zEACtB,MAAAC,EAAeD,E,MCoBFE,EAAU,M,8EAIc,Q,yFA2BnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,0BAA0BC,KAAKC,UACzCD,KAAKE,MACJN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAETH,EAAA,WAAAE,IAAA,2CACEK,KAAMH,KAAKE,KACXE,KAAMJ,KAAKC,SAAW,QAAU,KAAO,KACvCI,MAAM,qBAKZT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,iBAAAE,IAAA,2CAAeQ,OAAQN,KAAKC,SAAW,QAAU,KAAO,QACrDD,KAAKO,QAGPP,KAAKQ,WACJZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAAoBC,KAAKQ,YAIvCR,KAAKS,QACJb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,aAAAE,IAAA,2CAAWY,QAAS,IAAMV,KAAKW,YAAYC,QACxCZ,KAAKS,U"}
+{"version":3,"names":["emptyStateCss","IxEmptyStateStyle0","EmptyState","render","h","Host","key","class","this","layout","icon","name","size","color","format","header","subHeader","action","onClick","actionClick","emit"],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n\n  .label__subHeader,\n  ix-typography {\n    text-align: center;\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action?: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,0zEACtB,MAAAC,EAAeD,E,MCoBFE,EAAU,M,8EAIc,Q,yFA2BnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,0BAA0BC,KAAKC,UACzCD,KAAKE,MACJN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAETH,EAAA,WAAAE,IAAA,2CACEK,KAAMH,KAAKE,KACXE,KAAMJ,KAAKC,SAAW,QAAU,KAAO,KACvCI,MAAM,qBAKZT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,iBAAAE,IAAA,2CAAeQ,OAAQN,KAAKC,SAAW,QAAU,KAAO,QACrDD,KAAKO,QAGPP,KAAKQ,WACJZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAAoBC,KAAKQ,YAIvCR,KAAKS,QACJb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,aAAAE,IAAA,2CAAWY,QAAS,IAAMV,KAAKW,YAAYC,QACxCZ,KAAKS,U"}

package/dist/siemens-ix/{p-f35386ec.js → p-93d4d3c9.js}

@@ -1,2 +1,2 @@
-import{h as t}from"./p-5806df2b.js";import{a as i,b as e,c as n,d as o}from"./p-a427e6a2.js";function a({invalidText:t,warningText:i,infoText:e,validText:n,helperText:o}){return t||i||e||n||o}function s({isInvalid:a,invalidText:s,isWarning:r,warningText:x,isInfo:c,infoText:l,isValid:d,validText:f,helperText:p}){if(a&&s!==undefined){return t("ix-typography",{color:"alarm",class:"bottom-text"},t("ix-icon",{class:"text-icon invalid",name:i,size:"16"}),s)}if(r&&x!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon warning",name:e,size:"16"}),x)}if(c&&l!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon info",name:n,size:"16"}),l)}if(d&&f!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon valid",name:o,size:"16"}),f)}return p&&t("ix-typography",{class:"bottom-text",color:"soft"},p)}export{a as h,s as r};
-//# sourceMappingURL=p-f35386ec.js.map
+import{h as t}from"./p-5806df2b.js";import{a as i,b as e,c as n,d as o}from"./p-fe158b99.js";function a({invalidText:t,warningText:i,infoText:e,validText:n,helperText:o}){return t||i||e||n||o}function s({isInvalid:a,invalidText:s,isWarning:r,warningText:x,isInfo:c,infoText:l,isValid:d,validText:f,helperText:p}){if(a&&s!==undefined){return t("ix-typography",{color:"alarm",class:"bottom-text"},t("ix-icon",{class:"text-icon invalid",name:i,size:"16"}),s)}if(r&&x!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon warning",name:e,size:"16"}),x)}if(c&&l!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon info",name:n,size:"16"}),l)}if(d&&f!==undefined){return t("ix-typography",{color:"std",class:"bottom-text"},t("ix-icon",{class:"text-icon valid",name:o,size:"16"}),f)}return p&&t("ix-typography",{class:"bottom-text",color:"soft"},p)}export{a as h,s as r};
+//# sourceMappingURL=p-93d4d3c9.js.map

package/dist/siemens-ix/p-93fab3c7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,H as i,g as n}from"./p-5806df2b.js";import{m as c}from"./p-ce563a48.js";const o=":host{display:contents}";const r=o;const d=class{constructor(e){t(this,e);this.itemClick=s(this,"itemClick",7);this.wrapperRef=c();this.icon=undefined;this.label=undefined}async getDropdownItemElement(){return this.wrapperRef.waitForCurrent()}render(){return e(i,{key:"cb34ba65f519984cf68639856699df8471d82f4c"},e("ix-dropdown-item",{key:"54a95bd00935e3246e4d5bf8f9cdbc8da5d2cd82",ref:this.wrapperRef,suppressChecked:true,icon:this.icon,label:this.label,onItemClick:t=>{t.preventDefault();t.stopPropagation()},onClick:t=>this.itemClick.emit(t)}))}get hostElement(){return n(this)}};d.style=r;export{d as ix_split_button_item};
+//# sourceMappingURL=p-93fab3c7.entry.js.map

package/dist/siemens-ix/{p-c236cf18.entry.js.map → p-93fab3c7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["splitButtonItemCss","IxSplitButtonItemStyle0","SplitButtonItem","this","wrapperRef","makeRef","getDropdownItemElement","waitForCurrent","render","h","Host","key","ref","suppressChecked","icon","label","onItemClick","e","preventDefault","stopPropagation","onClick","itemClick","emit"],"sources":["src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","src/components/split-button-item/split-button-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:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n */\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem implements DropdownItemWrapper {\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  private wrapperRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.wrapperRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          ref={this.wrapperRef}\n          suppressChecked\n          icon={this.icon}\n          label={this.label}\n          onItemClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onClick={(e) => this.itemClick.emit(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,0BAC3B,MAAAC,EAAeD,E,MC6BFE,EAAe,M,8DAkBlBC,KAAAC,WAAaC,I,yCAIrB,4BAAMC,GACJ,OAAOH,KAAKC,WAAWG,gB,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,IAAKT,KAAKC,WACVS,gBAAe,KACfC,KAAMX,KAAKW,KACXC,MAAOZ,KAAKY,MACZC,YAAcC,IACZA,EAAEC,iBACFD,EAAEE,iBAAiB,EAErBC,QAAUH,GAAMd,KAAKkB,UAAUC,KAAKL,K"}
+{"version":3,"names":["splitButtonItemCss","IxSplitButtonItemStyle0","SplitButtonItem","this","wrapperRef","makeRef","getDropdownItemElement","waitForCurrent","render","h","Host","key","ref","suppressChecked","icon","label","onItemClick","e","preventDefault","stopPropagation","onClick","itemClick","emit"],"sources":["src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","src/components/split-button-item/split-button-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:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n */\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxSplitButtonItemElement;\n\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private wrapperRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.wrapperRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          ref={this.wrapperRef}\n          suppressChecked\n          icon={this.icon}\n          label={this.label}\n          onItemClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onClick={(e) => this.itemClick.emit(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,0BAC3B,MAAAC,EAAeD,E,MC6BFE,EAAe,M,8DAkBlBC,KAAAC,WAAaC,I,yCAIrB,4BAAMC,GACJ,OAAOH,KAAKC,WAAWG,gB,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,IAAKT,KAAKC,WACVS,gBAAe,KACfC,KAAMX,KAAKW,KACXC,MAAOZ,KAAKY,MACZC,YAAcC,IACZA,EAAEC,iBACFD,EAAEE,iBAAiB,EAErBC,QAAUH,GAAMd,KAAKkB,UAAUC,KAAKL,K"}

package/dist/siemens-ix/{p-b62f8f62.entry.js → p-988ca463.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as e,H as t,g as o}from"./p-5806df2b.js";import{h as a}from"./p-345e1c73.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem;position:relative}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const d=s;const c=class{constructor(e){r(this,e);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return e(t,{key:"d507034393e0da4a209198ee007bcbda9d949acf"},e("div",{key:"be4b20dad2d73b80dbdbd7720e608fcc063ae227",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},e("slot",{key:"7053f639f4f42fdad91e82e6cd78022d703d7097",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),e("div",{key:"2a9e27c0685f5dd52a848764e937af1cc06b50d7",class:"content"},e("slot",{key:"302af1dd73eda0b3b990545e986ed8c1b3182236"})))}get hostElement(){return o(this)}};c.style=d;export{c as ix_content};
-//# sourceMappingURL=p-b62f8f62.entry.js.map
+import{r,h as t,H as e,g as o}from"./p-5806df2b.js";import{h as a}from"./p-345e1c73.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem;position:relative}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const b=s;const c=class{constructor(t){r(this,t);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return t(e,{key:"5ff3dde4c94bd5f40598a6b8fc9043ab2755c9a7"},t("div",{key:"cb2d5d8d011649e5f2cb67d8b7857b7bd096ca44",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},t("slot",{key:"1a0c6b612ff4364e6bdd10b15745160925b61efd",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),t("div",{key:"5eabaf6bcd0c33d982bd1b88862873383b58fae6",class:"content"},t("slot",{key:"25fa713021e9c01c08282da185c2fc14b6d06b3f"})))}get hostElement(){return o(this)}};c.style=b;export{c as ix_content};
+//# sourceMappingURL=p-988ca463.entry.js.map

package/dist/siemens-ix/{p-83da8f11.entry.js → p-9c63869a.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as t,c as e,g as a}from"./p-5806df2b.js";import{a as s}from"./p-345e1c73.js";const c=":host{display:block;position:relative;overflow:auto;padding:0 0.5rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const l=c;const b=class{constructor(o){r(this,o)}render(){return o(t,{key:"a9138b068e31e29e69d65a77ff670504fc80b99f"},o("slot",{key:"3b97af0889d2b483ad0d3b9a37da195a5aba331a"}))}};b.style=l;const h=":host{display:flex;padding:0.5rem 0 0.5rem 0.5rem;align-items:center;gap:1rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .modal-title{flex-grow:1}:host .modal-close{align-self:flex-start}";const i=h;const n=class{constructor(o){r(this,o);this.closeClick=e(this,"closeClick",7);this.hideClose=false;this.icon=undefined;this.iconColor=undefined}onIconChange(r){if(this.parentDialog){if(r){this.parentDialog.classList.add("with-icon")}else{this.parentDialog.classList.remove("with-icon")}}}componentDidLoad(){this.parentDialog=s(this.hostElement,"ix-modal");this.onIconChange(this.icon)}onCloseClick(r){const o=this.closeClick.emit(r);if(o.defaultPrevented||r.defaultPrevented){return}this.parentDialog.dismissModal()}render(){return o(t,{key:"eac3267570af0578a96e5d3f229c739e22b8f71e"},this.icon?o("ix-icon",{name:this.icon,color:this.iconColor,size:"32"}):null,o("div",{key:"824929ed3b5362eaf28084d84ae87a9837f44d57",class:"modal-title"},o("ix-typography",{key:"97bd809f9ffd90d8d87bc6ee46c488892ae950b5",format:"h5"},o("slot",{key:"52b95892d06e0247096362dc40e1afd296392170"}))),!this.hideClose?o("ix-icon-button",{class:"modal-close",onClick:r=>this.onCloseClick(r),ghost:true,icon:"close"}):null)}get hostElement(){return a(this)}static get watchers(){return{icon:["onIconChange"]}}};n.style=i;export{b as ix_modal_content,n as ix_modal_header};
-//# sourceMappingURL=p-83da8f11.entry.js.map
+import{r,h as o,H as t,c as e,g as a}from"./p-5806df2b.js";import{a as s}from"./p-345e1c73.js";const c=":host{display:block;position:relative;overflow:auto;padding:0 0.5rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const b=c;const l=class{constructor(o){r(this,o)}render(){return o(t,{key:"84ebcbda08133eb94f2f5b60abb2b2b7bb5ab37a"},o("slot",{key:"6c1fd9c108911fd724794555d9a0d47d951384c2"}))}};l.style=b;const h=":host{display:flex;padding:0.5rem 0 0.5rem 0.5rem;align-items:center;gap:1rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .modal-title{flex-grow:1}:host .modal-close{align-self:flex-start}";const i=h;const n=class{constructor(o){r(this,o);this.closeClick=e(this,"closeClick",7);this.hideClose=false;this.icon=undefined;this.iconColor=undefined}onIconChange(r){if(this.parentDialog){if(r){this.parentDialog.classList.add("with-icon")}else{this.parentDialog.classList.remove("with-icon")}}}componentDidLoad(){this.parentDialog=s(this.hostElement,"ix-modal");this.onIconChange(this.icon)}onCloseClick(r){const o=this.closeClick.emit(r);if(o.defaultPrevented||r.defaultPrevented){return}this.parentDialog.dismissModal()}render(){return o(t,{key:"a1f7e00b9cd9f848fca485129d59ebfabecaee76"},this.icon?o("ix-icon",{name:this.icon,color:this.iconColor,size:"32"}):null,o("div",{key:"35e8529a8b4f5a7c934210a2ec7b86af9d4b5adc",class:"modal-title"},o("ix-typography",{key:"624ca4d302a98fb86dda4356fd8e9936eadb4e5b",format:"h5"},o("slot",{key:"8145c7dbcfafe35d9bd715aaaf671f579f298449"}))),!this.hideClose?o("ix-icon-button",{class:"modal-close",onClick:r=>this.onCloseClick(r),ghost:true,icon:"close"}):null)}get hostElement(){return a(this)}static get watchers(){return{icon:["onIconChange"]}}};n.style=i;export{l as ix_modal_content,n as ix_modal_header};
+//# sourceMappingURL=p-9c63869a.entry.js.map

package/dist/siemens-ix/p-9dd344d4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as t,H as s}from"./p-5806df2b.js";const b=":host{display:block}";const c=b;const n=class{constructor(t){e(this,t);this.labelChange=a(this,"labelChange",7);this.label=undefined}watchLabel(e,a){this.labelChange.emit({name:"ix-menu-about-item",oldLabel:a,newLabel:e})}render(){return t(s,{key:"64625e5eb62e019f6e42a9a36dae6207bad0701f"},t("slot",{key:"519c77be9ef20bc794b1840c4a0f4cba4f924994"}))}static get watchers(){return{label:["watchLabel"]}}};n.style=c;export{n as ix_menu_about_item};
+//# sourceMappingURL=p-9dd344d4.entry.js.map

package/dist/siemens-ix/{p-2643f32a.entry.js.map → p-9dd344d4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["menuAboutItemCss","IxMenuAboutItemStyle0","MenuAboutItem","watchLabel","newValue","oldValue","this","labelChange","emit","name","oldLabel","newLabel","render","h","Host","key"],"sources":["src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=shadow","src/components/menu-about-item/menu-about-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: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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  shadow: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Label changed\n   */\n  @Event() labelChange: EventEmitter<CustomLabelChangeEvent>;\n\n  @Watch('label')\n  watchLabel(newValue: string, oldValue: string) {\n    this.labelChange.emit({\n      name: 'ix-menu-about-item',\n      oldLabel: oldValue,\n      newLabel: newValue,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,uBACzB,MAAAC,EAAeD,E,MCwBFE,EAAa,M,uFAYxB,UAAAC,CAAWC,EAAkBC,GAC3BC,KAAKC,YAAYC,KAAK,CACpBC,KAAM,qBACNC,SAAUL,EACVM,SAAUP,G,CAId,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["menuAboutItemCss","IxMenuAboutItemStyle0","MenuAboutItem","watchLabel","newValue","oldValue","this","labelChange","emit","name","oldLabel","newLabel","render","h","Host","key"],"sources":["src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=shadow","src/components/menu-about-item/menu-about-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: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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  shadow: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * Label changed\n   */\n  @Event() labelChange!: EventEmitter<CustomLabelChangeEvent>;\n\n  @Watch('label')\n  watchLabel(newValue: string, oldValue: string) {\n    this.labelChange.emit({\n      name: 'ix-menu-about-item',\n      oldLabel: oldValue,\n      newLabel: newValue,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,uBACzB,MAAAC,EAAeD,E,MCwBFE,EAAa,M,uFAYxB,UAAAC,CAAWC,EAAkBC,GAC3BC,KAAKC,YAAYC,KAAK,CACpBC,KAAM,qBACNC,SAAUL,EACVM,SAAUP,G,CAId,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

package/dist/siemens-ix/{p-815699d1.entry.js → p-9df683f8.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,H as e,g as o}from"./p-5806df2b.js";import{a as s}from"./p-71206084.js";import{b as d,a as r}from"./p-5fe87e71.js";import{A as l}from"./p-46a6cd9d.js";import{O as n}from"./p-9d5d4948.js";function h(t,i,a=3e3){return new Promise(((e,o)=>{const s=Date.now();const d=()=>{const r=i.querySelector(t);if(r){e(r)}else{if(Date.now()-s<a){setTimeout(d)}else{o()}}};d()}))}const c="::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";const f=c;var m=undefined&&undefined.__decorate||function(t,i,a,e){var o=arguments.length,s=o<3?i:e===null?e=Object.getOwnPropertyDescriptor(i,a):e,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,i,a,e);else for(var r=t.length-1;r>=0;r--)if(d=t[r])s=(o<3?d(s):o>3?d(i,a,s):d(i,a))||s;return o>3&&s&&Object.defineProperty(i,a,s),s};const p=class{constructor(a){t(this,a);this.dialogClose=i(this,"dialogClose",7);this.dialogDismiss=i(this,"dialogDismiss",7);this.ariaAttributes={};this.size="360";this.animation=true;this.backdrop=true;this.closeOnBackdropClick=false;this.beforeDismiss=undefined;this.centered=false;this.keyboard=true;this.closeOnEscape=true;this.modalVisible=false}onKey(t){if(t.key==="Escape"){t.preventDefault()}}get dialog(){return this.hostElement.shadowRoot.querySelector("dialog")}slideInModal(){const t=this.animation?l.mediumTime:0;let i=this.centered?"-50%":40;s({targets:this.dialog,duration:t,opacity:[0,1],translateY:[0,i],translateX:["-50%","-50%"],easing:"easeOutSine"})}slideOutModal(t){const i=this.animation?l.mediumTime:0;let a=this.centered?"-50%":40;s({targets:this.dialog,duration:i,opacity:[1,0],translateY:[a,0],translateX:["-50%","-50%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onModalClick(t){if(t.target!==this.dialog){return}const i=this.dialog.getBoundingClientRect();const a=i.top<=t.clientY&&t.clientY<=i.top+i.height&&i.left<=t.clientX&&t.clientX<=i.left+i.width;if(!a&&this.closeOnBackdropClick){this.dismissModal()}}async showModal(){try{const t=await h("dialog",this.hostElement.shadowRoot);this.modalVisible=true;t.showModal()}catch(t){console.error("HTMLDialogElement not existing")}}async dismissModal(t){if(!this.modalVisible){return}let i=true;if(this.beforeDismiss!==undefined){i=await this.beforeDismiss(t)}if(!i){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"dismiss",reason:t},null,2));this.dialogDismiss.emit(t)}))}async closeModal(t){if(!this.modalVisible){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"close",reason:t},null,2));this.dialogClose.emit(t)}))}componentDidLoad(){this.slideInModal()}componentWillLoad(){this.ariaAttributes=d(this.hostElement)}render(){return a(e,{key:"843063a6cabaa8ed0d6f0da512fd79b3df2f11f7",class:{visible:this.modalVisible,"no-backdrop":this.backdrop===false,"align-center":this.centered}},a("div",{key:"c1419057ffea6a493dd8870894f491727209a0b3",class:"dialog-backdrop"},a("dialog",{key:"fc8d67009dbc4563287d87f3a60fe775cd92e1ba","aria-modal":r(true),"aria-describedby":this.ariaAttributes["aria-describedby"],"aria-labelledby":this.ariaAttributes["aria-labelledby"],class:{modal:true,[`modal-size-${this.size}`]:true},onClose:()=>this.dismissModal(),onClick:t=>this.onModalClick(t),onCancel:t=>{t.preventDefault();this.dismissModal()}},a("slot",{key:"7daaff4237ace41e3545af9831f039174c8336bb"}))))}get hostElement(){return o(this)}};m([n("keydown",(t=>!t.closeOnEscape||!t.keyboard))],p.prototype,"onKey",null);p.style=f;export{p as ix_modal};
-//# sourceMappingURL=p-815699d1.entry.js.map
+import{r as t,c as i,h as e,H as a,g as o}from"./p-5806df2b.js";import{a as s}from"./p-71206084.js";import{b as r,a as l}from"./p-5fe87e71.js";import{A as d}from"./p-46a6cd9d.js";import{O as n}from"./p-9d5d4948.js";function h(t,i,e=3e3){return new Promise(((a,o)=>{const s=Date.now();const r=()=>{const l=i.querySelector(t);if(l){a(l)}else{if(Date.now()-s<e){setTimeout(r)}else{o()}}};r()}))}const c="::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";const f=c;var m=undefined&&undefined.__decorate||function(t,i,e,a){var o=arguments.length,s=o<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,i,e,a);else for(var l=t.length-1;l>=0;l--)if(r=t[l])s=(o<3?r(s):o>3?r(i,e,s):r(i,e))||s;return o>3&&s&&Object.defineProperty(i,e,s),s};const p=class{constructor(e){t(this,e);this.dialogClose=i(this,"dialogClose",7);this.dialogDismiss=i(this,"dialogDismiss",7);this.ariaAttributes={};this.size="360";this.animation=true;this.backdrop=true;this.closeOnBackdropClick=false;this.beforeDismiss=undefined;this.centered=false;this.keyboard=true;this.closeOnEscape=true;this.modalVisible=false}onKey(t){if(t.key==="Escape"){t.preventDefault()}}get dialog(){return this.hostElement.shadowRoot.querySelector("dialog")}slideInModal(){const t=this.animation?d.mediumTime:0;let i=this.centered?"-50%":40;s({targets:this.dialog,duration:t,opacity:[0,1],translateY:[0,i],translateX:["-50%","-50%"],easing:"easeOutSine"})}slideOutModal(t){const i=this.animation?d.mediumTime:0;let e=this.centered?"-50%":40;s({targets:this.dialog,duration:i,opacity:[1,0],translateY:[e,0],translateX:["-50%","-50%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onModalClick(t){if(t.target!==this.dialog){return}const i=this.dialog.getBoundingClientRect();const e=i.top<=t.clientY&&t.clientY<=i.top+i.height&&i.left<=t.clientX&&t.clientX<=i.left+i.width;if(!e&&this.closeOnBackdropClick){this.dismissModal()}}async showModal(){try{const t=await h("dialog",this.hostElement.shadowRoot);this.modalVisible=true;t.showModal()}catch(t){console.error("HTMLDialogElement not existing")}}async dismissModal(t){if(!this.modalVisible){return}let i=true;if(this.beforeDismiss!==undefined){i=await this.beforeDismiss(t)}if(!i){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"dismiss",reason:t},null,2));this.dialogDismiss.emit(t)}))}async closeModal(t){if(!this.modalVisible){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"close",reason:t},null,2));this.dialogClose.emit(t)}))}componentDidLoad(){this.slideInModal()}componentWillLoad(){this.ariaAttributes=r(this.hostElement)}render(){return e(a,{key:"2e3dac43f6f2e9cde6a6d639cb3bcebeb9e9b411",class:{visible:this.modalVisible,"no-backdrop":this.backdrop===false,"align-center":this.centered}},e("div",{key:"5ea3cf91488446be08e7fc4802b3e167fc688437",class:"dialog-backdrop"},e("dialog",{key:"a298c12b344b74ea11a4ba9749a18b49ba97f697","aria-modal":l(true),"aria-describedby":this.ariaAttributes["aria-describedby"],"aria-labelledby":this.ariaAttributes["aria-labelledby"],class:{modal:true,[`modal-size-${this.size}`]:true},onClose:()=>this.dismissModal(),onClick:t=>this.onModalClick(t),onCancel:t=>{t.preventDefault();this.dismissModal()}},e("slot",{key:"a1da640bda6f15e9c48eb5b3b3f7e336c99cb85b"}))))}get hostElement(){return o(this)}};m([n("keydown",(t=>!t.closeOnEscape||!t.keyboard))],p.prototype,"onKey",null);p.style=f;export{p as ix_modal};
+//# sourceMappingURL=p-9df683f8.entry.js.map

package/dist/siemens-ix/p-9df683f8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["waitForElement","selector","doc","timeout","Promise","resolve","reject","startTime","Date","now","checkIfElementExist","dialog","querySelector","setTimeout","modalCss","IxModalStyle0","Modal","this","ariaAttributes","onKey","e","key","preventDefault","hostElement","shadowRoot","slideInModal","duration","animation","Animation","mediumTime","transformY","centered","anime","targets","opacity","translateY","translateX","easing","slideOutModal","completeCallback","complete","onModalClick","event","target","rect","getBoundingClientRect","isClickOutside","top","clientY","height","left","clientX","width","closeOnBackdropClick","dismissModal","showModal","modalVisible","console","error","reason","allowDismiss","beforeDismiss","undefined","close","JSON","stringify","type","dialogDismiss","emit","closeModal","dialogClose","componentDidLoad","componentWillLoad","a11yHostAttributes","render","h","Host","class","visible","backdrop","a11yBoolean","modal","size","onClose","onClick","onCancel","__decorate","OnListener","self","closeOnEscape","keyboard"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"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 */\n\nexport function waitForElement<R extends HTMLElement>(\n  selector: string,\n  doc: any,\n  timeout = 3000\n): Promise<R> {\n  return new Promise<R>((resolve, reject) => {\n    const startTime = Date.now();\n\n    const checkIfElementExist = () => {\n      const dialog = doc.querySelector(selector) satisfies R;\n\n      if (dialog) {\n        resolve(dialog);\n      } else {\n        if (Date.now() - startTime < timeout) {\n          setTimeout(checkIfElementExist);\n        } else {\n          reject();\n        }\n      }\n    };\n\n    checkIfElementExist();\n  });\n}\n","/*\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 */\n\n::backdrop {\n  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n  outline: none !important;\n}\n\n:host {\n  display: none;\n\n  dialog {\n    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\n    left: 50%;\n  }\n\n  dialog::backdrop {\n    backdrop-filter: blur(2.7182817459106445px);\n  }\n\n  .modal {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    border: none;\n    border-radius: var(--theme-default-border-radius);\n    background: var(--theme-modal--background);\n    box-shadow: var(--theme-shadow-4);\n    color: var(--theme-color-std-text);\n    overflow: visible;\n    max-height: 80vh;\n    pointer-events: all;\n  }\n\n  .modal-size-360 {\n    width: 22.5rem;\n  }\n\n  .modal-size-480 {\n    width: 30rem;\n  }\n\n  .modal-size-600 {\n    width: 37.5rem;\n  }\n\n  .modal-size-720 {\n    width: 45rem;\n  }\n\n  .modal-size-840 {\n    width: 52.5rem;\n  }\n\n  .modal-size-full-width {\n    width: 95%;\n  }\n\n  .modal-size-full-screen {\n    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\n\n    pointer-events: none;\n  }\n\n  ::slotted(ix-modal-footer) {\n    margin-top: auto;\n  }\n}\n\n:host(.visible) {\n  display: block;\n}\n\n:host(.align-center) {\n  dialog {\n    margin: 0;\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.no-backdrop) {\n  dialog::backdrop {\n    background-color: transparent !important;\n    backdrop-filter: none !important;\n  }\n}\n\n:host(.with-icon) {\n  ::slotted(ix-modal-footer),\n  ::slotted(ix-modal-content) {\n    margin-left: 3rem;\n  }\n}\n","/*\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   * @deprecated - Use closeOnEscape instead\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * If set to true the modal can be closed by pressing the Escape key\n   */\n  @Prop() closeOnEscape = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose!: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss!: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => !self.closeOnEscape || !self.keyboard)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}