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

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","SearchField","constructor","hostRef","this","value","suggestions","showSuggestions","maxSuggestions","maxHistoryItems","enableHistory","historyKey","historyHeaderText","ariaLabel","deleteIconAriaLabel","historyDeleteAriaLabel","dropdownAriaLabel","suggestionAriaLabel","historyItemAriaLabel","showDropdown","filteredSuggestions","selectedSuggestionIndex","searchHistory","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","focusEmitted","handleInput","query","inputElement","ifxInput","emit","requestSuggestions","handleDelete","hideDropdown","handleSearch","trim","length","addToHistory","handleHistoryDelete","event","term","stopPropagation","removeFromHistory","handleOutsideClick","path","composedPath","includes","dropdownElement","handleKeyDown","key","preventDefault","navigateSuggestions","selectSuggestion","valueWatcher","newValue","updateSuggestions","suggestionsWatcher","focusInput","ifxFocus","showHistoryDropdown","blurInput","setTimeout","ifxBlur","loadSearchHistory","localStorage","stored","getItem","JSON","parse","clearSearchHistory","removeItem","history","existingIndex","indexOf","splice","unshift","slice","setItem","stringify","index","ifxSuggestionRequested","toLowerCase","filteredExternal","filter","s","text","filteredHistory","map","id","type","sort","a","b","aText","bText","aStartsWith","startsWith","bStartsWith","localeCompare","historySuggestions","uniqueSuggestions","reduce","unique","current","findIndex","item","scope","push","direction","maxIndex","suggestion","ifxSuggestionSelected","isShowingOnlyHistory","every","renderHighlightedText","lowerText","lowerQuery","before","substring","match","after","h","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","class","getWrapperClassNames","tabindex","onClick","icon","ref","onInput","onFocus","onBlur","role","undefined","ariaLabelledBy","ariaDescribedBy","onKeyDown","getSuggestionClassNames","resultCount","onMouseEnter","getSizeClass","classNames","_a"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name","id"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.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.card {\r\n  position: relative;\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  word-wrap: break-word;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  background-clip: border-box;\r\n  border: 2px solid tokens.$ifxColorEngineering200;\r\n  border-radius: 2px;\r\n  //width: 22rem;\r\n  width: 350px;\r\n  height: auto;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  // when the link is focused or hovered, the border color changes\r\n  &:has(.card-href:focus), &:has(.card-href:hover) {\r\n    outline: none;\r\n    border-color: tokens.$ifxColorOcean500;\r\n\r\n    ::slotted(ifx-card-headline) {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n  }\r\n\r\n  &.noBtns {\r\n    & .vertical {\r\n      & .lower__body-wrapper {\r\n        padding-bottom: 24px;\r\n      }\r\n    }\r\n\r\n    & .horizontal {\r\n      & .lower__body-wrapper {\r\n        padding-bottom: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .horizontal {\r\n    display: flex;\r\n    flex-direction: row;\r\n    min-height: 218px;\r\n\r\n    & .card-img {\r\n      flex: 1;\r\n      text-decoration: none;\r\n\r\n      &.noImage {\r\n        display: none;\r\n      }\r\n\r\n      & ::slotted([slot=img]) {\r\n        width: 100%;\r\n        vertical-align: bottom;\r\n      }\r\n    }\r\n\r\n    & .lower__body-wrapper {\r\n      flex: 1;\r\n      display: grid;\r\n      grid-template-rows: 1fr auto;\r\n\r\n      & .upper-body {\r\n        display: flex;\r\n        flex-direction: column;\r\n        text-decoration: none;\r\n        color: tokens.$ifxColorBaseBlack;\r\n        padding: 24px 24px 0px 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .vertical {\r\n    & .upper__body-wrapper {\r\n      text-decoration: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n\r\n      & .card-img {\r\n        height: 190px;\r\n\r\n        &.noImage {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      & .upper-body {\r\n        padding: 24px 24px 0px 24px;\r\n      }\r\n    }\r\n\r\n    & .lower__body-wrapper {\r\n      &:hover {\r\n        border-color: tokens.$ifxColorEngineering200;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.horizontal {\r\n    flex-direction: row;\r\n    width: 538px;\r\n\r\n    & .card-img {\r\n      flex: 1;\r\n      order: 2;\r\n\r\n      & ::slotted([slot=img]) {\r\n        width: 100%;\r\n        height: 100%;\r\n        vertical-align: bottom;\r\n        object-fit: cover;\r\n      }\r\n    }\r\n\r\n    &.left {\r\n      & .horizontal {\r\n        & .card-img {\r\n          order: 1;\r\n        }\r\n\r\n        & .lower__body-wrapper {\r\n          order: 2;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  & .card-href:focus {\r\n    outline: none;\r\n  }\r\n}","import { Component, h, Host, Element, Prop, State, Listen } 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-card',\r\n  styleUrl: 'card.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class Card {\r\n  @Element() el;\r\n  @State() noBtns: boolean;\r\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\r\n  @State() alignment: string;\r\n  @State() noImg: boolean;\r\n  @Prop() href: string = \"\";\r\n  @State() internalHref: string = \"\";\r\n  @Prop() target: string = \"_self\";\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  @Listen('imgPosition')\r\n  setImgPosition(event) {\r\n    this.alignment = event.detail;\r\n  }\r\n\r\n  handleComponentAdjustment() {\r\n    const image = this.el.querySelector('ifx-card-image');\r\n    const links = this.el.querySelector('ifx-card-links');\r\n\r\n    this.noImg = !image;\r\n    this.noBtns = !links;\r\n\r\n    if (this.href.trim() === \"\") {\r\n      this.internalHref = undefined;\r\n    } else {\r\n      this.internalHref = this.href;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.handleComponentAdjustment();\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-card', await framework);\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.handleComponentAdjustment();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div \r\n          aria-label={this.ariaLabel} \r\n          class={\r\n            `card \r\n            ${this.noBtns ? 'noBtns' : \"\"}\r\n            ${this.direction} \r\n            ${this.alignment}`\r\n          }\r\n          role=\"group\"\r\n        >\r\n\r\n          {this.direction === 'horizontal' &&\r\n            <div class=\"horizontal\">\r\n              <a \r\n                class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \r\n                href={this.internalHref}\r\n              >\r\n                <slot name=\"img\" />\r\n              </a>\r\n\r\n              <div class='lower__body-wrapper'>\r\n                <a \r\n                  class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \r\n                  href={this.internalHref}\r\n                  id=\"upper-body-content\"\r\n                >\r\n                  <slot />\r\n                </a>\r\n                <div>\r\n                  <slot name='buttons' />\r\n                </div>\r\n              </div>\r\n            </div>}\r\n\r\n          {this.direction === 'vertical' &&\r\n            <div class=\"vertical\">\r\n              <a \r\n                class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \r\n                href={this.internalHref} \r\n                target={this.target}\r\n              >\r\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\r\n                  <slot name=\"img\" />\r\n                </div>\r\n\r\n                <div class='upper-body' id=\"upper-body-content\">\r\n                  <slot />\r\n                </div>\r\n              </a>\r\n\r\n              <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\r\n                <slot name='buttons' />\r\n              </div>\r\n            </div>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"mIAAA,MAAMA,EAAU,q0D,MCWHC,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAASC,UAA8B,WAGvCD,KAAIE,KAAW,GACdF,KAAYG,aAAW,GACxBH,KAAMI,OAAW,OAkG1B,CA9FC,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpCZ,KAAKc,OAASJ,EACdV,KAAKe,QAAUF,EAEf,GAAIb,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,KACf,CACLjB,KAAKG,aAAeH,KAAKE,I,EAI7B,iBAAAgB,GACElB,KAAKS,2B,CAGP,sBAAMU,GACJ,IAAIC,EAAuBpB,KAAKW,IAAK,CACnC,MAAMU,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,mBAAAG,GACExB,KAAKS,2B,CAGP,MAAAgB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDACc5B,KAAK6B,UACjBC,MACE,sBACE9B,KAAKe,OAAS,SAAW,mBACzBf,KAAKC,2BACLD,KAAKO,YAETwB,KAAK,SAGJ/B,KAAKC,YAAc,cAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CACEE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KACpFD,KAAMF,KAAKG,cAEXuB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAK,OAAAE,IAAA,2CAAAE,MAAM,uBACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,cAAc9B,KAAKG,aAAe,YAAc,KACvDD,KAAMF,KAAKG,aACX8B,GAAG,sBAEHP,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlBhC,KAAKC,YAAc,YAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,YACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,uBAAuB9B,KAAKG,aAAe,YAAc,KAChED,KAAMF,KAAKG,aACXC,OAAQJ,KAAKI,QAEbsB,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAC/CY,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aAAaG,GAAG,sBACzBP,EAAA,QAAAE,IAAA,+CAIJF,EAAK,OAAAE,IAAA,2CAAAE,MAAM,sBAAsBC,KAAK,QAAO,kBAAiB,sBAC5DL,EAAM,QAAAE,IAAA,2CAAAI,KAAK,e","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonGroupCss","RadioButtonGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","required","hasErrors","handleSlotChange","initializeState","handleRadioButtonError","event","radioButton","target","tagName","toLowerCase","set","detail","updateHasErrors","setGroupError","error","radioButtons","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","console","log","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.radio-button-group-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.radio-button-group {\r\n    display: flex;\r\n    gap: tokens.$ifxSpace100;\r\n\r\n    &.horizontal {\r\n        flex-direction: row;\r\n        column-gap: tokens.$ifxSpace150;\r\n    }\r\n\r\n    &.vertical {\r\n        flex-direction: column;\r\n        row-gap: tokens.$ifxSpace150;\r\n    }\r\n}\r\n\r\n.group-label {\r\n    font-size: tokens.$ifxFontSizeM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    margin-bottom: tokens.$ifxSpace100;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n    color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n    margin-top: tokens.$ifxSpace100;\r\n    align-self: flex-start;\r\n    display: flex;\r\n    width: 100%;\r\n    column-gap: tokens.$ifxSpace100;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    &.default {\r\n        color: tokens.$ifxColorBaseBlack;\r\n    }\r\n\r\n    &.error {\r\n        color: tokens.$ifxColorRed500;\r\n    }\r\n}\r\n\r\n.caption-text {\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    line-height: tokens.$ifxLineHeightXs;\r\n    flex: 1;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n    flex:0;\r\n    display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, 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-group',\r\n    styleUrl: 'radio-button-group.scss',\r\n    shadow: true,\r\n    // formAssociated: true\r\n})\r\n\r\nexport class RadioButtonGroup {\r\n    private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n    @Element() el: HTMLElement;\r\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n    @Prop() size: string;\r\n    @Prop() showGroupLabel: boolean;\r\n    @Prop() groupLabelText: string = 'Group Label Text';\r\n    @Prop() showCaption: boolean;\r\n    @Prop() captionText: string;\r\n    @Prop() showCaptionIcon: boolean;\r\n    @Prop() required: boolean = false;\r\n    @State() hasErrors: boolean = false;\r\n    \r\n    @Listen('ifxError')\r\n    handleRadioButtonError(event: CustomEvent) {\r\n        const radioButton = event.target as HTMLElement;\r\n        if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\r\n            this.errorStates.set(radioButton, event.detail);\r\n            this.updateHasErrors();\r\n        }\r\n    }\r\n\r\n     // Method to set the error state of all radio-butttons in the group\r\n      @Method()\r\n      async setGroupError(error: boolean) {\r\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n        radioButtons.forEach((radioButton) => {\r\n          (radioButton as any).error = error;\r\n        });\r\n      }\r\n\r\n    componentWillLoad() {\r\n        this.initializeState();\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-group', await framework)\r\n        }\r\n    }\r\n\r\n    handleSlotChange = () => {\r\n        this.initializeState();\r\n    };\r\n\r\n    private initializeState() {\r\n        this.errorStates.clear();\r\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n        radioButtons.forEach((radioButton) => {\r\n            if (!this.errorStates.has(radioButton)) {\r\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\r\n            }\r\n        });\r\n        this.updateHasErrors();\r\n    }\r\n\r\n    private updateHasErrors() {\r\n        console.log('here')\r\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class='radio-button-group-container'>\r\n                {this.showGroupLabel && (\r\n                    <div class=\"group-label\">\r\n                        {this.groupLabelText}\r\n                        {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n                    </div>\r\n                )}\r\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\r\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\r\n                </div>\r\n                {this.showCaption ? (\r\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n                        </ifx-icon></div> : ''}\r\n                        <div class='caption-text'>{this.captionText}</div>\r\n                    </div>) : ''}\r\n            </div>\r\n        );\r\n    }\r\n}"],"mappings":"iIAAA,MAAMA,EAAsB,u6B,MCYfC,EAAgB,MAP7B,WAAAC,CAAAC,G,UAQYC,KAAAC,YAAyC,IAAIC,IAG7CF,KAASG,UAA8B,WAGvCH,KAAcI,eAAW,mBAIzBJ,KAAQK,SAAY,MACnBL,KAASM,UAAY,MA+B9BN,KAAgBO,iBAAG,KACfP,KAAKQ,iBAAiB,CAwC7B,CArEG,sBAAAC,CAAuBC,GACnB,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAYE,QAAQC,gBAAkB,mBAAoB,CAC1Dd,KAAKC,YAAYc,IAAIJ,EAAaD,EAAMM,QACxChB,KAAKiB,iB,EAMX,mBAAMC,CAAcC,GAClB,MAAMC,EAAeC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASd,IACnBA,EAAoBQ,MAAQA,CAAK,G,CAIxC,iBAAAO,GACI1B,KAAKQ,iB,CAGT,sBAAMmB,GACF,IAAIC,EAAuB5B,KAAKuB,IAAK,CACjC,MAAMM,EAAYC,IAClBC,EAAe,+BAAgCF,E,EAQ/C,eAAArB,GACJR,KAAKC,YAAY+B,QACjB,MAAMZ,EAAeC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASd,IAClB,IAAKX,KAAKC,YAAYgC,IAAItB,GAAc,CACpCX,KAAKC,YAAYc,IAAIJ,EAAcA,EAAoBQ,OAAS,M,KAGxEnB,KAAKiB,iB,CAGD,eAAAA,GACJiB,QAAQC,IAAI,QACZnC,KAAKM,UAAYe,MAAMC,KAAKtB,KAAKC,YAAYmC,UAAUC,MAAMlB,GAAUA,G,CAG3E,MAAAmB,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACNzC,KAAK0C,gBACFH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eACNzC,KAAKI,eACLJ,KAAKK,UAAYkC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYzC,KAAKM,UAAY,QAAU,MAAc,MAG5FiC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,sBAAsBzC,KAAKG,aAAaH,KAAK2C,QACrDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAc5C,KAAKO,oBAE5BP,KAAK6C,YACFN,EAAA,OAAKE,MAAO,WAAWzC,KAAKM,UAAY,QAAU,aAC7CN,KAAK8C,gBAAkBP,EAAK,OAAAE,MAAM,gBAAeF,EAAU,YAAAQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBzC,KAAKgD,cAC1B,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,h as o}from"./p-PqnYwNKt.js";const e=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const r=class{constructor(o){a(this,o)}render(){return o("div",{key:"d58d209bafd95f683e1dc354a1202f04196a8b0a",class:"dropdown-header"},o("span",{key:"28cc9c63a12069353c9c1305b45b6dc718bace6d"},o("slot",{key:"41d2a221685739d726b282153f75c5d3c2ca08ae"})))}};r.style=e;export{r as ifx_dropdown_header};
-//# sourceMappingURL=p-e759a91a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownHeaderCss","DropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.dropdown-header {\r\n  display: flex;\r\n  padding: 8px 16px;\r\n  align-items: center;\r\n  gap: 8px;\r\n  align-self: stretch;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n\r\n  & span {\r\n    color: tokens.$ifxColorEngineering500;\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    /* 142.857% */\r\n  }\r\n}","// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-header',\r\n  styleUrl: 'dropdown-header.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownHeader {\r\n  render() {\r\n    return (\r\n      <div class='dropdown-header'>\r\n        <span>\r\n          <slot />\r\n        </span>\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"2CAAA,MAAMA,EAAoB,0W,MCSbC,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,4CACED,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["filterTypeGroupCss","IfxFilterTypeGroup","constructor","hostRef","this","selectedOptions","handleResetEvent","accordionSlot","el","shadowRoot","querySelector","filterAccordionSlottedElements","assignedElements","flatten","forEach","accordionElement","ifxLists","querySelectorAll","ifxListElement","resetTrigger","filterSearchSlot","filterSearchSlottedElements","filterSearchWrapper","filterSearch","searchField","length","searchFieldElement","value","ifxSidebarFilterChange","emit","handleUpdateSidebarFilter","event","filterName","detail","getAttribute","searchSlot","assignedNodes","searchElement","nodeType","Node","ELEMENT_NODE","filterSearchComponent","firstElementChild","setAttribute","dispatchEvent","CustomEvent","bubbles","composed","newSelectedOptions","map","option","filterGroupName","Object","assign","selectedItems","handleAccordionChange","handleFilterChange","handleSearchChange","type","filterValue","existingOptionIndex","findIndex","push","connectedCallback","addEventListener","window","componentWillUnload","removeEventListener","render","h","Host","key","class","name"],"sources":["src/components/table-advanced-version/filter-type-group/filter-type-group.scss?tag=ifx-filter-type-group&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-type-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.filter-type-group {\r\n  width: 260px;\r\n  align-items: flex-start;\r\n  gap: tokens.$ifxSpace100;\r\n}\r\n\r\n.filter-type-group > ::slotted(*) {\r\n  margin-bottom: 8px;\r\n}\r\n\r\n","import { Component, h, State, Event, EventEmitter, Element, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-filter-type-group',\r\n  styleUrl: 'filter-type-group.scss',\r\n  shadow: true,\r\n})\r\nexport class IfxFilterTypeGroup {\r\n  @Element() el: HTMLElement;\r\n  @State() selectedOptions: Array<{ filterGroupName: string, selectedItems?: Array<{ filterName: string, value: boolean | string }>, value?: string }> = [];\r\n  @Event() ifxSidebarFilterChange: EventEmitter;\r\n\r\n\r\n\r\n  /* If the component is ever removed and then reattached to the DOM, \r\n  connectedCallback ensures that the event listeners are properly set up again */\r\n  connectedCallback() {\r\n    this.el.addEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\r\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\r\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\r\n    window.addEventListener('ifxUpdateSidebarFilter', this.handleUpdateSidebarFilter);\r\n   }\r\n\r\n\r\n  componentWillUnload() {\r\n    this.el.removeEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\r\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\r\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\r\n  }\r\n\r\n  handleResetEvent = () => {\r\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\r\n    const filterAccordionSlottedElements = (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true });\r\n\r\n\r\n    filterAccordionSlottedElements.forEach(accordionElement => {\r\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\r\n\r\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\r\n        ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\r\n      });\r\n    });\r\n\r\n    const filterSearchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\r\n    const filterSearchSlottedElements = (filterSearchSlot as HTMLSlotElement).assignedElements({ flatten: true });\r\n\r\n    filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\r\n      const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\r\n\r\n      const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\r\n\r\n      if (searchField.length > 0) {\r\n        searchField.forEach((searchFieldElement: any) => {\r\n          searchFieldElement.value = '';\r\n        });\r\n\r\n      }\r\n    });\r\n\r\n    this.selectedOptions = [];\r\n\r\n    // Emit the change to inform any parent components that the filters have been reset\r\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\r\n  }\r\n\r\n  handleUpdateSidebarFilter = (event: CustomEvent) => {\r\n    const { filterName } = event.detail;\r\n\r\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\r\n    const filterAccordionSlottedElements = accordionSlot ? (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true }) : [];\r\n\r\n    filterAccordionSlottedElements.forEach(accordionElement => {\r\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\r\n\r\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\r\n        if (ifxListElement.getAttribute('name') === filterName) {\r\n          ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\r\n        }\r\n      });\r\n    });\r\n\r\n    // Clear the search bar within the filter-search slot\r\n    const searchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\r\n    const filterSearchSlottedElements = searchSlot ? (searchSlot as HTMLSlotElement).assignedNodes({ flatten: true }) : [];\r\n  \r\n    filterSearchSlottedElements.forEach(searchElement => {\r\n      if (searchElement.nodeType === Node.ELEMENT_NODE) {\r\n        // Identify the ifx-filter-search component within the slot\r\n        const filterSearchComponent = searchElement as HTMLElement;\r\n          const searchField: any = filterSearchComponent.firstElementChild;\r\n          if (searchField) {\r\n             searchField.setAttribute('value', '');\r\n            searchField.dispatchEvent(new CustomEvent('ifxInput', { bubbles: true, composed: true, detail: '' })); // Trigger ifxInput event to reset\r\n          }\r\n        \r\n      }\r\n    });\r\n\r\n    const newSelectedOptions = this.selectedOptions.map(option => {\r\n      if (option.filterGroupName === filterName) {\r\n        return { ...option, selectedItems: [], value: '' };\r\n      }\r\n      return option;\r\n    });\r\n\r\n    this.selectedOptions = newSelectedOptions;\r\n\r\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\r\n  }\r\n\r\n\r\n  handleAccordionChange = (event: CustomEvent) => {\r\n    this.handleFilterChange(event);\r\n  }\r\n\r\n  handleSearchChange = (event: CustomEvent) => {\r\n    // Call handleFilterChange with the created CustomEvent object\r\n    this.handleFilterChange(event);\r\n  }\r\n\r\n\r\n  handleFilterChange = (event: CustomEvent) => {\r\n    // Create a new array to hold the new state\r\n    const newSelectedOptions = [...this.selectedOptions];\r\n\r\n    // Check the type of the event\r\n    if (event.type === 'ifxFilterSearchChange') {\r\n      // Handle the ifxFilterSearchChange event\r\n      const { filterName, filterValue } = event.detail;\r\n\r\n      // Find the existing filter with the same filterName\r\n      const existingOptionIndex = newSelectedOptions.findIndex(option => typeof option !== 'string' && option.filterGroupName === filterName);\r\n\r\n      if (existingOptionIndex !== -1) {\r\n        // If an existing filter is found, update its value\r\n        newSelectedOptions[existingOptionIndex].value = filterValue;\r\n      } else {\r\n        // If no existing filter is found, append the new filter\r\n        newSelectedOptions.push({ filterGroupName: filterName, value: filterValue });\r\n      }\r\n    } else if (event.type === 'ifxFilterAccordionChange') {\r\n      const { filterGroupName, selectedItems } = event.detail;\r\n\r\n      // Find the existing filter group with the same filterGroupName\r\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterGroupName === filterGroupName);\r\n\r\n      if (existingOptionIndex !== -1) {\r\n        // If an existing filter group is found, update its selectedItems\r\n        newSelectedOptions[existingOptionIndex] = { filterGroupName, selectedItems };\r\n      } else {\r\n        // If no existing filter group is found, append the new filter group\r\n        newSelectedOptions.push({ filterGroupName, selectedItems });\r\n      }\r\n    }\r\n\r\n    // Update the state with the new selected options\r\n    this.selectedOptions = newSelectedOptions;\r\n\r\n    // Emit the entire selectedOptions array\r\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"filter-type-group\">\r\n          <slot name=\"filter-search\" />\r\n          <slot name=\"filter-accordion\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["filterSearchCss","FilterSearch","constructor","hostRef","this","disabled","showDeleteIcon","filterOrientation","valueChanged","newValue","host","setAttribute","toString","handleFilterSearchChange","event","existingFilter","parentElement","querySelector","filterName","Error","filterValue","detail","ifxFilterSearchChange","emit","filterKey","render","h","key","class","placeholder","value"],"sources":["src/components/table-advanced-version/filter-type-group/filter-search/filter-search.scss?tag=ifx-filter-search&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-search/filter-search.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n\r\n\r\n.sidebar-filter-search-wrapper {\r\n  display: flex;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace200 tokens.$ifxSpace200;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-self: stretch;\r\n  gap: tokens.$ifxSpace50;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  background: tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.topbar-filter-search-wrapper {\r\n  display:flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-self: stretch;\r\n  gap: tokens.$ifxSpace50;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n}\r\n\r\n.topbar-filter-search-wrapper ifx-search-field {\r\n  width: 100%; /* Ensure ifx-search-field takes up full width */\r\n}\r\n\r\n.filter-name {\r\n  font-size: tokens.$ifxFontSizeM;\r\n  line-height: tokens.$ifxLineHeightM;\r\n  font-weight: 600;\r\n}","import { Component, h, Listen, Watch, Element, Event, EventEmitter, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-filter-search',\r\n  styleUrl: 'filter-search.scss',\r\n  shadow: true,\r\n})\r\nexport class FilterSearch {\r\n  @Element() host: HTMLElement;\r\n  @Prop() filterName: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop({ mutable: true }) filterValue: string;\r\n  @Prop() filterKey: string;\r\n  @State() showDeleteIcon: boolean = false;\r\n  @Prop() filterOrientation: string = 'sidebar'; //topbar\r\n  @Prop() placeholder: string;\r\n\r\n  @Event() ifxFilterSearchChange: EventEmitter;\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: boolean) {\r\n    this.host.setAttribute('value', newValue.toString());\r\n  }\r\n\r\n  @Listen('ifxInput')\r\n  handleFilterSearchChange(event: CustomEvent) {\r\n    // Check if a search filter with the same filterName already exists\r\n    const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name=\"${this.filterName}\"]`);\r\n    if (existingFilter && existingFilter !== this.host) {\r\n      throw new Error(`A search filter with the name '${this.filterName}' already exists.`);\r\n    }\r\n\r\n    // // Check if the filterName is 'search' and the filter is not the search component\r\n    // if (this.filterName === 'search' && this.filterKey !== 'text') {\r\n    //   throw new Error(\"The filter name 'search' is reserved for the search component.\");\r\n    // }\r\n\r\n    this.filterValue = event.detail;\r\n    this.showDeleteIcon = this.filterValue !== \"\";\r\n    this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`${\r\n      this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'\r\n      }`}>\r\n      <div class=\"filter-name\">{this.filterName}</div>\r\n      <ifx-search-field placeholder={this.placeholder} show-delete-icon={this.showDeleteIcon} disabled={this.disabled} value={this.filterValue}>\r\n      </ifx-search-field>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n"],"mappings":"oDAAA,MAAMA,EAAkB,yd,MCOXC,EAAY,MALzB,WAAAC,CAAAC,G,uEAQUC,KAAQC,SAAY,MAGnBD,KAAcE,eAAY,MAC3BF,KAAAG,kBAA4B,SAwCrC,CAlCC,YAAAC,CAAaC,GACXL,KAAKM,KAAKC,aAAa,QAASF,EAASG,W,CAI3C,wBAAAC,CAAyBC,GAEvB,MAAMC,EAAiBX,KAAKM,KAAKM,cAAcC,cAAc,kCAAkCb,KAAKc,gBACpG,GAAIH,GAAkBA,IAAmBX,KAAKM,KAAM,CAClD,MAAM,IAAIS,MAAM,kCAAkCf,KAAKc,8B,CAQzDd,KAAKgB,YAAcN,EAAMO,OACzBjB,KAAKE,eAAiBF,KAAKgB,cAAgB,GAC3ChB,KAAKkB,sBAAsBC,KAAK,CAAEL,WAAYd,KAAKc,WAAYE,YAAahB,KAAKgB,YAAaI,UAAWpB,KAAKoB,W,CAIhH,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,GACZxB,KAAKG,oBAAsB,UAAY,gCAAkC,kCAEzEmB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAexB,KAAKc,YAC/BQ,EAAkB,oBAAAC,IAAA,2CAAAE,YAAazB,KAAKyB,YAAW,mBAAoBzB,KAAKE,eAAgBD,SAAUD,KAAKC,SAAUyB,MAAO1B,KAAKgB,c","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r,h as s}from"./p-PqnYwNKt.js";const e=":host{display:inline-block;cursor:pointer}";const o=class{constructor(s){r(this,s);this.isOpen=false}render(){return s("slot",{key:"54fbd683065299b0e714e6f91c4e0333d92e28e5"})}};o.style=e;export{o as ifx_dropdown_trigger};
-//# sourceMappingURL=p-e9381c81.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownTriggerCss","DropdownItem","constructor","hostRef","this","isOpen","render","h","key"],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  cursor: pointer;\r\n}","// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-trigger',\r\n  styleUrl: 'dropdown-trigger.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n  @Prop() isOpen: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <slot />\r\n    )\r\n  }\r\n}"],"mappings":"sCAAA,MAAMA,EAAqB,6C,MCUdC,EAAY,MANzB,WAAAC,CAAAC,G,UAOUC,KAAMC,OAAY,KAO3B,CALC,MAAAC,GACE,OACEC,EAAQ,QAAAC,IAAA,4C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["datePickerCss","DatePicker","constructor","hostRef","this","inputId","datePickerId","size","error","success","disabled","type","required","autocomplete","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n\r\n.date__picker-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  & .label__wrapper {\r\n    color: tokens.$ifxColorBaseBlack;\r\n    font: tokens.$ifxBodyBody03;\r\n\r\n    & .asterisk { \r\n      display: none;\r\n      &.required {\r\n        display: inline;\r\n        margin-left: 4px;\r\n        \r\n        &.error {\r\n          color: #CD002F;\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  &.disabled {\r\n    .label__wrapper {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &.error {\r\n    .caption__wrapper {\r\n      color: tokens.$ifxColorRed500;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    .caption__wrapper {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  & .caption__wrapper {\r\n    margin-top: tokens.$ifxSpace50;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    font: tokens.$ifxBodyBody05;\r\n  }\r\n}\r\n\r\n.date__picker-input {\r\n  font-family: 'Source Sans 3';\r\n  outline: none;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  border-radius: 1px;\r\n  border: 1px solid tokens.$ifxColorEngineering400;\r\n  height: 100%;\r\n\r\n  &.firefox__classes {\r\n    padding: 8px 16px;\r\n    color: tokens.$ifxColorEngineering400;\r\n    font-size: 16px;\r\n    text-transform: uppercase;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n    cursor: pointer;\r\n\r\n    &:disabled {\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.error, .success) {\r\n    border-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &:hover:not(:disabled, :focus, .error, .success) {\r\n    border-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &:disabled {\r\n    border-color: tokens.$ifxColorEngineering300;\r\n    background-color: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n  }\r\n\r\n  &.error {\r\n    border-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.success:not(.error) {\r\n    border-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &::-webkit-datetime-edit-text {\r\n    color: tokens.$ifxColorEngineering400;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 24px;\r\n  }\r\n\r\n  &:disabled::-webkit-datetime-edit,\r\n  &:disabled::-webkit-datetime-edit-text {\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n\r\n  &.has-value::-webkit-datetime-edit-text {\r\n    color: tokens.$ifxColorBaseBlack;\r\n  }\r\n\r\n  &.has-value::-webkit-datetime-edit {\r\n    color: tokens.$ifxColorBaseBlack;\r\n  }\r\n}\r\n\r\n::-webkit-datetime-edit {\r\n  color: tokens.$ifxColorEngineering400;\r\n  font-size: 16px;\r\n  text-transform: uppercase;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n}\r\n\r\n::-webkit-datetime-edit-fields-wrapper {\r\n  padding: 8px 16px;\r\n  padding-bottom: 9px;\r\n  transform: translateY(1px);\r\n}\r\n\r\n::-webkit-inner-spin-button {\r\n  display: none;\r\n}\r\n\r\n::-webkit-calendar-picker-indicator {\r\n  position: absolute;\r\n  right: 15px;\r\n  font-size: 19px;\r\n  cursor: pointer;\r\n  border-radius: 1px;\r\n  &:focus-within {\r\n    outline: 2px solid tokens.$ifxColorOcean500;\r\n    outline-offset: 2px;\r\n  }\r\n}\r\n\r\n.input__wrapper {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  position: relative;\r\n  &.large {\r\n    height: 40px;\r\n  }\r\n\r\n  &.small {\r\n    height: 36px;\r\n  }\r\n\r\n  &.disabled {\r\n    & .icon__wrapper {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n}\r\n\r\n.icon__wrapper {\r\n  position: absolute;\r\n  right: 17px;\r\n  padding: 2px;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  pointer-events: none;\r\n  z-index: 100;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  line-height: 16px;\r\n\r\n  & ifx-icon {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n","import { AttachInternals } from '@stencil/core';\r\nimport { Component, Prop, h, Element, Event, EventEmitter } 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-date-picker',\r\n  styleUrl: 'date-picker.scss',\r\n  shadow: true,\r\n  // formAssociated: true,\r\n})\r\n\r\nexport class DatePicker {\r\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\r\n\r\n  @Element() el: HTMLElement;\r\n  @Prop() size: string = 's';\r\n  @Prop() error: boolean = false;\r\n  @Prop() success: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() value: string;\r\n  @Prop() type: string = 'date'\r\n  @Prop() max: string;\r\n  @Prop() min: string;\r\n  @Prop() required: boolean = false;\r\n  @Prop() label: string;\r\n  @Prop() caption: string;\r\n  @Prop() autocomplete: string = 'on';\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Event() ifxDate: EventEmitter;\r\n\r\n  getDate(e) { \r\n    const inputValue = e.target.value;\r\n    const selectedDate = new Date(inputValue);\r\n    const day = selectedDate.getDate();\r\n    const month = selectedDate.getMonth() + 1; \r\n    const year = selectedDate.getFullYear();\r\n\r\n \r\n      \r\n    if (!inputValue) {\r\n      //this.internals.setFormValue(null);\r\n\r\n      if(this.type === 'datetime-local') { \r\n        const hours = selectedDate.getHours();\r\n        const minutes = selectedDate.getMinutes();\r\n        this.ifxDate.emit({day, month, year, hours, minutes});\r\n      } else { \r\n        this.ifxDate.emit({day, month, year});\r\n      }\r\n      return;\r\n    }\r\n\r\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n    input.classList.add('has-value');\r\n\r\n    //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\r\n    if(this.type === 'datetime-local') { \r\n      const hours = selectedDate.getHours();\r\n      const minutes = selectedDate.getMinutes();\r\n      this.ifxDate.emit({day, month, year, hours, minutes});\r\n    } else { \r\n      this.ifxDate.emit({day, month, year})\r\n    }\r\n  }\r\n\r\n  handleInputFocusOnIconClick() { \r\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n    if(input) { \r\n      input.focus()\r\n    }\r\n  }\r\n\r\n getBrowser() {\r\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\r\n      return \"Chrome\";\r\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\r\n      return \"Opera\";\r\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\r\n      return \"IE\";\r\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\r\n      return \"Firefox\";\r\n    } else {\r\n      return \"unknown\";\r\n    }\r\n  }\r\n\r\n  setFireFoxClasses() { \r\n    const browser = this.getBrowser()\r\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\r\n\r\n    if(browser === 'Firefox') { \r\n      input.classList.add('firefox__classes')\r\n    } else if(input.classList.contains('firefox__classes')) { \r\n      input.classList.remove('firefox__classes')\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-date-picker', await framework)\r\n    }\r\n    this.setFireFoxClasses()\r\n  }\r\n\r\n  componentWillUpdate() { \r\n    if (this.value) {\r\n      this.getDate({ target: { value: this.value } });\r\n    }\r\n  }\r\n\r\n  // formResetCallback() {\r\n  //   this.internals.setFormValue(null);\r\n  // }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\r\n\r\n        <label class='label__wrapper' htmlFor={ this.inputId }>\r\n          { this.label?.trim() }\r\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\r\n        </label>\r\n\r\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\r\n          <input\r\n          type={this.type}\r\n          autocomplete={this.autocomplete}\r\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\r\n          disabled={this.disabled ? true : undefined}\r\n          aria-invalid={this.error ? true : undefined}\r\n          aria-label={this.ariaLabel}\r\n          max={this.max}\r\n          min={this.min}\r\n          value={this.value}\r\n          required={this.required}\r\n          onChange={(e) => this.getDate(e)} />\r\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\r\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\r\n          </div>\r\n        </div>\r\n\r\n        { this.caption?.trim() && (\r\n            <div class='caption__wrapper'>\r\n              { this.caption.trim() }\r\n            </div> \r\n          )}\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["contentSwitcherCss","ContentSwitcher","constructor","hostRef","this","activeIndex","hoverIndex","focusIndex","dividers","Array","eventHandlers","Map","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","isSelected","getAttribute","selected","removeAttribute","isActive","updateDividersOfItem","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","render","h","Host","key","class","role"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.ifx-content-switcher {\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering300;\r\n    border-radius: tokens.$ifxBorderRadiusRound;\r\n    height: tokens.$ifxSize450;\r\n    width: fit-content;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    & ::slotted(ifx-content-switcher-item) {\r\n        position: relative;\r\n        // top: -1px;\r\n    }\r\n\r\n    & ::slotted(ifx-content-switcher-item:first-child) {\r\n        left: -1px;\r\n        margin-right: -1px;\r\n    }\r\n\r\n    & ::slotted(ifx-content-switcher-item:last-child) {\r\n        right: -1px;\r\n        margin-left: -1px;\r\n    }\r\n\r\n    // Dividers\r\n    & ::slotted(.ifx-content-switcher-divider) {\r\n        width: tokens.$ifxSize12;\r\n        height: tokens.$ifxSize250;\r\n        background-color: tokens.$ifxColorEngineering400;\r\n        margin: 0px 1px;\r\n        visibility: visible;\r\n    }\r\n\r\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\r\n        visibility: hidden;\r\n    }\r\n}","import { Component, h, Element, Event, EventEmitter, Host, 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\nexport type ChangeEvent = { oldValue: string; newValue: string };\r\n\r\ntype ContentSwitcherItem = Element & {\r\n  selected: boolean;\r\n};\r\n\r\n@Component({\r\n  tag: 'ifx-content-switcher',\r\n  styleUrl: './content-switcher.scss',\r\n  shadow: true,\r\n})\r\nexport class ContentSwitcher {\r\n  @Element() el: HTMLElement;\r\n\r\n  @State() items: Element[];\r\n  @State() activeIndex = -1;\r\n  @State() hoverIndex: number = -1;\r\n  @State() focusIndex: number = -1;\r\n\r\n  @State() dividers: Element[] = Array();\r\n\r\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\r\n\r\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\r\n\r\n  componentWillLoad() {\r\n    this.items = Array.from(this.el.children);\r\n    this.initializeDividers();\r\n    this.addEventListeners();\r\n    this.ensureSingleSelectedItem();\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-content-switcher', await framework)\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.removeEventListeners();\r\n  }\r\n\r\n  /**\r\n   * Initialize the dividers between items.\r\n   */\r\n  initializeDividers() {\r\n    this.items.forEach((item, index) => {\r\n      if (index < this.items.length - 1) {\r\n        const divider = document.createElement('div');\r\n        divider.classList.add('ifx-content-switcher-divider');\r\n        item.after(divider);\r\n        this.dividers.push(divider);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add event listeners for each item.\r\n   */\r\n  addEventListeners() {\r\n    this.items.forEach((item, index) => {\r\n      const handlers = {\r\n        click: () => this.selectItem(index),\r\n        mouseenter: () => this.handleHover(index, true),\r\n        mouseleave: () => this.handleHover(index, false),\r\n        focus: () => this.handleFocus(index, true),\r\n        blur: () => this.handleFocus(index, false),\r\n      };\r\n\r\n      Object.keys(handlers).forEach(event => {\r\n        item.addEventListener(event, handlers[event]);\r\n      });\r\n\r\n      this.eventHandlers.set(item, handlers);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Remove all event listeners.\r\n   */\r\n  removeEventListeners() {\r\n    this.eventHandlers.forEach((handlers, item) => {\r\n      Object.keys(handlers).forEach(event => {\r\n        item.removeEventListener(event, handlers[event]);\r\n      });\r\n    });\r\n    this.eventHandlers.clear();\r\n  }\r\n\r\n  ensureSingleSelectedItem() {\r\n    this.items.forEach((item, index) => {\r\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\r\n      if (isSelected) {\r\n        if (this.activeIndex < 0) {\r\n          this.selectItem(index);\r\n        } else {\r\n          item.removeAttribute('selected');\r\n          (item as ContentSwitcherItem).selected = false;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Handle hover events on an item.\r\n   * @param index - Index of the item.\r\n   * @param isActive - Whether the item is hovered.\r\n   */\r\n  handleHover(index: number, isActive: boolean) {\r\n    this.hoverIndex = isActive ? index : -1;\r\n    this.updateDividersOfItem(index);\r\n  }\r\n\r\n  /**\r\n   * Handle hover events on an item.\r\n   * @param index - Index of the item.\r\n   * @param isActive - Whether the item is focused.\r\n   */\r\n  handleFocus(index: number, isActive: boolean) {\r\n    this.focusIndex = isActive ? index : -1;\r\n    this.updateDividersOfItem(index);\r\n  }\r\n\r\n  /**\r\n   * Update visibility of dividers adjacent to a specific item.\r\n   * @param itemIndex - Index of the item.\r\n   */\r\n  updateDividersOfItem(itemIndex: number) {\r\n    if (itemIndex < this.items.length - 1) {\r\n      this.updateDividerVisibility(itemIndex);\r\n    }\r\n    if (itemIndex > 0) {\r\n      this.updateDividerVisibility(itemIndex - 1);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Update visibility of a specific divider.\r\n   * @param dividerIndex - Index of the divider.\r\n   */\r\n  updateDividerVisibility(dividerIndex: number) {\r\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\r\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\r\n  }\r\n\r\n  /**\r\n   * Set the visibility of a specific divider.\r\n   * @param dividerIndex - Index of the divider.\r\n   * @param hidden - Whether the divider should be hidden.\r\n   */\r\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\r\n    if (this.dividers[dividerIndex]) {\r\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Select a specific item.\r\n   * @param itemIndex - Index of the item to be selected.\r\n   */\r\n  selectItem(itemIndex: number) {\r\n    if (itemIndex === this.activeIndex) return;\r\n    const oldIndex = this.activeIndex;\r\n    if (oldIndex >= 0) {\r\n      this.items[oldIndex].removeAttribute('selected');\r\n    }\r\n\r\n    this.activeIndex = itemIndex;\r\n    this.items[itemIndex].setAttribute('selected', 'true');\r\n\r\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\r\n    this.updateDividersOfItem(oldIndex);\r\n    this.updateDividersOfItem(itemIndex);\r\n  }\r\n\r\n  /**\r\n   * Get the value property of the item at a specific index.\r\n   * Falls back to the index if no value is set.\r\n   * \r\n   * @param index - Index of the item. \r\n   * @returns The value of the item.\r\n   */\r\n  getValueOfItem(index: number): string {\r\n    if (this.items[index] == null) return index.toLocaleString();\r\n    return this.items[index].getAttribute('value') || index.toLocaleString();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"ifx-content-switcher\" role=\"group\">\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["faqCss","Faq","render","h","key","class","caption"],"sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \r\n  padding-top: 10px;\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-faq',\r\n  styleUrl: './faq.scss',\r\n  shadow: true,\r\n})\r\nexport class Faq {\r\n\r\n  render() {\r\n    return (\r\n      <div class='container'>\r\n      <ifx-accordion>\r\n        <ifx-accordion-item caption=\"What is the Infineon DDS?\">\r\n          The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\r\n        </ifx-accordion-item>\r\n        <ifx-accordion-item caption=\"How do I get access to the DDS?\">\r\n          You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\r\n        </ifx-accordion-item>\r\n        <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\r\n          Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\r\n        </ifx-accordion-item>\r\n        <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\r\n          We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\r\n        </ifx-accordion-item>\r\n        <ifx-accordion-item caption=\"How to request a new component?\">\r\n          Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\r\n        </ifx-accordion-item>\r\n      </ifx-accordion>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAS,+B,MCOFC,EAAG,M,yBAEd,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACXF,EAAA,iBAAAC,IAAA,4CACED,EAAoB,sBAAAC,IAAA,2CAAAE,QAAQ,6BAEP,kdACrBH,EAAoB,sBAAAC,IAAA,2CAAAE,QAAQ,mCAEP,iNACrBH,EAAoB,sBAAAC,IAAA,2CAAAE,QAAQ,qDAEP,+UACrBH,EAAoB,sBAAAC,IAAA,2CAAAE,QAAQ,2CAEP,6TACrBH,EAAA,sBAAAC,IAAA,2CAAoBE,QAAQ,mCAAiC,wP","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbItemLabelCss","BreadcrumbItemLabel","constructor","hostRef","this","target","componentDidLoad","container","el","shadowRoot","querySelector","menuWrapper","breadcrumbMenuIconWrapper","emit","render","h","key","href","class","role","icon"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-item-label-container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: tokens.$ifxSpace100;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  &.margin {\r\n    margin-left: 16px;\r\n  }\r\n\r\n  & ifx-icon:empty {\r\n    display: none;\r\n  }\r\n\r\n  & .label-icon-wrapper {\r\n    display: inline-flex;\r\n  }\r\n\r\n  & .menu-icon-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: tokens.$ifxSize200;\r\n    height: tokens.$ifxSize200;\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n\r\n    & ifx-icon {\r\n      transition: .3s;\r\n    }\r\n\r\n    &.show {\r\n      & ifx-icon {\r\n        transition: .3s;\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-breadcrumb-item-label',\r\n  styleUrl: 'breadcrumb-item-label.scss',\r\n  shadow: true,\r\n})\r\nexport class BreadcrumbItemLabel {\r\n  @Prop() icon: string;\r\n  @Prop() href: string;\r\n  @Prop() target: string = \"_self\"\r\n  @Element() el;\r\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\r\n\r\n  componentDidLoad() { \r\n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\r\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\r\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\r\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\r\n        <span class=\"label-wrapper\">\r\n          <slot />\r\n        </span>\r\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\r\n        <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\r\n       </span>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAyB,2uB,MCOlBC,EAAmB,MALhC,WAAAC,CAAAC,G,+EAQUC,KAAMC,OAAW,OAuB1B,CAnBC,gBAAAC,GACE,MAAMC,EAAYH,KAAKI,GAAGC,WAAWC,cAAc,oCACnD,MAAMC,EAAcJ,EAAUG,cAAc,sBAC5CN,KAAKQ,0BAA0BC,KAAKF,E,CAGtC,MAAAG,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,KAAMb,KAAKa,KAAMZ,OAAQD,KAAKC,OAAQa,MAAM,kCAAkCC,KAAK,QACpFJ,EAAA,YAAAC,IAAA,2CAAUI,KAAMhB,KAAKgB,KAAI,cAAc,SACvCL,EAAM,QAAAC,IAAA,2CAAAE,MAAM,iBACVH,EAAA,QAAAC,IAAA,8CAEHD,EAAA,QAAAC,IAAA,2CAAME,MAAM,oBAAmB,aAAY,QAC1CH,EAAA,YAAAC,IAAA,2CAAUI,KAAK,qB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownSeparatorCss","DropdownSeparator","render","h","key","class"],"sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.dropdown-separator {\r\n  height: 1px;\r\n  background-color: tokens.$ifxColorEngineering200;\r\n  margin: 8px 16px;\r\n}","// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown-separator',\r\n  styleUrl: 'dropdown-separator.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class DropdownSeparator {\r\n  render() {\r\n    return (\r\n      <div class='dropdown-separator'></div>\r\n    )\r\n  }\r\n}"],"mappings":"sCAAA,MAAMA,EAAuB,2E,MCShBC,EAAiB,M,yBAC5B,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","tabObjects","canScrollLeft","canScrollRight","internalFocusedTabIndex","tabRefs","tabHeaderRefs","tabFocusHandlers","Map","updateBorderOnWindowResize","updateBorderAndFocus","updateScrollButtons","setActiveAndFocusedTab","index","length","_a","disabled","setTimeout","scrollTabIntoView","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","toLowerCase","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setupTabFocusListeners","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","handler","set","addEventListener","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","previousTabIndex","ifxChange","emit","previousTab","currentTab","handleKeyDown","ev","key","shiftKey","preventDefault","path","composedPath","isTabHeader","some","includes","shouldDisableScrolling","scrollLeft","scrollWidth","clientWidth","tabsListElement","scrollAmount","Math","min","scrollBy","behavior","scrollRight","maxScroll","currentScroll","onTabsListScroll","tabElement","container","tabRect","getTabCenterInfo","containerRect","getContainerCenterInfo","abs","center","desiredScrollLeft","calculateCenteredScrollPosition","scrollTo","maxScrollLeft","max","render","h","class","shape","variant","size","onClick","role","ref","onScroll","onMouseDown","event","_b","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\r\n@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.tabs {\r\n  display: flex;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  width: 100%;\r\n}\r\n\r\n.tabs.horizontal {\r\n  flex-direction: column;\r\n}\r\n\r\n.tabs-container {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  gap: tokens.$ifxSpace100;\r\n}\r\n\r\n.scroll-button {\r\n  flex-shrink: 0;\r\n  z-index: 10;\r\n  transition: all 0.3s ease-in-out;\r\n\r\n  &.hidden {\r\n    pointer-events: none;\r\n  }\r\n\r\n  &.scroll-left.hidden {\r\n    width: 0;\r\n    min-width: 0;\r\n    max-width: 0;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    opacity: 0;\r\n    overflow: hidden;\r\n  }\r\n\r\n  &.scroll-right.hidden {\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n.tabs.vertical {\r\n  flex-direction: row;\r\n}\r\n\r\n.tabs-list {\r\n  display: flex;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n\r\n  &.scrollable {\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    scroll-behavior: smooth;\r\n    white-space: nowrap;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    &::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.tabs-list:focus-within .active-border {\r\n  display: none;\r\n}\r\n\r\n.active-border {\r\n  content: \"\";\r\n  position: absolute;\r\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\r\n}\r\n\r\n.tabs.horizontal .active-border {\r\n  bottom: 0;\r\n  left: 0;\r\n  height: 2px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n}\r\n\r\n.tabs.vertical .tabs-list {\r\n  flex-direction: column;\r\n  border-bottom: none;\r\n}\r\n\r\n.tabs.vertical .tab-content {\r\n  padding-top: 0px;\r\n  padding-left: 32px;\r\n}\r\n\r\n.tabs:not(.vertical) {\r\n  & .tab-item {\r\n    &.full-width {\r\n      flex: 1;\r\n    }\r\n  }\r\n\r\n\r\n  &.full-width-enabled {\r\n    .scroll-button {\r\n      display: none;\r\n    }\r\n\r\n    .tabs-list {\r\n      flex: 1;\r\n\r\n      &.scrollable {\r\n        overflow-x: visible; // Disable horizontal scrolling\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.tab-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n  cursor: pointer;\r\n  position: relative;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n  max-width: 50%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  @media (max-width: tokens.$ifxBreakpointM) {\r\n    font-size: tokens.$ifxFontSizeS;\r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace100;\r\n  }\r\n\r\n  &.icon__right {\r\n    flex-direction: row-reverse;\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus {\r\n    outline: 2px solid tokens.$ifxColorOcean500;\r\n    outline-offset: -2px;\r\n    border-radius: 2px;\r\n\r\n    // Assuming .active-border is a sibling of .tab-item\r\n    +.active-border {\r\n      display: none; // Hide the active border when the tab is in focus\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n.tabs.vertical .tab-item {\r\n  border-right: 2px solid transparent;\r\n  min-width: 7em;\r\n}\r\n\r\n.tabs.vertical .active-border {\r\n  left: 0;\r\n  top: 0;\r\n  width: 2px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n}\r\n\r\n\r\n.tab-content {\r\n  padding-top: 24px;\r\n  padding-left: 0px;\r\n  flex-grow: 1;\r\n}\r\n\r\n.tabs.small .tab-item {\r\n  font-size: tokens.$ifxFontSizeS;\r\n}\r\n","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, 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-tabs',\r\n  styleUrl: 'tabs.scss',\r\n  shadow: true\r\n})\r\nexport class IfxTabs {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() orientation: string = \"horizontal\";\r\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\r\n  @Prop() fullWidth: boolean = false;\r\n\r\n  @State() internalOrientation: string;\r\n  @State() internalActiveTabIndex: number = 0;\r\n  @State() tabObjects: any[] = [];\r\n  @State() canScrollLeft: boolean = false;\r\n  @State() canScrollRight: boolean = false;\r\n\r\n  private internalFocusedTabIndex: number = 0;\r\n  private tabRefs: HTMLElement[] = [];\r\n  private tabHeaderRefs: HTMLElement[] = [];\r\n  private tabsListElement: HTMLElement;\r\n  private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\r\n\r\n  @Event() ifxChange: EventEmitter;\r\n\r\n  @Listen('resize', {target: 'window'})\r\n  updateBorderOnWindowResize() {\r\n    this.updateBorderAndFocus();\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  setActiveAndFocusedTab(index: number) {\r\n    if (index >= this.tabObjects.length) {\r\n      index = this.tabObjects.length - 1;\r\n    }\r\n    if (index < 0) {\r\n      index = 0;\r\n    }\r\n    if (!this.tabObjects[index]?.disabled) {\r\n      this.internalActiveTabIndex = index;\r\n      this.internalFocusedTabIndex = index;\r\n      // Scroll the active tab into view\r\n      setTimeout(() => this.scrollTabIntoView(index), 0);\r\n    }\r\n  }\r\n\r\n  @Listen('tabHeaderChange')\r\n  handleTabHeaderChange(e) {\r\n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\r\n    this.tabObjects[tabIndex].header = e.detail;\r\n    this.tabObjects = [...this.tabObjects];\r\n  }\r\n\r\n\r\n  @Watch('activeTabIndex')\r\n  activeTabIndexChanged(newValue: number, oldValue: number) {\r\n    if (newValue !== oldValue) {\r\n      this.setActiveAndFocusedTab(newValue);\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\r\n    this.onSlotChange();\r\n    this.setActiveAndFocusedTab(this.activeTabIndex);\r\n    this.updateTabStyles();\r\n  }\r\n\r\n  updateTabStyles() {\r\n    this.tabHeaderRefs.forEach((tab, index) => {\r\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\r\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\r\n    });\r\n  }\r\n\r\n\r\n  // needed for smooth border transition\r\n  reRenderBorder() {\r\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\r\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\r\n      if (this.orientation === 'horizontal') {\r\n\r\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\r\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\r\n        borderElement.style.top = '';\r\n        borderElement.style.height = '';\r\n      } else {\r\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\r\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\r\n        borderElement.style.left = '';\r\n        borderElement.style.width = '';\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  // when a slot is removed / added\r\n  @Listen('slotchange')\r\n  onSlotChange() {\r\n    const tabs = this.el.querySelectorAll('ifx-tab');\r\n    this.tabObjects = Array.from(tabs).map((tab) => {\r\n      return {\r\n        header: tab?.header,\r\n        disabled: tab?.disabled === true,\r\n        icon: tab?.icon,\r\n        iconPosition: tab?.iconPosition\r\n      }\r\n    });\r\n\r\n    this.tabRefs = Array.from(tabs);\r\n    this.tabRefs.forEach((tab, index) => {\r\n      tab.setAttribute('slot', `tab-${index}`);\r\n    });\r\n\r\n    // Re-setup focus listeners when tabs change\r\n    setTimeout(() => {\r\n      this.setupTabFocusListeners();\r\n      this.updateScrollButtons();\r\n    }, 0);\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-tabs', await framework)\r\n    }\r\n    this.updateBorderAndFocus();\r\n    this.updateScrollButtons();\r\n    // Add keyboard event listeners for each tab header\r\n    this.setupTabFocusListeners();\r\n  }\r\n\r\n  private setupTabFocusListeners() {\r\n    // Clear any existing handlers\r\n    this.tabFocusHandlers.clear();\r\n\r\n    this.tabHeaderRefs.forEach((tab, index) => {\r\n      const handler = () => {\r\n        this.internalFocusedTabIndex = index;\r\n      };\r\n\r\n      // Store the handler so we can remove it later\r\n      this.tabFocusHandlers.set(tab, handler);\r\n      tab.addEventListener('focus', handler);\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    // Remove keyboard event listeners when component is unmounted\r\n    this.tabFocusHandlers.forEach((handler, tab) => {\r\n      tab.removeEventListener('focus', handler);\r\n    });\r\n    this.tabFocusHandlers.clear();\r\n  }\r\n  componentDidUpdate() {\r\n    this.updateBorderAndFocus();\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  private updateBorderAndFocus() {\r\n    this.reRenderBorder()\r\n    this.updateTabFocusability();\r\n  }\r\n\r\n  private updateTabFocusability() {\r\n    this.tabHeaderRefs.forEach((tab, index) => {\r\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\r\n    })\r\n  }\r\n\r\n\r\n  private focusNextTab() {\r\n    let nextIndex = this.internalFocusedTabIndex + 1;\r\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\r\n      nextIndex++;\r\n    }\r\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\r\n      this.internalFocusedTabIndex = nextIndex;\r\n      this.tabHeaderRefs[nextIndex].focus();\r\n    }\r\n  }\r\n\r\n  private focusPreviousTab() {\r\n    let prevIndex = this.internalFocusedTabIndex - 1;\r\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\r\n      prevIndex--;\r\n    }\r\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\r\n      this.internalFocusedTabIndex = prevIndex;\r\n      this.tabHeaderRefs[prevIndex].focus();\r\n    }\r\n  }\r\n\r\n\r\n  private getTabItemClass(index: number) {\r\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\r\n    const isDisabled = this.tabObjects[index].disabled;\r\n    const iconPosition = this.tabObjects[index].iconPosition\r\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\r\n  }\r\n\r\n  private handleClick(tab, index) {\r\n    if (!tab.disabled) {\r\n      const previousTabIndex = this.internalActiveTabIndex;\r\n      this.internalActiveTabIndex = index;\r\n      this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\r\n      // Center the clicked tab\r\n      setTimeout(() => this.scrollTabIntoView(index), 0);\r\n    }\r\n  }\r\n\r\n\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if (ev.key === 'Tab') {\r\n\r\n      if (ev.shiftKey) {\r\n        // Shift + Tab\r\n        if (this.internalFocusedTabIndex === 0) {\r\n          // Allow default behavior to move focus out of component\r\n          return;\r\n        } else {\r\n          ev.preventDefault();\r\n          this.focusPreviousTab();\r\n        }\r\n      } else {\r\n        // Tab\r\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\r\n          // Allow default behavior to move focus out of component\r\n          return;\r\n        } else {\r\n          ev.preventDefault();\r\n          this.focusNextTab();\r\n        }\r\n      }\r\n    } else if (ev.key === 'Enter') {\r\n      const path = ev.composedPath();\r\n      const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\r\n      if (!isTabHeader) {\r\n        return;\r\n      }\r\n\r\n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\r\n        const previousTabIndex = this.internalActiveTabIndex;\r\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\r\n        this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\r\n        // Center the activated tab\r\n        setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\r\n      }\r\n    }\r\n  }\r\n\r\n  private updateScrollButtons() {\r\n    // Reset scroll buttons if conditions not met\r\n    if (this.shouldDisableScrolling()) {\r\n      this.canScrollLeft = false;\r\n      this.canScrollRight = false;\r\n      return;\r\n    }\r\n\r\n    const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\r\n    this.canScrollLeft = scrollLeft > 0;\r\n    this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\r\n  }\r\n\r\n  private shouldDisableScrolling(): boolean {\r\n    return !this.tabsListElement ||\r\n           this.internalOrientation === 'vertical' ||\r\n           this.fullWidth;\r\n  }\r\n\r\n  private scrollLeft() {\r\n    if (!this.canScrollLeft || !this.tabsListElement) return;\r\n\r\n    const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\r\n    this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n  }\r\n\r\n  private scrollRight() {\r\n    if (!this.canScrollRight || !this.tabsListElement) return;\r\n\r\n    const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\r\n    const currentScroll = this.tabsListElement.scrollLeft;\r\n    const scrollAmount = Math.min(200, maxScroll - currentScroll);\r\n    this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n  }\r\n\r\n  private onTabsListScroll() {\r\n    this.updateScrollButtons();\r\n  }\r\n\r\n  private scrollTabIntoView(index: number) {\r\n    if (this.shouldDisableScrolling() || !this.tabHeaderRefs[index]) {\r\n      return;\r\n    }\r\n\r\n    const tabElement = this.tabHeaderRefs[index];\r\n    const container = this.tabsListElement;\r\n\r\n    const tabRect = this.getTabCenterInfo(tabElement);\r\n    const containerRect = this.getContainerCenterInfo(container);\r\n\r\n    // Only scroll if the tab is not already reasonably centered\r\n    if (Math.abs(tabRect.center - containerRect.center) > 50) {\r\n      const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\r\n      container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\r\n    }\r\n  }\r\n\r\n  private getTabCenterInfo(tabElement: HTMLElement) {\r\n    const left = tabElement.offsetLeft;\r\n    const width = tabElement.offsetWidth;\r\n    return {\r\n      left,\r\n      width,\r\n      center: left + (width / 2)\r\n    };\r\n  }\r\n\r\n  private getContainerCenterInfo(container: HTMLElement) {\r\n    const scrollLeft = container.scrollLeft;\r\n    const width = container.clientWidth;\r\n    return {\r\n      scrollLeft,\r\n      width,\r\n      center: scrollLeft + (width / 2)\r\n    };\r\n  }\r\n\r\n  private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\r\n    const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\r\n    const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\r\n    return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\r\n        {this.internalOrientation === 'horizontal' ? (\r\n          <div class=\"tabs-container\">\r\n            <ifx-icon-button\r\n              shape=\"round\"\r\n              variant=\"tertiary\"\r\n              icon=\"chevronLeft16\"\r\n              size=\"s\"\r\n              disabled={false}\r\n              aria-label=\"Scroll tabs left\"\r\n              onClick={() => this.scrollLeft()}\r\n              class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\r\n            >\r\n            </ifx-icon-button>\r\n            <ul\r\n              role=\"tablist\"\r\n              class=\"tabs-list scrollable\"\r\n              ref={(el) => (this.tabsListElement = el)}\r\n              onScroll={() => this.onTabsListScroll()}\r\n            >\r\n              {this.tabObjects?.map((tab, index) => (\r\n                <li\r\n                  class={this.getTabItemClass(index)}\r\n                  ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n                  onMouseDown={(event) => event.preventDefault()}\r\n                  onClick={() => this.handleClick(tab, index)}\r\n                  aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\r\n                  role=\"tab\"\r\n                >\r\n                  {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n                  {tab?.header}\r\n                </li>\r\n              ))}\r\n              <div class=\"active-border\"></div>\r\n            </ul>\r\n            <ifx-icon-button\r\n              shape=\"round\"\r\n              variant=\"tertiary\"\r\n              icon=\"chevronRight16\"\r\n              size=\"s\"\r\n              disabled={false}\r\n              aria-label=\"Scroll tabs right\"\r\n              onClick={() => this.scrollRight()}\r\n              class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\r\n            >\r\n            </ifx-icon-button>\r\n          </div>\r\n        ) : (\r\n          <ul role=\"tablist\" class=\"tabs-list\">\r\n            {this.tabObjects?.map((tab, index) => (\r\n              <li\r\n                class={this.getTabItemClass(index)}\r\n                ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n                onMouseDown={(event) => event.preventDefault()}\r\n                onClick={() => this.handleClick(tab, index)}\r\n                aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n                aria-disabled={tab.disabled ? 'true' : 'false'}\r\n                role=\"tab\"\r\n              >\r\n                {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n                {tab?.header}\r\n              </li>\r\n            ))}\r\n            <div class=\"active-border\"></div>\r\n          </ul>\r\n        )}\r\n        <div class=\"tab-content\">\r\n          {Array.from(this.tabObjects).map((_, index) => (\r\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\r\n              <slot name={`tab-${index}`} />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["footerCss","Footer","constructor","hostRef","this","currentYear","Date","getFullYear","copyrightText","hasColSlot","hasSocialsSlot","componentWillLoad","el","querySelector","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","Host","key","class","width","height","viewBox","fill","xmlns","d","id","name"],"sources":["src/components/footer/footer.scss?tag=ifx-footer&encapsulation=shadow","src/components/footer/footer.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  width: 100%;\r\n}\r\n\r\n.footer__container {\r\n  //width: 100%;\r\n  padding: 0px 32px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  & .footer__wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n\r\n    @media (max-width: 768px) {\r\n      margin-top: tokens.$ifxSpace600;\r\n    }\r\n\r\n    & .footer__logo_top {\r\n      svg {\r\n        display: none; // Logo (when variant=large) is hidden by default\r\n\r\n        @media (max-width: 768px) {\r\n          display: inline; // Logo is shown (when variant=large) on mobile screens\r\n        }\r\n      }\r\n    }\r\n\r\n    & .footer__logo_btm {\r\n      svg {\r\n        display: inline; // Logo is shown by default\r\n        vertical-align: bottom;\r\n      }\r\n    }\r\n\r\n\r\n    & .col-wrapper {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      justify-content: space-between;\r\n      margin: tokens.$ifxSpace400 0;\r\n\r\n      @media (max-width: 768px) {\r\n        // Adjust this value to the breakpoint you want\r\n        flex-wrap: wrap;\r\n        justify-content: space-between; // Ensures that there is space between the columns if the width allows it\r\n        margin: tokens.$ifxSpace300 0;\r\n      }\r\n\r\n      & ::slotted([slot=col]) {\r\n        display: flex;\r\n        gap: tokens.$ifxSpace400;\r\n\r\n        @media (max-width: 768px) {\r\n          // Adjust this value according to your design breakpoints\r\n          flex-wrap: wrap;\r\n          margin-top: tokens.$ifxSpace300;\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n    & .default {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      width: 100%;\r\n      padding: 24px 0;\r\n      border-bottom: 1px solid #BFBBBB;\r\n      margin-top: tokens.$ifxSpace300;\r\n\r\n      & .footer__logo_btm {\r\n        svg {\r\n          display: inline; // Logo is shown at the bottom (when variant=large) on mobile screens \r\n          vertical-align: bottom;\r\n\r\n          @media (max-width: 768px) {\r\n            display: none; // Logo at the bottom (when variant=large) is hidden by default\r\n          }\r\n        }\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        // Adjust this value according to your design breakpoints\r\n        margin-top: 0px;\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n\r\n      ::slotted([slot=socials]) {\r\n        display: flex;\r\n        gap: tokens.$ifxSpace400;\r\n\r\n        @media (max-width: 768px) {\r\n          // Adjust this value according to your design breakpoints\r\n          flex-wrap: wrap;\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n    & .footer__base {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      width: 100%;\r\n      padding: tokens.$ifxSpace300 0;\r\n\r\n      & .footer__brand {\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        font-size: tokens.$ifxFontSizeM;\r\n        line-height: tokens.$ifxLineHeightM;\r\n        color: tokens.$ifxColorBaseBlack;\r\n        flex-grow: 1;\r\n\r\n      }\r\n\r\n      & .footer__info > ::slotted([slot=info]) {\r\n        display: flex;\r\n        gap: tokens.$ifxSpace300;\r\n        padding-right: tokens.$ifxSpace200;\r\n        justify-content: flex-end;\r\n        flex-grow: 1;\r\n\r\n        a {\r\n          font-style: normal;\r\n          font-weight: 400;\r\n          font-size: tokens.$ifxFontSizeM;\r\n          line-height: tokens.$ifxLineHeightM;\r\n          text-decoration: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n          // Adjust this value according to your design breakpoints\r\n          justify-content: flex-start;\r\n          flex-wrap: wrap;\r\n          gap: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        // Adjust this value according to your design breakpoints\r\n        flex-direction: column-reverse;\r\n\r\n        .footer__brand {\r\n          margin-top: tokens.$ifxSpace200;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Element, Prop, State, Host } 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-footer',\r\n  styleUrl: 'footer.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class Footer {\r\n  @Element() el: HTMLElement;\r\n  @State() currentYear: number = new Date().getFullYear();\r\n  @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG';\r\n \r\n  private hasColSlot: boolean = false;\r\n  private hasSocialsSlot: boolean = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasColSlot = !!this.el.querySelector('[slot=\"col\"]');\r\n    this.hasSocialsSlot = !!this.el.querySelector('[slot=\"socials\"]');\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-footer', await framework)\r\n    }\r\n  }\r\n\r\n \r\n  render() {\r\n    return (\r\n      <Host>\r\n        <footer class=\"footer__container\">\r\n          <div class=\"footer__wrapper\">\r\n            { (this.hasSocialsSlot || this.hasColSlot) &&\r\n              <div class=\"footer__logo_top\">\r\n                <svg aria-hidden=\"true\" width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <g clip-path=\"url(#clip0_2396_2480)\">\r\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\r\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\r\n                  </g>\r\n                  <defs>\r\n                    <clipPath id=\"clip0_2396_2480\">\r\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\r\n                    </clipPath>\r\n                  </defs>\r\n                </svg> \r\n              </div>\r\n            }\r\n            {this.hasColSlot && (\r\n              <nav>\r\n                <div class=\"col-wrapper\">\r\n                  <slot name=\"col\" />\r\n                </div>\r\n              </nav>\r\n            )}\r\n\r\n            {this.hasSocialsSlot &&\r\n              <div class=\"default\" aria-label='Follow us on social media'>\r\n                <div class=\"footer__logo_btm\">\r\n                  <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_2396_2480)\">\r\n                      <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\r\n                      <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_2396_2480\">\r\n                        <rect width=\"91\" height=\"40\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </div>\r\n                <slot name=\"socials\" />\r\n              </div>\r\n            }\r\n            <div class=\"footer__base\">\r\n              {this.copyrightText &&\r\n                <div class=\"footer__brand\">\r\n                  {this.copyrightText}\r\n                </div>\r\n              }\r\n              <div class=\"footer__info\">\r\n                <slot name=\"info\"/>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </footer>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"8HAAA,MAAMA,EAAY,q1F,MCWLC,EAAM,MANnB,WAAAC,CAAAC,G,UAQWC,KAAAC,aAAsB,IAAIC,MAAOC,cAClCH,KAAaI,cAAW,YAAcJ,KAAKC,YAAc,4BAEzDD,KAAUK,WAAY,MACtBL,KAAcM,eAAY,KA4EnC,CA1EC,iBAAAC,GACEP,KAAKK,aAAeL,KAAKQ,GAAGC,cAAc,gBAC1CT,KAAKM,iBAAmBN,KAAKQ,GAAGC,cAAc,mB,CAGhD,sBAAMC,GACJ,IAAIC,EAAuBX,KAAKQ,IAAK,CACnC,MAAMI,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAKvC,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAQ,UAAAE,IAAA,2CAAAC,MAAM,qBACZH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACNnB,KAAKM,gBAAkBN,KAAKK,aAC7BW,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACTH,EAAiB,OAAAE,IAAA,gEAAOE,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACnFR,EAAA,KAAAE,IAAA,uDAAa,yBACXF,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6yGAA6yGF,KAAK,YAC1zGP,EAAM,QAAAE,IAAA,2CAAAO,EAAE,g3BAAg3BF,KAAK,aAE/3BP,EAAA,QAAAE,IAAA,4CACEF,EAAU,YAAAE,IAAA,2CAAAQ,GAAG,mBACXV,EAAA,QAAAE,IAAA,2CAAME,MAAM,KAAKC,OAAO,KAAKE,KAAK,cAM3CvB,KAAKK,YACJW,EAAA,OAAAE,IAAA,4CACEF,EAAK,OAAAE,IAAA,2CAAAC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,UAKhB3B,KAAKM,gBACJU,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAS,aAAY,6BAC9BH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChER,EAAA,KAAAE,IAAA,uDAAa,yBACXF,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6yGAA6yGF,KAAK,YAC1zGP,EAAM,QAAAE,IAAA,2CAAAO,EAAE,g3BAAg3BF,KAAK,aAE/3BP,EAAA,QAAAE,IAAA,4CACEF,EAAU,YAAAE,IAAA,2CAAAQ,GAAG,mBACXV,EAAA,QAAAE,IAAA,2CAAME,MAAM,KAAKC,OAAO,KAAKE,KAAK,cAK1CP,EAAA,QAAAE,IAAA,2CAAMS,KAAK,aAGfX,EAAK,OAAAE,IAAA,2CAAAC,MAAM,gBACRnB,KAAKI,eACJY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRnB,KAAKI,eAGVY,EAAK,OAAAE,IAAA,2CAAAC,MAAM,gBACTH,EAAM,QAAAE,IAAA,2CAAAS,KAAK,a","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","role","name","id","templateCss","Template","repoDetails","desc","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","key","size","src","thumbnail","onInput","htmlFor","disabled","required","placeholder","fullWidth"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\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","\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}"],"mappings":"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","ignoreList":[]}