@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0

package/dist/components/p-y82FFfi8.js.map

@@ -1 +0,0 @@
-{"file":"p-y82FFfi8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.accordion-item {\r\n  border-radius: 3px;\r\n  transition: all 0.3s;\r\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n\r\n}\r\n\r\n.accordion-title:focus {\r\n  outline: none;\r\n}\r\n\r\n// workaround to add corner radius to outline\r\n.accordion-title:focus::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  top: -4px;\r\n  bottom: -4px;\r\n  left: -4px;\r\n  right: -4px;\r\n  border-radius: 5px;\r\n  border: 2px solid tokens.$ifxColorOcean500;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.accordion-title:hover {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  color: tokens.$ifxColorOcean600;\r\n}\r\n\r\n.accordion-title {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  gap: tokens.$ifxSpace150;\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  cursor: pointer;\r\n  margin: 4px 4px 0px;\r\n}\r\n\r\n.accordion-caption {\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeL;\r\n}\r\n\r\n.accordion-content {\r\n  gap: tokens.$ifxSpace100;\r\n  overflow: hidden;\r\n  height: 0;\r\n  transition: height 0.3s ease;\r\n  line-height: 24px;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n}\r\n\r\n.inner-content {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  padding: tokens.$ifxSpace200;\r\n  word-wrap: break-word;\r\n  overflow-wrap: anywhere;\r\n  align-self: stretch;\r\n  margin: 0 4px 4px;\r\n  border: 1px solid transparent;\r\n  border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-icon {\r\n  font-weight: bold;\r\n  display: flex;\r\n  transition: transform 0.3s;\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean600;\r\n\r\n  }\r\n}\r\n\r\n\r\n.accordion-item.open .accordion-content {\r\n  max-height: 1000px; // Arbitrary large value to allow content to expand\r\n}\r\n\r\n.accordion-item.open .accordion-icon {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-item.open .inner-content {\r\n  border-color: tokens.$ifxColorEngineering200;\r\n  border-top-color: transparent;\r\n  transition: border-color 0s; \r\n}\r\n\r\n.accordion-item:not(.open) .inner-content {\r\n  transition: border-color 0s 0.3s; \r\n}\r\n\r\n.inner-content {\r\n  &.no-content { \r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n}","//ifxAccordionItem\r\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion-item',\r\n  styleUrl: 'accordionItem.scss',\r\n  shadow: true,\r\n})\r\nexport class AccordionItem {\r\n  @Element() el;\r\n  @Prop() caption: string;\r\n  @Prop({\r\n    mutable: true,\r\n  })\r\n  open: boolean = false;\r\n  @Prop() AriaLevel = 3;\r\n  @State() internalOpen: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  private contentEl!: HTMLElement;\r\n  private titleEl!: HTMLElement;\r\n  private resizeObserver!: ResizeObserver;\r\n\r\n  componentWillLoad() {\r\n    this.internalOpen = this.open;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\r\n    if (this.contentEl) {\r\n      this.attachResizeObserver();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n  }\r\n\r\n  @Watch('open')\r\n  openChanged(newValue: boolean) {\r\n    this.internalOpen = newValue;\r\n  }\r\n\r\n  toggleOpen() {\r\n    this.internalOpen = !this.internalOpen;\r\n    this.open = this.internalOpen;\r\n\r\n    if (this.internalOpen) {\r\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\r\n    } else {\r\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\r\n    }\r\n  }\r\n\r\n  openAccordionItem() {\r\n    if (this.internalOpen) {\r\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\r\n      this.contentEl.style.overflow = 'hidden';\r\n    } else {\r\n      this.contentEl.style.height = '0';\r\n      this.contentEl.style.overflow = 'hidden';\r\n    }\r\n  }\r\n\r\n  getInnerContentWrapper() {\r\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\r\n    return innerContentEl;\r\n  }\r\n\r\n  attachResizeObserver() {\r\n    const innerContentEl = this.getInnerContentWrapper();\r\n\r\n    if (innerContentEl) {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        if (this.internalOpen) {\r\n          this.openAccordionItem();\r\n        }\r\n      });\r\n\r\n      this.resizeObserver.observe(innerContentEl);\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    const path = ev.composedPath();\r\n\r\n    if (!path.includes(this.titleEl)) {\r\n      return;\r\n    }\r\n\r\n    switch (ev.key) {\r\n      case 'Enter': // fallthrough\r\n      case ' ': // space\r\n        ev.preventDefault();\r\n        this.toggleOpen();\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkSlotContent() {\r\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\r\n    const hasContent = slot.assignedNodes().length > 0;\r\n    const innerContent = this.getInnerContentWrapper();\r\n    if (!hasContent) {\r\n      innerContent.classList.add('no-content');\r\n    } else if (innerContent.classList.contains('no-content')) {\r\n      innerContent.classList.remove('no-content');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\r\n        <div\r\n          role=\"button\"\r\n          aria-expanded={this.internalOpen}\r\n          aria-controls=\"accordion-content\"\r\n          class=\"accordion-title\"\r\n          onClick={() => this.toggleOpen()}\r\n          tabindex=\"0\"\r\n          ref={el => (this.titleEl = el as HTMLElement)}\r\n        >\r\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </span>\r\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\r\n            {this.caption}\r\n          </span>\r\n        </div>\r\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\r\n          <div class=\"inner-content\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/infineon-design-system-stencil/p-01754b50.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownMenuCss","DropdownMenu","constructor","hostRef","this","isOpen","size","hideTopPadding","filteredItems","handleMenuFilter","event","searchValue","detail","filterDropdownItems","handleDropdownItemValueEmission","ifxDropdownMenuItem","emit","allItems","Array","from","el","querySelectorAll","dropdownItem","txtValue","query","toUpperCase","i","length","textContent","innerText","indexOf","setAttribute","componentWillUpdate","menuSize","componentWillLoad","searchField","querySelector","dropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  position: relative;\r\n  z-index: 1000;\r\n}\r\n\r\n.dropdown-menu {\r\n  display: none;\r\n  visibility: hidden;\r\n  flex-direction: column;\r\n  width: 224px;\r\n  max-height: 289px;\r\n  min-width: 224px;\r\n  overflow-y: auto;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  padding: 8px 4px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  &.small {\r\n    max-height: 266px;\r\n    max-width: 186px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  &.hideTopPadding {\r\n    padding-top: 0px;\r\n  }\r\n}\r\n\r\n.dropdown-menu.show {\r\n  display: flex;\r\n  visibility: visible;\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-menu',\r\n  styleUrl: 'dropdown-menu.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownMenu {\r\n  @Prop() isOpen: boolean = false;\r\n  @Prop() size: string = 'l'\r\n  @State() hideTopPadding: boolean = false;\r\n  @Element() el;\r\n\r\n  @Event() menuSize: EventEmitter;\r\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\r\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\r\n\r\n  @Listen('ifxInput')\r\n  handleMenuFilter(event: CustomEvent) {\r\n    const searchValue = event.detail;\r\n    this.filterDropdownItems(searchValue)\r\n  }\r\n\r\n  @Listen('ifxDropdownItem')\r\n  handleDropdownItemValueEmission(event: CustomEvent) {\r\n    this.ifxDropdownMenuItem.emit(event.detail)\r\n  }\r\n\r\n  filterDropdownItems(searchValue: string) {\r\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\r\n    let dropdownItem, txtValue;\r\n    let query = searchValue.toUpperCase()\r\n\r\n    for (let i = 0; i < allItems.length; i++) {\r\n      dropdownItem = allItems[i];\r\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\r\n\r\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\r\n        dropdownItem.setAttribute('hide', false)\r\n      } else {\r\n        dropdownItem.setAttribute('hide', true)\r\n      }\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.menuSize.emit(this.size)\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\r\n    const searchField = this.el.querySelector('ifx-search-field')\r\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\r\n\r\n    if (searchField || dropdownHeader) {\r\n      this.hideTopPadding = true;\r\n    } else this.hideTopPadding = false;\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`dropdown-menu \r\n      ${this.isOpen ? 'show' : ''} \r\n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\r\n      ${this.size === 's' ? 'small' : \"\"}`\r\n      } >\r\n        <slot />\r\n      </div >\r\n    );\r\n  }\r\n}"],"mappings":"yDAAA,MAAMA,EAAkB,0e,MCQXC,EAAY,MANzB,WAAAC,CAAAC,G,sGAOUC,KAAMC,OAAY,MAClBD,KAAIE,KAAW,IACdF,KAAcG,eAAY,MAI1BH,KAAaI,cAAiC,EAyDxD,CArDC,gBAAAC,CAAiBC,GACf,MAAMC,EAAcD,EAAME,OAC1BR,KAAKS,oBAAoBF,E,CAI3B,+BAAAG,CAAgCJ,GAC9BN,KAAKW,oBAAoBC,KAAKN,EAAME,O,CAGtC,mBAAAC,CAAoBF,GAClB,MAAMM,EAAWC,MAAMC,KAAKf,KAAKgB,GAAGC,iBAAiB,sBACrD,IAAIC,EAAcC,EAClB,IAAIC,EAAQb,EAAYc,cAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIT,EAASU,OAAQD,IAAK,CACxCJ,EAAeL,EAASS,GACxBH,EAAWD,EAAaM,aAAeN,EAAaO,UAEpD,GAAIN,EAASE,cAAcK,QAAQN,IAAS,EAAI,CAC9CF,EAAaS,aAAa,OAAQ,M,KAC7B,CACLT,EAAaS,aAAa,OAAQ,K,GAKxC,mBAAAC,GACE5B,KAAK6B,SAASjB,KAAKZ,KAAKE,K,CAG1B,iBAAA4B,GACE9B,KAAKI,cAAgBU,MAAMC,KAAKf,KAAKgB,GAAGC,iBAAiB,sBACzD,MAAMc,EAAc/B,KAAKgB,GAAGgB,cAAc,oBAC1C,MAAMC,EAAiBjC,KAAKgB,GAAGgB,cAAc,uBAE7C,GAAID,GAAeE,EAAgB,CACjCjC,KAAKG,eAAiB,I,MACjBH,KAAKG,eAAiB,K,CAI/B,MAAA+B,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,yBACVrC,KAAKC,OAAS,OAAS,cACvBD,KAAKG,eAAiB,iBAAmB,aACzCH,KAAKE,OAAS,IAAM,QAAU,MAE9BiC,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-0b0f2040.entry.js.map

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

