@infineon/infineon-design-system-stencil 37.3.0--canary.1950.5d11e48d4f0a54b6edf1ffbcc0d55a943f9c1f3c.0 → 37.3.0--canary.1950.e6e48a36e10af3e7865c21dc9be85dbd249383b3.0

package/dist/infineon-design-system-stencil/p-248b8ba3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","constructor","hostRef","this","disabled","error","errorMessage","label","placeholder","showSearch","showSelectAll","showClearButton","showExpandCollapse","noResultsMessage","showNoResultsMessage","searchPlaceholder","selectAllLabel","expandLabel","collapseLabel","ariaMultiSelectLabel","ariaMultiSelectLabelledBy","ariaMultiSelectDescribedBy","ariaSearchLabel","ariaClearLabel","ariaToggleLabel","ariaSelectAllLabel","ariaExpandAllLabel","ariaCollapseAllLabel","internalError","persistentSelectedOptions","dropdownOpen","searchTerm","handleSearch","targetElement","value","toLowerCase","isSearchActive","wrapper","el","shadowRoot","querySelector","classList","remove","searchField","searchFieldHasFocus","matches","add","optionsContainer","requestAnimationFrame","allOptions","querySelectorAll","forEach","option","searchEvent","CustomEvent","detail","isActive","dispatchEvent","visibleCount","style","window","getComputedStyle","rect","getBoundingClientRect","display","visibility","opacity","height","pendingSelectionUpdate","handleDocumentClick","event","path","composedPath","includes","dropdownElement","document","removeEventListener","resetSearch","ifxOpen","emit","parseChildOptions","options","childElements","Array","from","children","child","index","tagName","parseOptionElement","push","element","getAttribute","selected","hasAttribute","indeterminate","nestedOptions","filter","map","childIndex","opt","length","loadInitialOptions","internalErrorMessage","initiallySelected","collectSelectedOptions","initiallySelectedNotInState","init","some","selectedOptions","concat","collectLeafOptions","existingOption","leafOptions","handleSearchFocus","hasFocus","positionDropdown","wrapperRect","_a","spaceBelow","innerHeight","bottom","spaceAbove","top","dropdownFlipped","updateSlotBasedSelections","emitEvent","allOptionElements","selectedLeafOptions","optionEl","instance","hasChildren","ifxSelect","updateInitialParentStates","optionsByDepth","depth","parseInt","item","sort","a","b","updateParentState","parentInstance","directChildren","selectedCount","indeterminateCount","totalCount","componentDidLoad","addEventListener","componentWillLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","updateInternalError","updateInternalErrorMessage","onSelectionChange","newValue","_","formData","FormData","append","name","internals","setFormValue","collapseAll","isExpanded","expandAll","selectAll","clearSelection","toggleDropdown","handleWrapperClick","currentTarget","target","handleKeyDown","code","preventDefault","closest","focusFirstOption","firstOption","labelElement","focus","renderSelectAll","allSelected","toggleSelectAll","stopPropagation","h","class","id","checked","size","onClick","onKeyDown","e","key","renderNoResultsMessage","render","selectedOptionsLabels","optionElement","textContent","trim","join","hasSelections","isFlatMultiselect","every","ref","role","undefined","tabindex","onIfxInput","onFocus","onBlur","tabIndex","icon","multiselectOptionCss","IfxMultiselectOptionStyle0","MultiselectOption","isSearchDisabled","handleSearchFilter","updateSearchClasses","handleCheckboxClick","newSelectedState","selectAllChildren","expandAllChildren","updateParentStates","notifyMultiselect","handleHeaderClick","handleClick","calculateDepth","setAttribute","toString","hasSelectedChildren","hasAnySelectedChildren","disconnectedCallback","optionDiv","removeHighlighting","getTextContent","matchesSearch","hasMatchingParent","hasMatchingChildren","highlightSearchTerm","slotElement","originalText","searchTermLower","originalTextLower","searchIndex","indexOf","beforeMatch","substring","matchText","afterMatch","highlightedContent","createElement","className","appendChild","createTextNode","boldElement","highlightedElement","removeChild","removeAttribute","text","childNodes","node","nodeType","Node","TEXT_NODE","childOptions","childInstance","childText","childMatches","grandChildrenMatch","parent","parentElement","parentText","type","toggleExpansion","updateEvent","bubbles","call","expanded","siblings","sibling","hasSelected","hasSelectedDescendants","checkForSelectedDescendants","nestedChild","isSelected","hasSelectedNested","parentMultiselect","basePadding","additionalPadding","totalPadding","optionItemStyle","paddingLeft","Host"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx","src/components/select/multi-select/multiselect-option.scss?tag=ifx-multiselect-option&encapsulation=shadow","src/components/select/multi-select/multiselect-option.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n  position: relative;\n  box-sizing: border-box;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  .ifx-label-wrapper {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-error-message-wrapper {\n    color: #CD002F;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-multiselect-wrapper {\n    background-color: tokens.$ifxColorBaseWhite;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadius12;\n    width: 100%;\n    font-weight: 400;\n    font-style: normal;\n    height: 40px;\n    line-height: 24px;\n    padding: 8px 16px;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible:not(.active):not(:active) {\n      outline: none;\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: calc(100% + 4px);\n        height: calc(100% + 4px);\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid tokens.$ifxColorOcean500;\n        border-radius: 2px;\n\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering200;\n      color: #575352;\n      border-color: #575352;\n      cursor: default;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    &.error {\n      border-color: #CD002F;\n    }\n\n    &:hover:not(.focus, :focus) {\n      border-color: tokens.$ifxColorEngineering500;\n    }\n\n    &.active {\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n      & .icon-wrapper-up {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: tokens.$ifxSpace100;\n      }\n\n      & .icon-wrapper-down {\n        display: none\n      }\n    }\n\n\n    & .icon-wrapper-up {\n      display: none;\n    }\n\n    & .icon-wrapper-down {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-left: tokens.$ifxSpace100;\n    }\n\n    &.is-flipped {\n      .ifx-multiselect-dropdown-menu {\n        top: auto;\n        bottom: 100%;\n      }\n    }\n  }\n\n  .ifx-multiselect-input {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.placeholder {\n      opacity: 0.5;\n    }\n\n  }\n\n\n  .ifx-multiselect-icon-container {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n\n    .ifx-multiselect-icon-container {\n      display: flex;\n    }\n\n    .icon-wrapper {\n      display: flex;\n      align-items: center;\n      transition: transform 0.2s ease-in-out;\n    }\n\n    .icon-wrapper--open {\n      transform: rotate(180deg);\n    }\n  }\n\n  .ifx-clear-button {\n    display: flex;\n    align-items: center;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  .ifx-multiselect-dropdown-menu {\n    box-sizing: border-box;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    margin-top: tokens.$ifxSpace50;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    background-color: #fff;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    max-height: 300px;\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.ifx-multiselect-dropdown-functions {\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  flex-shrink: 0;\n}\n\n.ifx-multiselect-dropdown-search {\n  margin-bottom: tokens.$ifxSpace150;\n}\n\n.ifx-multiselect-dropdown-controls {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: tokens.$ifxSpace100;\n\n  .select-all-wrapper {\n    display: flex;\n  }\n\n  .expand-collapse-controls {\n    display: flex;\n    gap: tokens.$ifxSpace150;\n  }\n\n  .control-item {\n    font-size: tokens.$ifxFontSizeS;\n    line-height: tokens.$ifxLineHeightS;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 2px solid tokens.$ifxColorOcean500;\n      outline-offset: 2px;\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n  }\n}\n\n.ifx-multiselect-options {\n  flex: 1;\n  overflow-y: auto;\n  padding-top: tokens.$ifxSpace150;\n  padding-bottom: tokens.$ifxSpace150;\n\n  &.show-no-results {\n    .ifx-multiselect-no-results {\n      display: block;\n    }\n  }\n}\n\n.ifx-multiselect-no-results {\n  padding-left: tokens.$ifxSpace200;\n  padding-right: tokens.$ifxSpace200;\n  display: none;\n}\n\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals, Method } from '@stencil/core';\nimport { trackComponent } from '../../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../../global/utils/dom-utils';\nimport { detectFramework } from '../../../global/utils/framework-detection';\nimport { Option } from './interfaces';\n\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'ifx-multiselect',\n  styleUrl: 'multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Multiselect {\n  @Prop() name: string;\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string = \"Error\";\n  @Prop() label: string = \"\";\n  @Prop() placeholder: string = \"\";\n  @Prop() showSearch: boolean = true;\n  @Prop() showSelectAll: boolean = true;\n  @Prop() showClearButton: boolean = true;\n  @Prop() showExpandCollapse: boolean = true;\n  @Prop() noResultsMessage: string = \"No results found.\";\n  @Prop() showNoResultsMessage: boolean = true;\n  @Prop() searchPlaceholder: string = \"Search\";\n  @Prop() selectAllLabel: string = \"Select all\";\n  @Prop() expandLabel: string = \"Expand\";\n  @Prop() collapseLabel: string = \"Collapse\";\n  @Prop() ariaMultiSelectLabel: string = \"Multi-select dropdown\";\n  @Prop() ariaMultiSelectLabelledBy: string = \"\";\n  @Prop() ariaMultiSelectDescribedBy: string = \"\";\n  @Prop() ariaSearchLabel: string = \"Search options\";\n  @Prop() ariaClearLabel: string = \"Clear all selections\";\n  @Prop() ariaToggleLabel: string = \"Toggle dropdown\";\n  @Prop() ariaSelectAllLabel: string = \"Select all options\";\n  @Prop() ariaExpandAllLabel: string = \"Expand all categories\";\n  @Prop() ariaCollapseAllLabel: string = \"Collapse all categories\";\n\n  @State() internalError: boolean = false;\n  @State() internalErrorMessage: string;\n  @State() persistentSelectedOptions: Option[] = [];\n  @State() dropdownOpen = false;\n  @State() dropdownFlipped: boolean;\n  @State() searchTerm: string = '';\n\n  @Event() ifxSelect: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n\n  @Element() el: HTMLElement;\n  dropdownElement!: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n  private parseChildOptions(): Option[] {\n    const options: Option[] = [];\n    const childElements = Array.from(this.el.children);\n\n    childElements.forEach((child, index) => {\n      if (child.tagName === 'IFX-MULTISELECT-OPTION') {\n        const option = this.parseOptionElement(child as HTMLElement, index);\n        if (option) {\n          options.push(option);\n        }\n      }\n    });\n\n    return options;\n  }\n\n  private parseOptionElement(element: HTMLElement, index: number): Option | null {\n    const value = element.getAttribute('value') || `option-${index}`;\n    const selected = element.hasAttribute('selected');\n    const disabled = element.hasAttribute('disabled');\n    const indeterminate = element.hasAttribute('indeterminate');\n\n    const option: Option = {\n      value,\n      selected,\n      disabled,\n      indeterminate\n    };\n\n    const nestedOptions = Array.from(element.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n      .map((child, childIndex) => this.parseOptionElement(child as HTMLElement, childIndex))\n      .filter(opt => opt !== null) as Option[];\n\n    if (nestedOptions.length > 0) {\n      option.children = nestedOptions;\n    }\n\n    return option;\n  }\n\n  loadInitialOptions() {\n    this.internalError = this.error;\n    this.internalErrorMessage = this.errorMessage;\n\n    const allOptions = this.parseChildOptions();\n    const initiallySelected = this.collectSelectedOptions(allOptions);\n    const initiallySelectedNotInState = initiallySelected.filter(init =>\n      !this.persistentSelectedOptions.some(opt => opt.value == init.value)\n    );\n    this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];\n  }\n\n  private collectSelectedOptions(options: Option[]): Option[] {\n    let selectedOptions: Option[] = [];\n\n    for (const option of options) {\n      if (option.selected) {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n        } else {\n          if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n            selectedOptions.push(option);\n          }\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\n      }\n    }\n\n    return selectedOptions;\n  }\n\n  private collectLeafOptions(children: Option[]): Option[] {\n    let leafOptions = [];\n\n    for (const child of children) {\n      if (child.children && child.children.length > 0) {\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n      } else {\n        leafOptions.push(child);\n      }\n    }\n    return leafOptions;\n  }\n\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\n    const searchTerm = targetElement.value.toLowerCase();\n    const isSearchActive = searchTerm !== '';\n\n    this.searchTerm = searchTerm;\n\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n    if (wrapper) {\n      if (isSearchActive) {\n        wrapper.classList.remove('active');\n      } else {\n        const searchField = this.el.shadowRoot.querySelector('ifx-search-field');\n        const searchFieldHasFocus = searchField && searchField.matches(':focus-within');\n        if (!searchFieldHasFocus) {\n          wrapper.classList.add('active');\n        }\n      }\n    }\n\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n    if (optionsContainer) {\n      if (isSearchActive) {\n        optionsContainer.classList.add('has-search-filter');\n      } else {\n        optionsContainer.classList.remove('has-search-filter');\n      }\n    }\n\n    requestAnimationFrame(() => {\n      const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n      allOptions.forEach(option => {\n        const searchEvent = new CustomEvent('ifx-search-filter', {\n          detail: { searchTerm, isActive: isSearchActive }\n        });\n        option.dispatchEvent(searchEvent);\n      });\n\n      if (isSearchActive) {\n        setTimeout(() => {\n          const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n          let visibleCount = 0;\n\n          allOptions.forEach(option => {\n            const style = window.getComputedStyle(option);\n            const rect = option.getBoundingClientRect();\n\n            if (style.display !== 'none' &&\n                style.visibility !== 'hidden' &&\n                style.opacity !== '0' &&\n                rect.height > 0) {\n              visibleCount++;\n            }\n          });\n\n          const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n          if (optionsContainer) {\n            if (visibleCount === 0) {\n              optionsContainer.classList.add('show-no-results');\n            } else {\n              optionsContainer.classList.remove('show-no-results');\n            }\n          }\n        }, 200);\n      } else {\n        const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n        if (optionsContainer) {\n          optionsContainer.classList.remove('show-no-results');\n        }\n      }\n    });\n  }, 150);\n\n  private handleSearchFocus(hasFocus: boolean) {\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n    if (wrapper) {\n      if (hasFocus || this.searchTerm !== '') {\n        wrapper.classList.remove('active');\n      } else {\n        wrapper.classList.add('active');\n      }\n    }\n  }\n\n  positionDropdown() {\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\n    const spaceAbove = wrapperRect.top;\n\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n      this.dropdownFlipped = true;\n    } else {\n      this.dropdownFlipped = false;\n    }\n  }\n\n  private pendingSelectionUpdate = false;\n  public updateSlotBasedSelections(emitEvent: boolean = false) {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const selectedLeafOptions: Option[] = [];\n\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.selected && !instance.hasChildren) {\n        selectedLeafOptions.push({\n          value: instance.value,\n          selected: true,\n          disabled: instance.disabled\n        });\n      }\n    });\n\n    this.persistentSelectedOptions = selectedLeafOptions;\n\n    if (emitEvent) {\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }\n  }\n\n  private updateInitialParentStates() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const optionsByDepth = Array.from(allOptionElements)\n      .map(el => ({\n        element: el,\n        instance: (el as any)['__stencil_instance'],\n        depth: parseInt(el.getAttribute('data-level') || '0')\n      }))\n      .filter(item => item.instance)\n      .sort((a, b) => b.depth - a.depth);\n\n    optionsByDepth.forEach(({ instance }) => {\n      if (instance.hasChildren) {\n        this.updateParentState(instance);\n      }\n    });\n  }\n\n  private updateParentState(parentInstance: any) {\n    const directChildren = Array.from(parentInstance.el.children as HTMLCollection)\n      .filter((child: Element) => child.tagName === 'IFX-MULTISELECT-OPTION')\n      .map(child => (child as any)['__stencil_instance'])\n      .filter(instance => instance !== null);\n\n    const selectedCount = directChildren.filter(child => child.selected).length;\n    const indeterminateCount = directChildren.filter(child => child.indeterminate).length;\n    const totalCount = directChildren.length;\n\n    if (selectedCount === totalCount && indeterminateCount === 0) {\n      parentInstance.selected = true;\n      parentInstance.indeterminate = false;\n    } else if (selectedCount === 0 && indeterminateCount === 0) {\n      parentInstance.selected = false;\n      parentInstance.indeterminate = false;\n    } else {\n      parentInstance.selected = false;\n      parentInstance.indeterminate = true;\n    }\n  }\n\n  componentDidLoad() {\n    setTimeout(() => {\n      this.positionDropdown();\n    }, 500);\n\n    this.el.addEventListener('ifx-option-changed', () => {\n      if (!this.pendingSelectionUpdate) {\n        this.pendingSelectionUpdate = true;\n        requestAnimationFrame(() => {\n          this.updateSlotBasedSelections(true);\n          setTimeout(() => {\n            this.pendingSelectionUpdate = false;\n          }, 0);\n        });\n      }\n    });\n\n    setTimeout(() => {\n      this.updateSlotBasedSelections(false);\n      this.updateInitialParentStates();\n    }, 100);\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-multiselect', framework)\n    }\n    this.loadInitialOptions();\n  }\n\n  @Watch('error')\n  updateInternalError() {\n    this.internalError = this.error;\n  }\n\n  @Watch('errorMessage')\n  updateInternalErrorMessage() {\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  @Watch('persistentSelectedOptions')\n  onSelectionChange(newValue: Option[], _: Option[]) {\n    const formData = new FormData();\n    newValue.forEach(option => formData.append(this.name, option.value));\n    this.internals.setFormValue(formData);\n  }\n  collapseAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.hasChildren) {\n        instance.isExpanded = false;\n      }\n    });\n  }\n\n  expandAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.hasChildren) {\n        instance.isExpanded = true;\n      }\n    });\n  }\n\n  selectAll() {\n    this.resetSearch();\n\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance) {\n        if (instance.hasChildren) {\n          instance.isExpanded = true;\n        } else {\n          instance.selected = true;\n        }\n      }\n    });\n\n    setTimeout(() => {\n      this.updateInitialParentStates();\n      this.updateSlotBasedSelections(false);\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }, 0);\n  }\n\n  @Method()\n  async clearSelection() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance) {\n        instance.selected = false;\n        instance.indeterminate = false;\n        if (instance.hasChildren) {\n          instance.isExpanded = false;\n        }\n      }\n    });\n\n    this.persistentSelectedOptions = [];\n\n    setTimeout(() => {\n      this.updateSlotBasedSelections(false);\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }, 0);\n  }\n\n  handleDocumentClick = (event: Event) => {\n    const path = event.composedPath();\n    if (!path.includes(this.dropdownElement)) {\n      this.dropdownOpen = false;\n      document.removeEventListener('click', this.handleDocumentClick);\n      this.resetSearch();\n      this.ifxOpen.emit(this.dropdownOpen);\n    }\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    setTimeout(() => {\n      if (this.dropdownOpen) {\n        document.addEventListener('click', this.handleDocumentClick);\n      } else {\n        this.resetSearch();\n      }\n      this.ifxOpen.emit(this.dropdownOpen);\n    }, 0);\n  }\n\n  private resetSearch() {\n    this.searchTerm = '';\n\n    const searchField = this.el.shadowRoot.querySelector('ifx-search-field') as any;\n    if (searchField) {\n      searchField.value = '';\n    }\n\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n    if (optionsContainer) {\n      optionsContainer.classList.remove('has-search-filter');\n    }\n\n    const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptions.forEach(option => {\n      const searchEvent = new CustomEvent('ifx-search-filter', {\n        detail: { searchTerm: '', isActive: false }\n      });\n      option.dispatchEvent(searchEvent);\n    });\n  }\n\n  handleWrapperClick(event: MouseEvent) {\n    this.positionDropdown();\n\n    if (event.currentTarget === event.target) {\n      this.toggleDropdown();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    // If dropdown is closed, only allow opening\n    if (!this.dropdownOpen) {\n      switch (event.code) {\n        case 'Enter':\n        case 'Space':\n        case 'ArrowDown':\n          event.preventDefault();\n          this.toggleDropdown();\n          break;\n      }\n      return;\n    }\n\n    // Dropdown is open - handle navigation and controls\n    switch (event.code) {\n      case 'Escape':\n        event.preventDefault();\n        this.toggleDropdown();\n        break;\n      case 'Enter':\n      case 'Space':\n        // Don't close dropdown when pressing space/enter in controls area\n        const target = event.target as HTMLElement;\n        if (!target.closest('.ifx-multiselect-dropdown-functions')) {\n          event.preventDefault();\n          this.toggleDropdown();\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        // Focus first/last option for navigation\n        event.preventDefault();\n        this.focusFirstOption();\n        break;\n    }\n  }\n\n  private focusFirstOption() {\n    const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');\n    if (firstOption) {\n      const labelElement = firstOption.shadowRoot?.querySelector('.option-label') as HTMLElement;\n      labelElement?.focus();\n    }\n  }\n\n  private renderSelectAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const leafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren);\n    const selectedLeafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren && el.selected);\n\n    const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;\n\n    const toggleSelectAll = (event?: Event) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      if (allSelected) {\n        this.clearSelection();\n      } else {\n        this.selectAll();\n      }\n    };\n\n    return (\n      <div class=\"select-all-wrapper\">\n        <ifx-checkbox\n          id='selectAll'\n          checked={allSelected}\n          size=\"s\"\n          aria-label={this.ariaSelectAllLabel}\n          onClick={toggleSelectAll}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n              toggleSelectAll(e);\n            }\n          }}\n        >\n          {this.selectAllLabel}\n        </ifx-checkbox>\n      </div>\n    );\n  }\n\n  private renderNoResultsMessage() {\n    return (\n      <div class=\"ifx-multiselect-no-results\">\n        <div class=\"no-results-content\">\n          <span class=\"no-results-text\">{this.noResultsMessage}</span>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const selectedOptionsLabels = this.persistentSelectedOptions\n      .map((option) => {\n        const optionElement = this.el.querySelector(`ifx-multiselect-option[value=\"${option.value}\"]`);\n        return optionElement?.textContent?.trim() || option.value;\n      })\n      .join(', ');\n\n    const hasSelections = this.persistentSelectedOptions.length > 0;\n\n    let isFlatMultiselect = false;\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    if (allOptionElements.length > 0) {\n      isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);\n    }\n\n    return (\n      <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n        {\n          this.label ?\n            <div class=\"ifx-label-wrapper\">\n              <span>{this.label}</span>\n            </div> : null\n        }\n        <div class={`ifx-multiselect-wrapper\n        ${this.dropdownOpen ? 'active' : ''}\n        ${this.dropdownFlipped ? 'is-flipped' : ''}\n        ${this.internalError ? 'error' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n          role=\"combobox\"\n          aria-label={this.ariaMultiSelectLabel}\n          aria-labelledby={this.ariaMultiSelectLabelledBy || undefined}\n          aria-describedby={this.ariaMultiSelectDescribedBy || undefined}\n          aria-expanded={this.dropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-disabled={this.disabled}\n          tabindex=\"0\"\n          onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n          onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n          <div class={`ifx-multiselect-input\n          ${hasSelections ? '' : 'placeholder'}\n          `}\n            onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n          >\n            {hasSelections ? selectedOptionsLabels : this.placeholder}\n          </div>\n          {this.dropdownOpen && (\n            <div class=\"ifx-multiselect-dropdown-menu\">\n\n              {(this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (\n                <div class=\"ifx-multiselect-dropdown-functions\" onClick={(e) => e.stopPropagation()}>\n                  {this.showSearch && (\n                    <div class=\"ifx-multiselect-dropdown-search\">\n                      <ifx-search-field\n                        class=\"search-input\"\n                        placeholder={this.searchPlaceholder}\n                        size=\"s\"\n                        show-delete-icon=\"true\"\n                        aria-label={this.ariaSearchLabel}\n                        onKeyDown={(e) => { e.stopPropagation() }}\n                        onIfxInput={(event) => this.handleSearch(event.target)}\n                        onFocus={() => this.handleSearchFocus(true)}\n                        onBlur={() => this.handleSearchFocus(false)}\n                      ></ifx-search-field>\n                    </div>\n                  )}\n\n                  <div class=\"ifx-multiselect-dropdown-controls\">\n                    {this.showSelectAll && this.renderSelectAll()}\n                    {this.showExpandCollapse && !isFlatMultiselect && (\n                      <div class=\"expand-collapse-controls\">\n                        <span\n                          class=\"control-item\"\n                          role=\"button\"\n                          tabIndex={0}\n                          aria-label={this.ariaExpandAllLabel}\n                          onClick={(e) => { e.stopPropagation(); this.expandAll(); }}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              this.expandAll();\n                            }\n                          }}\n                        >\n                          {this.expandLabel}\n                        </span>\n                        <span\n                          class=\"control-item\"\n                          role=\"button\"\n                          tabIndex={0}\n                          aria-label={this.ariaCollapseAllLabel}\n                          onClick={(e) => { e.stopPropagation(); this.collapseAll(); }}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              this.collapseAll();\n                            }\n                          }}\n                        >\n                          {this.collapseLabel}\n                        </span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              <div class=\"ifx-multiselect-options\" role=\"listbox\" aria-multiselectable=\"true\">\n                <slot />\n                {this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()}\n              </div>\n            </div>\n          )}\n          <div class='ifx-multiselect-icon-container'>\n\n            {/* Clear Button - will show only if there's a selection */}\n            {this.persistentSelectedOptions.length > 0 && (\n              <div class={`ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`} onClick={this.disabled ? undefined : () => this.clearSelection()}>\n                <ifx-icon icon=\"cRemove16\"></ifx-icon>\n              </div>\n            )}\n            <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-up'\n                icon='chevron-up-16'></ifx-icon>\n            </div>\n            <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-down'\n                icon='chevron-down-16'></ifx-icon>\n            </div>\n          </div>\n\n        </div>\n        {\n          this.internalError ?\n            <div class=\"ifx-error-message-wrapper\">\n              <span>{this.internalErrorMessage}</span>\n            </div> : null\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.option {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n  list-style: none;\n\n  &.option--expanded {\n    position: relative;\n  }\n\n  &.option--has-children {\n    position: relative;\n\n    .option-item > .chevron-wrapper {\n      display: flex;\n    }\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n    color: tokens.$ifxColorEngineering300;\n  }\n\n  &--selected {\n    // Additional styles for selected state if needed\n    // .option-item {\n    //   background: red;\n    // }\n  }\n\n  &.search-hidden {\n    display: none !important;\n  }\n\n  &.search-match {\n    .option-item {\n      .option-label {\n        .search-highlight {\n          font-weight: bold;\n          // color: tokens.$ifxColorOcean400;\n        }\n      }\n    }\n  }\n}\n\n.option-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n  min-height: tokens.$ifxSize250;\n  padding: tokens.$ifxSize50 tokens.$ifxSpace200;\n  background-color: tokens.$ifxColorBaseWhite;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  .option--disabled & {\n    &:hover {\n      background-color: transparent;\n    }\n  }\n}\n\n.option-children {\n  display: block;\n}\n\n.chevron-wrapper {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  margin-right: tokens.$ifxSpace100;\n  width: tokens.$ifxSize250;\n  height: tokens.$ifxSize250;\n  flex-shrink: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--has-children & {\n    display: flex;\n  }\n\n  .chevron {\n    transition: transform 0.2s ease-in-out;\n    color: tokens.$ifxColorEngineering600;\n\n    &.chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    &.chevron--collapsed {\n      transform: rotate(0deg);\n    }\n  }\n}\n\n.checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: tokens.$ifxSpace100;\n  flex-shrink: 0;\n}\n\n.option-label {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: tokens.$ifxSpace25 0;\n  font-size: tokens.$ifxFontSizeS;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--disabled & {\n    cursor: not-allowed;\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n","import { Component, Prop, Element, h, Host, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-multiselect-option',\n  styleUrl: 'multiselect-option.scss',\n  shadow: true,\n})\nexport class MultiselectOption {\n  @Element() el: HTMLElement;\n\n  @Prop() value: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n  @State() private isExpanded: boolean = false;\n  @State() private hasChildren: boolean = false;\n  @State() private depth: number = 0;\n  @State() private searchTerm: string = '';\n  @State() private isSearchActive: boolean = false;\n  @State() private isSearchDisabled: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.el.children.length > 0;\n    this.depth = this.calculateDepth();\n\n    this.el.setAttribute('data-level', this.depth.toString());\n\n     if (this.hasChildren) {\n      const hasSelectedChildren = this.hasAnySelectedChildren();\n      if (hasSelectedChildren) {\n        this.isExpanded = true;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    (this.el as any)['__stencil_instance'] = this;\n    this.notifyMultiselect();\n    this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  private handleSearchFilter = (event: CustomEvent) => {\n    const { searchTerm, isActive } = event.detail;\n    this.searchTerm = searchTerm.toLowerCase();\n    this.isSearchActive = isActive;\n\n    requestAnimationFrame(() => {\n      this.updateSearchClasses();\n    });\n  }\n\n  private updateSearchClasses() {\n    const optionDiv = this.el.shadowRoot?.querySelector('.option');\n    if (!optionDiv) return;\n\n    if (!this.isSearchActive) {\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.removeHighlighting();\n      this.isSearchDisabled = false;\n      return;\n    }\n\n    const textContent = this.getTextContent().toLowerCase();\n    const matchesSearch = textContent.includes(this.searchTerm);\n    const hasMatchingParent = this.hasMatchingParent();\n\n    requestAnimationFrame(() => {\n      const hasMatchingChildren = this.hasMatchingChildren();\n\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.isSearchDisabled = false;\n\n      if (matchesSearch && !this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n      } else if (matchesSearch && this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n        this.isExpanded = true;\n      } else if (!matchesSearch && this.hasChildren && hasMatchingChildren) {\n        optionDiv.classList.add('search-parent');\n        this.removeHighlighting();\n        this.isExpanded = true;\n        this.isSearchDisabled = true;\n      } else if (hasMatchingParent) {\n        optionDiv.classList.add('search-match');\n        this.removeHighlighting();\n      } else {\n        optionDiv.classList.add('search-hidden');\n        this.removeHighlighting();\n      }\n    });\n  }\n\n  private highlightSearchTerm() {\n    if (!this.searchTerm) return;\n\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    if (!slotElement) return;\n\n    this.removeHighlighting();\n\n    const originalText = this.getTextContent();\n    const searchTermLower = this.searchTerm.toLowerCase();\n    const originalTextLower = originalText.toLowerCase();\n\n    if (!originalTextLower.includes(searchTermLower)) return;\n\n    const searchIndex = originalTextLower.indexOf(searchTermLower);\n\n    if (searchIndex === -1) return;\n\n    const beforeMatch = originalText.substring(0, searchIndex);\n    const matchText = originalText.substring(searchIndex, searchIndex + searchTermLower.length);\n    const afterMatch = originalText.substring(searchIndex + searchTermLower.length);\n\n    const highlightedContent = document.createElement('span');\n    highlightedContent.className = 'highlighted-text';\n\n    if (beforeMatch) {\n      highlightedContent.appendChild(document.createTextNode(beforeMatch));\n    }\n\n    const boldElement = document.createElement('strong');\n    boldElement.className = 'search-highlight';\n    boldElement.textContent = matchText;\n    highlightedContent.appendChild(boldElement);\n\n    if (afterMatch) {\n      highlightedContent.appendChild(document.createTextNode(afterMatch));\n    }\n\n    labelElement.setAttribute('data-original-content', 'true');\n    slotElement.style.display = 'none';\n    labelElement.appendChild(highlightedContent);\n  }\n\n  private removeHighlighting() {\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    const highlightedElement = labelElement.querySelector('.highlighted-text');\n\n    if (highlightedElement) {\n      labelElement.removeChild(highlightedElement);\n    }\n\n    if (slotElement) {\n      slotElement.style.display = '';\n    }\n\n    labelElement.removeAttribute('data-original-content');\n  }\n\n  private getTextContent(): string {\n    let text = '';\n    Array.from(this.el.childNodes).forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        text += node.textContent?.trim() || '';\n      }\n    });\n    return text || this.value || '';\n  }\n\n  private hasMatchingChildren(): boolean {\n    if (!this.hasChildren) return false;\n\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (!childInstance) return false;\n\n      const childText = childInstance.getTextContent().toLowerCase();\n      const childMatches = childText.includes(this.searchTerm);\n      const grandChildrenMatch = childInstance.hasMatchingChildren();\n\n      return childMatches || grandChildrenMatch;\n    });\n  }\n\n  private hasMatchingParent(): boolean {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (parentInstance) {\n        const parentText = parentInstance.getTextContent().toLowerCase();\n        if (parentText.includes(this.searchTerm)) {\n          return true;\n        }\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private calculateDepth(): number {\n    let depth = 0;\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName !== 'IFX-MULTISELECT') {\n      if (parent.tagName === 'IFX-MULTISELECT-OPTION') {\n        depth++;\n      }\n      parent = parent.parentElement;\n    }\n    return depth;\n  }\n\n  @Listen('click')\n  handleClick(event: Event) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    if (event.type === 'click' && (event.target as HTMLElement).closest('.chevron-wrapper')) {\n      this.toggleExpansion();\n      return;\n    }\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    const target = event.target as HTMLElement;\n\n    if (target.closest('.chevron-wrapper') || target.closest('.checkbox-wrapper')) {\n      return;\n    }\n\n    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n      event.stopPropagation();\n    }\n\n    if (event.key === 'ArrowRight' && this.hasChildren) {\n      this.isExpanded = true;\n    }\n\n    if (event.key === 'ArrowLeft' && this.hasChildren) {\n      this.isExpanded = false;\n    }\n  }\n\n  private notifyMultiselect() {\n    const updateEvent = new CustomEvent('ifx-option-changed', {\n      bubbles: true,\n      detail: {\n        value: this.value,\n        selected: this.selected,\n        indeterminate: this.indeterminate\n      }\n    });\n    this.el.dispatchEvent(updateEvent);\n  }\n\n  private selectAllChildren(selected: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance) {\n        childInstance.selected = selected;\n        childInstance.indeterminate = false;\n\n        if (childInstance.hasChildren) {\n          childInstance.isExpanded = selected;\n          childInstance.selectAllChildren(selected);\n        }\n        childInstance.notifyMultiselect?.();\n      }\n    });\n  }\n\n  private expandAllChildren(expanded: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance && childInstance.hasChildren) {\n        childInstance.isExpanded = expanded;\n        childInstance.expandAllChildren(expanded);\n      }\n    });\n  }\n\n  private updateParentStates() {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (!parentInstance) {\n        parent = parent.parentElement;\n        continue;\n      }\n\n      const siblings = Array.from(parent.children)\n        .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n        .map(child => (child as any)['__stencil_instance'])\n        .filter(instance => instance !== null);\n\n      const selectedCount = siblings.filter(sibling => sibling.selected).length;\n      const indeterminateCount = siblings.filter(sibling => sibling.indeterminate).length;\n      const totalCount = siblings.length;\n\n      if (selectedCount === totalCount && indeterminateCount === 0) {\n        parentInstance.selected = true;\n        parentInstance.indeterminate = false;\n      } else if (selectedCount === 0 && indeterminateCount === 0) {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = false;\n      } else {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = true;\n      }\n\n      parentInstance.notifyMultiselect?.();\n      parent = parent.parentElement;\n    }\n  }\n\n  private toggleExpansion() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  private handleCheckboxClick = (event: Event) => {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  private handleHeaderClick = (event: Event) => {\n    event.stopPropagation();\n    if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {\n      this.handleClick(event);\n    }\n  }\n\n  private hasAnySelectedChildren(): boolean {\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const hasSelected = child.hasAttribute('selected');\n      const hasSelectedDescendants = this.checkForSelectedDescendants(child);\n\n      return hasSelected || hasSelectedDescendants;\n    });\n  }\n\n  private checkForSelectedDescendants(element: HTMLElement): boolean {\n    const nestedOptions = Array.from(element.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return nestedOptions.some(nestedChild => {\n      const isSelected = nestedChild.hasAttribute('selected');\n      const hasSelectedNested = this.checkForSelectedDescendants(nestedChild);\n\n      return isSelected || hasSelectedNested;\n    });\n  }\n\n  render() {\n    let isFlatMultiselect = false;\n    const parentMultiselect = this.el.closest('ifx-multiselect');\n    if (parentMultiselect) {\n      const allOptions = Array.from(parentMultiselect.querySelectorAll('ifx-multiselect-option'));\n      isFlatMultiselect = allOptions.every(option => option.children.length === 0);\n    }\n\n    const basePadding = this.depth * 28 + 16;\n    const additionalPadding = this.hasChildren ? 0 : 28;\n    let totalPadding = basePadding + additionalPadding;\n\n    const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'option': true,\n            'option--has-children': this.hasChildren,\n            'option--expanded': this.isExpanded,\n            'option--disabled': this.disabled,\n            'option--selected': this.selected,\n          }}\n          role=\"option\"\n          aria-expanded={this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined}\n          aria-selected={this.selected ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          data-level={this.depth}\n          data-value={this.value}\n        >\n          <div\n            class=\"option-item\"\n            style={optionItemStyle}\n          >\n            <div\n              class=\"chevron-wrapper\"\n              tabIndex={this.hasChildren ? 0 : -1}\n              role={this.hasChildren ? \"button\" : undefined}\n              aria-label={this.hasChildren ? (this.isExpanded ? \"Collapse\" : \"Expand\") : undefined}\n              onClick={(e) => { e.stopPropagation(); this.toggleExpansion(); }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  this.toggleExpansion();\n                }\n              }}\n            >\n              {this.hasChildren && (\n                <ifx-icon\n                  class={`chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`}\n                  icon=\"chevron-right-16\"\n                />\n              )}\n            </div>\n\n            <div class=\"checkbox-wrapper\" onClick={(e) => e.stopPropagation()}>\n              <ifx-checkbox\n                size='s'\n                checked={(this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected)}\n                indeterminate={(this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate}\n                onClick={this.handleCheckboxClick}\n                disabled={this.disabled || (this.isSearchActive && this.isSearchDisabled)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    this.handleCheckboxClick(e);\n                  }\n                }}\n              />\n            </div>\n\n            <div\n              class=\"option-label\"\n              onClick={this.handleHeaderClick}\n              tabIndex={-1}\n            >\n              <slot/>\n            </div>\n          </div>\n\n          {this.isExpanded && <div class=\"option-children\"><slot name=\"children\"/></div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-2ff821ac.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,g as i}from"./p-b7a462e5.js";import{d as a,t as o}from"./p-e48e9f36.js";import{i as s}from"./p-1ecafb97.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const n=l;const p=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}if(!s(this.el)){const e=a();o("ifx-alert",e)}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}get el(){return i(this)}};p.style=n;const c=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const d=c;const h=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:a}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${a}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"a6433871f9175e0616c40389d0a39a94797d67b3"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};h.style=d;export{p as ifx_alert,h as ifx_template};
+//# sourceMappingURL=p-2ff821ac.entry.js.map

