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

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

@@ -1 +0,0 @@
-{"file":"p-CIgjv3WT.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,wLAAwL;;MCUhM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6BtC;AA3BC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKpD,MAAM,UAAU,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAMhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace100;\r\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion',\r\n  styleUrl: 'accordion.scss',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n  @Element() el: HTMLElement;\r\n  @Prop() autoCollapse: boolean = false;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-accordion', await framework)\r\n    }\r\n  }\r\n\r\n  @Listen('ifxOpen')\r\n  async onItemOpen(event: CustomEvent) {\r\n    if (this.autoCollapse) {\r\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n      for (const item of items) {\r\n        const itemElement = item as HTMLIfxAccordionItemElement;\r\n        if (itemElement !== event.target && (await itemElement.open)) {\r\n          itemElement.open = false;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"accordion-wrapper\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-D3I_SqHt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.search-field {\r\n  box-sizing: border-box;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  width: 100%;\r\n  font-family: var(--ifx-font-family);\r\n  position: relative; // Wichtig für absolute positioning des Dropdowns\r\n\r\n  .search-field__wrapper {\r\n    box-sizing: border-box;\r\n    height: tokens.$ifxSize500;\r\n    display: flex;\r\n    align-items: center;\r\n    border: 1px solid #8d8786;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    gap: tokens.$ifxSpace150;\r\n    flex: none;\r\n    order: 0;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n    position: relative;\r\n    width: 100%;\r\n    outline: none;\r\n\r\n    &:focus-visible:not(.disabled) {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    &.search-field__wrapper-s {\r\n      height: 36px;\r\n    }\r\n\r\n    &:hover:not(.focused, :focus) {\r\n      border: 1px solid #3c3a39;\r\n    }\r\n\r\n    & .delete-icon {\r\n      outline: 1px solid transparent;\r\n      right: 12px;\r\n      cursor: pointer;\r\n      &:focus-visible {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 1px;\r\n      }\r\n    }\r\n\r\n    input[type='text'] {\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      font-size: 16px;\r\n      //line-height: 24px;\r\n      color: #8d8786;\r\n      border: none;\r\n      width: 100%;\r\n      outline: none;\r\n      //height: 100%;\r\n      height: 16px;\r\n\r\n      &:focus {\r\n        outline: none;\r\n        color: #1d1d1d;\r\n      }\r\n\r\n      &:disabled {\r\n        background: tokens.$ifxColorEngineering300;\r\n        color: tokens.$ifxColorBaseWhite;\r\n\r\n        &::placeholder {\r\n          color: tokens.$ifxColorBaseWhite;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background: tokens.$ifxColorEngineering300;\r\n      border: none;\r\n      color: tokens.$ifxColorBaseWhite;\r\n\r\n      &:hover {\r\n        border: none;\r\n        outline: none;\r\n      }\r\n\r\n      & .delete-icon { \r\n        cursor: default;\r\n        &:focus-visible { \r\n          outline: 1px solid transparent;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // Suggestions Dropdown Styles\r\n  .suggestions-dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    background: tokens.$ifxColorBaseWhite;\r\n    margin-top: tokens.$ifxSpace50;\r\n    border: 1px solid tokens.$ifxColorEngineering200;\r\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\r\n    z-index: 1000;\r\n    max-height: 300px;\r\n    overflow-y: auto;\r\n    container-type: inline-size; // Enable container queries\r\n\r\n    .suggestions-header {\r\n      // font: tokens.$ifxEyebrowEyebrow02; TODO\r\n      font-family: Source Sans 3;\r\n      font-size: 0.8125rem;\r\n      font-weight: 600;\r\n      line-height: 1.25rem;\r\n\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: tokens.$ifxColorEngineering500;\r\n      border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n    }\r\n\r\n    .suggestion-item {\r\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n      cursor: pointer;\r\n      transition: background-color 0.2s ease;\r\n\r\n      &:last-child {\r\n        border-bottom: none;\r\n      }\r\n\r\n      &:hover,\r\n      &--selected {\r\n        background-color: tokens.$ifxColorEngineering200;\r\n      }\r\n\r\n      .suggestion-content {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: tokens.$ifxSpace150;\r\n\r\n        .suggestion-icon {\r\n          color: tokens.$ifxColorEngineering500;\r\n          flex-shrink: 0;\r\n\r\n          &--history {\r\n            color: tokens.$ifxColorEngineering500;\r\n          }\r\n        }\r\n\r\n        .suggestion-text {\r\n          flex: 1;\r\n          display: flex;\r\n          align-items: center;\r\n          min-width: 0; // Important for flexbox truncation\r\n\r\n          .suggestion-main-text {\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            flex-shrink: 1;\r\n            min-width: 0;\r\n          }\r\n\r\n          .suggestion-scope {\r\n            color: tokens.$ifxColorEngineering400;\r\n            flex-shrink: 0; // Never truncate the scope\r\n            white-space: nowrap;\r\n            margin-left: tokens.$ifxSpace25; // Add space before the scope\r\n            font-weight: tokens.$ifxFontWeightSemibold;\r\n            font-size: tokens.$ifxFontSizeXs;\r\n          }\r\n\r\n          // When container is narrow, stack scope below main text\r\n          @container (max-width: 320px) {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n\r\n            .suggestion-main-text {\r\n              width: 100%;\r\n              max-width: 100%;\r\n            }\r\n\r\n            .suggestion-scope {\r\n              margin-left: 0;\r\n              margin-top: 0;\r\n              width: 100%;\r\n              max-width: 100%;\r\n              overflow: hidden;\r\n              text-overflow: ellipsis;\r\n              flex-shrink: 1; // Allow truncation when narrow\r\n            }\r\n          }\r\n        }\r\n\r\n        .suggestion-count {\r\n          color: tokens.$ifxColorEngineering400;\r\n          margin-left: auto;\r\n          flex-shrink: 0;\r\n        }\r\n\r\n        .suggestion-delete-icon {\r\n          opacity: 0;\r\n          visibility: hidden;\r\n          transition: opacity 0.2s ease, visibility 0.2s ease;\r\n          cursor: pointer;\r\n          margin-left: auto;\r\n          flex-shrink: 0;\r\n          color: tokens.$ifxColorEngineering500;\r\n\r\n          &:hover {\r\n            color: tokens.$ifxColorEngineering600;\r\n          }\r\n        }\r\n      }\r\n\r\n      &:hover {\r\n        .suggestion-delete-icon {\r\n          opacity: 1;\r\n          visibility: visible;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // Wrapper modifications when dropdown is open\r\n  .search-field__wrapper.dropdown-open {\r\n    border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\r\n    border-color: tokens.$ifxColorOcean500;\r\n  }\r\n}\r\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\nexport interface SuggestionItem {\r\n  id: string;\r\n  text: string;\r\n  type?: 'suggestion' | 'history';\r\n  scope?: string;\r\n  resultCount?: number;\r\n  metadata?: any;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-search-field',\r\n  styleUrl: 'search-field.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class SearchField {\r\n  @Element() el;\r\n  private inputElement: HTMLInputElement;\r\n  private dropdownElement: HTMLDivElement;\r\n\r\n  @Prop({ mutable: true }) value: string = '';\r\n  @Prop() suggestions: SuggestionItem[] = [];\r\n  @Prop() showSuggestions: boolean = false;\r\n  @Prop() maxSuggestions: number = 10;\r\n  @Prop() maxHistoryItems: number = 5;\r\n  @Prop() enableHistory: boolean = true;\r\n  @Prop() historyKey: string = 'ifx-search-history';\r\n  @Prop() historyHeaderText: string = 'Recent Searches';\r\n\r\n  // ARIA Labels and Accessibility Props\r\n  @Prop() ariaLabel: string | null = \"Search Field\"\r\n  @Prop() ariaLabelledBy?: string | null;\r\n  @Prop() ariaDescribedBy?: string | null;\r\n  @Prop() deleteIconAriaLabel: string = 'Clear search';\r\n  @Prop() historyDeleteAriaLabel: string = 'Remove from history';\r\n  @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\r\n  @Prop() suggestionAriaLabel: string = 'Search suggestion';\r\n  @Prop() historyItemAriaLabel: string = 'Search history item';\r\n\r\n  @Event() ifxInput: EventEmitter<string>;\r\n  @Event() ifxSuggestionRequested: EventEmitter<string>;\r\n  @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\r\n  @Event() ifxFocus: EventEmitter<void>;\r\n  @Event() ifxBlur: EventEmitter<void>;\r\n\r\n  @State() showDropdown: boolean = false;\r\n  @State() filteredSuggestions: SuggestionItem[] = [];\r\n  @State() selectedSuggestionIndex: number = -1;\r\n  @State() searchHistory: string[] = [];\r\n\r\n  @Prop() showDeleteIcon: boolean = false;\r\n  @State() showDeleteIconInternalState: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() size: string = 'l';\r\n  @State() isFocused: boolean = false;\r\n  @Prop() placeholder: string = \"Search...\";\r\n  @Prop() autocomplete: string = \"off\";\r\n  @Prop() maxlength?: number = null;\r\n\r\n  private focusEmitted: boolean = false;\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\r\n      this.hideDropdown();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (!this.showDropdown) return;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        this.navigateSuggestions(1);\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.navigateSuggestions(-1);\r\n        break;\r\n      case 'Enter':\r\n        event.preventDefault();\r\n        if (this.selectedSuggestionIndex >= 0) {\r\n          this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\r\n        } else {\r\n          this.handleSearch();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        this.hideDropdown();\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Watch('value')\r\n  valueWatcher(newValue: string) {\r\n    if (this.inputElement && newValue !== this.inputElement.value) {\r\n      this.inputElement.value = newValue;\r\n    }\r\n    this.updateSuggestions();\r\n  }\r\n\r\n  @Watch('suggestions')\r\n  suggestionsWatcher() {\r\n    this.updateSuggestions();\r\n  }\r\n\r\n\r\n  handleInput = () => {\r\n    const query = this.inputElement.value;\r\n    this.value = query;\r\n    this.ifxInput.emit(this.value);\r\n\r\n    if (this.showSuggestions) {\r\n      this.showDropdown = true;\r\n      this.selectedSuggestionIndex = -1;\r\n      this.requestSuggestions(query);\r\n    }\r\n  };\r\n\r\n  handleDelete = () => {\r\n    if(!this.disabled) { \r\n      this.inputElement.value = '';\r\n      this.value = \"\";\r\n      this.ifxInput.emit(this.value);\r\n      this.hideDropdown();\r\n    }\r\n  }\r\n\r\n  handleSearch = () => {\r\n    if (this.value.trim() && this.enableHistory) {\r\n      // Only add to history if there are actual results\r\n      if (this.filteredSuggestions.length > 0) {\r\n        this.addToHistory(this.value);\r\n      }\r\n    }\r\n    this.hideDropdown();\r\n  }\r\n\r\n  focusInput() {\r\n    // Only emit focus event if it hasn't been emitted already\r\n    if (!this.focusEmitted) {\r\n      this.focusEmitted = true;\r\n      this.isFocused = true;\r\n      this.ifxFocus.emit();\r\n    }\r\n\r\n    if (this.showSuggestions) {\r\n      // On focus without input: Show only history\r\n      if (this.value.length === 0) {\r\n        this.showHistoryDropdown();\r\n        // Only show dropdown if history is actually present\r\n        this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\r\n      } else {\r\n        // With existing input: Normal suggestion logic\r\n        this.updateSuggestions();\r\n        this.showDropdown = this.filteredSuggestions.length > 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  blurInput() {\r\n    setTimeout(() => {\r\n      this.isFocused = false;\r\n      this.focusEmitted = false; // Reset focus flag when blur occurs\r\n      this.ifxBlur.emit();\r\n    }, 150);\r\n  }\r\n\r\n  // Public method to update history from external sources\r\n  public loadSearchHistory() {\r\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n      const stored = localStorage.getItem(this.historyKey);\r\n      this.searchHistory = stored ? JSON.parse(stored) : [];\r\n\r\n      // Update suggestions when history is loaded\r\n      this.updateSuggestions();\r\n\r\n      // If no input and no history left, close dropdown\r\n      if (this.value.length === 0 && this.searchHistory.length === 0) {\r\n        this.showDropdown = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Public method to completely clear history\r\n  public clearSearchHistory() {\r\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n      // Clear from localStorage\r\n      localStorage.removeItem(this.historyKey);\r\n\r\n      // Clear internal history\r\n      this.searchHistory = [];\r\n\r\n      // Reset all dropdown-relevant states\r\n      this.filteredSuggestions = [];\r\n      this.selectedSuggestionIndex = -1;\r\n      this.showDropdown = false;\r\n\r\n      // Update suggestions after reset\r\n      this.updateSuggestions();\r\n    }\r\n  }\r\n\r\n  // Suggestion Management Methods\r\n  private addToHistory(term: string) {\r\n    if (!this.enableHistory || !term.trim()) return;\r\n\r\n    const history = [...this.searchHistory];\r\n    const existingIndex = history.indexOf(term);\r\n\r\n    if (existingIndex > -1) {\r\n      history.splice(existingIndex, 1);\r\n    }\r\n\r\n    history.unshift(term);\r\n    // Limit history to maxHistoryItems (default 5)\r\n    this.searchHistory = history.slice(0, this.maxHistoryItems);\r\n\r\n    if (typeof localStorage !== 'undefined') {\r\n      localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n    }\r\n  }\r\n\r\n  // Remove individual history entry\r\n  private removeFromHistory(term: string) {\r\n    if (!this.enableHistory) return;\r\n\r\n    const history = [...this.searchHistory];\r\n    const index = history.indexOf(term);\r\n\r\n    if (index > -1) {\r\n      history.splice(index, 1);\r\n      this.searchHistory = history;\r\n\r\n      // Update localStorage\r\n      if (typeof localStorage !== 'undefined') {\r\n        localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n      }\r\n\r\n      // Update suggestions after removal\r\n      this.updateSuggestions();\r\n\r\n      // Close dropdown if no history remains\r\n      if (this.searchHistory.length === 0 && this.value.length === 0) {\r\n        this.showDropdown = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Handle click on history delete button\r\n  private handleHistoryDelete = (event: Event, term: string) => {\r\n    event.stopPropagation(); // Prevent selection of the entry\r\n    this.removeFromHistory(term);\r\n  }\r\n\r\n  private requestSuggestions(query: string) {\r\n    this.ifxSuggestionRequested.emit(query);\r\n    this.updateSuggestions();\r\n  }\r\n\r\n  private updateSuggestions() {\r\n    const query = this.value.toLowerCase();\r\n    let suggestions: SuggestionItem[] = [];\r\n\r\n    if (query.length > 0) {\r\n      // For text input: Mix external suggestions and relevant history\r\n\r\n      // 1. Filter external suggestions\r\n      if (this.suggestions && this.suggestions.length > 0) {\r\n        const filteredExternal = this.suggestions.filter(s =>\r\n          s.text.toLowerCase().includes(query)\r\n        );\r\n        suggestions = [...suggestions, ...filteredExternal];\r\n      }\r\n\r\n      // 2. Filter relevant history entries\r\n      if (this.enableHistory && this.searchHistory.length > 0) {\r\n        const filteredHistory = this.searchHistory\r\n          .filter(term => term.toLowerCase().includes(query))\r\n          .map((term, index) => ({\r\n            id: `history-${index}`,\r\n            text: term,\r\n            type: 'history' as const\r\n          }));\r\n        suggestions = [...suggestions, ...filteredHistory];\r\n      }\r\n\r\n      // 3. Sort by relevance (exact matches first, then prefix matches)\r\n      suggestions.sort((a, b) => {\r\n        const aText = a.text.toLowerCase();\r\n        const bText = b.text.toLowerCase();\r\n\r\n        // Exact match has highest priority\r\n        if (aText === query && bText !== query) return -1;\r\n        if (bText === query && aText !== query) return 1;\r\n\r\n        // Prefix match has second highest priority\r\n        const aStartsWith = aText.startsWith(query);\r\n        const bStartsWith = bText.startsWith(query);\r\n\r\n        if (aStartsWith && !bStartsWith) return -1;\r\n        if (bStartsWith && !aStartsWith) return 1;\r\n\r\n        // With equal relevance: external suggestions before history\r\n        if (a.type === 'suggestion' && b.type === 'history') return -1;\r\n        if (a.type === 'history' && b.type === 'suggestion') return 1;\r\n\r\n        // Alphabetical sorting as last criterion\r\n        return aText.localeCompare(bText);\r\n      });\r\n\r\n    } else {\r\n      // For empty query: Show only history (no external suggestions)\r\n      if (this.enableHistory && this.searchHistory.length > 0) {\r\n        const historySuggestions = this.searchHistory.map((term, index) => ({\r\n          id: `history-${index}`,\r\n          text: term,\r\n          type: 'history' as const\r\n        }));\r\n\r\n        suggestions = historySuggestions;\r\n      }\r\n      // For empty query DO NOT show external suggestions\r\n    }\r\n\r\n    // Remove duplicates based on text and scope combination (history takes precedence over external)\r\n    const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\r\n      const existingIndex = unique.findIndex(item =>\r\n        item.text.toLowerCase() === current.text.toLowerCase() &&\r\n        item.scope === current.scope\r\n      );\r\n      if (existingIndex === -1) {\r\n        unique.push(current);\r\n      } else {\r\n        // If already exists, prefer history over external suggestions\r\n        if (current.type === 'history' && unique[existingIndex].type !== 'history') {\r\n          unique[existingIndex] = current;\r\n        }\r\n      }\r\n      return unique;\r\n    }, []);\r\n\r\n    this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\r\n    this.selectedSuggestionIndex = -1;\r\n  }\r\n\r\n  private navigateSuggestions(direction: number) {\r\n    const maxIndex = this.filteredSuggestions.length - 1;\r\n\r\n    if (direction > 0) {\r\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\r\n        ? this.selectedSuggestionIndex + 1\r\n        : 0;\r\n    } else {\r\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\r\n        ? this.selectedSuggestionIndex - 1\r\n        : maxIndex;\r\n    }\r\n  }\r\n\r\n  private selectSuggestion(suggestion: SuggestionItem) {\r\n    this.value = suggestion.text;\r\n    this.inputElement.value = suggestion.text;\r\n    this.ifxSuggestionSelected.emit(suggestion);\r\n    this.ifxInput.emit(this.value);\r\n\r\n    if (this.enableHistory) {\r\n      // Always add selected suggestions to history since they are valid results\r\n      this.addToHistory(suggestion.text);\r\n    }\r\n\r\n    this.hideDropdown();\r\n  }\r\n\r\n  private hideDropdown() {\r\n    this.showDropdown = false;\r\n    this.selectedSuggestionIndex = -1;\r\n    this.isFocused = false;\r\n  }\r\n\r\n  // Show only history in dropdown (e.g. on focus without input)\r\n  private showHistoryDropdown() {\r\n    if (this.enableHistory && this.searchHistory.length > 0) {\r\n      // Show only history entries\r\n      const historySuggestions = this.searchHistory.map((term, index) => ({\r\n        id: `history-${index}`,\r\n        text: term,\r\n        type: 'history' as const\r\n      }));\r\n\r\n      this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\r\n      this.selectedSuggestionIndex = -1;\r\n    } else {\r\n      this.filteredSuggestions = [];\r\n    }\r\n  }\r\n\r\n  // Check if only history entries are displayed (without text input)\r\n  private isShowingOnlyHistory(): boolean {\r\n    return this.value.length === 0 &&\r\n           this.filteredSuggestions.length > 0 &&\r\n           this.filteredSuggestions.every(s => s.type === 'history');\r\n  }\r\n\r\n  // Render text with highlighted matches\r\n  private renderHighlightedText(text: string, query: string) {\r\n    if (!query || query.length === 0) {\r\n      return text;\r\n    }\r\n\r\n    const lowerText = text.toLowerCase();\r\n    const lowerQuery = query.toLowerCase();\r\n    const index = lowerText.indexOf(lowerQuery);\r\n\r\n    if (index === -1) {\r\n      return text;\r\n    }\r\n\r\n    const before = text.substring(0, index);\r\n    const match = text.substring(index, index + query.length);\r\n    const after = text.substring(index + query.length);\r\n\r\n    return [\r\n      before,\r\n      <strong>{match}</strong>,\r\n      after\r\n    ];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadSearchHistory();\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework()\r\n      trackComponent('ifx-search-field', await framework)\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    if (this.value !== \"\") {\r\n      this.showDeleteIconInternalState = true;\r\n    } else this.showDeleteIconInternalState = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        aria-disabled={this.disabled}\r\n        aria-value={this.value}\r\n        class='search-field'\r\n      >\r\n        <div\r\n          class={this.getWrapperClassNames()}\r\n          tabindex={1}\r\n          onClick={() => this.focusInput()}\r\n        >\r\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\r\n          <input\r\n            ref={(el) => (this.inputElement = el)}\r\n            type=\"text\"\r\n            autocomplete={this.autocomplete}\r\n            onInput={() => this.handleInput()}\r\n            onFocus={() => this.focusInput()}\r\n            onBlur={() => this.blurInput()}\r\n            placeholder={this.placeholder}\r\n            disabled={this.disabled}\r\n            maxlength={this.maxlength}\r\n            value={this.value}\r\n            role=\"combobox\"\r\n            aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n            aria-expanded={this.showDropdown}\r\n            aria-autocomplete=\"list\"\r\n            aria-haspopup=\"listbox\"\r\n            aria-label={this.ariaLabel}\r\n            aria-labelledby={this.ariaLabelledBy}\r\n            aria-describedby={this.ariaDescribedBy}\r\n            aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n            aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\r\n          />\r\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\r\n            <ifx-icon\r\n              icon=\"cRemove16\"\r\n              class=\"delete-icon\"\r\n              onClick={this.handleDelete}\r\n              role=\"button\"\r\n              tabindex=\"0\"\r\n              aria-label={this.deleteIconAriaLabel}\r\n              onKeyDown={(event) => {\r\n                if (event.key === 'Enter' || event.key === ' ') {\r\n                  event.preventDefault();\r\n                  this.handleDelete();\r\n                }\r\n              }}>\r\n            </ifx-icon>\r\n          ) : null}\r\n        </div>\r\n\r\n        {/* Suggestions Dropdown */}\r\n        {this.showDropdown && this.filteredSuggestions.length > 0 && (\r\n          <div\r\n            ref={(el) => (this.dropdownElement = el)}\r\n            id=\"suggestions-dropdown\"\r\n            class=\"suggestions-dropdown\"\r\n            role=\"listbox\"\r\n            aria-label={this.dropdownAriaLabel}\r\n          >\r\n            {/* History Header - only show when exclusively showing history entries */}\r\n            {this.isShowingOnlyHistory() && (\r\n              <div class=\"suggestions-header\">\r\n                {this.historyHeaderText}\r\n              </div>\r\n            )}\r\n\r\n            {this.filteredSuggestions.map((suggestion, index) => (\r\n              <div\r\n                key={suggestion.id}\r\n                id={`suggestion-${index}`}\r\n                class={this.getSuggestionClassNames(index)}\r\n                role=\"option\"\r\n                aria-selected={index === this.selectedSuggestionIndex}\r\n                aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\r\n                onClick={() => this.selectSuggestion(suggestion)}\r\n                onMouseEnter={() => this.selectedSuggestionIndex = index}\r\n              >\r\n                <div class=\"suggestion-content\">\r\n                  {suggestion.type === 'history' && (\r\n                    <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\r\n                  )}\r\n                  {suggestion.type === 'suggestion' && (\r\n                    <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\r\n                  )}\r\n                  <span class=\"suggestion-text\">\r\n                    <span class=\"suggestion-main-text\">\r\n                      {this.renderHighlightedText(suggestion.text, this.value)}\r\n                    </span>\r\n                    {suggestion.scope && (\r\n                      <span class=\"suggestion-scope\">– {suggestion.scope}</span>\r\n                    )}\r\n                  </span>\r\n\r\n                  {suggestion.resultCount !== undefined && suggestion.scope && (\r\n                    <span class=\"suggestion-count\">{suggestion.resultCount}</span>\r\n                  )}\r\n\r\n                  {/* Delete Button only for history entries */}\r\n                  {suggestion.type === 'history' && (\r\n                    <ifx-icon\r\n                      icon=\"cross16\"\r\n                      class=\"suggestion-delete-icon\"\r\n                      role=\"button\"\r\n                      tabindex=\"0\"\r\n                      aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\r\n                      onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\r\n                      onKeyDown={(event) => {\r\n                        if (event.key === 'Enter' || event.key === ' ') {\r\n                          event.preventDefault();\r\n                          this.handleHistoryDelete(event, suggestion.text);\r\n                        }\r\n                      }}\r\n                    ></ifx-icon>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  getSizeClass() {\r\n    return `${this.size}` === \"s\"\r\n      ? \"search-field__wrapper-s\"\r\n      : \"\";\r\n  }\r\n\r\n  getWrapperClassNames() {\r\n    return classNames(\r\n      `search-field__wrapper`,\r\n      `search-field__wrapper ${this.getSizeClass()}`,\r\n      `${this.isFocused ? 'focused' : \"\"}`,\r\n      `${this.showDropdown ? 'dropdown-open' : \"\"}`,\r\n      `${this.disabled ? 'disabled' : \"\"}`\r\n    );\r\n  }\r\n\r\n  getSuggestionClassNames(index: number) {\r\n    return classNames(\r\n      'suggestion-item',\r\n      {\r\n        'suggestion-item--selected': index === this.selectedSuggestionIndex,\r\n        'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\r\n      }\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DcAKq8Jr.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,uyGAAuyG;;MCWjzG,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AANxB,IAAA,WAAA,GAAA;;;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACL,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAGrC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAuJlC;AApJC,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,eAAe;;IAU7B,iBAAiB,GAAA;;QAEf,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,OAAO;AACjC,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,2BAA2B;AAC1D,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,CAAA;;;;;;;KAOlC;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACtD,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,EAAE;QAChC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;QAYvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK;QAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE;;AAGrF,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;AAKvD,IAAA,mBAAmB,CAAC,QAAiB,EAAA;AACnC,QAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;IAIjC,eAAe,GAAA;;;;;QAKb,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QACnC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QACrC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;;IAI3C,YAAY,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;;AAIlC,IAAA,sBAAsB,CAAC,KAAY,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAGF,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO;AAChD,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;AAEzC,QAAA,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;AAC5C,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;AACxC,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;;AAIpC,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YACnC,EAAE,CAAC,cAAc,EAAE;YACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;;;AAK1D,IAAA,oBAAoB,CAAC,KAAY,EAAA;AAC/B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,IAAI,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB;YAAE;QAE/E,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;AAC7C,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;;IAIhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,mBAC3B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAC/E,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA;cACH,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAA;AACrC,YAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAE9B,EAAA,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,EAAA,CAAO,CAClE,EAEL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACP,EAED,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,MAAM,EACN,IAAA,EAAA,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,CACnC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: inline-flex;\r\n  --_ifx-fallback-display: none !important;\r\n}\r\n\r\n._ifx-radiobutton-fallback {\r\n  display: var(--_ifx-fallback-display);\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  padding: 0 !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  clip: rect(0, 0, 0, 0) !important;\r\n  border: 0 !important;\r\n}\r\n\r\n.radioButton__container {\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px;\r\n  gap: tokens.$ifxSpace100;\r\n  cursor: pointer;\r\n  font-family: var(--ifx-font-family);\r\n  outline: none;\r\n\r\n  &.disabled {\r\n    cursor: default;\r\n    \r\n    .radioButton__wrapper {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n      border-color: tokens.$ifxColorEngineering300;\r\n      \r\n      &:hover {\r\n        background-color: tokens.$ifxColorEngineering300;\r\n      }\r\n      \r\n      &.checked {\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border-color: tokens.$ifxColorEngineering300;\r\n        \r\n        &::after {\r\n          background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n        \r\n        .radioButton__wrapper-mark {\r\n          background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n        \r\n        &:hover {\r\n          border-color: tokens.$ifxColorEngineering300;\r\n          \r\n          .radioButton__wrapper-mark {\r\n            background-color: tokens.$ifxColorEngineering300;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    \r\n    .label {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled) .radioButton__wrapper {\r\n    &.error {\r\n      border-color: tokens.$ifxColorRed500;\r\n      \r\n      &:hover,\r\n      &:focus-visible {\r\n        border-color: tokens.$ifxColorRed500;\r\n      }\r\n      \r\n      &.checked::after {\r\n        border-color: tokens.$ifxColorRed500;\r\n        background-color: tokens.$ifxColorRed500;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) .radioButton__wrapper {\r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: calc(100% + 4px);\r\n      height: calc(100% + 4px);\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      border: 2px solid tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n    }\r\n  }\r\n\r\n  &.m .radioButton__wrapper {\r\n    width: tokens.$ifxSize300;\r\n    height: tokens.$ifxSize300;\r\n  }\r\n\r\n  .radioButton__wrapper {\r\n    width: tokens.$ifxSize250;\r\n    height: tokens.$ifxSize250;\r\n    position: relative;\r\n    display: block;\r\n    border-radius: 50%;\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering500;\r\n\r\n    .radioButton__wrapper-mark {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      background-color: tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-color: tokens.$ifxColorBaseTransparent;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n\r\n    &.checked {\r\n      border-color: tokens.$ifxColorOcean500;\r\n      \r\n      &::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 10px;\r\n        height: 10px;\r\n        background-color: tokens.$ifxColorOcean500;\r\n        border-radius: 50%;\r\n      }\r\n\r\n      &:hover {\r\n        border-color: tokens.$ifxColorOcean600;\r\n        \r\n        .radioButton__wrapper-mark {\r\n          background-color: tokens.$ifxColorOcean600;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .label {\r\n    display: flex;\r\n    align-items: center;\r\n    height: tokens.$ifxSize250;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    flex: none;\r\n    order: 1;\r\n    flex-grow: 0;\r\n\r\n    &.label-m {\r\n      height: tokens.$ifxSize300;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-radio-button',\r\n  styleUrl: 'radio-button.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class RadioButton {\r\n  @Element() el: HTMLElement;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() value: string;\r\n  @Prop() error: boolean = false;\r\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\r\n  @Prop({ reflect: true }) name: string;\r\n  @Prop({ mutable: true }) checked: boolean;\r\n  @State() internalChecked: boolean = false;\r\n  @State() hasSlot: boolean = false;\r\n\r\n  @Method()\r\n  async isChecked(): Promise<boolean> {\r\n    return this.internalChecked;\r\n  }\r\n  \r\n  private inputElement: HTMLInputElement;\r\n  //private internals: ElementInternals;\r\n  private fallbackInput: HTMLInputElement;\r\n\r\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\r\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\r\n\r\n  componentWillLoad() {\r\n    // Fallback for form association\r\n    this.fallbackInput = document.createElement('input');\r\n    this.fallbackInput.type = 'radio';\r\n    this.fallbackInput.hidden = true;\r\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\r\n    this.fallbackInput.style.cssText = `\r\n      display: none !important;\r\n      position: absolute !important;\r\n      opacity: 0 !important;\r\n      pointer-events: none !important;\r\n      width: 0 !important;\r\n      height: 0 !important;\r\n    `;\r\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\r\n    this.fallbackInput.tabIndex = -1;\r\n    this.el.appendChild(this.fallbackInput);\r\n\r\n    // Initialize ElementInternals if supported\r\n    if ('attachInternals' in HTMLElement.prototype) {\r\n      try {\r\n        //this.internals = this.el.attachInternals();\r\n      } catch (e) {\r\n        console.warn('ElementInternals not supported');\r\n      }\r\n    }\r\n\r\n    // Initial state\r\n    this.internalChecked = this.checked || false;\r\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-radio-button', await framework)\r\n    }\r\n  }\r\n\r\n  @Watch('checked')\r\n  handleCheckedChange(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n  }\r\n\r\n  @Watch('internalChecked')\r\n  updateFormValue() {\r\n    // Update both ElementInternals and fallback input\r\n    // if (this.internals?.setFormValue) {\r\n    //   this.internals.setFormValue(this.internalChecked ? this.value : null);\r\n    // }\r\n    this.fallbackInput.checked = this.internalChecked;\r\n    this.fallbackInput.name = this.name;\r\n    this.fallbackInput.value = this.value;\r\n    this.fallbackInput.disabled = this.disabled;\r\n  }\r\n\r\n  @Watch('error')\r\n    errorChanged(newValue: boolean, oldValue: boolean) {\r\n      if (newValue !== oldValue) {\r\n        this.ifxError.emit(newValue);\r\n      }\r\n    }\r\n\r\n  handleRadioButtonClick(event: Event) {\r\n    if (this.disabled) {\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    this.inputElement.click();\r\n    this.internalChecked = this.inputElement.checked;\r\n    this.checked = this.internalChecked;\r\n    this.ifxChange.emit(this.internalChecked);\r\n\r\n    const changeEvent = new CustomEvent('change', {\r\n      bubbles: true,\r\n      composed: true,\r\n      detail: { checked: this.internalChecked }\r\n    });\r\n    this.el.dispatchEvent(changeEvent);\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if ([' ', 'Enter'].includes(ev.key)) {\r\n      ev.preventDefault();\r\n      this.handleRadioButtonClick(new PointerEvent('click'));\r\n    }\r\n  }\r\n\r\n  @Listen('change', { target: 'document' })\r\n  handleExternalChange(event: Event) {\r\n    const target = event.target as HTMLElement;\r\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\r\n    \r\n    if (target.getAttribute('name') === this.name) {\r\n      this.internalChecked = false;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        role=\"radio\"\r\n        aria-checked={String(this.internalChecked)}\r\n        aria-disabled={String(this.disabled)}\r\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\r\n        onClick={(e) => this.handleRadioButtonClick(e)}\r\n        tabindex={this.disabled ? -1 : 0}\r\n      >\r\n        <div\r\n          class={`radioButton__wrapper \r\n            ${this.internalChecked ? 'checked' : ''}  \r\n            ${this.error ? 'error' : ''}`}\r\n        >\r\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\r\n        </div>\r\n\r\n        {this.hasSlot && (\r\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\r\n            <slot />\r\n          </div>\r\n        )}\r\n\r\n        <input\r\n          type=\"radio\"\r\n          hidden\r\n          ref={el => this.inputElement = el}\r\n          name={this.name}\r\n          value={this.value}\r\n          checked={this.internalChecked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => e.stopPropagation()}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DfhZt04W.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\r\n.react__template-wrapper { \r\n  display: flex;\r\n  width: 300px;\r\n  height: 200px;\r\n  border-radius: 3px;\r\n  border: 1px solid #ccc;\r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n  \r\n  &:hover { \r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.template__page-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  & .repository__url { \r\n    text-decoration: none;\r\n  }\r\n}\r\n\r\n.input__fields-wrapper { \r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n\r\n}\r\n\r\n.details__wrapper { \r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n.selection__buttons-wrapper { \r\n  display: flex;\r\n  gap: 10px;\r\n  padding-top: 10px;\r\n  align-items: center;\r\n  & .vue__label { \r\n    color: #ccc;\r\n  }\r\n\r\n  & label:not(.vue__label) { \r\n    &:hover { \r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  & .selection__input { \r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    & input { \r\n      margin: 0;\r\n      height: 20px;\r\n      width: 20px;\r\n      &:hover:not(.vue__input) { \r\n        cursor: pointer;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.image__wrapper { \r\n  img { \r\n    position: relative;\r\n    width: 300px;\r\n    height: 100%;\r\n    border-radius: 3px;\r\n    object-fit: contain;\r\n    transition: transform .2s;\r\n    &:hover { \r\n      transform: scale(2);\r\n      top: 50px;\r\n      z-index: 100;\r\n    }\r\n  }\r\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-template',\r\n  styleUrl: 'template.scss',\r\n  shadow: true,\r\n})\r\nexport class Template {\r\n  @Element() el: HTMLElement;\r\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\r\n  @State() repoUrl: string;\r\n  @State() showDetails: boolean = false;\r\n  @State() isTemplatePage: boolean = false;\r\n  @State() isLoading: boolean = true;\r\n  @State() repoError: string;\r\n  @Prop() name: string;\r\n  @Event() toggleTemplates: EventEmitter;\r\n  @Event() fieldError: EventEmitter;\r\n  @Prop() thumbnail: string;\r\n  \r\n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\r\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\r\n  private scope = 'repo workflow'\r\n  private state = 'template123'\r\n\r\n  authUser() { \r\n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\r\n      `client_id=${this.clientId}&` +\r\n      `redirect_uri=${this.redirectUri}&` +\r\n      `scope=${this.scope}&` +\r\n      `state=${this.state}`;\r\n    \r\n      window.open(authorizationUrl, '_blank'); \r\n  }\r\n\r\n  componentDidLoad() { \r\n    const url = new URL(window.location.href);\r\n    const code = url.searchParams.get('code');\r\n    const { templateName } = this.getLocalStorageValues()\r\n    if(code && this.name === templateName) { \r\n      this.isTemplatePage = true;\r\n      this.toggleTemplates.emit('details')\r\n      this.getUserToken(code)\r\n    } \r\n  }\r\n\r\n  getLocalStorageValues() { \r\n    const repoName = localStorage.getItem('repo_name');\r\n    const repoDesc = localStorage.getItem('repo_desc');\r\n    const repoFramework = localStorage.getItem('repo_framework');\r\n    const templateName = localStorage.getItem('selectedTemplate');\r\n    return { repoName, repoDesc, repoFramework, templateName }\r\n  }\r\n\r\n  async getUserToken(authCode) {\r\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\r\n\r\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\r\n    .then(response => {\r\n      if (response.ok) {\r\n        return response.text();\r\n      } else {\r\n        return response.text().then(errorMessage => {\r\n          throw new Error(errorMessage);\r\n        });\r\n      }\r\n    })\r\n    .then(data => { \r\n      if(data) { \r\n        this.isLoading = false;\r\n        this.repoUrl = data;\r\n        localStorage.clear();\r\n      } \r\n    })\r\n    .catch(error => {\r\n      this.repoError = error.message;\r\n      console.error('Error:', error.message)\r\n    });\r\n  }\r\n\r\n  handleUserInput(e, type) { \r\n    if (type === 'name') {\r\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\r\n    } else if (type === 'desc') {\r\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\r\n    } else if(type === 'framework') { \r\n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\r\n    }\r\n  }\r\n\r\n  submitUserData() { \r\n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \r\n      localStorage.setItem('repo_name', this.repoDetails.name);\r\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\r\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\r\n      localStorage.setItem('selectedTemplate', this.name);\r\n      this.fieldError.emit(false)\r\n      this.authUser()\r\n    } else { \r\n      this.fieldError.emit('All fields are mandatory')\r\n    }\r\n  }\r\n\r\n  togglePadding(action) { \r\n    let parent = this.el.parentElement;\r\n    if (parent) {\r\n      const rootNode = parent.getRootNode();\r\n      if (rootNode instanceof ShadowRoot) {\r\n        parent = rootNode.host.parentElement;\r\n      } else {\r\n        parent = parent.parentElement;\r\n      }\r\n      if(action === 'remove') { \r\n        parent.parentElement.style.padding = '0px';\r\n      } else if(action === 'add') { \r\n        parent.parentElement.style.padding = '4rem 20px';\r\n      }\r\n    }\r\n  }\r\n\r\n  handleCurrentTemplate(e) { \r\n    if(e && !this.showDetails) { \r\n      this.togglePadding('remove')\r\n      const targetTemplate = e.currentTarget;\r\n      this.toggleTemplates.emit(targetTemplate)\r\n      this.showDetails = true;\r\n    } \r\n  }\r\n\r\n  @Method()\r\n  async toggleTemplate(currTemp) { \r\n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\r\n    if(templateWrapper) { \r\n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \r\n        if(templateWrapper !== currTemp) {\r\n          templateWrapper.classList.add('hide')\r\n        }\r\n      } else { \r\n        if(this.showDetails) { \r\n          this.showDetails = false;\r\n        }\r\n        this.togglePadding('add')\r\n        templateWrapper.classList.remove('hide')\r\n      }\r\n    }\r\n  }\r\n\r\n \r\n  render() {\r\n      return (\r\n        <div>\r\n          {this.isTemplatePage \r\n          ? \r\n          <div class=\"template__page-wrapper\">\r\n            {!this.repoUrl && !this.repoError && \r\n            <div>\r\n              <h3>Your repository is getting ready..</h3>\r\n              <p>This will only take a minute.</p>\r\n            </div>}\r\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\r\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\r\n            {this.repoError && <div>{this.repoError}</div>}\r\n          </div> \r\n          : \r\n          <div class=\"react__template-container\">\r\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\r\n                <div class=\"image__wrapper\">\r\n                  <img src={this.thumbnail} />\r\n                </div>\r\n              </div>\r\n            {this.showDetails && \r\n            <div class=\"details__wrapper\">\r\n              <div class=\"selection__buttons-wrapper\">\r\n                <div class=\"selection__input\">\r\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\r\n                  <label htmlFor=\"react\">React</label>\r\n                </div>\r\n                <div class=\"selection__input vue\">\r\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\r\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\r\n                </div>\r\n              </div>\r\n           \r\n\r\n              <div class=\"input__fields-wrapper\">\r\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\r\n\r\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\r\n\r\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\r\n              </div>\r\n              \r\n            </div>}\r\n          </div>}\r\n        </div>\r\n      );\r\n  }\r\n}"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"p-DzvIkH4S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.textInput__container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  padding: 0px;\r\n  width: 100%;\r\n  flex: none;\r\n  order: 0;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  & .delete-icon {\r\n    position: absolute;\r\n    right: tokens.$ifxSpace200;\r\n  }\r\n\r\n  &:not(.readonly, .disabled) .delete-icon {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.readonly) {\r\n\r\n    & #text-field { \r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n\r\n    & .delete-icon { \r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n    \r\n    & .textInput__top-wrapper {\r\n      & label {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n\r\n      & .required {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n\r\n    & .textInput__bottom-wrapper {\r\n      input {\r\n        border: 1px solid tokens.$ifxColorEngineering300;\r\n        background-color: tokens.$ifxColorEngineering300;\r\n\r\n        &::placeholder {\r\n          font-size: tokens.$ifxFontSizeM;\r\n          color: tokens.$ifxColorBaseWhite;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  & .textInput__top-wrapper {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: flex-start;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace50;\r\n    flex: none;\r\n    order: 0;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n\r\n    & label {\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightRegular;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      display: flex;\r\n      align-items: center;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      flex: none;\r\n      order: 0;\r\n      flex-grow: 0;\r\n\r\n      & .optional-required {\r\n        margin-left: tokens.$ifxSpace50;\r\n      }\r\n\r\n      & .optional {\r\n        margin-left: tokens.$ifxSpace50;\r\n      }\r\n\r\n      & .required {\r\n        color: tokens.$ifxColorEngineering500;\r\n        margin-left: tokens.$ifxSpace50;\r\n\r\n        &.error {\r\n          color: tokens.$ifxColorRed500;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .input-container {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n\r\n  & .textInput__bottom-wrapper {\r\n    flex-grow: 1;\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace50;\r\n    flex: none;\r\n    order: 1;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n\r\n    & input {\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n      gap: tokens.$ifxSpace100;\r\n      height: tokens.$ifxSize500;\r\n      background-color: tokens.$ifxColorBaseWhite;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      border: 1px solid tokens.$ifxColorEngineering400;\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n      flex: none;\r\n      order: 0;\r\n      align-self: stretch;\r\n      flex-grow: 0;\r\n      text-overflow: ellipsis;\r\n\r\n      &.input-s {\r\n        height: tokens.$ifxSize450;\r\n        font-size: tokens.$ifxFontSizeS;\r\n        line-height: tokens.$ifxLineHeightS;\r\n\r\n        &::placeholder {\r\n          font-size: tokens.$ifxFontSizeM;\r\n          line-height: tokens.$ifxLineHeightS;\r\n        }\r\n      }\r\n\r\n      &.icon {\r\n        padding-left: tokens.$ifxSpace500;\r\n      }\r\n\r\n      &.error {\r\n        border: 1px solid tokens.$ifxColorRed500;\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n\r\n      &.readonly {\r\n        border: none;\r\n        border-radius: var(--borderRadius-12, 1px);\r\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n        background: var(--color-base-white, #fff);\r\n        padding-left: 0;\r\n\r\n        &::placeholder {\r\n          color: tokens.$ifxColorBaseBlack;\r\n        }\r\n      }\r\n\r\n      &.success {\r\n        border: 1px solid tokens.$ifxColorGreen500;\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n\r\n      &:focus:not(.error, .success):not(.readonly) {\r\n        outline: none;\r\n        border: 1px solid tokens.$ifxColorOcean500;\r\n      }\r\n\r\n      &.readonly:focus,\r\n      &[readonly]:focus {\r\n        outline: none;\r\n        box-shadow: none;\r\n        border: none;\r\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n      }\r\n\r\n      &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\r\n        border: 1px solid tokens.$ifxColorEngineering500;\r\n      }\r\n    }\r\n\r\n    & .input-icon {\r\n      // Position the icon within the icon container\r\n      // Adjust the positioning as needed\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      left: tokens.$ifxSpace200;\r\n      /* Adjust this value to control the icon's left offset */\r\n      transition: 0.3s;\r\n      color: tokens.$ifxColorEngineering400;\r\n    }\r\n\r\n    & .textInput__bottom-wrapper-caption {\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightRegular;\r\n      font-size: tokens.$ifxFontSizeXs;\r\n      line-height: tokens.$ifxLineHeightXs;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      flex: none;\r\n      order: 1;\r\n      align-self: stretch;\r\n      flex-grow: 0;\r\n\r\n      &.error {\r\n        color: tokens.$ifxColorRed500;\r\n      }\r\n\r\n      &.disabled {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-text-field',\r\n  styleUrl: 'text-field.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class TextField {\r\n  private inputElement: HTMLInputElement;\r\n  @Element() el;\r\n  @Prop() placeholder: string = 'Placeholder';\r\n  @Prop({ mutable: true }) value: string = '';\r\n  @Prop() error: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() caption: string = '';\r\n  @Prop() size: string = 'm';\r\n  @Prop() required: boolean = false;\r\n  @Prop() success: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() readOnly: boolean = false;\r\n  @Prop() maxlength?: number;\r\n  @Prop() showDeleteIcon: boolean = false;\r\n  @Prop() autocomplete: string = 'on';\r\n  @Prop() type: 'text' | 'password' = 'text';\r\n  @Prop() internalId: string = 'text-field';\r\n  @State() internalType: string;\r\n  @Event() ifxInput: EventEmitter<String>;\r\n  // @Prop({ reflect: true })\r\n  // resetOnSubmit: boolean = false;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Watch('value')\r\n  valueWatcher(newValue: string) {\r\n    if (newValue !== this.inputElement.value) {\r\n      this.inputElement.value = newValue;\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.value = '';\r\n    this.inputElement.value = '';\r\n  }\r\n\r\n  handleDeleteContent() {\r\n    if (!this.disabled && !this.readOnly) {\r\n      this.reset();\r\n      this.ifxInput.emit(this.value);\r\n    }\r\n  }\r\n\r\n  handleInput() {\r\n    const query = this.inputElement.value;\r\n    this.value = query;\r\n    //this.internals.setFormValue(query) // update form value\r\n    this.ifxInput.emit(this.value);\r\n  }\r\n\r\n  handleTypeProp() {\r\n    this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';\r\n  }\r\n\r\n  // formResetCallback() {\r\n  //   this.internals.setValidity({});\r\n  //   this.internals.setFormValue(\"\");\r\n  // }\r\n\r\n  componentWillLoad() {\r\n    this.handleTypeProp();\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-text-field', await framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        aria-label=\"a text field for user input\"\r\n        aria-value={this.value}\r\n        aria-disabled={this.disabled}\r\n        class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\r\n      >\r\n        <div class=\"textInput__top-wrapper\">\r\n          {this.label && (\r\n            <label htmlFor={this.internalId}>\r\n              <span>{this.label}</span>\r\n              {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\r\n            </label>\r\n          )}\r\n        </div>\r\n\r\n        <div class=\"textInput__bottom-wrapper\">\r\n          <div class=\"input-container\">\r\n            {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\r\n            <input\r\n              ref={el => (this.inputElement = el)}\r\n              disabled={this.disabled && !this.error}\r\n              autocomplete={this.autocomplete}\r\n              type={this.internalType}\r\n              id={this.internalId}\r\n              value={this.value}\r\n              onInput={() => this.handleInput()}\r\n              placeholder={this.placeholder}\r\n              readonly={this.readOnly}\r\n              maxlength={this.maxlength}\r\n              class={`${this.icon ? 'icon' : ''}\r\n                ${this.error ? 'error' : ''} \r\n                ${this.readOnly ? 'readonly' : ''} \r\n              ${this.size === 's' ? 'input-s' : ''}\r\n              ${this.success ? 'success' : ''}`}\r\n            />\r\n\r\n            {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\r\n          </div>\r\n          {this.caption && (\r\n            <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\r\n              {this.caption}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-T-OkJYup.js.map

@@ -1 +0,0 @@
-{"file":"p-T-OkJYup.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD;;MCWlpD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AAGxC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAgDtC;AA9CC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAI/C,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,mCAAmC;AAC5C,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,kCAAkC;AAC3C,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA;AACE,gBAAA,OAAO,oCAAoC;;;IAIjD,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACnD,IAAI,CAAC,QAAQ,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EACrC,CAAA,CACA,CACP,CAEF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.ifx-notification__wrapper {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n\r\n  &.ifx-notification__wrapper--success {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorGreen500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--locked {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOrange500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--error {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorRed500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--neutral{\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__icon {\r\n    margin-right: tokens.$ifxSpace100;\r\n    display: flex;\r\n    align-self: center;\r\n  }\r\n\r\n  & .ifx-notification__body {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-grow: 1;\r\n    font-size: tokens.$ifxFontSizeS;\r\n\r\n    & .ifx-notification__slot {\r\n      flex-grow: 1;\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__link {\r\n    font-size: tokens.$ifxFontSizeS;\r\n  }\r\n\r\n  @media (max-width: tokens.$ifxBreakpointXs) {\r\n    & .ifx-notification__icon {\r\n      align-self: flex-start;\r\n    }\r\n\r\n    & .ifx-notification__body {\r\n      flex-direction: column;\r\n    }\r\n\r\n    & .ifx-notification__link {\r\n      margin-top: tokens.$ifxSpace100;\r\n    }\r\n  }\r\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\r\n\r\n@Component({\r\n  tag: 'ifx-notification',\r\n  styleUrl: 'notification.scss',\r\n  shadow: true\r\n})\r\nexport class Notification {\r\n  @Element() el;\r\n  @Prop() icon: string;\r\n  @Prop() variant: NotificationVariant = 'success';\r\n  @Prop() linkText: string; \r\n  @Prop() linkHref: string;\r\n  @Prop() linkTarget: string = '_blank';\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-notification', await framework)\r\n    }\r\n  }\r\n\r\n  private getClassName(): string {\r\n    switch (this.variant) {\r\n      case 'success':\r\n        return 'ifx-notification__wrapper--success';\r\n      case 'locked':\r\n        return 'ifx-notification__wrapper--locked';\r\n      case 'error':\r\n        return 'ifx-notification__wrapper--error';\r\n      case 'neutral':\r\n        return 'ifx-notification__wrapper--neutral';\r\n      default:\r\n        return 'ifx-notification__wrapper--success';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\r\n          <div class=\"ifx-notification__icon\">\r\n            <ifx-icon icon={this.icon}></ifx-icon>\r\n          </div>\r\n          <div class=\"ifx-notification__body\">\r\n            <div class=\"ifx-notification__slot\">\r\n              <slot/>\r\n            </div>\r\n            { this.linkText && this.linkHref && \r\n            <div class=\"ifx-notification__link\">\r\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\r\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\r\n              </ifx-icon>\r\n              </ifx-link>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/p-TR-rcXLt.js.map

@@ -1 +0,0 @@
-{"file":"p-TR-rcXLt.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,8mFAA8mF;;MCUlnF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA0D,SAAS;AAG1E,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAQ,CAAA,QAAA,GAAG,WAAW;QAG9B,IAAA,CAAA,oBAAoB,GAAG;AACrB,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,QAAQ,EAAE,aAAa;AACvB,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,MAAM,EAAE,eAAe;SACxB;AA4DF;IA1DC,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;IAGtB,iBAAiB,GAAA;QACf,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAQ,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,YAAA,EAAa,eAAe,EAAA,EACtE,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL;;IAIV,gBAAgB,CAAC,MAAM,GAAG,IAAI,EAAA;QAC5B,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;;IAGlE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;;;AAIlD,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,MAAM,eAAe,EAAE;AACzC,YAAA,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC;;;IAI1C,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,EAAY,WAAA,EAAA,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,EAAA,EAC/K,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,CAAqB,kBAAA,EAAA,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,EAAA,EAC9E,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,IAAI,EAAC,OAAO,EAAA,EAC9C,IAAI,CAAC,IAAI,KACR,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CACzB,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.alert__info-wrapper {\r\n  display: flex;\r\n  padding: 16px 24px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\r\n\r\n  & .info__text-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: tokens.$ifxSpace100;\r\n    width: 100%;\r\n\r\n    & .info__headline-wrapper {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 1;\r\n      line-clamp: 1;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n\r\n    & .info__headline-wrapper,\r\n    .info__description-wrapper {\r\n      color: #1D1D1D;\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 24px;\r\n\r\n      ::slotted(p) {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n    }\r\n\r\n    & .info__description-wrapper {\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  & .close-icon-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    justify-content: flex-start;\r\n    //min-width: tokens.$ifxSize500;\r\n\r\n    & button {\r\n      all: unset;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 0;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      height: tokens.$ifxSize300;\r\n      width: tokens.$ifxSize300;\r\n\r\n\r\n      &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 2px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.alert {\r\n  display: flex;\r\n  border: 1px solid tokens.$ifxColorOcean500;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\r\n\r\n\r\n  & .close-icon-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: tokens.$ifxSize500;\r\n\r\n    & button {\r\n      all: unset;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 0;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      height: tokens.$ifxSize300;\r\n      width: tokens.$ifxSize300;\r\n\r\n      &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .icon-wrapper {\r\n    position: relative;\r\n    min-width: tokens.$ifxSize600;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .alert-text {\r\n    font-size: 16px;\r\n    width: 100%;\r\n    padding: 12px 0px 12px 12px;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    white-space: pre-wrap;\r\n    /* wraps text at spaces and within words */\r\n    word-wrap: break-word;\r\n    /* breaks text within a word if necessary */\r\n    overflow-wrap: anywhere;\r\n    /* breaks text at arbitrary points when needed */\r\n  }\r\n\r\n  &.primary {\r\n    border: 1px solid tokens.$ifxColorOcean500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorOcean500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.success {\r\n    border: 1px solid tokens.$ifxColorGreen500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorGreen500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.danger {\r\n    border: 1px solid tokens.$ifxColorRed500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorRed500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.warning {\r\n    border: 1px solid tokens.$ifxColorOrange500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorOrange500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n}\r\n\r\n.close-icon-wrapper {\r\n  & ifx-icon {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n}","import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-alert',\r\n  styleUrl: 'alert.scss',\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element() el: HTMLElement;\r\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\r\n  @Prop() icon: string;\r\n  @Event() ifxClose: EventEmitter;\r\n  @Prop() closable: boolean = true;\r\n  @Prop() AriaLive = 'assertive';\r\n  @State() uniqueId: string;\r\n\r\n  alertTypeDescription = {\r\n    \"primary\": 'Neutral alert',\r\n    \"success\": 'Success Alert',\r\n    \"danger\": 'Error Alert',\r\n    \"warning\": 'Warning Alert',\r\n    \"info\": 'Neutral alert',\r\n  };\r\n\r\n  handleClose() {\r\n    this.ifxClose.emit();\r\n  }\r\n\r\n  renderCloseButton() {\r\n    return (\r\n      <div class=\"close-icon-wrapper\">\r\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\r\n          <ifx-icon icon=\"cross-16\" />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  generateUniqueId(prefix = 'id') {\r\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    if (!this.uniqueId) {\r\n      this.uniqueId = this.generateUniqueId('alert');\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = await detectFramework();\r\n      trackComponent('ifx-alert', framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return this.variant === 'info' ? (\r\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\r\n        <div class=\"info__text-wrapper\">\r\n          <div class=\"info__headline-wrapper\">\r\n            <slot name=\"headline\" />\r\n          </div>\r\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\r\n            <slot name=\"desc\" />\r\n          </div>\r\n        </div>\r\n        {this.closable ? this.renderCloseButton() : null}\r\n      </div>\r\n    ) : (\r\n      <div class={`alert ${this.variant}`} role=\"alert\">\r\n        {this.icon && (\r\n          <div class=\"icon-wrapper\">\r\n            <ifx-icon icon={this.icon} />\r\n          </div>\r\n        )}\r\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\r\n          <slot />\r\n        </div>\r\n        {this.closable ? this.renderCloseButton() : null}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-UJUcpUZI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.container {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 32px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n  flex-wrap: wrap;\r\n\r\n  & .items__per-page-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n\r\n    & .items__per-page-label {\r\n      color: #1D1D1D;\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 20px;\r\n    }\r\n\r\n    & .items__per-page-field {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n\r\n      & ifx-select {\r\n        width: 92px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .items__total-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    & .items__total-button {\r\n      display: flex;\r\n      width: 40px;\r\n      height: 40px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 100px;\r\n      border: 1px solid #BFBBBB;\r\n      background: #FFF;\r\n    }\r\n\r\n    & .page__numbers-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      gap: 12px;\r\n\r\n      & .page__number-item {\r\n        display: flex;\r\n        padding: 6px;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 10px;\r\n        border-radius: 100px;\r\n\r\n        &.active {\r\n          background-color: #0A8276;\r\n\r\n          & span {\r\n            color: #fff;\r\n          }\r\n        }\r\n\r\n        &:hover {\r\n          cursor: pointer;\r\n        }\r\n\r\n        &:hover:not(.active) {\r\n          background-color: #ddd;\r\n\r\n        }\r\n\r\n        &:active:not(.active) {\r\n          background-color: #575352;\r\n        }\r\n\r\n        & span {\r\n          display: flex;\r\n          width: 16px;\r\n          height: 16px;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n          color: #1D1D1D;\r\n          text-align: center;\r\n          font-size: 13px;\r\n          font-style: normal;\r\n          font-weight: 400;\r\n          line-height: 20px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n.pagination {\r\n  display: flex;\r\n\r\n  & ifx-icon-button:first-of-type {\r\n    margin-right: 12px;\r\n  }\r\n\r\n  & ifx-icon-button:last-of-type {\r\n    margin-left: 12px;\r\n  }\r\n}\r\n\r\n.page__button {\r\n  padding: 8px;\r\n  border-radius: 100px;\r\n}\r\n\r\nol {\r\n  list-style-type: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\nli {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: 100px;\r\n\r\n  &:hover:not(.active) {\r\n    & page__button {\r\n      background-color: #EEEDED;\r\n    }\r\n  }\r\n\r\n  &:active:not(.active) {\r\n    & .page__button {\r\n      background-color: #575352;\r\n      color: #fff;\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    background-color: #0A8276;\r\n\r\n    & .page__button {\r\n      color: #fff;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  & .page__button {\r\n    text-decoration: none;\r\n    display: flex;\r\n    width: 16px;\r\n    height: 16px;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    color: #1D1D1D;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    align-items: center;\r\n  }\r\n}\r\n\r\n.prev,\r\n.next {\r\n  &.disabled {\r\n    cursor: default;\r\n\r\n    &:hover {\r\n      cursor: default;\r\n      text-decoration: none;\r\n    }\r\n  }\r\n}\r\n\r\n.prev {\r\n  margin-right: 2.5px;\r\n}\r\n\r\n.next {\r\n  margin-left: 2.5px;\r\n}\r\n\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n  .container {\r\n    gap: tokens.$ifxSpace200;\r\n    justify-content: left;\r\n\r\n    .items__total-wrapper {\r\n      .pagination {\r\n        ol {\r\n          gap: tokens.$ifxSpace150;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@media (max-width: 374px) {\r\n  .pagination {\r\n    .ellipsis + .active {\r\n      margin-left: tokens.$ifxSpace100;\r\n    }\r\n\r\n    .active + .ellipsis {\r\n      margin-left: tokens.$ifxSpace100;\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-pagination',\r\n  styleUrl: 'pagination.scss',\r\n  shadow: true\r\n})\r\nexport class Pagination {\r\n  @Element() el: HTMLElement;\r\n  @Event() ifxPageChange: EventEmitter;\r\n  @Event() ifxItemsPerPageChange: EventEmitter;\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() showItemsPerPage: boolean = true;\r\n  @State() internalPage: number = 1;\r\n  @State() internalItemsPerPage: number = 10;\r\n  @State() numberOfPages: number[] = [];\r\n  @Prop() total: number = 1;\r\n  @Prop() itemsPerPage: any[] | string;\r\n  @State() filteredItemsPerPage: any[] = [];\r\n  @State() visiblePages: (number | string)[] = [];\r\n\r\n  private CLASS_DISABLED = \"disabled\";\r\n  private CLASS_ACTIVE = \"active\";\r\n  private prevInternalPage: number;\r\n\r\n  @Watch('total')\r\n  watchTotalHandler() {\r\n    this.calculateNumberOfPages();\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n  @Watch('currentPage')\r\n  currentPageWatcher(newVal: number) {\r\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\r\n    this.calculateNumberOfPages();\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n    @Listen('ifxSelect')\r\n    setItemsPerPage(e: CustomEvent) {\r\n      const selectedValue = e.detail?.value || e.detail?.label;\r\n      const newItemsPerPage = parseInt(selectedValue) || 10;\r\n\r\n      if (newItemsPerPage === this.internalItemsPerPage) {\r\n        return;\r\n      }\r\n\r\n      this.internalItemsPerPage = newItemsPerPage;\r\n      this.internalPage = 1;\r\n      this.calculateNumberOfPages();\r\n      this.updateVisiblePages();\r\n      this.handleEventEmission();\r\n    }\r\n\r\n    emitItemsPerPage(e) {\r\n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\r\n    }\r\n\r\n  async componentDidLoad() {\r\n    if (this.showItemsPerPage) {\r\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n      if(select) {\r\n        select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\r\n      }\r\n    }\r\n\r\n    // Add resize listener to update pagination on screen size changes\r\n    window.addEventListener('resize', this.handleResize);\r\n\r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-pagination', await framework)\r\n    }\r\n    this.initPagination();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.showItemsPerPage) {\r\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n      if (select) {\r\n        select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\r\n      }\r\n    }\r\n\r\n    // Remove resize listener\r\n    window.removeEventListener('resize', this.handleResize);\r\n\r\n    // Clear any pending resize timeout\r\n    if (this.resizeTimeout) {\r\n      clearTimeout(this.resizeTimeout);\r\n    }\r\n  }\r\n\r\n  updateVisiblePages() {\r\n    // Check if screen is mobile (< 375px)\r\n    const isMobile = window.innerWidth < 375;\r\n    const totalPages = this.numberOfPages.length;\r\n    const current = this.internalPage;\r\n    let pages: (number | string)[] = [];\r\n\r\n    if (isMobile) {\r\n      // Mobile logic: maximum 5 elements\r\n      if (totalPages <= 5) {\r\n        pages = [...this.numberOfPages];\r\n      } else {\r\n        // Always show first page\r\n        pages.push(1);\r\n\r\n        if (current <= 2) {\r\n          // Show: 1 2 3 … 10 (for pages 1 and 2)\r\n          pages.push(2, 3, '...', totalPages);\r\n        } else if (current >= totalPages - 1) {\r\n          // Show: 1 … 23 24 25 (for last 2 pages only)\r\n          pages.push('...', totalPages - 2, totalPages - 1, totalPages);\r\n        } else {\r\n          // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\r\n          pages.push('...', current, '...', totalPages);\r\n        }\r\n      }\r\n    } else {\r\n      // Desktop logic: maximum 7 elements\r\n      const buffer = 2;\r\n\r\n      if (totalPages <= 7) {\r\n        pages = [...this.numberOfPages];\r\n      } else {\r\n        // Always show first page\r\n        pages.push(1);\r\n\r\n        // Determine the range around current page\r\n        let start = Math.max(2, current - buffer);\r\n        let end = Math.min(totalPages - 1, current + buffer);\r\n\r\n        // Adjust range to ensure we show enough pages\r\n        // If we're close to the beginning, extend the end\r\n        if (current <= 4) {\r\n          start = 2;\r\n          end = Math.min(totalPages - 1, 5);\r\n        }\r\n        // If we're close to the end, extend the start\r\n        else if (current >= totalPages - 3) {\r\n          start = Math.max(2, totalPages - 4);\r\n          end = totalPages - 1;\r\n        }\r\n        // For middle pages, show current +/- 1\r\n        else {\r\n          start = current - 1;\r\n          end = current + 1;\r\n        }\r\n\r\n        // Add ellipsis before the range if there's a gap\r\n        if (start > 2) {\r\n          pages.push('...');\r\n        }\r\n\r\n        // Add the range of pages\r\n        for (let i = start; i <= end; i++) {\r\n          pages.push(i);\r\n        }\r\n\r\n        // Add ellipsis after the range if there's a gap\r\n        if (end < totalPages - 1) {\r\n          pages.push('...');\r\n        }\r\n\r\n        // Always show last page\r\n        pages.push(totalPages);\r\n      }\r\n    }\r\n\r\n    this.visiblePages = pages;\r\n  }\r\n\r\n  calculateNumberOfPages() {\r\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\r\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\r\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\r\n  }\r\n\r\n  filterOptionsArray() {\r\n    const items = typeof this.itemsPerPage === 'string' ?\r\n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\r\n    this.filteredItemsPerPage = items.map(item => ({\r\n      ...item,\r\n      label: item.label || item.value\r\n    }));\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.filterOptionsArray();\r\n\r\n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\r\n    if (selectedOption) {\r\n      this.internalItemsPerPage = Number(selectedOption.value);\r\n    } else if (this.filteredItemsPerPage.length > 0) {\r\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\r\n    }\r\n\r\n    this.calculateNumberOfPages();\r\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n     if (this.prevInternalPage !== this.internalPage) {\r\n      this.updateVisiblePages();\r\n      this.prevInternalPage = this.internalPage;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.initPagination();\r\n  }\r\n\r\n  handleEventEmission() {\r\n    this.ifxPageChange.emit({\r\n      currentPage: this.internalPage,\r\n      totalPages: this.numberOfPages.length,\r\n      itemsPerPage: this.internalItemsPerPage\r\n    });\r\n  }\r\n\r\n  initPagination() {\r\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\r\n    if (!pagination) return;\r\n\r\n    const updateButtons = () => {\r\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\r\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\r\n      if (prev) {\r\n        prev.disabled = this.internalPage === 1;\r\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\r\n      }\r\n      if (next) {\r\n        next.disabled = this.internalPage === this.numberOfPages.length;\r\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\r\n      }\r\n    };\r\n\r\n    pagination.querySelectorAll('li').forEach(li => {\r\n      li.removeEventListener('click', this.handlePageClick);\r\n      li.addEventListener('click', this.handlePageClick);\r\n    });\r\n\r\n    updateButtons();\r\n  }\r\n\r\n  private handlePageClick = (e: Event) => {\r\n    const li = e.currentTarget as HTMLLIElement;\r\n    const page = parseInt(li.dataset.page);\r\n    if (!isNaN(page)) this.changePage(page);\r\n  };\r\n\r\n  private handleResize = () => {\r\n    // Debounce resize events to prevent excessive calls\r\n    clearTimeout(this.resizeTimeout);\r\n    this.resizeTimeout = setTimeout(() => {\r\n      this.updateVisiblePages();\r\n    }, 100);\r\n  };\r\n\r\n  private resizeTimeout: any;\r\n\r\n  changePage(newPage: number) {\r\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\r\n    if (newPage === this.internalPage) return;\r\n\r\n    this.internalPage = newPage;\r\n    this.handleEventEmission();\r\n    this.initPagination();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"container\">\r\n        {this.showItemsPerPage && (\r\n          <div class=\"items__per-page-wrapper\">\r\n            <div class=\"items__per-page-label\">Results per Page</div>\r\n            <div class=\"items__per-page-field\">\r\n              <ifx-select\r\n                id='itemsPerPageSelect'\r\n                placeholder='false'\r\n                show-search='false'\r\n                value={undefined}\r\n                disabled={false}\r\n                error={false}\r\n                size=\"s\"\r\n                options={this.filteredItemsPerPage}\r\n                placeholder-value=\"Select\"\r\n              ></ifx-select>\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        <div class=\"items__total-wrapper\">\r\n          <div class=\"pagination\">\r\n            <ifx-icon-button\r\n              class=\"prev\"\r\n              icon=\"arrow-left-16\"\r\n              aria-label='Previous Page'\r\n              onClick={() => this.changePage(this.internalPage - 1)}\r\n              variant=\"secondary\"\r\n            ></ifx-icon-button>\r\n\r\n            <ol>\r\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\r\n              <li\r\n                key={`page-${page}`}\r\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\r\n                data-page={page}\r\n              >\r\n                <span \r\n                  class='page__button'\r\n                  role=\"button\"\r\n                  tabindex=\"0\"\r\n                  aria-current={page === this.internalPage ? \"page\" : undefined}\r\n                  aria-label={`Page ${page}`}\r\n                  onClick={() => this.changePage(page)}\r\n                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page)}\r\n                >\r\n                  {page}\r\n                </span>\r\n              </li>\r\n            ) : (\r\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\r\n                <span aria-hidden=\"true\">...</span>\r\n              </li>\r\n            ))}\r\n            </ol>\r\n\r\n            <ifx-icon-button\r\n              class=\"next\"\r\n              icon=\"arrow-right-16\"\r\n              aria-label='Next Page'\r\n              onClick={() => this.changePage(this.internalPage + 1)}\r\n              variant=\"secondary\"\r\n            ></ifx-icon-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"p-rP_UHrBl.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,ywBAAywB;;MCUjxB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AAC1B,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAkC3B;IAhCC,YAAY,GAAA;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM;;IAGrF,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAIpD,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;;IAGrB,MAAM,GAAA;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,EAAA,EAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;AAC1B,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAqB,kBAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.indicator__container { \r\n  & .dot__wrapper { \r\n  display: flex;\r\n  width: 8px;\r\n  height: 8px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .number__container {\r\n  height: 16px;\r\n  display: inline-flex;\r\n  padding: 0; \r\n  min-width: 16px; \r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: 100px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n    & .number__wrapper {\r\n      padding: 0 4px;\r\n      color: tokens.$ifxColorBaseWhite;\r\n      text-align: center;\r\n      font-size: tokens.$ifxFontSizeS;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: 16px;\r\n    }\r\n\r\n    &.inverted {\r\n      background-color: tokens.$ifxColorBaseWhite;\r\n\r\n      & .number__wrapper {\r\n        color: tokens.$ifxColorOcean500;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n","import { Component, h, Prop, Element, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-indicator',\r\n  styleUrl: 'indicator.scss',\r\n  shadow: true\r\n})\r\nexport class Indicator {\r\n  @Element() el;\r\n  @State() filteredNumber: string | number;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() variant: string = 'number'\r\n  @Prop() number: number = 0;\r\n\r\n  handleNumber() {\r\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    this.handleNumber()\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-indicator', await framework)\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.handleNumber()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label={this.ariaLabel} class='indicator__container'>\r\n       {this.variant === 'number' && \r\n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\r\n          <div class=\"number__wrapper\">\r\n            {this.filteredNumber}\r\n          </div> \r\n       </div>}\r\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

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

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