package/dist/infineon-design-system-stencil/p-0f35aeb6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","role","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n  height: tokens.$ifxSize200;\r\n  bottom: 0;\r\n  right: 0;\r\n  top: 0;\r\n  left: 0;\r\n  display: flex;\r\n  height: tokens.$ifxSize250;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  width: 100%; // Ensure the bar itself can grow up to 100% width\r\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\r\n  background-color: tokens.$ifxColorEngineering200;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  \r\n  \r\n  &.s {\r\n    height: 4px;\r\n  }\r\n\r\n  .label {\r\n    font-style: normal;\r\n    font-size: tokens.$ifxFontSizeS;\r\n    font-weight: 400;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n  \r\n  .progress {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: fit-content;\r\n    height: 100%;\r\n    background-color: #0A8276;\r\n    transition: width 0.2s ease;\r\n  }\r\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-progress-bar',\r\n  styleUrl: 'progress-bar.scss',\r\n  shadow: true\r\n})\r\nexport class ProgressBar {\r\n  @Element() el: HTMLElement;\r\n  @Prop() value: number = 0;\r\n  @Prop() size: string;\r\n  @Prop() showLabel: boolean = false;\r\n\r\n  @State() internalValue: number;\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: number, oldValue: number) {\r\n    if (newValue !== oldValue) {\r\n      this.internalValue = newValue;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-progress-bar', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"progressbar\"\r\n        aria-valuenow={this.internalValue}\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\r\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\r\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"4HAAA,MAAMA,EAAiB,okB,MCUVC,EAAW,MALxB,WAAAC,CAAAC,G,UAOUC,KAAKC,MAAW,EAEhBD,KAASE,UAAY,KAmC9B,CA9BC,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAIzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAG5B,sBAAMO,GACJ,IAAIC,EAAuBT,KAAKU,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,yBAA0BF,E,EAI7C,MAAAG,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,cACO,gBAAAjB,KAAKM,cACN,oBACA,sBAAK,aACP,aAAaN,KAAKM,iBAAkBY,MAAO,gBAAgBlB,KAAKmB,QAC5EJ,EAAK,OAAAC,IAAA,2CAAAE,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGrB,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKmB,OAAS,KAAOnB,KAAKM,gBAAkB,GAAKS,EAAA,QAAAC,IAAA,2CAAME,MAAM,SAAS,GAAGlB,KAAKM,mB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-18c6d719.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["navbarItemCss","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleFocusOut","event","parentTag","_b","_a","el","parentElement","tagName","toUpperCase","isStillInComponent","isFocusWithinComponent","relatedTarget","closeItemMenu","ifxNavItem","emit","component","action","handleNestedLayerMenu","handleOutsideClick","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","hideComponent","style","display","showComponent","toggleChildren","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","getParentItemMenu","slot","getRootNode","host","toggleItemMenu","parentItemMenu","e","isInLightDOM","isInShadowDOM","rootNode","ShadowRoot","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","handleKeyDown","key","stopPropagation","preventDefault","render","h","tabIndex","class","onMouseLeave","onKeyDown","onMouseEnter","onClick","tabindex","isNaN","variant","number","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host(.hidden) {\r\n  display: none;\r\n}\r\n\r\n.navbar__item {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px 8px;\r\n  flex: none;\r\n  order: 0;\r\n  flex-grow: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  font-weight: 400;\r\n  font-size: 16px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  \r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  &.isParent { \r\n    gap: 8px;\r\n  }\r\n\r\n  & .navItemIconWrapper { \r\n    transition: .3s;\r\n    display: flex;\r\n  }\r\n\r\n  &.open { \r\n    & .navItemIconWrapper { \r\n      transform: rotate(-180deg);\r\n      transition: .3s;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean500;\r\n    cursor: pointer;\r\n\r\n    & .username__tooltip { \r\n      display: block;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n      & .initials__wrapper { \r\n        cursor: pointer;\r\n        background-color: tokens.$ifxColorOcean600;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.remove {\r\n    display: none;\r\n  }\r\n\r\n  &.removeLabel {\r\n    & .label__wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  & .number__indicator-wrapper { \r\n    position: relative;\r\n    top: -11px;\r\n  }\r\n\r\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 0px;\r\n    gap: 8px;\r\n    flex: none;\r\n    order: 0;\r\n    flex-grow: 0;\r\n\r\n \r\n    & .username__tooltip { \r\n      display: none;\r\n      position: absolute;\r\n      top: 35px;\r\n      right: 0;\r\n      text-wrap: nowrap;\r\n      padding: 1px 5px;\r\n      font-size: 13px;\r\n      font-family: \"Source Sans 3\";\r\n      background-color: black;\r\n      color: #fff;\r\n      z-index: 99;\r\n    }\r\n\r\n    &:hover { \r\n      & .username__tooltip { \r\n        display: block;\r\n      }\r\n    }\r\n\r\n    & .initials__wrapper { \r\n      display: flex;\r\n      width: 24px;\r\n      height: 24px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 100%;\r\n      background-color: tokens.$ifxColorOcean500;\r\n\r\n\r\n      & .initials { \r\n        color: #FFF;\r\n        text-align: center;\r\n        font-family: \"Source Sans 3\";\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 20px; \r\n\r\n        -webkit-touch-callout: none;\r\n        -webkit-user-select: none;\r\n        -khtml-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n      \r\n      }\r\n    }\r\n\r\n    & img { \r\n      width: 24px; \r\n      height: 24px;\r\n      border-radius: 100%;\r\n    }\r\n\r\n    &.removeWrapper {\r\n      display: none;\r\n    }\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.container { \r\n  position: relative;\r\n  \r\n       &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .sub__layer-back-button { \r\n    display: none;\r\n    &.show { \r\n      display: flex;\r\n      justify-content: flex-start;\r\n\r\n      & .back__button-wrapper { \r\n        display: flex;\r\n        align-items: center;\r\n        gap: tokens.$ifxSpace100;\r\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\r\n        color: tokens.$ifxColorOcean500;\r\n        font-size: 16px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 24px;\r\n\r\n        & span, & ifx-icon { \r\n          &:hover { \r\n            cursor: pointer;\r\n          }\r\n        }\r\n\r\n      }\r\n    }\r\n  }\r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  & .inner__content-wrapper { \r\n    position: relative;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 8px;\r\n    &.no-gap { \r\n      gap: 0px;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n      &.no-gap { \r\n        gap: 0px;\r\n      }\r\n    }\r\n\r\n    & .number__indicator-wrapper { \r\n      position: relative;\r\n      top: -11px;\r\n    }\r\n\r\n  }\r\n}\r\n\r\n.navbar-menu  {\r\n  position: absolute;\r\n  display: none;\r\n  list-style-type: none;\r\n  visibility: visible;\r\n  flex-direction: column;\r\n  width: 224px;\r\n  min-width: 224px;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  padding: 8px 0px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.open:not(.itemInMobileMenu) {\r\n    display: flex;\r\n  }\r\n\r\n  &.itemInMobileMenu { \r\n    display: none;\r\n  }\r\n\r\n  &.right { \r\n    left: 100%;\r\n    top: -40%;\r\n  }\r\n\r\n  &.left { \r\n    top: -40%;\r\n    right: 100%;\r\n  }\r\n\r\n  &.rightSideItemMenu { \r\n    left: initial;\r\n    right: 0px;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n    &.layer__item-parent { \r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 24px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 32px; \r\n      letter-spacing: -0.24px;\r\n      cursor: initial;\r\n\r\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n        & ifx-icon { \r\n          & svg { \r\n            width: 24px;\r\n            height: 24px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n  &.sidebarMenuItem { \r\n    justify-content: space-between;\r\n    padding: 0;\r\n  }\r\n\r\n\r\n  &.menuItem {\r\n    text-decoration: none;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 8px 16px;\r\n    gap: 8px;\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  \r\n    &.hide {\r\n      display: none;\r\n    }\r\n  \r\n    & .label__wrapper {\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: 24px;\r\n    }\r\n  \r\n    &:hover {\r\n      cursor: pointer;\r\n      background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n  \r\n    &:active {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n}\r\n\r\n.sub__layer-menu { \r\n  padding: 5px;\r\n  display: none;\r\n\r\n  &.remove__margin { \r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n \r\n  &.open { \r\n    display: block;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.menuItemRightIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.navItemIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-navbar-item',\r\n  styleUrl: 'navbar-item.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class NavbarItem {\r\n  @Element() el;\r\n  @Prop() showLabel: boolean = true;\r\n  @Prop() icon: string = \"\"\r\n  @Prop() href: string = \"\"\r\n  @Prop() target: string = \"_self\";\r\n  @Prop() hideOnMobile: boolean = true;\r\n  @State() internalHref: string = \"\"\r\n  @State() isMenuItem: boolean = false;\r\n  @State() hasChildNavItems: boolean = false;\r\n  @State() isSidebarMenuItem: boolean = false;\r\n  @State() itemPosition: string;\r\n  @Event() ifxNavItem: EventEmitter;\r\n  @Prop() numberIndicator: number;\r\n  @Prop() dotIndicator: boolean = false;\r\n\r\n  @Listen('focusout')\r\n  handleFocusOut(event: FocusEvent) {\r\n    const parentTag = this.el.parentElement?.tagName?.toUpperCase();\r\n\r\n    if (parentTag === 'IFX-NAVBAR') {\r\n      const isStillInComponent = this.isFocusWithinComponent(event.relatedTarget);\r\n      if (!isStillInComponent) {\r\n        this.closeItemMenu();\r\n        this.ifxNavItem.emit({ component: this.el, action: 'hideFirstLayer' });\r\n      }\r\n      return;\r\n    }\r\n\r\n    this.handleNestedLayerMenu(event);\r\n  }\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    const itemMenu = this.getItemMenu()\r\n    if(itemMenu) { \r\n      if(itemMenu.classList.contains('open')) { \r\n        if (!path.includes(this.el)) {\r\n          this.closeItemMenu();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async hideComponent() { \r\n    this.el.style.display = 'none';\r\n  }\r\n\r\n  @Method()\r\n  async showComponent() { \r\n    this.el.style.display = '';\r\n  }\r\n\r\n  @Method()\r\n  async toggleChildren(action) { \r\n    const itemMenu = this.getItemMenu()\r\n    const arrowIcon = this.getChevronDownIconWrapper()\r\n    if(itemMenu) { \r\n      this.handleClassList(arrowIcon, action, 'hide')\r\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async moveChildComponentsIntoSubLayerMenu() { \r\n    const subLayerMenu = this.getItemMenu()\r\n    if(subLayerMenu) { \r\n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\r\n      if(subLayerMenuIsOpened) { \r\n        const navbarItem = this.getNavBarItem()\r\n        const subLayerBackButton = this.getSubLayerBackButton()\r\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\r\n        this.handleClassList(subLayerBackButton, 'add', 'show')\r\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\r\n      }\r\n    }\r\n\r\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\r\n    this.isSidebarMenuItem = true;\r\n\r\n    for(let i = 0; i < navItems.length; i++) { \r\n      navItems[i].setAttribute('slot', 'second__layer')\r\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\r\n    }\r\n  }\r\n\r\n  getSubLayerBackButton() { \r\n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\r\n    return sublayerBackButton\r\n  }\r\n\r\n  @Method()\r\n  async toggleFirstLayerItem(actionOne, actionTwo) { \r\n   const navbarItem = this.getNavBarItem()\r\n   const secondLayerMenu = this.getSubLayerMenu()\r\n   const subLayerBackButton = this.getSubLayerBackButton()\r\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\r\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\r\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\r\n  }\r\n\r\n  openSubLayerMenu() { \r\n    if(this.hasChildNavItems) { \r\n      const subLayerBackButton = this.getSubLayerBackButton()\r\n      const rightArrowIcon = this.getRightArrowIcon()\r\n      const navbarItem = this.getNavBarItem()\r\n      const subLayerMenu = this.getSubLayerMenu()\r\n      const slotName = this.el.getAttribute('slot')\r\n\r\n      this.handleClassList(subLayerBackButton, 'add', 'show')\r\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\r\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\r\n      this.handleClassList(subLayerMenu, 'add', 'open')\r\n    \r\n      if(slotName.toLowerCase() === 'second__layer') {\r\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\r\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\r\n      } else { \r\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\r\n      }\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async addMenuItemClass() { \r\n    const navbarItem = this.getNavBarItem()\r\n    this.handleClassList(navbarItem, 'add', 'menuItem')\r\n    const rightArrowIcon = this.getRightArrowIcon()\r\n    if(this.hasChildNavItems) { \r\n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async moveChildComponentsBackIntoNavbar() { \r\n    const subLayerBackButton = this.getSubLayerBackButton()\r\n    const navbarItem = this.getNavBarItem()\r\n    const secondLayerMenu = this.getSubLayerMenu()\r\n\r\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\r\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\r\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\r\n\r\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\r\n\r\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\r\n    this.isSidebarMenuItem = false;\r\n    this.showComponent()\r\n    this.handleClassList(navbarItem, 'remove', 'hide')\r\n\r\n    for(let i = 0; i < navItems.length; i++) { \r\n      navItems[i].setAttribute('slot', 'first__layer')\r\n      navItems[i].moveChildComponentsBackIntoNavbar()\r\n      navItems[i].addMenuItemClass()\r\n      navItems[i].returnToFirstLayer()\r\n    }\r\n  }\r\n\r\n  getRightArrowIcon() { \r\n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\r\n    return menuItemRightIconWrapper;\r\n  }\r\n\r\n  getChevronDownIconWrapper() { \r\n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\r\n    return arrowIcon;\r\n  }\r\n\r\n  @Method()\r\n  async returnToFirstLayer() { \r\n    const subLayerBackButton = this.getSubLayerBackButton()\r\n    const navbarItem = this.getNavBarItem()\r\n    const rightArrowIcon = this.getRightArrowIcon()\r\n    const subLayerMenu = this.getSubLayerMenu()\r\n    const slotName = this.el.getAttribute('slot')\r\n\r\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\r\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\r\n    this.handleClassList(subLayerMenu, 'remove', 'open')\r\n    if(this.hasChildNavItems) { \r\n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\r\n    }\r\n\r\n    if(slotName.toLowerCase() === 'second__layer') {\r\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\r\n      this.handleClassList(navbarItem, 'add', 'menuItem')\r\n    } else { \r\n      this.ifxNavItem.emit({component: this.el, action: 'return'})\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setHref()\r\n    this.checkIfItemIsNested()\r\n    this.checkIfItemHasChildren()\r\n    this.removeEmptyItem()\r\n  }\r\n\r\n  componentDidLoad() { \r\n    this.handleItemGap()\r\n    this.handleLabelWrapper()\r\n    if(this.hasChildNavItems) { \r\n      const navItems = this.getNavbarItems();\r\n      this.relocateItemsToFirstlayer(navItems)\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() { \r\n    const navbarItem = this.getNavBarItem()\r\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\r\n    if(this.isSidebarMenuItem && isLayerItemParent) {\r\n      const rightArrowIcon = this.getRightArrowIcon()\r\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async setMenuItemPosition() { \r\n    if(this.isMenuItem && this.hasChildNavItems) { \r\n      const menuPosition = this.getItemMenuPosition()\r\n      if(menuPosition === 'left') { \r\n        this.itemPosition = 'left'\r\n      } else if(menuPosition === 'right') { \r\n        this.itemPosition = 'right'\r\n      }\r\n    }\r\n  }\r\n\r\n  handleClassList(el, type, className) {\r\n    if (!el) return false;\r\n    el.classList[type](className)\r\n    if (type === 'contains') {\r\n      return el.classList.contains(className)\r\n    }\r\n  }\r\n\r\n  getNavbarItems() {\r\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\r\n    return navItems;\r\n  }\r\n  \r\n  getNavBarItem() { \r\n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\r\n    return navItem;\r\n  }\r\n\r\n  getSubLayerMenu() { \r\n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\r\n    return subLayerMenu;\r\n  }\r\n\r\n  relocateItemsToFirstlayer(navItems) { \r\n     navItems.forEach(item => {\r\n      item.setAttribute('slot', 'first__layer')\r\n    })\r\n  }\r\n\r\n  setHref() {\r\n    if (this.href.toLowerCase().trim() === \"\") {\r\n      this.internalHref = undefined;\r\n    } else this.internalHref = this.href;\r\n  }\r\n\r\n  checkIfItemIsNested() {\r\n    const parentElement = this.el.parentElement;\r\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \r\n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\r\n      this.isMenuItem = true;\r\n      return;\r\n    } else {\r\n      this.isMenuItem = false;\r\n    }\r\n  }\r\n\r\n  checkIfItemHasChildren() { \r\n    const sidebarItems = this.getNavbarItems();\r\n    if (sidebarItems.length !== 0) {\r\n      this.hasChildNavItems = true;\r\n    } else {\r\n      this.hasChildNavItems = false;\r\n    } \r\n  }\r\n\r\n  @Method()\r\n  async setItemSideSpecifications() {  \r\n    const menuItem = this.el;\r\n    const itemMenu = this.getItemMenu()\r\n    const slotValue = menuItem.getAttribute('slot')\r\n\r\n    if(slotValue.toLowerCase().trim() === \"right-item\") { \r\n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  getItemMenu() {\r\n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\r\n    return menu;\r\n  }\r\n\r\n  getParentItemMenu() {\r\n    return this.el.parentElement?.shadowRoot.querySelector('.navbar-menu');\r\n  }\r\n\r\n  closeItemMenu() {\r\n    const itemMenu = this.getItemMenu();\r\n    const menuItem = this.getNavBarItem();\r\n\r\n    if (itemMenu) {\r\n      this.handleClassList(itemMenu, 'remove', 'open');\r\n      this.handleClassList(menuItem, 'remove', 'open');\r\n    }\r\n  }\r\n\r\n  getItemMenuPosition() {\r\n    let parentElement = this.el;\r\n    while(parentElement) {\r\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\r\n        return 'left'\r\n      }\r\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\r\n    }\r\n    return 'right'\r\n  }\r\n  \r\n toggleItemMenu() {\r\n  const slotName = this.el.getAttribute('slot').toLowerCase();\r\n  if (slotName === 'mobile-menu-top' || slotName === 'second__layer') {\r\n    this.openSubLayerMenu();\r\n  } else if (!this.internalHref) {\r\n    if (this.hasChildNavItems) {\r\n      const itemMenu = this.getItemMenu()\r\n      const menuItem = this.getNavBarItem()\r\n      this.handleClassList(itemMenu, 'toggle', 'open');\r\n      this.handleClassList(menuItem, 'toggle', 'open');\r\n      if (this.isMenuItem && !this.isSidebarMenuItem && itemMenu.classList.contains('open')) {\r\n        this.handleNestedLayerMenu({ type: 'mouseenter' } as any);\r\n      }\r\n    } else {\r\n      const parentItemMenu = this.getParentItemMenu();\r\n      if (parentItemMenu) {\r\n        this.handleClassList(parentItemMenu, 'toggle', 'open');\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n  handleNestedLayerMenu(e) { \r\n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \r\n      const itemMenu = this.getItemMenu()\r\n      const menuPosition = this.getItemMenuPosition()\r\n      const type = e.type.toUpperCase();\r\n    \r\n      if(type === 'MOUSEENTER') { \r\n        this.handleClassList(itemMenu, 'add', 'open')\r\n        if(menuPosition === 'left') { \r\n          this.handleClassList(itemMenu, 'add', 'left')\r\n        } else if(menuPosition === 'right') { \r\n          this.handleClassList(itemMenu, 'add', 'right')\r\n        }\r\n      }\r\n\r\n      if(type === 'MOUSELEAVE') { \r\n        this.handleClassList(itemMenu, 'remove', 'open')\r\n        if(menuPosition === 'left') { \r\n          this.handleClassList(itemMenu, 'remove', 'left')\r\n        } else if (menuPosition === 'right') { \r\n          this.handleClassList(itemMenu, 'remove', 'right')\r\n        }\r\n      }\r\n\r\n       if(type === 'FOCUSOUT') { \r\n      const isStillInComponent = this.isFocusWithinComponent(e.relatedTarget)\r\n      if (!isStillInComponent) {\r\n        this.handleClassList(itemMenu, 'remove', 'open')\r\n        if(menuPosition === 'left') { \r\n          this.handleClassList(itemMenu, 'remove', 'left')\r\n        } else if (menuPosition === 'right') { \r\n          this.handleClassList(itemMenu, 'remove', 'right')\r\n        }\r\n      }\r\n    }\r\n    }\r\n  }\r\n\r\n private isFocusWithinComponent(relatedTarget: EventTarget | null): boolean {\r\n  if (!relatedTarget) return false;\r\n  \r\n  const target = relatedTarget as Node;\r\n  const isInLightDOM = this.el.contains(target);\r\n  const isInShadowDOM = this.el.shadowRoot?.contains(target);\r\n  \r\n  const rootNode = target.getRootNode();\r\n  \r\n  if (rootNode instanceof ShadowRoot) {\r\n    const shadowRoot = rootNode as ShadowRoot;\r\n    if (this.el.contains(shadowRoot.host)) {\r\n      return true;\r\n    }\r\n  }\r\n\r\n  return isInLightDOM || isInShadowDOM;\r\n}\r\n\r\n  handleLabelWrapper() { \r\n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\r\n    const navItem = this.getNavBarItem();\r\n    const slot = labelWrapper.querySelector('slot');\r\n    if (!slot.assignedNodes().length) {\r\n      navItem.classList.add('removeLabel')\r\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\r\n      navItem.classList.remove('removeLabel')\r\n    }\r\n  }\r\n\r\n  handleItemGap() { \r\n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\r\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\r\n    if(this.numberIndicator || this.dotIndicator) { \r\n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\r\n    } else { \r\n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\r\n    }\r\n  }\r\n\r\n  removeEmptyItem() { \r\n    const hostElement = this.el.shadowRoot.host;\r\n    if(!this.showLabel && !this.icon) { \r\n      this.handleClassList(hostElement, 'add', 'hidden')\r\n    }\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n  if (event.key === 'Enter') {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n      this.toggleItemMenu()\r\n    }\r\n}\r\n\r\n  render() {\r\n    return (\r\n      <div tabIndex={1} class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)} onKeyDown={(e) => this.handleKeyDown(e)} onMouseEnter={e => this.handleNestedLayerMenu(e)}>\r\n        <div class=\"sub__layer-back-button\">\r\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\r\n            <ifx-icon icon=\"arrow-left-16\" />\r\n            <span>Back</span>\r\n          </div>\r\n        </div>\r\n        <a tabindex={-1} href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()}  class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\r\n          <div class=\"inner__content-wrapper\">\r\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\r\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\r\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \r\n              <div class=\"number__indicator-wrapper\">\r\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\r\n              </div>}\r\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \r\n            <div class=\"dot__indicator-wrapper\"></div>}\r\n            </div>\r\n\r\n            {this.itemPosition === 'left' \r\n            && this.hasChildNavItems \r\n            && this.isMenuItem && \r\n            <div class=\"menuItemLeftIconWrapper\">\r\n                <ifx-icon icon=\"chevron-left-16\" />\r\n            </div>}\r\n\r\n            <span class=\"label__wrapper\">\r\n              <slot />\r\n            </span>\r\n          </div>\r\n\r\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \r\n            <div class=\"number__indicator-wrapper\">\r\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\r\n            </div> : \"\"}\r\n\r\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \r\n            <ifx-indicator variant=\"dot\" /> : \"\"}\r\n\r\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </div>\r\n          \r\n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\r\n            <ifx-icon icon=\"chevron-right-16\" />\r\n          </div>}\r\n        </a>\r\n        \r\n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\r\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\r\n\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-210b1849.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["searchBarCss","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","handleInput","event","value","detail","render","h","key","role","class","maxlength","onIfxInput","bind","icon","slot","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  width: 100%; //revert\r\n  display: flex;\r\n}\r\n\r\n.search-bar {\r\n  box-sizing: border-box;\r\n  height: tokens.$ifxSize500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  width: 100%;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.closed {\r\n    display: flex;\r\n    width: auto;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  & .search-bar-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace200;\r\n    width: 100%;\r\n\r\n    & a {\r\n      \r\n      text-decoration: none;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      color: tokens.$ifxColorOcean500;\r\n      cursor: pointer;\r\n      &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n  }\r\n    & ifx-search-field {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .search-bar__icon-wrapper {\r\n    display: none;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    & ifx-icon:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.closed {\r\n    .search-bar__icon-wrapper {\r\n      display: flex;\r\n    }\r\n\r\n    .search-bar-wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-search-bar',\r\n  styleUrl: 'search-bar.scss',\r\n  shadow: true,\r\n})\r\nexport class SearchBar {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() disabled: boolean = false;\r\n  @State() internalState: boolean;\r\n  @Prop({ mutable: true }) value: string;\r\n  @Prop() maxlength?: number;\r\n  @Event() ifxInput: EventEmitter;\r\n  @Event() ifxOpen: EventEmitter;\r\n   @Prop() autocomplete: string = \"on\";\r\n  @Element() el;\r\n\r\n  @Method()\r\n  async onNavbarMobile() {\r\n    this.ifxOpen.emit(false)\r\n    this.internalState = false;\r\n  }\r\n\r\n  @Watch('isOpen')\r\n  handlePropChange() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  handleCloseButton = () => {\r\n    this.internalState = !this.internalState;\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  setInitialState() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setInitialState();\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-search-bar', await framework)\r\n    }\r\n  }\r\n\r\n  handleInput(event: CustomEvent) {\r\n    this.value = event.detail;\r\n  }\r\n\r\n  handleFocus = () => {\r\n    this.internalState = true;\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\r\n        {this.internalState ? (\r\n          <div class=\"search-bar-wrapper\">\r\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\r\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\r\n            </ifx-search-field>\r\n\r\n            <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\r\n          </div>\r\n        ) : (\r\n          <div class=\"search-bar_icon-wrapper\"\r\n          onClick={this.handleCloseButton}>\r\n            <ifx-icon icon=\"search-16\"></ifx-icon>\r\n          </div>\r\n        )}\r\n        </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"mIAAA,MAAMA,EAAe,o+B,MCURC,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAMC,OAAY,KAClBD,KAAQE,SAAY,MAMnBF,KAAYG,aAAW,KAchCH,KAAiBI,kBAAG,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAuBvCL,KAAWQ,YAAG,KACZR,KAAKK,cAAgB,IAAI,CAwB5B,CA5DC,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAG5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAGzB,sBAAMQ,GACJ,IAAIC,EAAuBd,KAAKe,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,uBAAwBF,E,EAI3C,WAAAG,CAAYC,GACVpB,KAAKqB,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,SAAQ,aAAY,gCAA4C,aAAA1B,KAAKqB,MAAK,gBAAiBrB,KAAKE,SAAUyB,MAAO,cAAc3B,KAAKK,cAAgB,OAAS,YACpKL,KAAKK,cACJmB,EAAK,OAAAG,MAAM,sBACTH,EAAA,oBAAkBrB,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUmB,MAAOrB,KAAKqB,MAAOO,UAAW5B,KAAK4B,UAAWC,WAAY7B,KAAKmB,YAAYW,KAAK9B,OAC1JwB,EAAU,YAAAO,KAAK,YAAYC,KAAK,iBAGlCR,EAAc,iCAAeS,KAAK,qBAAqBC,QAASlC,KAAKI,mBAA4B,UAGnGoB,EAAA,OAAKG,MAAM,0BACXO,QAASlC,KAAKI,mBACZoB,EAAU,YAAAO,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-228e8272.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["infineonIconStencilCss","InfineonIconStencil","constructor","hostRef","this","icon","updateIcon","newIcon","internalIcon","setIcon","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","ifxIcon","width","getAttribute","height","fill","viewBox","class","xmlns","constructIcon","SVG","consoleError","emit","toCamelCase","str","replace","_","chr","toUpperCase","m","toLowerCase","iconName","getIcon","isInsideAgGrid","el","_a","className","startsWith","parentElement","isInsideChoices","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n\r\n  &:empty {\r\n    display: none;\r\n  }\r\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State, Element } from '@stencil/core';\r\nimport { getIcon } from '@infineon/infineon-icons'\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-icon',\r\n  styleUrl: './infineonIconStencil.scss'\r\n})\r\n\r\nexport class InfineonIconStencil {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) icon: string = \"\"\r\n  @Prop({ mutable: true }) ifxIcon: any;\r\n  @State() internalIcon: string;\r\n  @Event() consoleError: EventEmitter<boolean>;\r\n\r\n   @Watch('icon')\r\n    updateIcon(newIcon: string) { \r\n      this.internalIcon = newIcon;\r\n      this.setIcon()\r\n    }\r\n\r\n  convertStringToHtml(htmlString) { \r\n    const div = document.createElement('div')\r\n    div.innerHTML = htmlString\r\n    return div.firstChild\r\n  }\r\n\r\n  convertHtmlToObject(htmlElement) { \r\n    let pathToObject = Array\r\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\r\n      .reduce((acc, current) => {\r\n        acc[current.name] = current.value\r\n        return acc\r\n      }, {})\r\n\r\n    return pathToObject\r\n  }\r\n\r\n  convertPathsToVnode(htmlPath) { \r\n    let svgPaths = []\r\n    const parentPath = this.convertHtmlToObject(htmlPath);\r\n    const parentPathToVnode = h(\"path\", parentPath);\r\n    svgPaths.push(parentPathToVnode)\r\n    if(htmlPath.firstChild) { \r\n      const paths = htmlPath.querySelectorAll('path');\r\n      const pathLength = htmlPath.querySelectorAll('path').length;\r\n      for(let i = 0; i < pathLength; i++) { \r\n        let pathToObject = this.convertHtmlToObject(paths[i])\r\n        let objToVnode = h(\"path\", pathToObject)\r\n        svgPaths.push(objToVnode)\r\n      }      \r\n    }\r\n    return svgPaths\r\n  }\r\n\r\n  getSVG(svgPath) {\r\n    const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\r\n    const width = htmlPath.getAttribute('width');\r\n    const height = htmlPath.getAttribute('height');\r\n    const fill = htmlPath.getAttribute('fill');\r\n    const viewBox = htmlPath.getAttribute('viewBox');\r\n    \r\n    return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\r\n  }\r\n\r\n  constructIcon() {\r\n    if(this.ifxIcon) {\r\n      const htmlPath = this.convertStringToHtml(this.ifxIcon)\r\n      const svgPath = this.convertPathsToVnode(htmlPath)\r\n      const SVG = this.getSVG(svgPath)\r\n      return SVG;\r\n    } else if(this.icon !== \"\") {\r\n       this.consoleError.emit(true)\r\n      return;\r\n    }  else { \r\n      return;\r\n    }\r\n  }\r\n\r\nsetIcon() { \r\n  const toCamelCase = str =>\r\n    str\r\n      .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\r\n      .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\r\n\r\n  const iconName = toCamelCase(this.internalIcon);\r\n  this.ifxIcon = getIcon(iconName);\r\n}\r\n\r\n isInsideAgGrid(el: HTMLElement): boolean {\r\n  let current = el;\r\n  while (current) {\r\n    if (current.className?.toLowerCase().startsWith('ag-')) {\r\n      return true;\r\n    }\r\n    current = current.parentElement;\r\n  }\r\n  return false;\r\n}\r\n\r\n   isInsideChoices(el: HTMLElement): boolean {\r\n    let current = el;\r\n    while (current) {\r\n      if (current.className?.toLowerCase().startsWith('choices__')) {\r\n        return true;\r\n      }\r\n      current = current.parentElement;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalIcon = this.icon;\r\n    this.setIcon()\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      if(!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) { \r\n        const framework = detectFramework();\r\n        trackComponent('ifx-icon', await framework)\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n      {this.constructIcon()}\r\n      </Host>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-252e292d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardOverlineCss","CardOverline","render","h","key","class"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card-overline {\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: tokens.$ifxFontWeightRegular;\r\n  color: tokens.$ifxColorEngineering500;\r\n  padding-bottom: 4px;\r\n\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 1;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  word-break: break-all;\r\n\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-overline',\r\n  styleUrl: 'card-overline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"card-overline\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAkB,0S,MCQXC,EAAY,M,yBAEvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-27a7a852.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleResize","clearTimeout","resizeTimeout","setTimeout","handleComponentOverflow","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","isNestedInIfxComponent","hostElement","framework","detectFramework","trackComponent","el","window","disconnectedCallback","removeEventListener","componentWillRender","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","Promise","resolve","modalContent","modalContentHeight","offsetHeight","viewportHeight","innerHeight","extraMarginForEdgeBrowser","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","captionAriaLabel","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\r\n * Copy/pasted from https://github.com/andreasbm/focus-trap\r\n */\r\n\r\n/**\r\n * Traverses the slots of the open shadowroots and returns all children matching the query.\r\n * We need to traverse each child-depth one at a time because if an element should be skipped\r\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\r\n * the information of whether the children is within a hidden parent is lost.\r\n * @param {ShadowRoot | HTMLElement} root\r\n * @param skipNode\r\n * @param isMatch\r\n * @param {number} maxDepth\r\n * @param {number} depth\r\n * @returns {HTMLElement[]}\r\n */\r\nexport function queryShadowRoot(\r\n  root: ShadowRoot | HTMLElement,\r\n  skipNode: ($elem: HTMLElement) => boolean,\r\n  isMatch: ($elem: HTMLElement) => boolean,\r\n  maxDepth: number = 20,\r\n  depth: number = 0\r\n): HTMLElement[] {\r\n  const matches: HTMLElement[] = [];\r\n\r\n  // If the depth is above the max depth, abort the searching here.\r\n  if (depth >= maxDepth) {\r\n    return matches;\r\n  }\r\n\r\n  // Traverses a slot element\r\n  const traverseSlot = ($slot: HTMLSlotElement) => {\r\n    // Only check nodes that are of the type Node.ELEMENT_NODE\r\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\r\n    const assignedNodes = $slot\r\n      .assignedNodes()\r\n      .filter((node) => node.nodeType === 1);\r\n    if (assignedNodes.length > 0) {\r\n      const $slotParent = assignedNodes[0].parentElement!;\r\n      return queryShadowRoot(\r\n        $slotParent,\r\n        skipNode,\r\n        isMatch,\r\n        maxDepth,\r\n        depth + 1\r\n      );\r\n    }\r\n\r\n    return [];\r\n  };\r\n\r\n  // Go through each child and continue the traversing if necessary\r\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\r\n  // Therefore we fallback to an empty array if it is undefined.\r\n  const children = Array.from(root.children || []) as HTMLElement[];\r\n  for (const $child of children) {\r\n    // Check if the element and its descendants should be skipped\r\n    if (skipNode($child)) {\r\n      // console.log('-- SKIP', $child);\r\n      continue;\r\n    }\r\n\r\n    // console.log('$child', $child);\r\n\r\n    // If the element matches we always add it\r\n    if (isMatch($child)) {\r\n      matches.push($child);\r\n    }\r\n\r\n    if ($child.shadowRoot != null) {\r\n      // If the element has a shadow root we need to traverse it\r\n      matches.push(\r\n        ...queryShadowRoot(\r\n          $child.shadowRoot,\r\n          skipNode,\r\n          isMatch,\r\n          maxDepth,\r\n          depth + 1\r\n        )\r\n      );\r\n    } else if ($child.tagName === 'SLOT') {\r\n      // If the child is a slot we need to traverse each assigned node\r\n      matches.push(...traverseSlot($child as HTMLSlotElement));\r\n    } else {\r\n      // Traverse the children of the element\r\n      matches.push(\r\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\r\n      );\r\n    }\r\n  }\r\n\r\n  return matches;\r\n}\r\n\r\n/**\r\n * Returns whether the element is hidden.\r\n * @param $elem\r\n */\r\nexport function isHidden($elem: HTMLElement): boolean {\r\n  return (\r\n    $elem.hasAttribute('hidden') ||\r\n    ($elem.hasAttribute('aria-hidden') &&\r\n      $elem.getAttribute('aria-hidden') !== 'false') ||\r\n    // A quick and dirty way to check whether the element is hidden.\r\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\r\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\r\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\r\n    $elem.style.display === `none` ||\r\n    $elem.style.opacity === `0` ||\r\n    $elem.style.visibility === `hidden` ||\r\n    $elem.style.visibility === `collapse`\r\n  );\r\n\r\n  // If offsetParent is null we can assume that the element is hidden\r\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\r\n  // || $elem.offsetParent == null;\r\n}\r\n\r\n/**\r\n * Returns whether the element is disabled.\r\n * @param $elem\r\n */\r\nexport function isDisabled($elem: HTMLElement): boolean {\r\n  return (\r\n    $elem.hasAttribute('disabled') ||\r\n    ($elem.hasAttribute('aria-disabled') &&\r\n      $elem.getAttribute('aria-disabled') !== 'false')\r\n  );\r\n}\r\n\r\n/**\r\n * Determines whether an element is focusable.\r\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\r\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\r\n * @param $elem\r\n */\r\nexport function isFocusable($elem: HTMLElement): boolean {\r\n  // Discard elements that are removed from the tab order.\r\n  if (\r\n    $elem.getAttribute('tabindex') === '-1' ||\r\n    isHidden($elem) ||\r\n    isDisabled($elem)\r\n  ) {\r\n    return false;\r\n  }\r\n\r\n  return (\r\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\r\n    $elem.hasAttribute('tabindex') ||\r\n    // Anchor tags or area tags with a href set\r\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\r\n      $elem.hasAttribute('href')) ||\r\n    // Form elements which are not disabled\r\n    $elem instanceof HTMLButtonElement ||\r\n    $elem instanceof HTMLInputElement ||\r\n    $elem instanceof HTMLTextAreaElement ||\r\n    $elem instanceof HTMLSelectElement ||\r\n    // IFrames\r\n    $elem instanceof HTMLIFrameElement\r\n  );\r\n}","export function animationTo(\r\n  element: HTMLElement,\r\n  keyframes: Keyframe | Keyframe[],\r\n  options?: KeyframeAnimationOptions\r\n) {\r\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\r\n  animated.addEventListener('finish', () => {\r\n    // @ts-ignore\r\n    animated.commitStyles();\r\n    animated.cancel();\r\n  });\r\n\r\n  return animated;\r\n}\r\n\r\nconst keyframeDefaults = {\r\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\r\n};\r\n\r\nexport const KEYFRAMES = {\r\n  fadeIn: [\r\n    {\r\n      offset: 0,\r\n      ...keyframeDefaults,\r\n      opacity: 0,\r\n    },\r\n    {\r\n      offset: 1,\r\n      ...keyframeDefaults,\r\n      opacity: 1,\r\n    },\r\n  ],\r\n  fadeOut: [\r\n    {\r\n      offset: 0,\r\n      ...keyframeDefaults,\r\n      opacity: 1,\r\n    },\r\n    {\r\n      offset: 1,\r\n      ...keyframeDefaults,\r\n      opacity: 0,\r\n    },\r\n  ],\r\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.modal-container {\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1060;\r\n  overflow-y: auto;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n.modal-container.open {\r\n  display: flex;\r\n}\r\n\r\n.modal-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: tokens.$ifxColorBaseBlack;\r\n  opacity: 0.5;\r\n  z-index: 0;\r\n}\r\n\r\n.modal-content-container {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 90%;\r\n  min-height: 218px;\r\n  background-color: #fff;\r\n  border-radius: tokens.$ifxBorderRadiusNone;\r\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n  \r\n  //overflow: hidden;\r\n\r\n  box-sizing: border-box;\r\n  align-items: stretch;\r\n}\r\n\r\n.modal-content-container {\r\n  &.no-overflow { \r\n    overflow: hidden;\r\n    & .modal-body { \r\n      overflow-y: auto;\r\n    }\r\n  }\r\n}\r\n\r\n/* Add desktop size here */\r\n@media screen and (min-width: 768px) {\r\n  .modal-content-container {\r\n    width: 540px;\r\n    min-height: 132px;\r\n\r\n    &.m,\r\n    &.l,\r\n    &.s {\r\n      width: 90%;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 1024px) {\r\n  .modal-content-container {\r\n\r\n    &.s {\r\n      width: 47vw;\r\n    }\r\n\r\n    &.m {\r\n      width: 63vw;\r\n    }\r\n\r\n    &.l {\r\n      width: 80%;\r\n    }\r\n  }\r\n}\r\n\r\n.modal-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  max-height: 90vh;\r\n}\r\n\r\n.modal-icon-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n  align-self: stretch;\r\n\r\n  &.danger {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  & ifx-icon {\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 24px;\r\n  min-height: 76px;\r\n  max-height: 105px;\r\n  box-sizing: border-box;\r\n  border-radius: 1px 1px 0px 0px;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.modal-caption {\r\n  max-height: 56px;\r\n  display: -webkit-box;\r\n  overflow: hidden;\r\n  white-space: pre-wrap;\r\n  word-wrap: break-word;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical; \r\n}\r\n\r\n.modal-header h2 {\r\n  margin: 0;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeXl;\r\n  line-height: 28px;\r\n}\r\n\r\n.modal-header button {\r\n  background: none;\r\n  border: none;\r\n  font-size: 1.5em;\r\n  padding: 0;\r\n  cursor: pointer;\r\n}\r\n\r\n.modal-close-button {\r\n  align-self: flex-start;\r\n  margin-right: -8px;\r\n}\r\n\r\n.modal-body {\r\n  padding: 16px 24px;\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n  flex: 1;\r\n  \r\n  //overflow-y: auto;\r\n}\r\n\r\n.modal-footer.buttons-present ::slotted(*){\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 16px;\r\n  padding: 16px 24px 32px 16px\r\n}\r\n\r\n.modal-border {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  font-size: 1.5em;\r\n  flex-grow: 1;\r\n\r\n  &.primary {\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.secondary {\r\n    background-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.danger {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.success {\r\n    background-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.warning {\r\n    background-color: tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.orange {\r\n    background-color: tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.ocean {\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.grey {\r\n    background-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.grey-200 {\r\n    background-color: tokens.$ifxColorEngineering200;\r\n  }\r\n\r\n  &.red {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.green {\r\n    background-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.berry {\r\n    background-color: tokens.$ifxColorBerry500;\r\n  }\r\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\r\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\r\n \r\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\r\n\r\nexport interface BeforeCloseEventDetail {\r\n  trigger: CloseEventTrigger;\r\n}\r\n@Component({\r\n  tag: 'ifx-modal',\r\n  styleUrl: 'modal.scss',\r\n  shadow: true\r\n})\r\nexport class IfxModal {\r\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\r\n  @State() showModal: boolean = this.opened || false;\r\n\r\n  @Prop() caption: string = 'Modal Title';\r\n  @Prop() captionAriaLabel: string | null;\r\n\r\n  @Prop() closeOnOverlayClick: boolean = true;\r\n\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n\r\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\r\n\r\n  @Prop() size: 's' | 'm' | 'l' = 's';\r\n\r\n  @Prop() alertIcon: string = '';\r\n  @Prop() okButtonLabel: string = 'OK';\r\n  @Prop() cancelButtonLabel: string = 'Cancel';\r\n  @Prop() closeButtonAriaLabel: string | null;\r\n\r\n  @Element() hostElement: HTMLElement;\r\n\r\n  @State() slotButtonsPresent: boolean = false;\r\n\r\n  @Prop() showCloseButton: boolean = true;\r\n\r\n  private modalContainer: HTMLElement;\r\n  private focusableElements: HTMLElement[] = [];\r\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\r\n  private resizeTimeout: ReturnType<typeof setTimeout>;\r\n\r\n  handleResize = () => {\r\n  clearTimeout(this.resizeTimeout);\r\n  this.resizeTimeout = setTimeout(() => {\r\n    if (this.showModal) {\r\n      this.handleComponentOverflow();\r\n    }\r\n  }, 100);\r\n};\r\n\r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.hostElement)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-modal', await framework)\r\n    }\r\n    // Query all focusable elements and store them in `focusableElements`.\r\n    // Needed for the \"focus trap\" functionality.\r\n    this.focusableElements = queryShadowRoot(\r\n      this.hostElement.shadowRoot,\r\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\r\n      isFocusable\r\n    );\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n  window.removeEventListener('resize', this.handleResize);\r\n}\r\n\r\n  componentWillRender() { \r\n    if(this.showModal) { \r\n      this.handleComponentOverflow();\r\n    }\r\n  }\r\n\r\n  async handleComponentOverflow() { \r\n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\r\n    if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\r\n      modalContentContainer.classList.add('no-overflow')\r\n    } else if (modalContentContainer?.classList.contains('no-overflow')) {\r\n      modalContentContainer?.classList.remove('no-overflow')\r\n    }\r\n  }\r\n\r\n  getFirstFocusableElement(): HTMLElement | null {\r\n    return this.focusableElements[0];\r\n  }\r\n\r\n  getLastFocusableElement(): HTMLElement | null {\r\n    return this.focusableElements[this.focusableElements.length - 1];\r\n  }\r\n\r\n  handleTopFocus = () => {\r\n    this.attemptFocus(this.getLastFocusableElement());\r\n  };\r\n\r\n  handleBottomFocus = () => {\r\n    this.attemptFocus(this.getFirstFocusableElement());\r\n  };\r\n\r\n  attemptFocus(element: HTMLElement | null) {\r\n    if (element == null) {\r\n      setTimeout(() => { //wait until DOM is fully loaded\r\n        this.closeButton.focus();\r\n      },);\r\n      return;\r\n    }\r\n\r\n    setTimeout(() => { //wait until DOM is fully loaded\r\n      element.focus();\r\n    }, 0);\r\n  }\r\n\r\n  open() {\r\n    this.showModal = true;\r\n    try {\r\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\r\n        duration: 200,\r\n      });\r\n      anim.addEventListener('finish', () => {\r\n        // Setting focus on last item and removing immediately\r\n        // so, on tab press first element is focused\r\n        setTimeout(() => {\r\n          this.getLastFocusableElement()?.focus();\r\n          this.getLastFocusableElement()?.blur();\r\n        }, 0);\r\n\r\n        this.ifxOpen.emit();\r\n      });\r\n\r\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\r\n    } catch (err) {\r\n      this.ifxOpen.emit();\r\n    }\r\n  }\r\n\r\n  close() {\r\n    try {\r\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\r\n        duration: 200,\r\n      });\r\n      anim.addEventListener('finish', () => {\r\n        this.showModal = false;\r\n        this.ifxClose.emit();\r\n      });\r\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\r\n    } catch (err) {\r\n      this.showModal = false;\r\n      this.ifxClose.emit();\r\n    }\r\n  }\r\n\r\n  handleKeypress = (event: KeyboardEvent) => {\r\n    if (!this.showModal) {\r\n      return;\r\n    }\r\n    if (event.key === 'Escape') {\r\n      this.doBeforeClose('ESCAPE_KEY');\r\n    }\r\n  };\r\n\r\n  doBeforeClose(trigger: CloseEventTrigger) {\r\n    const triggers = [];\r\n    triggers.push(trigger);\r\n    const prevented = triggers.some((event) => event.defaultPrevented);\r\n    if (!prevented) {\r\n      this.opened = false;\r\n    }\r\n  }\r\n\r\n  @Watch('opened')\r\n  openedChanged(newValue) {\r\n    if (newValue === true) {\r\n      this.open();\r\n    } else {\r\n      this.close()\r\n    }\r\n  }\r\n\r\n  handleOverlayClick() {\r\n    if (this.closeOnOverlayClick) {\r\n      this.doBeforeClose('BACKDROP')\r\n    }\r\n  }\r\n\r\n  handleContentUpdate(e) {\r\n    const slotElement = e.target;\r\n    const nodes = slotElement.assignedNodes();\r\n    if (nodes.length > 0) {\r\n      nodes.forEach(node => {\r\n        if (node.observer) {\r\n          node.observer.disconnect();\r\n          delete node.observer;\r\n        }\r\n        const observer = new MutationObserver((mutationsList, _) => {\r\n          for (let mutation of mutationsList) {\r\n            if (mutation.type === 'childList') {\r\n              if (this.showModal) {\r\n                this.handleComponentOverflow();\r\n              }\r\n            }\r\n          }\r\n        });\r\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\r\n        node.observer = observer;\r\n      });\r\n    }\r\n  }\r\n\r\n  handleButtonsSlotChange(e) {\r\n    if (e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\r\n      this.slotButtonsPresent = true;\r\n    } else {\r\n      this.slotButtonsPresent = false;\r\n    }\r\n  }\r\n\r\n isModalContentContainerHeightReachedViewport() {\r\n  //Adding timeout for proper height detection on Edge browser\r\n  return new Promise(resolve => {\r\n    setTimeout(() => {\r\n      const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\r\n      const modalContentHeight = modalContent.offsetHeight;\r\n      const viewportHeight = window.innerHeight;\r\n      const extraMarginForEdgeBrowser = 3;\r\n      resolve(modalContentHeight + extraMarginForEdgeBrowser >= viewportHeight * 0.9);\r\n    }, 100);\r\n  });\r\n}\r\n\r\n\r\n  render() {\r\n    const isAlertVariant = this.variant !== 'default';\r\n    return (\r\n      <Host>\r\n        <div\r\n          ref={(el) => (this.modalContainer = el)}\r\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\r\n        >\r\n          <div\r\n            class=\"modal-overlay\"\r\n            onClick={() => this.handleOverlayClick()}\r\n          ></div>\r\n          <div\r\n            data-focus-trap-edge\r\n            onFocus={this.handleTopFocus}\r\n            tabindex=\"0\"\r\n          ></div>\r\n          <div\r\n            class={`modal-content-container ${this.size}`}\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-label={this.captionAriaLabel}>\r\n            {isAlertVariant ? (\r\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\r\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\r\n              </div>\r\n            ) : null}\r\n            <div class=\"modal-content\">\r\n              <div class=\"modal-header\">\r\n                <h2 class=\"modal-caption\">{this.caption}</h2>\r\n                {\r\n                  this.showCloseButton &&\r\n                  <ifx-icon-button class='modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}>\r\n                  </ifx-icon-button>\r\n                }\r\n              </div>\r\n              <div class=\"modal-body\">\r\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\r\n              </div>\r\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\r\n                <slot name=\"buttons\" onSlotchange={(e) => this.handleButtonsSlotChange(e)}>\r\n                </slot>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            data-focus-trap-edge\r\n            onFocus={this.handleBottomFocus}\r\n            tabindex=\"0\"\r\n          ></div>\r\n        </div>\r\n      </Host>\r\n\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["indicatorCss","Indicator","constructor","hostRef","this","inverted","variant","number","handleNumber","filteredNumber","isNaN","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","ariaLabel","class"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.indicator__container { \r\n  & .dot__wrapper { \r\n  display: flex;\r\n  width: 8px;\r\n  height: 8px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .number__container {\r\n  height: 16px;\r\n  display: inline-flex;\r\n  padding: 0; \r\n  min-width: 16px; \r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: 100px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n    & .number__wrapper {\r\n      padding: 0 4px;\r\n      color: tokens.$ifxColorBaseWhite;\r\n      text-align: center;\r\n      font-size: tokens.$ifxFontSizeS;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: 16px;\r\n    }\r\n\r\n    &.inverted {\r\n      background-color: tokens.$ifxColorBaseWhite;\r\n\r\n      & .number__wrapper {\r\n        color: tokens.$ifxColorOcean500;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n","import { Component, h, Prop, Element, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-indicator',\r\n  styleUrl: 'indicator.scss',\r\n  shadow: true\r\n})\r\nexport class Indicator {\r\n  @Element() el;\r\n  @State() filteredNumber: string | number;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() variant: string = 'number'\r\n  @Prop() number: number = 0;\r\n\r\n  handleNumber() {\r\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    this.handleNumber()\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-indicator', await framework)\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.handleNumber()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label={this.ariaLabel} class='indicator__container'>\r\n       {this.variant === 'number' && \r\n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\r\n          <div class=\"number__wrapper\">\r\n            {this.filteredNumber}\r\n          </div> \r\n       </div>}\r\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"iIAAA,MAAMA,EAAe,swB,MCURC,EAAS,MALtB,WAAAC,CAAAC,G,UAQUC,KAAQC,SAAY,MAEpBD,KAAOE,QAAW,SAClBF,KAAMG,OAAW,CAkC1B,CAhCC,YAAAC,GACEJ,KAAKK,gBAAkBC,MAAMN,KAAKG,SAAWH,KAAKG,OAAS,GAAK,MAAQH,KAAKG,M,CAG/E,iBAAAI,GACEP,KAAKI,c,CAGP,sBAAMI,GACJ,IAAIC,EAAuBT,KAAKU,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,sBAAuBF,E,EAI1C,mBAAAG,GACEd,KAAKI,c,CAGP,MAAAW,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAiBjB,KAAKkB,UAAWC,MAAM,wBACrCnB,KAAKE,UAAY,UAClBc,EAAA,OAAAC,IAAA,2CAAKE,MAAO,qBAAqBnB,KAAKC,SAAW,WAAa,MAC3De,EAAK,OAAAC,IAAA,2CAAAE,MAAM,mBACRnB,KAAKK,iBAGVL,KAAKE,UAAY,OAASc,EAAA,OAAAC,IAAA,2CAAKE,MAAM,iB","ignoreList":[]}