package/dist/infineon-design-system-stencil/p-2ff821ac.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","role","name","id","templateCss","IfxTemplateStyle0","Template","repoDetails","desc","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","componentDidLoad","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","key","size","src","thumbnail","onInput","htmlFor","disabled","required","placeholder","fullWidth"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLElement;\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-alert', framework);\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n","\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-36ec25f0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-b7a462e5.js";import{d as a,t as o}from"./p-e48e9f36.js";import{i as n}from"./p-1ecafb97.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const h=r;const l=class{constructor(s){t(this,s);this.ifxChange=i(this,"ifxChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){if(!n(this.el)){const t=a();o("ifx-tabs",t)}this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){const i=t.composedPath();const s=i.some((t=>this.tabHeaderRefs.includes(t)));if(!s){return}if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"51e98a1dda12f755c07d85ab80a8f1e013313198","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"f30f35c669f14ce97d854e8a0d7d86a1e2948366",role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{key:"18d8846d823a05ab772d23c229c0f07e2b398de6",class:"active-border"})),s("div",{key:"2801037c830b5c2486e1980fc6947d7ef7c4d6ae",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};l.style=h;export{l as ifx_tabs};
+//# sourceMappingURL=p-36ec25f0.entry.js.map

package/dist/infineon-design-system-stencil/p-36ec25f0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","internalFocusedTabIndex","tabRefs","tabHeaderRefs","disabledTabs","tabObjects","updateBorderOnWindowResize","updateBorderAndFocus","setActiveAndFocusedTab","index","length","_a","disabled","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","internalOrientation","toLowerCase","ifxChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","path","composedPath","isTabHeader","some","previouslyActiveTabIndex","render","h","class","role","ref","onMouseDown","event","onClick","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.tabs {\n  display: flex;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\n}\n\n.tabs.vertical {\n  flex-direction: row;\n}\n\n.tabs-list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  font-weight: tokens.$ifxFontWeightSemibold;\n}\n\n.tabs-list:focus-within .active-border {\n  display: none;\n}\n\n.active-border {\n  content: \"\";\n  position: absolute;\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n  flex-direction: column;\n  border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n  padding-top: 0px;\n  padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n  & .tab-item {\n    &.full-width { \n      flex: 1;\n    }\n  }\n}\n\n.tab-item {\n  // Reduced padding values\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  cursor: pointer;\n  position: relative;\n\n  &.icon__right {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n  \n  &:hover {\n    color: tokens.$ifxColorOcean500;\n  }\n  \n  &:active,\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:focus,\n  &.focus {\n    outline: none;\n    border-radius: 1px;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    \n    // Assuming .active-border is a sibling of .tab-item\n    +.active-border {\n      display: none; // Hide the active border when the tab is in focus\n    }\n  }\n  \n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical .tab-item {\n  border-right: 2px solid transparent;\n  min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n  left: 0;\n  top: 0;\n  width: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n  padding-top: 24px;\n  padding-left: 0px;\n  flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n  font-size: tokens.$ifxFontSizeS;\n}","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true\n})\nexport class IfxTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() orientation: string = \"horizontal\";\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  @Prop() fullWidth: boolean = false;\n\n  @State() internalOrientation: string;\n  @State() internalActiveTabIndex: number = 0;\n  @State() internalFocusedTabIndex: number = 0;\n  @State() tabRefs: HTMLElement[] = [];\n  @State() tabHeaderRefs: HTMLElement[] = [];\n  @State() disabledTabs: string[] = [];\n  @State() tabObjects: any[] = [];\n\n  @Event() ifxChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\n  }\n\n  setActiveAndFocusedTab(index: number) {\n    if (index >= this.tabObjects.length) {\n      index = this.tabObjects.length - 1;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (!this.tabObjects[index]?.disabled) {\n      this.internalActiveTabIndex = index;\n      this.internalFocusedTabIndex = index;\n    }\n  }\n\n  @Listen('tabHeaderChange')\n  handleTabHeaderChange(e) { \n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n    this.tabObjects[tabIndex].header = e.detail;\n    this.tabObjects = [...this.tabObjects]; \n  }\n  \n\n  @Watch('activeTabIndex')\n  activeTabIndexChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.setActiveAndFocusedTab(newValue);\n    }\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tabs', framework)\n    }\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    if (this.internalActiveTabIndex !== this.activeTabIndex) {\n      this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n    };\n    this.onSlotChange();\n    this.setActiveAndFocusedTab(this.activeTabIndex);\n    this.updateTabStyles();\n  }\n\n  updateTabStyles() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n    });\n  }\n\n\n  // needed for smooth border transition\n  reRenderBorder() {\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n      if (this.orientation === 'horizontal') {\n\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n        borderElement.style.top = '';\n        borderElement.style.height = '';\n      } else {\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n        borderElement.style.left = '';\n        borderElement.style.width = '';\n      }\n    }\n  }\n\n\n  // when a slot is removed / added\n  @Listen('slotchange')\n  onSlotChange() {\n    const tabs = this.el.querySelectorAll('ifx-tab');\n    this.tabObjects = Array.from(tabs).map((tab) => {\n      return {\n        header: tab?.header,\n        disabled: tab?.disabled === true,\n        icon: tab?.icon,\n        iconPosition: tab?.iconPosition\n      }\n    });\n\n    this.tabRefs = Array.from(tabs);\n    this.tabRefs.forEach((tab, index) => {\n      tab.setAttribute('slot', `tab-${index}`);\n    });\n  }\n\n  setDefaultOrientation() {\n    const validOrientations = ['horizontal', 'vertical'];\n    const lowercaseOrientation = this.orientation.toLowerCase();\n\n    if (!validOrientations.includes(lowercaseOrientation)) {\n      this.internalOrientation = 'horizontal';\n    } else this.internalOrientation = this.orientation;\n  }\n\n  componentDidLoad() {\n    this.updateBorderAndFocus();\n    // Add keyboard event listeners for each tab header\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.addEventListener('focus', this.onTabFocus(index));\n    });\n\n  }\n\n  onTabFocus(index) {\n    return () => {\n      this.internalFocusedTabIndex = index;\n    };\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.removeEventListener('focus', this.onTabFocus(index));\n    });\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\n  }\n\n  private updateBorderAndFocus() {\n    this.reRenderBorder()\n    this.updateTabFocusability();\n  }\n\n  private updateTabFocusability() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n    })\n  }\n\n\n  private focusNextTab() {\n    let nextIndex = this.internalFocusedTabIndex + 1;\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n      nextIndex++;\n    }\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n      this.internalFocusedTabIndex = nextIndex;\n      this.tabHeaderRefs[nextIndex].focus();\n    }\n  }\n\n  private focusPreviousTab() {\n    let prevIndex = this.internalFocusedTabIndex - 1;\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n      prevIndex--;\n    }\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n      this.internalFocusedTabIndex = prevIndex;\n      this.tabHeaderRefs[prevIndex].focus();\n    }\n  }\n\n\n  private getTabItemClass(index: number) {\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n    const isDisabled = this.tabObjects[index].disabled;\n    const iconPosition = this.tabObjects[index].iconPosition\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n  }\n\n  private handleClick(tab, index) {\n    this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n    if (!tab.disabled) this.internalActiveTabIndex = index;\n\n  }\n\n\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Tab') {\n\n      if (ev.shiftKey) {\n        // Shift + Tab\n        if (this.internalFocusedTabIndex === 0) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusPreviousTab();\n        }\n      } else {\n        // Tab\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusNextTab();\n        }\n      }\n    } else if (ev.key === 'Enter') {\n      const path = ev.composedPath();\n      const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n      if (!isTabHeader) {\n        return;\n      }\n      \n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previouslyActiveTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n        <ul role=\"tablist\" class=\"tabs-list\">\n          {this.tabObjects?.map((tab, index) => (\n            <li\n              class={this.getTabItemClass(index)}\n              ref={(el) => (this.tabHeaderRefs[index] = el)}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.handleClick(tab, index)}\n              aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n              aria-disabled={tab.disabled ? 'true' : 'false'}\n              role=\"tab\"\n            > \n              {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n              {tab?.header}\n            </li>\n          ))}\n          <div class=\"active-border\"></div>\n        </ul>\n        <div class=\"tab-content\">\n          {Array.from(this.tabObjects).map((_, index) => (\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n              <slot name={`tab-${index}`} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-36f0bb56.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as s,g as t}from"./p-b7a462e5.js";import{d as c,t as o}from"./p-e48e9f36.js";import{i as r}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const h=a;const n=class{constructor(s){e(this,s);this.ifxChange=i(this,"ifxChange",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){if(!r(this.el)){const e=c();o("ifx-switch",e)}this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const i=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){i.classList.add("gap")}else{i.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,i){if(e!==i){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return s("div",{key:"3c212c108c5bb59a557be61e558b26533085147e",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},s("div",{key:"69327ff2fbfda37186744692c135765092709567",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},s("div",{key:"f664e500961e1f51aecdc83a6bf59e7b03d6b93a",class:"switch__checkbox-wrapper"},s("input",{key:"98536af7f7e62b540e62cdb9f18055a98f45950d",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),s("div",{key:"42ad6241bd82b4451e48a45201587689d97c24f3",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),s("div",{key:"8bb6f7b84d221e7a4c000139bfce18e1f961e79c",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},s("label",{key:"1f105f1850527304b79ebf9bf4cf0c21b27a3c2d",htmlFor:"switch"},s("slot",{key:"77b0bbc5b621d9523fe3f11505391eef095b69a7",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return t(this)}static get watchers(){return{checked:["valueChanged"]}}};n.style=h;export{n as ifx_switch};
+//# sourceMappingURL=p-36f0bb56.entry.js.map

package/dist/infineon-design-system-stencil/p-36f0bb56.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","toggleLabelGap","slot","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', framework)\n    }\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    this.toggleLabelGap();\n\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,sgDAClB,MAAAC,EAAeD,E,MCWFE,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAAC,QAAmB,MACnBD,KAAAE,KAAe,GACfF,KAAAG,SAAoB,MAEnBH,KAAAI,gBAA2B,K,CASpC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACE,IAAIC,EAAuBP,KAAKQ,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,aAAcF,E,CAE/BT,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAW,GACE,MAAMC,EAAOb,KAAKQ,GAAGM,WAAWC,cAAc,QAC9C,MAAMC,EAAYhB,KAAKQ,GAAGM,WAAWC,cAAc,cACnD,GAAIF,EAAKI,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,gBAAAC,GACEtB,KAAKY,gB,CAKP,YAAAW,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBzB,KAAKI,gBAAkBoB,C,EAI3B,YAAAE,GACE,GAAI1B,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAK2B,QAAUC,UAAW,CAC5B5B,KAAK6B,UAAUC,aAAa9B,KAAK2B,M,KAC5B,CACL3B,KAAK6B,UAAUC,aAAa,K,MAEzB,CACL9B,KAAK6B,UAAUC,aAAa,K,CAG9B9B,KAAK+B,UAAUC,KAAKhC,KAAKI,gB,CAG3B,aAAA6B,CAAcC,GACZ,GAAIlC,KAAKG,SAAU,OAEnB,GAAI+B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CnC,KAAK0B,c,EAQT,iBAAAU,GACEpC,KAAK6B,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SAAQ,eACCxC,KAAKI,gBAAkB,OAAS,QAAO,aACzCJ,KAAKE,KACjBuC,QAAS,IAAMzC,KAAK0B,eACpBgB,UAAYR,GAAUlC,KAAKiC,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GwC,SAAS,KAETL,EAAA,OAAAH,IAAA,2CAAKI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3B3C,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACduB,MAAO,GAAG3B,KAAK2B,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhGmC,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBvC,KAAKG,SAAW,WAAa,MAChEmC,EAAA,SAAAH,IAAA,2CAAOW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM/C,KAAKY,qB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-fb97bbf9.entry.js → p-37566d76.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as r,h as o,g as e}from"./p-b7a462e5.js";import{d as i,t as a}from"./p-1de6e751.js";import{i as n}from"./p-1ecafb97.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=d;const c=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){if(!n(this.el)){const t=i();a("ifx-radio-button",{framework:t})}this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"056ac0eef7ede352c3b1fad970ec3206cc398a4d",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"2265442abf11a1ddbedced524fd0099ccf848ec0",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"b5576d385a12036ab302ed1ea6dea068cf693992",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"5bce26eba8ac346107d4cebd5e356442b4fadf09",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"2698931ac5c372ea5d0eb20c7928053315dffbf3"})),o("input",{key:"86a05fc12e6bc26571c92b7f3796f0b33789e59b",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return e(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};c.style=s;export{c as ifx_radio_button};
-//# sourceMappingURL=p-fb97bbf9.entry.js.map
+import{r as t,c as r,h as o,g as e}from"./p-b7a462e5.js";import{d as i,t as a}from"./p-e48e9f36.js";import{i as n}from"./p-1ecafb97.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=d;const c=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){if(!n(this.el)){const t=i();a("ifx-radio-button",t)}this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"fd24cefee24acfa95408fa678c392f8ffe2e8d31",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"b772b58995ba09ee27c452156b999d3f38d16308",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"b61958654a910ee90f030948c8771c50f287a62a",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"ced2361cf68a493412cc867294d25823269d1426",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"d99922c668e8ec29e81824c486988c18ae294fee"})),o("input",{key:"9f2defbbf33ad4a4a71497426332d91ae0d90cf9",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return e(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};c.style=s;export{c as ifx_radio_button};
+//# sourceMappingURL=p-37566d76.entry.js.map

package/dist/infineon-design-system-stencil/{p-fb97bbf9.entry.js.map → p-37566d76.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","fallbackInput","document","createElement","type","hidden","className","style","cssText","setAttribute","tabIndex","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","errorChanged","oldValue","ifxError","emit","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-radio-button', { framework })\n    }\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","fallbackInput","document","createElement","type","hidden","className","style","cssText","setAttribute","tabIndex","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","errorChanged","oldValue","ifxError","emit","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-radio-button', framework)\n    }\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-37ee3504.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as h}from"./p-b7a462e5.js";import{d as r,t as n}from"./p-e48e9f36.js";import{i as c}from"./p-1ecafb97.js";const o=".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";const d=o;const l=class{constructor(e){t(this,e);this.ifxChange=i(this,"ifxChange",7);this.activeIndex=-1;this.hoverIndex=-1;this.focusIndex=-1;this.dividers=Array();this.eventHandlers=new Map}componentWillLoad(){this.items=Array.from(this.el.children);this.initializeDividers();this.addEventListeners();this.ensureSingleSelectedItem();if(!c(this.el)){const t=r();n("ifx-content-switcher",t)}}disconnectedCallback(){this.removeEventListeners()}initializeDividers(){this.items.forEach(((t,i)=>{if(i<this.items.length-1){const i=document.createElement("div");i.classList.add("ifx-content-switcher-divider");t.after(i);this.dividers.push(i)}}))}addEventListeners(){this.items.forEach(((t,i)=>{const e={click:()=>this.selectItem(i),mouseenter:()=>this.handleHover(i,true),mouseleave:()=>this.handleHover(i,false),focus:()=>this.handleFocus(i,true),blur:()=>this.handleFocus(i,false)};Object.keys(e).forEach((i=>{t.addEventListener(i,e[i])}));this.eventHandlers.set(t,e)}))}removeEventListeners(){this.eventHandlers.forEach(((t,i)=>{Object.keys(t).forEach((e=>{i.removeEventListener(e,t[e])}))}));this.eventHandlers.clear()}ensureSingleSelectedItem(){this.items.forEach(((t,i)=>{const e=t.getAttribute("selected")==="true"||t.selected;if(e){if(this.activeIndex<0){this.selectItem(i)}else{t.removeAttribute("selected");t.selected=false}}}))}handleHover(t,i){this.hoverIndex=i?t:-1;this.updateDividersOfItem(t)}handleFocus(t,i){this.focusIndex=i?t:-1;this.updateDividersOfItem(t)}updateDividersOfItem(t){if(t<this.items.length-1){this.updateDividerVisibility(t)}if(t>0){this.updateDividerVisibility(t-1)}}updateDividerVisibility(t){const i=new Set([this.activeIndex,this.activeIndex-1,this.hoverIndex,this.hoverIndex-1,this.focusIndex,this.focusIndex-1]);this.setDividerVisibility(t,i.has(t))}setDividerVisibility(t,i){if(this.dividers[t]){this.dividers[t].classList.toggle("hidden",i)}}selectItem(t){if(t===this.activeIndex)return;const i=this.activeIndex;if(i>=0){this.items[i].removeAttribute("selected")}this.activeIndex=t;this.items[t].setAttribute("selected","true");this.ifxChange.emit({oldValue:this.getValueOfItem(i),newValue:this.getValueOfItem(t)});this.updateDividersOfItem(i);this.updateDividersOfItem(t)}getValueOfItem(t){if(this.items[t]==null)return t.toLocaleString();return this.items[t].getAttribute("value")||t.toLocaleString()}render(){return e(s,{key:"7a17194a411d28a7ed2c2e023806544b07b1a812"},e("div",{key:"1f13bedb6a6667b4ae12b0fa79c7f29d1d292c38",class:"ifx-content-switcher",role:"group"},e("slot",{key:"7103ff1529b399632fde43740bd1c05966cdbf69"})))}get el(){return h(this)}};l.style=d;export{l as ifx_content_switcher};
+//# sourceMappingURL=p-37ee3504.entry.js.map

