@infineon/infineon-design-system-stencil 37.3.0--canary.1950.5d11e48d4f0a54b6edf1ffbcc0d55a943f9c1f3c.0 → 37.3.0--canary.1950.61d3fed6d5f0962974379fa5cdf56607aae8be5d.0

package/dist/components/{p-c1454cb6.js.map → p-93da473c.js.map}

@@ -1 +1 @@
-{"file":"p-c1454cb6.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect-option.scss?tag=ifx-multiselect-option&encapsulation=shadow","src/components/select/multi-select/multiselect-option.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.option {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n  list-style: none;\n\n  &.option--expanded {\n    position: relative;\n  }\n\n  &.option--has-children {\n    position: relative;\n\n    .option-item > .chevron-wrapper {\n      display: flex;\n    }\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n    color: tokens.$ifxColorEngineering300;\n  }\n\n  &--selected {\n    // Additional styles for selected state if needed\n    // .option-item {\n    //   background: red;\n    // }\n  }\n\n  &.search-hidden {\n    display: none !important;\n  }\n\n  &.search-match {\n    .option-item {\n      .option-label {\n        .search-highlight {\n          font-weight: bold;\n          // color: tokens.$ifxColorOcean400;\n        }\n      }\n    }\n  }\n}\n\n.option-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n  min-height: tokens.$ifxSize250;\n  padding: tokens.$ifxSize50 tokens.$ifxSpace200;\n  background-color: tokens.$ifxColorBaseWhite;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  .option--disabled & {\n    &:hover {\n      background-color: transparent;\n    }\n  }\n}\n\n.option-children {\n  display: block;\n}\n\n.chevron-wrapper {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  margin-right: tokens.$ifxSpace100;\n  width: tokens.$ifxSize250;\n  height: tokens.$ifxSize250;\n  flex-shrink: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--has-children & {\n    display: flex;\n  }\n\n  .chevron {\n    transition: transform 0.2s ease-in-out;\n    color: tokens.$ifxColorEngineering600;\n\n    &.chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    &.chevron--collapsed {\n      transform: rotate(0deg);\n    }\n  }\n}\n\n.checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: tokens.$ifxSpace100;\n  flex-shrink: 0;\n}\n\n.option-label {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: tokens.$ifxSpace25 0;\n  font-size: tokens.$ifxFontSizeS;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--disabled & {\n    cursor: not-allowed;\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n","import { Component, Prop, Element, h, Host, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-multiselect-option',\n  styleUrl: 'multiselect-option.scss',\n  shadow: true,\n})\nexport class MultiselectOption {\n  @Element() el: HTMLElement;\n\n  @Prop() value: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n  @State() private isExpanded: boolean = false;\n  @State() private hasChildren: boolean = false;\n  @State() private depth: number = 0;\n  @State() private searchTerm: string = '';\n  @State() private isSearchActive: boolean = false;\n  @State() private isSearchDisabled: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.el.children.length > 0;\n    this.depth = this.calculateDepth();\n\n    this.el.setAttribute('data-level', this.depth.toString());\n\n     if (this.hasChildren) {\n      const hasSelectedChildren = this.hasAnySelectedChildren();\n      if (hasSelectedChildren) {\n        this.isExpanded = true;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    (this.el as any)['__stencil_instance'] = this;\n    this.notifyMultiselect();\n    this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  private handleSearchFilter = (event: CustomEvent) => {\n    const { searchTerm, isActive } = event.detail;\n    this.searchTerm = searchTerm.toLowerCase();\n    this.isSearchActive = isActive;\n\n    requestAnimationFrame(() => {\n      this.updateSearchClasses();\n    });\n  }\n\n  private updateSearchClasses() {\n    const optionDiv = this.el.shadowRoot?.querySelector('.option');\n    if (!optionDiv) return;\n\n    if (!this.isSearchActive) {\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.removeHighlighting();\n      this.isSearchDisabled = false;\n      return;\n    }\n\n    const textContent = this.getTextContent().toLowerCase();\n    const matchesSearch = textContent.includes(this.searchTerm);\n    const hasMatchingParent = this.hasMatchingParent();\n\n    requestAnimationFrame(() => {\n      const hasMatchingChildren = this.hasMatchingChildren();\n\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.isSearchDisabled = false;\n\n      if (matchesSearch && !this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n      } else if (matchesSearch && this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n        this.isExpanded = true;\n      } else if (!matchesSearch && this.hasChildren && hasMatchingChildren) {\n        optionDiv.classList.add('search-parent');\n        this.removeHighlighting();\n        this.isExpanded = true;\n        this.isSearchDisabled = true;\n      } else if (hasMatchingParent) {\n        optionDiv.classList.add('search-match');\n        this.removeHighlighting();\n      } else {\n        optionDiv.classList.add('search-hidden');\n        this.removeHighlighting();\n      }\n    });\n  }\n\n  private highlightSearchTerm() {\n    if (!this.searchTerm) return;\n\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    if (!slotElement) return;\n\n    this.removeHighlighting();\n\n    const originalText = this.getTextContent();\n    const searchTermLower = this.searchTerm.toLowerCase();\n    const originalTextLower = originalText.toLowerCase();\n\n    if (!originalTextLower.includes(searchTermLower)) return;\n\n    const searchIndex = originalTextLower.indexOf(searchTermLower);\n\n    if (searchIndex === -1) return;\n\n    const beforeMatch = originalText.substring(0, searchIndex);\n    const matchText = originalText.substring(searchIndex, searchIndex + searchTermLower.length);\n    const afterMatch = originalText.substring(searchIndex + searchTermLower.length);\n\n    const highlightedContent = document.createElement('span');\n    highlightedContent.className = 'highlighted-text';\n\n    if (beforeMatch) {\n      highlightedContent.appendChild(document.createTextNode(beforeMatch));\n    }\n\n    const boldElement = document.createElement('strong');\n    boldElement.className = 'search-highlight';\n    boldElement.textContent = matchText;\n    highlightedContent.appendChild(boldElement);\n\n    if (afterMatch) {\n      highlightedContent.appendChild(document.createTextNode(afterMatch));\n    }\n\n    labelElement.setAttribute('data-original-content', 'true');\n    slotElement.style.display = 'none';\n    labelElement.appendChild(highlightedContent);\n  }\n\n  private removeHighlighting() {\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    const highlightedElement = labelElement.querySelector('.highlighted-text');\n\n    if (highlightedElement) {\n      labelElement.removeChild(highlightedElement);\n    }\n\n    if (slotElement) {\n      slotElement.style.display = '';\n    }\n\n    labelElement.removeAttribute('data-original-content');\n  }\n\n  private getTextContent(): string {\n    let text = '';\n    Array.from(this.el.childNodes).forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        text += node.textContent?.trim() || '';\n      }\n    });\n    return text || this.value || '';\n  }\n\n  private hasMatchingChildren(): boolean {\n    if (!this.hasChildren) return false;\n\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (!childInstance) return false;\n\n      const childText = childInstance.getTextContent().toLowerCase();\n      const childMatches = childText.includes(this.searchTerm);\n      const grandChildrenMatch = childInstance.hasMatchingChildren();\n\n      return childMatches || grandChildrenMatch;\n    });\n  }\n\n  private hasMatchingParent(): boolean {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (parentInstance) {\n        const parentText = parentInstance.getTextContent().toLowerCase();\n        if (parentText.includes(this.searchTerm)) {\n          return true;\n        }\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private calculateDepth(): number {\n    let depth = 0;\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName !== 'IFX-MULTISELECT') {\n      if (parent.tagName === 'IFX-MULTISELECT-OPTION') {\n        depth++;\n      }\n      parent = parent.parentElement;\n    }\n    return depth;\n  }\n\n  @Listen('click')\n  handleClick(event: Event) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    if (event.type === 'click' && (event.target as HTMLElement).closest('.chevron-wrapper')) {\n      this.toggleExpansion();\n      return;\n    }\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    const target = event.target as HTMLElement;\n\n    if (target.closest('.chevron-wrapper') || target.closest('.checkbox-wrapper')) {\n      return;\n    }\n\n    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n      event.stopPropagation();\n    }\n\n    if (event.key === 'ArrowRight' && this.hasChildren) {\n      this.isExpanded = true;\n    }\n\n    if (event.key === 'ArrowLeft' && this.hasChildren) {\n      this.isExpanded = false;\n    }\n  }\n\n  private notifyMultiselect() {\n    const updateEvent = new CustomEvent('ifx-option-changed', {\n      bubbles: true,\n      detail: {\n        value: this.value,\n        selected: this.selected,\n        indeterminate: this.indeterminate\n      }\n    });\n    this.el.dispatchEvent(updateEvent);\n  }\n\n  private selectAllChildren(selected: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance) {\n        childInstance.selected = selected;\n        childInstance.indeterminate = false;\n\n        if (childInstance.hasChildren) {\n          childInstance.isExpanded = selected;\n          childInstance.selectAllChildren(selected);\n        }\n        childInstance.notifyMultiselect?.();\n      }\n    });\n  }\n\n  private expandAllChildren(expanded: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance && childInstance.hasChildren) {\n        childInstance.isExpanded = expanded;\n        childInstance.expandAllChildren(expanded);\n      }\n    });\n  }\n\n  private updateParentStates() {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (!parentInstance) {\n        parent = parent.parentElement;\n        continue;\n      }\n\n      const siblings = Array.from(parent.children)\n        .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n        .map(child => (child as any)['__stencil_instance'])\n        .filter(instance => instance !== null);\n\n      const selectedCount = siblings.filter(sibling => sibling.selected).length;\n      const indeterminateCount = siblings.filter(sibling => sibling.indeterminate).length;\n      const totalCount = siblings.length;\n\n      if (selectedCount === totalCount && indeterminateCount === 0) {\n        parentInstance.selected = true;\n        parentInstance.indeterminate = false;\n      } else if (selectedCount === 0 && indeterminateCount === 0) {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = false;\n      } else {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = true;\n      }\n\n      parentInstance.notifyMultiselect?.();\n      parent = parent.parentElement;\n    }\n  }\n\n  private toggleExpansion() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  private handleCheckboxClick = (event: Event) => {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  private handleHeaderClick = (event: Event) => {\n    event.stopPropagation();\n    if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {\n      this.handleClick(event);\n    }\n  }\n\n  private hasAnySelectedChildren(): boolean {\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const hasSelected = child.hasAttribute('selected');\n      const hasSelectedDescendants = this.checkForSelectedDescendants(child);\n\n      return hasSelected || hasSelectedDescendants;\n    });\n  }\n\n  private checkForSelectedDescendants(element: HTMLElement): boolean {\n    const nestedOptions = Array.from(element.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return nestedOptions.some(nestedChild => {\n      const isSelected = nestedChild.hasAttribute('selected');\n      const hasSelectedNested = this.checkForSelectedDescendants(nestedChild);\n\n      return isSelected || hasSelectedNested;\n    });\n  }\n\n  render() {\n    let isFlatMultiselect = false;\n    const parentMultiselect = this.el.closest('ifx-multiselect');\n    if (parentMultiselect) {\n      const allOptions = Array.from(parentMultiselect.querySelectorAll('ifx-multiselect-option'));\n      isFlatMultiselect = allOptions.every(option => option.children.length === 0);\n    }\n\n    const basePadding = this.depth * 28 + 16;\n    const additionalPadding = this.hasChildren ? 0 : 28;\n    let totalPadding = basePadding + additionalPadding;\n\n    const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'option': true,\n            'option--has-children': this.hasChildren,\n            'option--expanded': this.isExpanded,\n            'option--disabled': this.disabled,\n            'option--selected': this.selected,\n          }}\n          role=\"option\"\n          aria-expanded={this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined}\n          aria-selected={this.selected ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          data-level={this.depth}\n          data-value={this.value}\n        >\n          <div\n            class=\"option-item\"\n            style={optionItemStyle}\n          >\n            <div\n              class=\"chevron-wrapper\"\n              tabIndex={this.hasChildren ? 0 : -1}\n              role={this.hasChildren ? \"button\" : undefined}\n              aria-label={this.hasChildren ? (this.isExpanded ? \"Collapse\" : \"Expand\") : undefined}\n              onClick={(e) => { e.stopPropagation(); this.toggleExpansion(); }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  this.toggleExpansion();\n                }\n              }}\n            >\n              {this.hasChildren && (\n                <ifx-icon\n                  class={`chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`}\n                  icon=\"chevron-right-16\"\n                />\n              )}\n            </div>\n\n            <div class=\"checkbox-wrapper\" onClick={(e) => e.stopPropagation()}>\n              <ifx-checkbox\n                size='s'\n                checked={(this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected)}\n                indeterminate={(this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate}\n                onClick={this.handleCheckboxClick}\n                disabled={this.disabled || (this.isSearchActive && this.isSearchDisabled)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    this.handleCheckboxClick(e);\n                  }\n                }}\n              />\n            </div>\n\n            <div\n              class=\"option-label\"\n              onClick={this.handleHeaderClick}\n              tabIndex={-1}\n            >\n              <slot/>\n            </div>\n          </div>\n\n          {this.isExpanded && <div class=\"option-children\"><slot name=\"children\"/></div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-93da473c.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect-option.scss?tag=ifx-multiselect-option&encapsulation=shadow","src/components/select/multi-select/multiselect-option.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.option {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n  list-style: none;\n\n  &.option--expanded {\n    position: relative;\n  }\n\n  &.option--has-children {\n    position: relative;\n\n    .option-item > .chevron-wrapper {\n      display: flex;\n    }\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n    color: tokens.$ifxColorEngineering300;\n  }\n\n  &--selected {\n    // Additional styles for selected state if needed\n    // .option-item {\n    //   background: red;\n    // }\n  }\n\n  &.search-hidden {\n    display: none !important;\n  }\n\n  &.search-match {\n    .option-item {\n      .option-label {\n        .search-highlight {\n          font-weight: bold;\n          // color: tokens.$ifxColorOcean400;\n        }\n      }\n    }\n  }\n}\n\n.option-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n  min-height: tokens.$ifxSize250;\n  padding: tokens.$ifxSize50 tokens.$ifxSpace200;\n  background-color: tokens.$ifxColorBaseWhite;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  .option--disabled & {\n    &:hover {\n      background-color: transparent;\n    }\n  }\n}\n\n.option-children {\n  display: block;\n}\n\n.chevron-wrapper {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  margin-right: tokens.$ifxSpace100;\n  width: tokens.$ifxSize250;\n  height: tokens.$ifxSize250;\n  flex-shrink: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--has-children & {\n    display: flex;\n  }\n\n  .chevron {\n    transition: transform 0.2s ease-in-out;\n    color: tokens.$ifxColorEngineering600;\n\n    &.chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    &.chevron--collapsed {\n      transform: rotate(0deg);\n    }\n  }\n}\n\n.checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: tokens.$ifxSpace100;\n  flex-shrink: 0;\n}\n\n.option-label {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: tokens.$ifxSpace25 0;\n  font-size: tokens.$ifxFontSizeS;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n    border-radius: tokens.$ifxBorderRadius12;\n  }\n\n  .option--disabled & {\n    cursor: not-allowed;\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n","import { Component, Prop, Element, h, Host, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-multiselect-option',\n  styleUrl: 'multiselect-option.scss',\n  shadow: true,\n})\nexport class MultiselectOption {\n  @Element() el: HTMLElement;\n\n  @Prop() value: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n  @State() private isExpanded: boolean = false;\n  @State() private hasChildren: boolean = false;\n  @State() private depth: number = 0;\n  @State() private searchTerm: string = '';\n  @State() private isSearchActive: boolean = false;\n  @State() private isSearchDisabled: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.el.children.length > 0;\n    this.depth = this.calculateDepth();\n\n    this.el.setAttribute('data-level', this.depth.toString());\n\n     if (this.hasChildren) {\n      const hasSelectedChildren = this.hasAnySelectedChildren();\n      if (hasSelectedChildren) {\n        this.isExpanded = true;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    (this.el as any)['__stencil_instance'] = this;\n    this.notifyMultiselect();\n    this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('ifx-search-filter', this.handleSearchFilter);\n  }\n\n  private handleSearchFilter = (event: CustomEvent) => {\n    const { searchTerm, isActive } = event.detail;\n    this.searchTerm = searchTerm.toLowerCase();\n    this.isSearchActive = isActive;\n\n    requestAnimationFrame(() => {\n      this.updateSearchClasses();\n    });\n  }\n\n  private updateSearchClasses() {\n    const optionDiv = this.el.shadowRoot?.querySelector('.option');\n    if (!optionDiv) return;\n\n    if (!this.isSearchActive) {\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.removeHighlighting();\n      this.isSearchDisabled = false;\n      return;\n    }\n\n    const textContent = this.getTextContent().toLowerCase();\n    const matchesSearch = textContent.includes(this.searchTerm);\n    const hasMatchingParent = this.hasMatchingParent();\n\n    requestAnimationFrame(() => {\n      const hasMatchingChildren = this.hasMatchingChildren();\n\n      optionDiv.classList.remove('search-hidden', 'search-parent', 'search-match');\n      this.isSearchDisabled = false;\n\n      if (matchesSearch && !this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n      } else if (matchesSearch && this.hasChildren) {\n        optionDiv.classList.add('search-match');\n        this.highlightSearchTerm();\n        this.isExpanded = true;\n      } else if (!matchesSearch && this.hasChildren && hasMatchingChildren) {\n        optionDiv.classList.add('search-parent');\n        this.removeHighlighting();\n        this.isExpanded = true;\n        this.isSearchDisabled = true;\n      } else if (hasMatchingParent) {\n        optionDiv.classList.add('search-match');\n        this.removeHighlighting();\n      } else {\n        optionDiv.classList.add('search-hidden');\n        this.removeHighlighting();\n      }\n    });\n  }\n\n  private highlightSearchTerm() {\n    if (!this.searchTerm) return;\n\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    if (!slotElement) return;\n\n    this.removeHighlighting();\n\n    const originalText = this.getTextContent();\n    const searchTermLower = this.searchTerm.toLowerCase();\n    const originalTextLower = originalText.toLowerCase();\n\n    if (!originalTextLower.includes(searchTermLower)) return;\n\n    const searchIndex = originalTextLower.indexOf(searchTermLower);\n\n    if (searchIndex === -1) return;\n\n    const beforeMatch = originalText.substring(0, searchIndex);\n    const matchText = originalText.substring(searchIndex, searchIndex + searchTermLower.length);\n    const afterMatch = originalText.substring(searchIndex + searchTermLower.length);\n\n    const highlightedContent = document.createElement('span');\n    highlightedContent.className = 'highlighted-text';\n\n    if (beforeMatch) {\n      highlightedContent.appendChild(document.createTextNode(beforeMatch));\n    }\n\n    const boldElement = document.createElement('strong');\n    boldElement.className = 'search-highlight';\n    boldElement.textContent = matchText;\n    highlightedContent.appendChild(boldElement);\n\n    if (afterMatch) {\n      highlightedContent.appendChild(document.createTextNode(afterMatch));\n    }\n\n    labelElement.setAttribute('data-original-content', 'true');\n    slotElement.style.display = 'none';\n    labelElement.appendChild(highlightedContent);\n  }\n\n  private removeHighlighting() {\n    const labelElement = this.el.shadowRoot?.querySelector('.option-label');\n    if (!labelElement) return;\n\n    const slotElement = labelElement.querySelector('slot');\n    const highlightedElement = labelElement.querySelector('.highlighted-text');\n\n    if (highlightedElement) {\n      labelElement.removeChild(highlightedElement);\n    }\n\n    if (slotElement) {\n      slotElement.style.display = '';\n    }\n\n    labelElement.removeAttribute('data-original-content');\n  }\n\n  private getTextContent(): string {\n    let text = '';\n    Array.from(this.el.childNodes).forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        text += node.textContent?.trim() || '';\n      }\n    });\n    return text || this.value || '';\n  }\n\n  private hasMatchingChildren(): boolean {\n    if (!this.hasChildren) return false;\n\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (!childInstance) return false;\n\n      const childText = childInstance.getTextContent().toLowerCase();\n      const childMatches = childText.includes(this.searchTerm);\n      const grandChildrenMatch = childInstance.hasMatchingChildren();\n\n      return childMatches || grandChildrenMatch;\n    });\n  }\n\n  private hasMatchingParent(): boolean {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (parentInstance) {\n        const parentText = parentInstance.getTextContent().toLowerCase();\n        if (parentText.includes(this.searchTerm)) {\n          return true;\n        }\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private calculateDepth(): number {\n    let depth = 0;\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName !== 'IFX-MULTISELECT') {\n      if (parent.tagName === 'IFX-MULTISELECT-OPTION') {\n        depth++;\n      }\n      parent = parent.parentElement;\n    }\n    return depth;\n  }\n\n  @Listen('click')\n  handleClick(event: Event) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    if (event.type === 'click' && (event.target as HTMLElement).closest('.chevron-wrapper')) {\n      this.toggleExpansion();\n      return;\n    }\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    const target = event.target as HTMLElement;\n\n    if (target.closest('.chevron-wrapper') || target.closest('.checkbox-wrapper')) {\n      return;\n    }\n\n    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n      event.stopPropagation();\n    }\n\n    if (event.key === 'ArrowRight' && this.hasChildren) {\n      this.isExpanded = true;\n    }\n\n    if (event.key === 'ArrowLeft' && this.hasChildren) {\n      this.isExpanded = false;\n    }\n  }\n\n  private notifyMultiselect() {\n    const updateEvent = new CustomEvent('ifx-option-changed', {\n      bubbles: true,\n      detail: {\n        value: this.value,\n        selected: this.selected,\n        indeterminate: this.indeterminate\n      }\n    });\n    this.el.dispatchEvent(updateEvent);\n  }\n\n  private selectAllChildren(selected: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance) {\n        childInstance.selected = selected;\n        childInstance.indeterminate = false;\n\n        if (childInstance.hasChildren) {\n          childInstance.isExpanded = selected;\n          childInstance.selectAllChildren(selected);\n        }\n        childInstance.notifyMultiselect?.();\n      }\n    });\n  }\n\n  private expandAllChildren(expanded: boolean) {\n    const directChildren = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as any[];\n\n    directChildren.forEach((child: any) => {\n      const childInstance = child['__stencil_instance'];\n      if (childInstance && childInstance.hasChildren) {\n        childInstance.isExpanded = expanded;\n        childInstance.expandAllChildren(expanded);\n      }\n    });\n  }\n\n  private updateParentStates() {\n    let parent = this.el.parentElement;\n    while (parent && parent.tagName === 'IFX-MULTISELECT-OPTION') {\n      const parentInstance = (parent as any)['__stencil_instance'];\n      if (!parentInstance) {\n        parent = parent.parentElement;\n        continue;\n      }\n\n      const siblings = Array.from(parent.children)\n        .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n        .map(child => (child as any)['__stencil_instance'])\n        .filter(instance => instance !== null);\n\n      const selectedCount = siblings.filter(sibling => sibling.selected).length;\n      const indeterminateCount = siblings.filter(sibling => sibling.indeterminate).length;\n      const totalCount = siblings.length;\n\n      if (selectedCount === totalCount && indeterminateCount === 0) {\n        parentInstance.selected = true;\n        parentInstance.indeterminate = false;\n      } else if (selectedCount === 0 && indeterminateCount === 0) {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = false;\n      } else {\n        parentInstance.selected = false;\n        parentInstance.indeterminate = true;\n      }\n\n      parentInstance.notifyMultiselect?.();\n      parent = parent.parentElement;\n    }\n  }\n\n  private toggleExpansion() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  private handleCheckboxClick = (event: Event) => {\n    if (this.disabled || (this.isSearchActive && this.isSearchDisabled)) return;\n\n    event.stopPropagation();\n\n    let newSelectedState: boolean;\n\n    if (this.indeterminate) {\n      newSelectedState = true;\n    } else {\n      newSelectedState = !this.selected;\n    }\n\n    this.selected = newSelectedState;\n    this.indeterminate = false;\n\n    if (this.hasChildren) {\n      this.isExpanded = newSelectedState;\n\n      requestAnimationFrame(() => {\n        this.selectAllChildren(newSelectedState);\n        this.expandAllChildren(newSelectedState);\n      });\n    }\n\n    this.updateParentStates();\n    this.notifyMultiselect();\n  }\n\n  private handleHeaderClick = (event: Event) => {\n    event.stopPropagation();\n    if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {\n      this.handleClick(event);\n    }\n  }\n\n  private hasAnySelectedChildren(): boolean {\n    const childOptions = Array.from(this.el.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return childOptions.some(child => {\n      const hasSelected = child.hasAttribute('selected');\n      const hasSelectedDescendants = this.checkForSelectedDescendants(child);\n\n      return hasSelected || hasSelectedDescendants;\n    });\n  }\n\n  private checkForSelectedDescendants(element: HTMLElement): boolean {\n    const nestedOptions = Array.from(element.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION') as HTMLElement[];\n\n    return nestedOptions.some(nestedChild => {\n      const isSelected = nestedChild.hasAttribute('selected');\n      const hasSelectedNested = this.checkForSelectedDescendants(nestedChild);\n\n      return isSelected || hasSelectedNested;\n    });\n  }\n\n  render() {\n    let isFlatMultiselect = false;\n    const parentMultiselect = this.el.closest('ifx-multiselect');\n    if (parentMultiselect) {\n      const allOptions = Array.from(parentMultiselect.querySelectorAll('ifx-multiselect-option'));\n      isFlatMultiselect = allOptions.every(option => option.children.length === 0);\n    }\n\n    const basePadding = this.depth * 28 + 16;\n    const additionalPadding = this.hasChildren ? 0 : 28;\n    let totalPadding = basePadding + additionalPadding;\n\n    const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'option': true,\n            'option--has-children': this.hasChildren,\n            'option--expanded': this.isExpanded,\n            'option--disabled': this.disabled,\n            'option--selected': this.selected,\n          }}\n          role=\"option\"\n          aria-expanded={this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined}\n          aria-selected={this.selected ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          data-level={this.depth}\n          data-value={this.value}\n        >\n          <div\n            class=\"option-item\"\n            style={optionItemStyle}\n          >\n            <div\n              class=\"chevron-wrapper\"\n              tabIndex={this.hasChildren ? 0 : -1}\n              role={this.hasChildren ? \"button\" : undefined}\n              aria-label={this.hasChildren ? (this.isExpanded ? \"Collapse\" : \"Expand\") : undefined}\n              onClick={(e) => { e.stopPropagation(); this.toggleExpansion(); }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  this.toggleExpansion();\n                }\n              }}\n            >\n              {this.hasChildren && (\n                <ifx-icon\n                  class={`chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`}\n                  icon=\"chevron-right-16\"\n                />\n              )}\n            </div>\n\n            <div class=\"checkbox-wrapper\" onClick={(e) => e.stopPropagation()}>\n              <ifx-checkbox\n                size='s'\n                checked={(this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected)}\n                indeterminate={(this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate}\n                onClick={this.handleCheckboxClick}\n                disabled={this.disabled || (this.isSearchActive && this.isSearchDisabled)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    this.handleCheckboxClick(e);\n                  }\n                }}\n              />\n            </div>\n\n            <div\n              class=\"option-label\"\n              onClick={this.handleHeaderClick}\n              tabIndex={-1}\n            >\n              <slot/>\n            </div>\n          </div>\n\n          {this.isExpanded && <div class=\"option-children\"><slot name=\"children\"/></div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-43aee8a3.js → p-9746abcc.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-fb9d6e9c.js';
+import { d as defineCustomElement$1 } from './p-185e5fb9.js';
 
 const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 const IfxAccordionItemStyle0 = accordionItemCss;
@@ -116,4 +116,4 @@ function defineCustomElement() {
 
 export { IfxAccordionItem as I, defineCustomElement as d };
 
-//# sourceMappingURL=p-43aee8a3.js.map
+//# sourceMappingURL=p-9746abcc.js.map

package/dist/components/{p-43aee8a3.js.map → p-9746abcc.js.map}

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

package/dist/components/{p-5f4d5dd9.js → p-bd56aa1d.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-1de6e751.js';
+import { d as detectFramework, t as trackComponent } from './p-e48e9f36.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as classNames } from './p-5cdc6210.js';
 
@@ -76,7 +76,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
         this.handleFormAndInternalHref();
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-button', { framework });
+            trackComponent('ifx-button', framework);
         }
     }
     componentWillRender() {
@@ -106,7 +106,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
         }
     }
     render() {
-        return (h(Host, { key: '0a1c5f63dd22081cfa4c46e4d766ec4fd23e4bc0' }, h("a", { key: 'e86870587c74f8c58ea7f4bd9fe8ca7b8ff9517a', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: 'cc1c06e48034beab75a99fce1593fcdcb4d70950' }))));
+        return (h(Host, { key: '4f6edce27cacd5d9859790e028cabf756b65463b' }, h("a", { key: 'd3a7759dbd2ed5128c5919e187c70ee82abfc643', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '54e7e801f580008fc48688446cf58b304c283067' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -167,4 +167,4 @@ function defineCustomElement() {
 
 export { Button as B, defineCustomElement as d };
 
-//# sourceMappingURL=p-5f4d5dd9.js.map
+//# sourceMappingURL=p-bd56aa1d.js.map

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

@@ -0,0 +1 @@
+{"file":"p-bd56aa1d.js","mappings":"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","names":[],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-button', framework)\n    }\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.ariaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

package/dist/components/{p-c16d6ad7.js → p-d2fd824d.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-1de6e751.js';
+import { d as detectFramework, t as trackComponent } from './p-e48e9f36.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-fb9d6e9c.js';
-import { d as defineCustomElement$1 } from './p-68ca5a7a.js';
+import { d as defineCustomElement$2 } from './p-185e5fb9.js';
+import { d as defineCustomElement$1 } from './p-2ce5aa1a.js';
 
 const chipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";
 const IfxChipStyle0 = chipCss;
@@ -267,21 +267,21 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
         this.syncSelectedOptionsWithProp(this.value);
         if (!isNestedInIfxComponent(this.chip)) {
             const framework = detectFramework();
-            trackComponent('ifx-chip', { framework });
+            trackComponent('ifx-chip', framework);
         }
     }
     render() {
-        return (h("div", { key: '3f05ba1ca7c4de87ea052810e3e60c0107d49373', class: 'chip' }, h("div", { key: '1837c6ecefb4de1a06a3168b965939aa6a093bb7', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (h("div", { key: '2887760be748d5a333b778a92c7975b48eceac6b', class: 'chip' }, h("div", { key: '0dc14b29f346fa5bab4e3e32975c365314472567', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '5143e079a26e9534aea38377cd7429759e1b3cb8', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '54c9693e8bba3aaff3b5b1cd7264135328324951', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: 'd6b66813fb5ff94539cad79c697b44a5ee7c0e3d', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-indicator", { key: '9304726fc633ef4d797c63acff117c72ea78883f', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: 'd2cb682305cd13d7ad5a43eaa7dd13b021b2e31f', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            h("div", { key: '7a969cadf73deae06bd7b5267c2608940fd89ef4', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: '920332cd0ee12d9ede63febe93ee01d9aa92672e', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: '85a57a0fa3a7ab43efa46226c38d82754c2eff2c', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '095a816953c6a4eb4b05282f9e37ac99b7a7b855' }))));
+            h("div", { key: '201bfee34f671859fa9b750c94bfd6b8f6f47321', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-indicator", { key: 'c3db767892120d8f7c90b2fe09cba833b3c0c22f', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: 'de80135bb67fdfe7708f89025c8363eac1985fd6', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            h("div", { key: 'd936033fa0ec350fa798fe1e43216d101378a233', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: '649b60778aa9cd4c1318921ea6888ab6f4b3698c', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: 'ca66107d496bb8ff918b9d28e0c5e447daf6a92a', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '172d517f06ea70afff1650b1150812516ad763e7' }))));
     }
     get chip() { return this; }
     static get watchers() { return {
@@ -328,4 +328,4 @@ function defineCustomElement() {
 
 export { Chip as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-c16d6ad7.js.map
+//# sourceMappingURL=p-d2fd824d.js.map

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

@@ -0,0 +1 @@
+{"file":"p-d2fd824d.js","mappings":"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","names":[],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n    if(!isNestedInIfxComponent(this.chip)) { \n      const framework = detectFramework();\n      trackComponent('ifx-chip', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.ariaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-indicator variant='number' number={this.selectedOptions.length - 2}></ifx-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevron-down-16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm/framework-detection-bbcf3ea1.js → components/p-e48e9f36.js}

@@ -25,10 +25,14 @@ function initializeTracking() {
         pp.parentNode.insertBefore(n, pp);
     })(document, "script");
 }
-function trackComponent(componentName, metadata = {}) {
+function trackComponent(componentName, environment) {
     if (!window.btnt)
         initializeTracking();
-    window.btnt(Object.assign({ event_name: "component_initialized", component_name: componentName }, metadata));
+    window.btnt({
+        event_name: "component_initialized",
+        component_name: componentName,
+        environment: environment
+    });
 }
 
 const detectFramework = () => {
@@ -50,4 +54,4 @@ const detectFramework = () => {
 
 export { detectFramework as d, trackComponent as t };
 
-//# sourceMappingURL=framework-detection-bbcf3ea1.js.map
+//# sourceMappingURL=p-e48e9f36.js.map

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

@@ -0,0 +1 @@
+{"file":"p-e48e9f36.js","mappings":"AAQA,SAAS,kBAAkB;IACvB,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;QACzB,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE;YACzC,MAAM,CAAC,UAAU,GAAG;gBACpB,MAAM,EAAE,4BAA4B;gBACpC,WAAW,EAAE,IAAI;gBACjB,YAAY,EAAE,EAAE;aACf,CAAC;SACH;QAED,IAAI,MAAM,CAAC,MAAM,CAAC;YAAE,OAAO;QAE3B,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;YAC1B,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;gBACzB,CAAC,GAAG,EAAE,CAAC;aACR;YACD,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,QAAQ,EAAE;gBACxC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;YACD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC1B,CAAC;QAEF,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,EAAE,GAAG,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;QAC9C,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;KAEnC,EAAE,QAAQ,EAAE,QAAQ,CAAG,CAAC;AAC3B,CAAC;SAEe,cAAc,CAAC,aAAqB,EAAE,WAAmB;IACzE,IAAI,CAAC,MAAM,CAAC,IAAI;QAAE,kBAAkB,EAAE,CAAC;IAEvC,MAAM,CAAC,IAAI,CAAC;QACV,UAAU,EAAE,uBAAuB;QACnC,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,WAAW;KACzB,CAAC,CAAC;AACJ;;MC/CY,eAAe,GAAG;IAC7B,MAAM,GAAG,GAAG,MAAa,CAAC;IAE1B,IAAG,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,kCAAkC,CAAC;QAC7E,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAM,KAAK,CAAC,CAAC,mBAAmB,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC7J;QACA,OAAO,OAAO,CAAA;KACf;IAGD,IAAG,CAAC,CAAC,GAAG,CAAC,yBAAyB;QACjC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,6GAA6G,CAAC;QACvI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,0DAA0D,CAAC,EACrF;QACA,OAAO,SAAS,CAAA;KACjB;IAGC,IAAG,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE;QAChB,OAAO,KAAK,CAAA;KACb;IAED,OAAO,SAAS,CAAA;AAClB;;;;","names":[],"sources":["src/global/utils/tracking.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\n  interface Window {\n    btntConfig?: any;\n    btntQueue?: any[];\n    btnt?: (data: object) => void; \n  }\n}\n\nfunction initializeTracking() { \n    (function (t, r, _kk, n, pp) {\n      if (typeof window.btntConfig !== \"object\") {\n        window.btntConfig = {\n        domain: \"https://ssgtm.infineon.com\",\n        withCookies: true,\n        maxBatchSize: 10\n        };\n      }\n\n      if (window[\"btnt\"]) return;\n\n      window[\"btnt\"] = function (z) {\n        if (typeof z !== \"object\") {\n          z = {};\n        }\n        if (typeof window.btntQueue !== \"object\") {\n          window.btntQueue = [];\n        }\n        window.btntQueue.push(z);\n      };\n\n      n = t.createElement(r);\n      pp = t.getElementsByTagName(r)[0];\n      n.async = 1;\n      n.src = window.btntConfig.domain + \"/btnt.js\";\n      pp.parentNode.insertBefore(n, pp);\n      \n    })(document, \"script\", );\n  }\n\n  export function trackComponent(componentName: string, environment: string) {\n  if (!window.btnt) initializeTracking();\n  \n  window.btnt({\n    event_name: \"component_initialized\",\n    component_name: componentName,\n    environment: environment\n  });\n } \n\n  export default trackComponent","export const detectFramework = (): string => {\n  const win = window as any;\n\n  if(!!win.React || !!document.querySelector('[data-reactroot], [data-reactid]') ||\n   Array.from(document.querySelectorAll('*')).some((e: any) => e._reactRootContainer !== undefined || Object.keys(e).some(k => k.startsWith('__reactContainer')))\n  ) { \n    return 'React'\n  }\n  \n \n  if(!!win.getAllAngularRootElements || \n   !!document.querySelector('[ng-version], [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||\n   !!document.querySelector('script[src*=\"angular.js\"], script[src*=\"angular.min.js\"]')\n) {\n  return 'Angular'\n}\n  \n\n  if(!!win.__VUE__) {\n    return 'Vue'\n  }\n\n  return 'vanilla'\n};"],"version":3}

package/dist/components/{p-a2d11841.js → p-eb02a6c6.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-1de6e751.js';
+import { d as detectFramework, t as trackComponent } from './p-e48e9f36.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as classNames } from './p-5cdc6210.js';
 
@@ -16,12 +16,12 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends H {
     componentWillLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-spinner', { framework });
+            trackComponent('ifx-spinner', framework);
         }
     }
     render() {
-        return (h("div", { key: '54c0c539f550c4d81ce1791f5be1e0ee6e9321ee', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '367af3a16a20348d203165a01733a318d541d038', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '6a057950ec966bac8599b4d7d72d16f80a46684d', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '5ec05dd564f78984fd6bb837c6609e536166032f', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '9faac7eeecef73b32d1b99eef01c546b1c66a95f', id: "spinner/conductor" }, h("path", { key: 'f10ab67b4bcb7cbdb828101a0414b42da58444bb', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (h("div", { key: 'd1308117223db979d7a4caf123bf0d1c017d3df2', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '890097f80a403f78cfdbad8d6393dbc8f994b1b3', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '63d937d775e2071ab21c454aa2baf9609e06b372', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '2c28fb566992ed63ed10e7c2bb85a973e2217a21', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'bbca58748ad55d2040e4e7311205e5c010dcf719', id: "spinner/conductor" }, h("path", { key: '88a524bfea6a5ea585ef9b3c9bcf715252a98f49', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -54,4 +54,4 @@ function defineCustomElement() {
 
 export { Spinner as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-a2d11841.js.map
+//# sourceMappingURL=p-eb02a6c6.js.map

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

@@ -0,0 +1 @@
+{"file":"p-eb02a6c6.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCUZ,OAAO;IALpB;;;;QASU,aAAQ,GAAY,KAAK,CAAC;KAqCnC;IAnCC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;SACzC;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-bd59bc9d.js → p-f8b426b4.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-1de6e751.js';
+import { d as detectFramework, t as trackComponent } from './p-e48e9f36.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$1 } from './p-fb9d6e9c.js';
+import { d as defineCustomElement$1 } from './p-185e5fb9.js';
 
 const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
 const IfxSearchFieldStyle0 = searchFieldCss;
@@ -52,7 +52,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
     componentWillLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-search-field', { framework });
+            trackComponent('ifx-search-field', framework);
         }
     }
     componentWillUpdate() {
@@ -63,7 +63,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'd63e9621bffdfa10b5f6318d365944bfe5dd4a61', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '7e3e888e62d0f1c05e31c68f32b0ea2ad557ed52', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '3c463a2ac0a33dfa3360b28f0daeb605f1bd6a94', icon: "search-16", class: "search-icon" }), h("input", { key: '71e992cc98ace8c6fa75e9c484f0a0468a6bcd12', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: '9fc533f4b78780dc5598654a19f501738861edf4', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'a858de24ef3578b32c9be84da398888d675d0764', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: 'c82efe61de13b7f8deb36881601e1d7b914edb2e', icon: "search-16", class: "search-icon" }), h("input", { key: 'e1109578ab00e9d1ecef0cc615888730cb0ffb4a', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -113,4 +113,4 @@ function defineCustomElement() {
 
 export { SearchField as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-bd59bc9d.js.map
+//# sourceMappingURL=p-f8b426b4.js.map

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

@@ -0,0 +1 @@
+{"file":"p-f8b426b4.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-field', framework)\n    }\n  }\n  \n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}