package/dist/infineon-design-system-stencil/p-37ee3504.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contentSwitcherCss","IfxContentSwitcherStyle0","ContentSwitcher","constructor","hostRef","this","activeIndex","hoverIndex","focusIndex","dividers","Array","eventHandlers","Map","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","isNestedInIfxComponent","framework","detectFramework","trackComponent","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","isSelected","getAttribute","selected","removeAttribute","isActive","updateDividersOfItem","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","render","h","Host","key","class","role"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    height: tokens.$ifxSize450;\n    width: fit-content;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & ::slotted(ifx-content-switcher-item) {\n        position: relative;\n        // top: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:first-child) {\n        left: -1px;\n        margin-right: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:last-child) {\n        right: -1px;\n        margin-left: -1px;\n    }\n\n    // Dividers\n    & ::slotted(.ifx-content-switcher-divider) {\n        width: tokens.$ifxSize12;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorEngineering400;\n        margin: 0px 1px;\n        visibility: visible;\n    }\n\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\n        visibility: hidden;\n    }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n  selected: boolean;\n};\n\n@Component({\n  tag: 'ifx-content-switcher',\n  styleUrl: './content-switcher.scss',\n  shadow: true,\n})\nexport class ContentSwitcher {\n  @Element() el: HTMLElement;\n\n  @State() items: Element[];\n  @State() activeIndex = -1;\n  @State() hoverIndex: number = -1;\n  @State() focusIndex: number = -1;\n\n  @State() dividers: Element[] = Array();\n\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n  componentWillLoad() {\n    this.items = Array.from(this.el.children);\n    this.initializeDividers();\n    this.addEventListeners();\n    this.ensureSingleSelectedItem();\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-content-switcher', framework)\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /**\n   * Initialize the dividers between items.\n   */\n  initializeDividers() {\n    this.items.forEach((item, index) => {\n      if (index < this.items.length - 1) {\n        const divider = document.createElement('div');\n        divider.classList.add('ifx-content-switcher-divider');\n        item.after(divider);\n        this.dividers.push(divider);\n      }\n    });\n  }\n\n  /**\n   * Add event listeners for each item.\n   */\n  addEventListeners() {\n    this.items.forEach((item, index) => {\n      const handlers = {\n        click: () => this.selectItem(index),\n        mouseenter: () => this.handleHover(index, true),\n        mouseleave: () => this.handleHover(index, false),\n        focus: () => this.handleFocus(index, true),\n        blur: () => this.handleFocus(index, false),\n      };\n\n      Object.keys(handlers).forEach(event => {\n        item.addEventListener(event, handlers[event]);\n      });\n\n      this.eventHandlers.set(item, handlers);\n    });\n  }\n\n  /**\n   * Remove all event listeners.\n   */\n  removeEventListeners() {\n    this.eventHandlers.forEach((handlers, item) => {\n      Object.keys(handlers).forEach(event => {\n        item.removeEventListener(event, handlers[event]);\n      });\n    });\n    this.eventHandlers.clear();\n  }\n\n  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\n      if (isSelected) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n          (item as ContentSwitcherItem).selected = false;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is hovered.\n   */\n  handleHover(index: number, isActive: boolean) {\n    this.hoverIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is focused.\n   */\n  handleFocus(index: number, isActive: boolean) {\n    this.focusIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Update visibility of dividers adjacent to a specific item.\n   * @param itemIndex - Index of the item.\n   */\n  updateDividersOfItem(itemIndex: number) {\n    if (itemIndex < this.items.length - 1) {\n      this.updateDividerVisibility(itemIndex);\n    }\n    if (itemIndex > 0) {\n      this.updateDividerVisibility(itemIndex - 1);\n    }\n  }\n\n  /**\n   * Update visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   */\n  updateDividerVisibility(dividerIndex: number) {\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n  }\n\n  /**\n   * Set the visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   * @param hidden - Whether the divider should be hidden.\n   */\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\n    if (this.dividers[dividerIndex]) {\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n    }\n  }\n\n  /**\n   * Select a specific item.\n   * @param itemIndex - Index of the item to be selected.\n   */\n  selectItem(itemIndex: number) {\n    if (itemIndex === this.activeIndex) return;\n    const oldIndex = this.activeIndex;\n    if (oldIndex >= 0) {\n      this.items[oldIndex].removeAttribute('selected');\n    }\n\n    this.activeIndex = itemIndex;\n    this.items[itemIndex].setAttribute('selected', 'true');\n\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n    this.updateDividersOfItem(oldIndex);\n    this.updateDividersOfItem(itemIndex);\n  }\n\n  /**\n   * Get the value property of the item at a specific index.\n   * Falls back to the index if no value is set.\n   * \n   * @param index - Index of the item. \n   * @returns The value of the item.\n   */\n  getValueOfItem(index: number): string {\n    if (this.items[index] == null) return index.toLocaleString();\n    return this.items[index].getAttribute('value') || index.toLocaleString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ifx-content-switcher\" role=\"group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAqB,isBAC3B,MAAAC,EAAeD,E,MCeFE,EAAe,MAL5B,WAAAC,CAAAC,G,+CASWC,KAAAC,aAAe,EACfD,KAAAE,YAAsB,EACtBF,KAAAG,YAAsB,EAEtBH,KAAAI,SAAsBC,QAIvBL,KAAAM,cAAgE,IAAIC,G,CAE5E,iBAAAC,GACER,KAAKS,MAAQJ,MAAMK,KAAKV,KAAKW,GAAGC,UAChCZ,KAAKa,qBACLb,KAAKc,oBACLd,KAAKe,2BACL,IAAIC,EAAuBhB,KAAKW,IAAK,CACnC,MAAMM,EAAYC,IAClBC,EAAe,uBAAwBF,E,EAI3C,oBAAAG,GACEpB,KAAKqB,sB,CAMP,kBAAAR,GACEb,KAAKS,MAAMa,SAAQ,CAACC,EAAMC,KACxB,GAAIA,EAAQxB,KAAKS,MAAMgB,OAAS,EAAG,CACjC,MAAMC,EAAUC,SAASC,cAAc,OACvCF,EAAQG,UAAUC,IAAI,gCACtBP,EAAKQ,MAAML,GACX1B,KAAKI,SAAS4B,KAAKN,E,KAQzB,iBAAAZ,GACEd,KAAKS,MAAMa,SAAQ,CAACC,EAAMC,KACxB,MAAMS,EAAW,CACfC,MAAO,IAAMlC,KAAKmC,WAAWX,GAC7BY,WAAY,IAAMpC,KAAKqC,YAAYb,EAAO,MAC1Cc,WAAY,IAAMtC,KAAKqC,YAAYb,EAAO,OAC1Ce,MAAO,IAAMvC,KAAKwC,YAAYhB,EAAO,MACrCiB,KAAM,IAAMzC,KAAKwC,YAAYhB,EAAO,QAGtCkB,OAAOC,KAAKV,GAAUX,SAAQsB,IAC5BrB,EAAKsB,iBAAiBD,EAAOX,EAASW,GAAO,IAG/C5C,KAAKM,cAAcwC,IAAIvB,EAAMU,EAAS,G,CAO1C,oBAAAZ,GACErB,KAAKM,cAAcgB,SAAQ,CAACW,EAAUV,KACpCmB,OAAOC,KAAKV,GAAUX,SAAQsB,IAC5BrB,EAAKwB,oBAAoBH,EAAOX,EAASW,GAAO,GAChD,IAEJ5C,KAAKM,cAAc0C,O,CAGrB,wBAAAjC,GACEf,KAAKS,MAAMa,SAAQ,CAACC,EAAMC,KACxB,MAAMyB,EAAc1B,EAAK2B,aAAa,cAAgB,QAAY3B,EAA6B4B,SAC/F,GAAIF,EAAY,CACd,GAAIjD,KAAKC,YAAc,EAAG,CACxBD,KAAKmC,WAAWX,E,KACX,CACLD,EAAK6B,gBAAgB,YACpB7B,EAA6B4B,SAAW,K,MAWjD,WAAAd,CAAYb,EAAe6B,GACzBrD,KAAKE,WAAamD,EAAW7B,GAAS,EACtCxB,KAAKsD,qBAAqB9B,E,CAQ5B,WAAAgB,CAAYhB,EAAe6B,GACzBrD,KAAKG,WAAakD,EAAW7B,GAAS,EACtCxB,KAAKsD,qBAAqB9B,E,CAO5B,oBAAA8B,CAAqBC,GACnB,GAAIA,EAAYvD,KAAKS,MAAMgB,OAAS,EAAG,CACrCzB,KAAKwD,wBAAwBD,E,CAE/B,GAAIA,EAAY,EAAG,CACjBvD,KAAKwD,wBAAwBD,EAAY,E,EAQ7C,uBAAAC,CAAwBC,GACtB,MAAMC,EAAiB,IAAIC,IAAI,CAAC3D,KAAKC,YAAaD,KAAKC,YAAc,EAAGD,KAAKE,WAAYF,KAAKE,WAAa,EAAGF,KAAKG,WAAYH,KAAKG,WAAa,IACjJH,KAAK4D,qBAAqBH,EAAcC,EAAeG,IAAIJ,G,CAQ7D,oBAAAG,CAAqBH,EAAsBK,GACzC,GAAI9D,KAAKI,SAASqD,GAAe,CAC/BzD,KAAKI,SAASqD,GAAc5B,UAAUkC,OAAO,SAAUD,E,EAQ3D,UAAA3B,CAAWoB,GACT,GAAIA,IAAcvD,KAAKC,YAAa,OACpC,MAAM+D,EAAWhE,KAAKC,YACtB,GAAI+D,GAAY,EAAG,CACjBhE,KAAKS,MAAMuD,GAAUZ,gBAAgB,W,CAGvCpD,KAAKC,YAAcsD,EACnBvD,KAAKS,MAAM8C,GAAWU,aAAa,WAAY,QAE/CjE,KAAKkE,UAAUC,KAAK,CAAEC,SAAUpE,KAAKqE,eAAeL,GAAWM,SAAUtE,KAAKqE,eAAed,KAC7FvD,KAAKsD,qBAAqBU,GAC1BhE,KAAKsD,qBAAqBC,E,CAU5B,cAAAc,CAAe7C,GACb,GAAIxB,KAAKS,MAAMe,IAAU,KAAM,OAAOA,EAAM+C,iBAC5C,OAAOvE,KAAKS,MAAMe,GAAO0B,aAAa,UAAY1B,EAAM+C,gB,CAG1D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBAAuBC,KAAK,SACrCJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}