@infineon/infineon-design-system-stencil 33.1.1--canary.1818.94e54a71935d0367c21fd257850df436af269985.0 → 33.1.1--canary.1818.40b59d3e7e35c19c1cd5c4976a5aecca37653bcd.0

package/dist/infineon-design-system-stencil/{p-4fa1f905.entry.js.map → p-1e9f56d6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["chipCss","IfxChipStyle0","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","readOnly","opened","selectedOptions","handleValueChange","newValue","syncSelectedOptionsWithProp","handleReadOnlyChange","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","find","option","filter","map","emitIfxChange","ifxChange","emit","currentSelection","name","querySelectorAll","getSelectedOptions","label","join","slice","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","generateKey","count","isArray","componentWillLoad","render","h","class","tabIndex","onClick","role","AriaLabel","toString","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","currentPage","internalPage","internalItemsPerPage","numberOfPages","total","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","itemsPerPage","totalPageNumber","Math","ceil","_","filterOptionsArray","obj","JSON","parse","i","filteredItemsPerPage","componentDidUpdate","listItems","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","paginationContainer","addEventListener","parent","currentTarget","initPagination","initialValue","classList","contains","closest","pagination","remove","floor","add","disabled","options","color","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() AriaLabel: string;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.AriaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-number-indicator>  {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevrondown16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[]\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.internalItemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.internalItemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n    const itemsPerPage = this.internalItemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  filterOptionsArray() { \n    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n    for(let i = 0; i < obj.length; i++) { \n      let item = obj[i];\n      if(!item.label) { \n        item.label = item.value;\n      }\n    }\n    this.filteredItemsPerPage = obj;\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n    this.filterOptionsArray()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.internalItemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options={this.filteredItemsPerPage} >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["chipCss","IfxChipStyle0","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","readOnly","opened","selectedOptions","handleValueChange","newValue","syncSelectedOptionsWithProp","handleReadOnlyChange","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","find","option","filter","map","emitIfxChange","ifxChange","emit","currentSelection","name","querySelectorAll","getSelectedOptions","label","join","slice","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","generateKey","count","isArray","componentWillLoad","render","h","class","tabIndex","onClick","role","AriaLabel","toString","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","currentPage","internalPage","internalItemsPerPage","numberOfPages","total","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","itemsPerPage","totalPageNumber","Math","ceil","_","filterOptionsArray","obj","JSON","parse","i","filteredItemsPerPage","componentDidUpdate","listItems","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","paginationContainer","addEventListener","parent","currentTarget","initPagination","initialValue","classList","contains","closest","pagination","remove","floor","add","disabled","options","color","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() AriaLabel: string;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.AriaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-number-indicator>  {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevrondown16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[]\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.internalItemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.internalItemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n    const itemsPerPage = this.internalItemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  filterOptionsArray() { \n    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n    for(let i = 0; i < obj.length; i++) { \n      let item = obj[i];\n      if(!item.label) { \n        item.label = item.value;\n      }\n    }\n    this.filteredItemsPerPage = obj;\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n    this.filterOptionsArray()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.internalItemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options={this.filteredItemsPerPage} >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAU,2gDAChB,MAAAC,EAAeD,E,MCOFE,EAAI,MALjB,WAAAC,CAAAC,G,+CASUC,KAAAC,YAAsB,GACtBD,KAAAE,KAA0B,QACTF,KAAAG,MAAgCC,UACjDJ,KAAAK,QAA8B,SAC9BL,KAAAM,SAAoB,MAGnBN,KAAAO,OAAkB,MAClBP,KAAAQ,gBAA8C,E,CAGvD,iBAAAC,CAAkBC,GAChBV,KAAKW,4BAA4BD,E,CAInC,oBAAAE,CAAqBF,GACnB,GAAIA,EAAU,CACZV,KAAKO,OAAS,K,EAKlB,2BAAAM,CAA4BC,GAC1B,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAA2BjB,KAAKkB,KAAKC,WAAWC,cAAc,kBACpE,MAAMC,EAA4BrB,KAAKkB,KAAKC,WAAWC,cAAc,mBACrE,IAAKL,EAAKO,SAASD,KAAkBN,EAAKO,SAASL,IAAgBjB,KAAKO,OAAQ,CAC9EP,KAAKuB,oB,EAKT,aAAAC,CAAcV,GAEZ,GAAIA,EAAMW,OAAS,MAAO,CACxBX,EAAMY,gB,CAGR,GAAKZ,EAAMa,OAAuBC,UAAY,WAAY,CACxD5B,KAAK6B,qBAAqBf,E,MACrB,GAAKA,EAAMa,OAAuBC,UAAY,gBAAiB,CACpE5B,KAAK8B,sBAAsBhB,E,EAK/B,qBAAAiB,CAAsBjB,GACpB,MAAMkB,EAAmClB,EAAMmB,OAC/C,MAAMC,EAAgD,IAAIlC,KAAKQ,iBAE/D,GAAIR,KAAKK,UAAY,QAAS,CAC5B,GAAI2B,EAAYG,SAAU,CACxBnC,KAAKO,OAAS,MACd,MAAM6B,EAAsBpC,KAAKqC,eACjCD,EAAUE,SAASC,IACjB,GAAIA,EAASJ,UAAYI,IAAazB,EAAMa,OAAQ,CAClDY,EAASC,UAASC,OAAAC,OAAAD,OAAAC,OAAA,GACbH,EAASC,WAAS,CACrBG,sBAAuB,QAEzBJ,EAASJ,SAAW,K,KAGxBnC,KAAKQ,gBAAkB,CAACwB,E,KACnB,CACLhC,KAAKQ,gBAAkB,E,CAEzBR,KAAKG,MAAQH,KAAKQ,gBAAgB,GAAKR,KAAKQ,gBAAgB,GAAGL,MAAQC,S,KAClE,CACL,GAAI4B,EAAYG,SAAU,CAExB,IAAKnC,KAAKQ,gBAAgBoC,MAAKC,GAAUA,EAAO1C,QAAU6B,EAAY7B,QAAQ,CAC5EH,KAAKQ,gBAAkB,IAAIR,KAAKQ,gBAAiBwB,E,MAE9C,CACLhC,KAAKQ,gBAAkBR,KAAKQ,gBAAgBsC,QAAQD,GAAWA,EAAO1C,QAAU6B,EAAY7B,O,CAE9FH,KAAKG,MAAQH,KAAKQ,gBAAgBuC,KAAKF,GAAWA,EAAO1C,O,CAG3D,GAAI6B,EAAYgB,cAAe,CAC7BhD,KAAKiD,UAAUC,KAAK,CAClBhB,kBAAmBA,EACnBiB,iBAAkBnD,KAAKQ,gBACvB4C,KAAMpD,KAAKC,a,EAKjB,YAAAoC,GACE,OAAOrC,KAAKkB,KAAKmC,iBAAiB,gB,CAGpC,kBAAAC,GACE,GAAItD,KAAKK,UAAY,QAAS,CAC5B,OAAOL,KAAKQ,gBAAgBuC,KAAIF,GAAUA,EAAOU,QAAOC,KAAK,G,CAE/D,OAAOxD,KAAKQ,gBAAgBiD,MAAM,EAAG,GAAGV,KAAIF,GAAUA,EAAOU,QAAOC,KAAK,K,CAG3E,kBAAAjC,GACE,GAAIvB,KAAKM,SAAU,OACnBN,KAAKO,QAAUP,KAAKO,M,CAOtB,eAAAmD,CAAgBC,EAAgB,GAC9B3D,KAAKO,OAAS,KACd,MAAM6B,EAAsBpC,KAAKqC,eACjC,IAAIuB,EAEJ,GAAID,KAAW,EAAG,CAChBC,EAAOxB,EAAUwB,KAAKxB,EAAUyB,OAAS,E,MACpC,GAAIF,GAAS,GAAKA,EAAQvB,EAAUyB,OAAQ,CACjDD,EAAOxB,EAAUwB,KAAKD,E,KACjB,CACLG,QAAQC,MAAM,kBAAkBJ,KAChC,M,CAGF,MAAMK,EAAaJ,EAAKzC,WAAWC,cAAc,cACjD,GAAI4C,EAAY,CAEdC,YAAW,KACTD,EAAWE,OAAO,GACjB,E,EAIP,SAAAC,GACE,MAAMlD,EAA2BjB,KAAKkB,KAAKC,WAAWC,cAAc,kBACpEH,EAAYiD,O,CAGd,yBAAAE,CAA0BtD,GACxBA,EAAMuD,kBACNrE,KAAKO,OAAS,MAEd,IAAI+D,EAAoB,MACxB,MAAMlC,EAAsBpC,KAAKqC,eACjCD,EAAUE,SAASC,IACjB,GAAIA,EAASJ,SAAU,CACrBmC,EAAoB,KACpB/B,EAASC,UAASC,OAAAC,OAAAD,OAAAC,OAAA,GACbH,EAASC,WAAS,CACrBG,sBAAuB,QAEzBJ,EAASJ,SAAW,K,KAKxB,GAAImC,EAAmB,CACrB,MAAMpC,EAAgDlC,KAAKQ,gBAC3DR,KAAKQ,gBAAkB,GACvBR,KAAKG,MAAQ,GACbH,KAAKiD,UAAUC,KAAK,CAClBhB,kBAAmBA,EACnBiB,iBAAkB,GAClBC,KAAMpD,KAAKC,a,EAKjB,kBAAAsE,GACE,IAAKvE,KAAKM,SAAU,CAClBN,KAAKuB,oB,EAIT,oBAAAM,CAAqBf,GAEnB,GAAId,KAAKM,SAAU,OAEnB,IAAKN,KAAKO,OAAQ,CAChB,OAAQO,EAAMW,MACZ,IAAK,QACL,IAAK,QACL,IAAK,YACHzB,KAAK0D,gBAAgB,GACrB,MACF,IAAK,UACH1D,KAAK0D,iBAAiB,GACtB,M,KAEC,CACL,OAAQ5C,EAAMW,MACZ,IAAK,SACHzB,KAAKO,OAAS,MACdP,KAAKmE,YACL,M,EAKR,qBAAArC,CAAsBhB,GACpB,IAAI0D,EAAYxE,KAAKqC,eAErB,IAAIoC,EAAcC,MAAMC,KAAKH,GAAWI,QAAQ9D,EAAMa,QACtD,GAAI8C,KAAiB,EAAG,CACtBX,QAAQC,MAAM,kCACd,M,CAGF,OAAQjD,EAAMW,MACZ,IAAK,YACH,GAAIgD,IAAgBD,EAAUX,OAAS,EAAG,MAC1C7D,KAAK0D,gBAAgBe,EAAc,GACnC,MACF,IAAK,UACH,GAAIA,IAAgB,EAAG,MACvBzE,KAAK0D,gBAAiBe,EAAc,GACpC,MACF,IAAK,SACHzE,KAAKO,OAAS,MACdP,KAAKmE,YACL,MACF,IAAK,QAEH,GAAInE,KAAKK,UAAY,SAAU,CAE7BL,KAAKO,OAAS,MACdP,KAAKmE,W,CAEP,MACF,IAAK,QAEHnE,KAAKO,OAAS,MACdP,KAAKmE,YACL,M,CAIN,aAAAU,GACE,MAAMzC,EAAsBpC,KAAKqC,eACjC,IAAIyC,EAAc,EAClB1C,EAAUE,SAASC,IACjBA,EAASC,UAAY,CACnBG,sBAAuB,KACvBzC,KAAOF,KAAKE,OAAS,QAAU,QAAU,QACzCG,QAAUL,KAAKK,UAAY,QAAU,QAAU,SAC/CyE,IAAKA,IACN,G,CAIL,2BAAAnE,CAA4BD,GAE1BV,KAAKQ,gBAAkB,GAEvB,MAAMuE,EAAc,MAClB,IAAIC,EAAQ,EACZ,MAAO,IAAMA,GACd,EAHmB,GAKpB,GAAIN,MAAMO,QAAQvE,GAAW,CAC3BV,KAAKQ,gBAAkBE,EAASqC,KAAI5C,IAAK,CACvCA,QACAoD,MAAOpD,EACPgC,SAAU,KACV2C,IAAKC,IACL/B,cAAe,Q,MAEZ,UAAWtC,IAAa,SAAU,CACvCV,KAAKQ,gBAAkB,CAAC,CACtBL,MAAOO,EACP6C,MAAO7C,EACPyB,SAAU,KACV2C,IAAKC,IACL/B,cAAe,M,CAInBhD,KAAK6E,e,CAGP,iBAAAK,GACElF,KAAKW,4BAA4BX,KAAKG,M,CAGxC,MAAAgF,GACE,OACEC,EAAA,OAAAN,IAAA,2CAAKO,MAAM,QACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAO,gCAAgCrF,KAAKE,OAAS,QAAU,QAAU,6CACnDF,KAAKK,UAAY,QAAU,QAAU,+BACpDL,KAAKO,SAAWP,KAAKM,SAAW,wBAA0B,yBAC1DN,KAAKQ,gBAAgBqD,OAAS,0BAA4B,KACpEyB,SAAU,EACVC,SAAUvF,KAAKM,SAAW,KAAQN,KAAKuE,oBAAoB,EAAKnE,UAChEoF,KAAK,WAAU,aACHxF,KAAKyF,UAAS,aACdzF,KAAKsD,qBAAoB,iBACrBtD,KAAKM,SAAW,UAAYF,UAAS,iBACrCJ,KAAKM,SAAWN,KAAKO,OAAOmF,WAAatF,UAAS,iBAClDJ,KAAKM,SAAW,WAAaF,UAAS,gBACvCJ,KAAKM,SAAW,OAASF,UAAS,uBAC3BJ,KAAKK,UAAY,QAAU,OAASD,WAG1DgF,EAAA,OAAAN,IAAA,2CAAKO,MAAM,kBAENrF,KAAKQ,gBAAgBqD,SAAW,GAAM,GAAG7D,KAAKC,cAI9CD,KAAKQ,gBAAgBqD,SAAW,IAAM7D,KAAKK,UAAY,SAAWL,KAAKM,WAAaN,KAAKC,cAAgB,IAC1G,GAAGD,KAAKC,eAIPD,KAAKQ,gBAAgBqD,SAAW,GACjCuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BACRrF,KAAKsD,sBAKPtD,KAAKQ,gBAAgBqD,OAAS,GAAK7D,KAAKK,UAAY,SACrD+E,EAAA,wBAAAN,IAAA,iDAAyB,IAAI9E,KAAKQ,gBAAgBqD,OAAS,IAAG,OAK/D7D,KAAKM,WAAaN,KAAKK,UAAY,SAAYL,KAAKK,UAAY,SAAWL,KAAKQ,gBAAgBqD,SAAW,IAC5GuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,wBACTD,EAAA,YAAUN,IAAK,EAAGa,KAAM,mBAMzB3F,KAAKK,UAAY,SAAWL,KAAKM,WAAa,OAASN,KAAKQ,gBAAgBqD,OAAS,GACtFuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BAA2BE,QAAUK,IAAQ5F,KAAKoE,0BAA0BwB,EAAE,GACvFR,EAAA,YAAUN,IAAK,EAAGa,KAAM,aAKxB3F,KAAKQ,gBAAgBqD,QAAU,GAAM7D,KAAKK,UAAY,SACxD+E,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BAA2BE,QAAUK,IAAQ5F,KAAKoE,0BAA0BwB,EAAE,GACvFR,EAAA,YAAUN,IAAK,EAAGa,KAAM,cAO5B3F,KAAKO,SAAWP,KAAKM,UACrB8E,EAAA,OAAAN,IAAA,2CAAKe,GAAG,WAAWL,KAAK,UAAUH,MAAM,kBACtCD,EAAA,QAAAN,IAAA,8C,mIC7WZ,MAAMgB,EAAc,yrBACpB,MAAAC,EAAeD,E,MCeFE,EAAQ,MANrB,WAAAlG,CAAAC,G,+DAWQC,KAAAG,MAAgBC,UAChBJ,KAAAwC,UAAuB,CAAEG,sBAAuB,KAAMtC,QAAS,QAASH,KAAM,SAC9CF,KAAAmC,SAAoB,K,CAG5D,mBAAA8D,CAAoBnF,GACjB,GAAId,KAAKwC,UAAUnC,UAAY,SAAU,CACrC,MAAMsB,EAASb,EAAMa,OAErB,GAAI3B,KAAKuC,WAAaZ,GAAU3B,KAAKuC,SAAS2D,gBAAkBvE,EAAOuE,cAAe,CAClFlG,KAAKmC,SAAW,K,GAM3B,gBAAAgE,CAAiBzF,EAAmB0F,GACjC,GAAI1F,IAAa0F,EAAU,CAEvB,GAAIpG,KAAKwC,UAAUG,sBAAsB,CACrC3C,KAAKqG,4B,KACF,CACHrG,KAAKwC,UAAUG,sBAAwB,I,GAKlD,YAAA2D,GACG,OAAOtG,KAAKuC,SAASgE,S,CAGxB,mBAAAC,GACGxG,KAAKmC,UAAYnC,KAAKmC,Q,CAIzB,0BAAAkE,CAA2BrD,EAAyB,MACjDhD,KAAKyG,kBAAkBvD,KAAK,CAAEF,cAAeA,EACrB8B,IAAK9E,KAAKwC,UAAUsC,IACpBvB,MAAOvD,KAAKsG,eACZnE,SAAUnC,KAAKmC,SACfhC,MAAOH,KAAKG,O,CAGvC,eAAAuG,GACG1G,KAAKwG,qB,CAGR,iBAAAG,CAAkB7F,GACf,GAAIA,EAAMW,OAAS,SAAWX,EAAMW,OAAS,QAAS,CAClDzB,KAAKwG,qB,EAIZ,mBAAAI,GACG,GAAI5G,KAAKmC,SAAU,CACfnC,KAAKqG,2BAA2B,M,EAKvC,iBAAAnB,GAEGlF,KAAK4G,qB,CAGR,MAAAzB,GACG,OACIC,EAAA,OAAAN,IAAA,2CAAKO,MAAO,wBAAwBrF,KAAKwC,UAAUtC,0CACxBF,KAAKmC,UAAYnC,KAAKwC,UAAUnC,WAAa,SAAW,WAAa,KAC5FiF,SAAU,EACVC,QAAS,KAAOvF,KAAK0G,iBAAiB,EACtCG,UAAYjB,IAAO5F,KAAK2G,kBAAkBf,EAAE,EAC5CJ,KAAK,SAAQ,gBACExF,KAAKmC,SAASuD,YAGzB1F,KAAKwC,UAAUnC,UAAY,SAC3B+E,EAAA,gBAAAN,IAAA,2CAAcgC,QAAS9G,KAAKmC,SACxBmD,UAAW,EACXpF,KAAK,MAIbkF,EAAA,OAAAN,IAAA,2CAAKO,MAAM,oBAAkB,IAAED,EAAA,QAAAN,IAAA,6CAAQ,KAGvCM,EAAA,OAAAN,IAAA,2CAAKO,MAAM,iCACPD,EAAA,YAAAN,IAAA,2CAAUa,KAAM,QAAQ3F,KAAKwC,UAAUtC,OAAS,QAAU,KAAO,QAAM,M,uGC7GtF,MAAM6G,EAAgB,2jKACtB,MAAAC,EAAeD,E,MCOFE,EAAU,MALvB,WAAAnH,CAAAC,G,uDAQUC,KAAAkH,YAAsB,EACrBlH,KAAAmH,aAAuB,EACvBnH,KAAAoH,qBAA+B,GAC/BpH,KAAAqH,cAA0B,GAC3BrH,KAAAsH,MAAgB,EAIhBtH,KAAAuH,eAAiB,WACjBvH,KAAAwH,aAAe,SACfxH,KAAAyH,qBAAuB,iBACvBzH,KAAA0H,SAAW,Y,CAGnB,eAAAC,CAAgB/B,GACd,GAAGA,EAAE3D,OAAQ,CACXjC,KAAKoH,qBAAuBQ,SAAShC,EAAE3D,OAAOsB,M,KACzC,CACLvD,KAAKoH,qBAAuB,E,EAIhC,gBAAAS,GACE7H,KAAK8H,8BACL,IAAIC,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzD,IAAI6G,EAAYF,EAAkB3G,cAAc,SAChDpB,KAAKkI,mBAAmBD,EAAW,K,CAIrC,sBAAAE,GACE,GAAIC,MAAMpI,KAAKkH,aAAc,CAC3BlH,KAAKkH,YAAc,C,CAErB,MAAMI,EAAQtH,KAAKsH,OAAStH,KAAKoH,qBAAuBpH,KAAKoH,qBAAuBpH,KAAKsH,MACzF,MAAMe,EAAerI,KAAKoH,qBAC1B,MAAMkB,EAAkBC,KAAKC,KAAKlB,EAAQe,GAE1C,GAAIrI,KAAKkH,aAAe,EAAG,CACzBlH,KAAKmH,aAAe,C,MACf,GAAInH,KAAKkH,YAAcoB,EAAiB,CAC7CtI,KAAKmH,aAAemB,C,MACftI,KAAKmH,aAAenH,KAAKkH,YAEhClH,KAAKqH,cAAgB3C,MAAMC,KAAK,CAAEd,OAAQyE,IAAmB,CAACG,EAAG9E,IAAUA,EAAQ,G,CAGrF,kBAAA+E,GACE,IAAIC,EAAajE,MAAMO,QAAQjF,KAAKqI,cAAgBrI,KAAKqI,aAAeO,KAAKC,MAAM7I,KAAKqI,cACxF,IAAI,IAAIS,EAAI,EAAGA,EAAIH,EAAI9E,OAAQiF,IAAK,CAClC,IAAIlF,EAAO+E,EAAIG,GACf,IAAIlF,EAAKL,MAAO,CACdK,EAAKL,MAAQK,EAAKzD,K,EAGtBH,KAAK+I,qBAAuBJ,C,CAG9B,iBAAAzD,GACElF,KAAKmI,yBACLnI,KAAK0I,oB,CAGP,kBAAAM,GACE,IAAIjB,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzD,IAAI6H,EAAYlB,EAAkB1E,iBAAiB,MACnDrD,KAAKkJ,6BAA6BD,EAAWlB,GAE7C,GAAIA,EAAkBoB,QAAQnJ,KAAK0H,UAAY1H,KAAKqH,cAAe,CACjEU,EAAkBoB,QAAQnJ,KAAK0H,UAAYK,EAAkBoB,QAAQnJ,KAAK0H,S,MACrEK,EAAkBoB,QAAQnJ,KAAK0H,UAAY,EAElD1H,KAAKoJ,WAAWrB,EAAmB,M,CAGrC,mBAAAsB,GACErJ,KAAKmI,wB,CAGP,mBAAAmB,CAAoBC,GAClB,IAAIrC,EAAcqC,EAAa,EAC/B,IAAIC,EAAaxJ,KAAKqH,cAAcxD,OACpC,IAAI4F,EAAWF,IAAe,EAAI,KAAOA,EACzC,IAAIG,EAAWH,EAAa,EAAIC,EAAa,KAAOD,EAAa,EACjE,IAAIlB,EAAerI,KAAKoH,qBACxBpH,KAAK2J,cAAczG,KAAK,CAAEgE,cAAasC,aAAYC,WAAUC,WAAUrB,gB,CAGzE,4BAAAa,CAA6BD,EAAWW,GACtCX,EAAU3G,SAASsB,IACjBA,EAAKiG,iBAAiB,SAAUjE,IAC9B,IAAIkE,EAASF,EACb,IAAIX,EAAYa,EAAOzG,iBAAiB,MACxCyG,EAAOX,QAAQnJ,KAAK0H,UAAYhD,MAAMC,KAAKsE,GAAWrE,QAAQgB,EAAEmE,eAChE/J,KAAKoJ,WAAWU,EAAQ,MAAM,GAC9B,G,CAIN,cAAAE,CAAeJ,GACb,IAAIX,EAAYW,EAAoBvG,iBAAiB,MAErDuG,EAAoBT,QAAQnJ,KAAK0H,UAAYhD,MAAMC,KAAKsE,GAAWrE,QAAQgF,EAAoBxI,cAAc,YAE7GwI,EAAoBxI,cAAc,SAASyI,iBAAiB,SAAUjE,GAAM5F,KAAKkI,mBAAmBtC,EAAG,SACvGgE,EAAoBxI,cAAc,SAASyI,iBAAiB,SAAUjE,GAAM5F,KAAKkI,mBAAmBtC,EAAG,SAEvG5F,KAAKkJ,6BAA6BD,EAAWW,E,CAG/C,kBAAA1B,CAAmBtC,EAAGqE,GACpB,IAAIjC,EAAKpC,EACT,UAAWA,EAAEjE,SAAW,SAAU,CAChCqG,EAAKpC,EAAEjE,M,CAGT,IAAKqG,EAAGkC,UAAUC,SAASnK,KAAKuH,gBAAiB,CAC/C,IAAIuC,EAAS9B,EAAGoC,QAAQ,eACxB,IAAIb,EAAa3B,SAASkC,EAAOX,QAAQnJ,KAAK0H,UAAW,IACzD6B,GAAc,GAAKvB,EAAGkC,UAAUC,SAAS,SAAW,EAAI,GAExD,GAAIZ,KAAgB,EAAG,CACrBA,EAAa,C,CAGfO,EAAOX,QAAQnJ,KAAK0H,UAAY6B,EAChCvJ,KAAKoJ,WAAWU,EAAQG,E,EAI5B,UAAAb,CAAWiB,EAAYJ,GACrB,MAAML,EAAsBS,EAC5B,IAAIpB,EAAYW,EAAoBvG,iBAAiB,MACrD,IAAIkG,EAAa3B,SAASgC,EAAoBT,QAAQnJ,KAAK0H,UAAW,IAEtEuB,EAAU3G,SAASsB,IACjBA,EAAKsG,UAAUI,OAAOtK,KAAKwH,cAC3B5D,EAAKsG,UAAUI,OAAOtK,KAAKyH,qBAAqB,IAGlD,GAAIwC,GAAgBjK,KAAKmH,aAAe,EAAG,CACzCoC,EAAahB,KAAKgC,MAAMvK,KAAKmH,aAAe,GAC5CyC,EAAoBT,QAAQnJ,KAAK0H,UAAY6B,C,CAG/CvJ,KAAKsJ,oBAAoBC,GAEzBN,EAAUM,GAAYW,UAAUM,IAAIxK,KAAKwH,cAEzC,GAAI+B,IAAe,EAAG,CACpBK,EAAoBxI,cAAc,SAAS8I,UAAUM,IAAIxK,KAAKuH,gBAC9DqC,EAAoBxI,cAAc,SAASqJ,SAAW,I,KAEjD,CACLxB,EAAUM,EAAa,GAAGW,UAAUM,IAAIxK,KAAKyH,sBAC7CmC,EAAoBxI,cAAc,SAAS8I,UAAUI,OAAOtK,KAAKuH,gBACjEqC,EAAoBxI,cAAc,SAASqJ,SAAW,K,CAGxD,GAAIlB,IAAgBN,EAAUpF,OAAS,EAAI,CACzC+F,EAAoBxI,cAAc,SAAS8I,UAAUM,IAAIxK,KAAKuH,gBAC9DqC,EAAoBxI,cAAc,SAASqJ,SAAW,I,KAEjD,CACLb,EAAoBxI,cAAc,SAAS8I,UAAUI,OAAOtK,KAAKuH,gBACjEqC,EAAoBxI,cAAc,SAASqJ,SAAW,K,EAI1D,2BAAA3C,GACE,IAAIC,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzDpB,KAAKgK,eAAejC,E,CAGtB,MAAA5C,GACE,OACEC,EAAA,OAAAN,IAAA,wDAAgB,eAAc,aAAa9E,KAAKkH,YAAa7B,MAAM,aACjED,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBAAuB,oBAClCD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBACTD,EAAA,cAAAN,IAAA,2CACE3E,MAAM,YACND,KAAK,IACLD,YAAY,QAAO,cACP,QAAO,2BACM,YACzBwK,SAAU,MACV1G,MAAO,MAAK,gBACE,QACdR,MAAM,GAAE,oBACU,cAClBmH,QAAS1K,KAAK+I,yBAIpB3D,EAAA,OAAAN,IAAA,2CAAKO,MAAM,wBACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,cACTD,EAAA,mBAAAN,IAAA,2CAAiBzE,QAAQ,YAAYgF,MAAM,OAAOsF,MAAM,UAAUhF,KAAK,kBACvEP,EAAA,MAAAN,IAAA,4CACG9E,KAAKqH,cAActE,KAAKa,GACvBwB,EAAA,MAAIC,MAAO,GAAGrF,KAAKmH,eAAiBvD,EAAO,SAAW,MAAMwB,EAAA,KAAGwF,KAAMxK,WAAYwD,OAErFwB,EAAA,mBAAAN,IAAA,2CAAiBO,MAAM,OAAOhF,QAAQ,YAAYsK,MAAM,UAAUhF,KAAK,sB","ignoreList":[]}

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

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

package/dist/infineon-design-system-stencil/{p-711c9832.entry.js.map → p-2418b99b.entry.js.map}

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

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

@@ -0,0 +1,2 @@
+import{r as e,h as s}from"./p-e6edf72d.js";const t=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, Source Sans 3)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}";const r=t;const a=class{constructor(s){e(this,s);this.value=0;this.showLabel=false}valueChanged(e,s){if(e!==s){this.internalValue=e}}componentWillLoad(){this.internalValue=this.value}render(){return s("div",{key:"e1978cda672a5b004cd0520c099041172ec5e819","aria-label":"a progress bar","aria-value":this.value,class:`progress-bar ${this.size}`},s("div",{key:"2e9094099e63479b88f5b832ec55f5eb51ab0d13",class:"progress",style:{width:`${this.internalValue}%`}},this.showLabel&&this.size!=="s"&&this.internalValue!==0&&s("span",{key:"d7f1ecd1109f03379ffa36626e27f50f9ef7ca72",class:"label"},`${this.internalValue}%`)))}static get watchers(){return{value:["valueChanged"]}}};a.style=r;export{a as ifx_progress_bar};
+//# sourceMappingURL=p-249d1657.entry.js.map

package/dist/infineon-design-system-stencil/{p-0fbc70db.entry.js.map → p-249d1657.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  \n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,6mBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,MALxB,WAAAC,CAAAC,G,UAMUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAKzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAK5B,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAaV,KAAKC,MAAQU,MAAO,gBAAgBX,KAAKY,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGd,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKY,OAAS,KAAOZ,KAAKM,gBAAkB,GAAKG,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGX,KAAKM,mB","ignoreList":[]}
+{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  \n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,2mBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,MALxB,WAAAC,CAAAC,G,UAMUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAKzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAK5B,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAaV,KAAKC,MAAQU,MAAO,gBAAgBX,KAAKY,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGd,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKY,OAAS,KAAOZ,KAAKM,gBAAkB,GAAKG,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGX,KAAKM,mB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as n,h as e,g as t}from"./p-e6edf72d.js";const a=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.numberIndicator__container span{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}.content-wrapper{display:none}";const i=a;const r=class{constructor(e){n(this,e);this.inverted=false}handleSlotChange(n){var e,t;const a=n.target;const i=((t=(e=a.assignedNodes({flatten:true})[0])===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||"";const r=parseInt(i,10);this.displayValue=!isNaN(r)&&r>99?"99+":r}render(){return e("div",{key:"16c3170610d742a0a9fe387e82600d48a1a6f065","aria-label":"a number indicator",class:`numberIndicator__container ${this.inverted?"inverted":""}`},e("span",{key:"044f49592dc0532bc0126697973f31b4c96c3dc8",class:"content-wrapper"},e("slot",{key:"b76b3e80fac9cf93e53d50400d6e1fb16fcfe2cd",onSlotchange:n=>this.handleSlotChange(n)})),e("span",{key:"ec745e545fae2a05db0204754af6889b04adc079"},this.displayValue))}get el(){return t(this)}};r.style=i;export{r as ifx_number_indicator};
+//# sourceMappingURL=p-32e55c75.entry.js.map

package/dist/infineon-design-system-stencil/{p-e4de8215.entry.js.map → p-32e55c75.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["numberIndicatorCss","IfxNumberIndicatorStyle0","NumberIndicator","constructor","hostRef","this","inverted","handleSlotChange","e","slot","target","text","_b","_a","assignedNodes","flatten","textContent","trim","num","parseInt","displayValue","isNaN","render","h","key","class","onSlotchange"],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; // Remove fixed padding\n  min-width: 16px; // Ensure minimum size for small numbers\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n  & span {\n    padding: 0 4px;\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}\n\n.content-wrapper { \n  display: none;\n}","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Element() el;\n  @State() displayValue: string | number;\n  @Prop() inverted: boolean = false;\n\n  private handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const text = slot.assignedNodes({ flatten: true })[0]?.textContent?.trim() || '';\n    const num = parseInt(text, 10);\n    this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;\n  }\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span class=\"content-wrapper\">\n          <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n        </span>\n        <span>{this.displayValue}</span>\n      </div>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAqB,ykBAC3B,MAAAC,EAAeD,E,MCOFE,EAAe,MAL5B,WAAAC,CAAAC,G,UAQUC,KAAAC,SAAoB,K,CAEpB,gBAAAC,CAAiBC,G,QACvB,MAAMC,EAAOD,EAAEE,OACf,MAAMC,IAAOC,GAAAC,EAAAJ,EAAKK,cAAc,CAAEC,QAAS,OAAQ,MAAE,MAAAF,SAAA,SAAAA,EAAEG,eAAW,MAAAJ,SAAA,SAAAA,EAAEK,SAAU,GAC9E,MAAMC,EAAMC,SAASR,EAAM,IAC3BN,KAAKe,cAAgBC,MAAMH,IAAQA,EAAM,GAAK,MAAQA,C,CAGxD,MAAAI,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,qBAAqBC,MAAO,8BAA8BpB,KAAKC,SAAW,WAAa,MACrGiB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBACVF,EAAA,QAAAC,IAAA,2CAAME,aAAelB,GAAMH,KAAKE,iBAAiBC,MAEnDe,EAAA,QAAAC,IAAA,4CAAOnB,KAAKe,c","ignoreList":[]}
+{"version":3,"names":["numberIndicatorCss","IfxNumberIndicatorStyle0","NumberIndicator","constructor","hostRef","this","inverted","handleSlotChange","e","slot","target","text","_b","_a","assignedNodes","flatten","textContent","trim","num","parseInt","displayValue","isNaN","render","h","key","class","onSlotchange"],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; // Remove fixed padding\n  min-width: 16px; // Ensure minimum size for small numbers\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n  & span {\n    padding: 0 4px;\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}\n\n.content-wrapper { \n  display: none;\n}","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Element() el;\n  @State() displayValue: string | number;\n  @Prop() inverted: boolean = false;\n\n  private handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const text = slot.assignedNodes({ flatten: true })[0]?.textContent?.trim() || '';\n    const num = parseInt(text, 10);\n    this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;\n  }\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span class=\"content-wrapper\">\n          <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n        </span>\n        <span>{this.displayValue}</span>\n      </div>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAqB,ukBAC3B,MAAAC,EAAeD,E,MCOFE,EAAe,MAL5B,WAAAC,CAAAC,G,UAQUC,KAAAC,SAAoB,K,CAEpB,gBAAAC,CAAiBC,G,QACvB,MAAMC,EAAOD,EAAEE,OACf,MAAMC,IAAOC,GAAAC,EAAAJ,EAAKK,cAAc,CAAEC,QAAS,OAAQ,MAAE,MAAAF,SAAA,SAAAA,EAAEG,eAAW,MAAAJ,SAAA,SAAAA,EAAEK,SAAU,GAC9E,MAAMC,EAAMC,SAASR,EAAM,IAC3BN,KAAKe,cAAgBC,MAAMH,IAAQA,EAAM,GAAK,MAAQA,C,CAGxD,MAAAI,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,qBAAqBC,MAAO,8BAA8BpB,KAAKC,SAAW,WAAa,MACrGiB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBACVF,EAAA,QAAAC,IAAA,2CAAME,aAAelB,GAAMH,KAAKE,iBAAiBC,MAEnDe,EAAA,QAAAC,IAAA,4CAAOnB,KAAKe,c","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as s,g as r}from"./p-e6edf72d.js";const i=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family, Source Sans 3)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";const t=i;const h=class{constructor(s){e(this,s);this.ifxInput=a(this,"ifxInput",7);this.ifxOpen=a(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}handleInput(e){this.value=e.detail}render(){return s("div",{key:"c902f46ef9efab55d05e5f0c5bf24204e364f9f7","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?s("div",{class:"search-bar-wrapper"},s("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},s("ifx-icon",{icon:"search-16",slot:"search-icon"})),s("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):s("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},s("ifx-icon",{icon:"search-16"})))}get el(){return r(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};h.style=t;export{h as ifx_search_bar};
+//# sourceMappingURL=p-3725483d.entry.js.map

package/dist/infineon-design-system-stencil/{p-4c031d6e.entry.js.map → p-3725483d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,w6BACrB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAmBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CAhC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAK5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAIzB,WAAAQ,CAAYC,GACVd,KAAKe,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBnB,KAAKE,SAAUkB,MAAO,cAAcpB,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJa,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBf,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUa,MAAOf,KAAKe,MAAOM,UAAWrB,KAAKqB,UAAWC,WAAYtB,KAAKa,YAAYU,KAAKvB,OAC1JkB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAAS5B,KAAKI,mBAAiB,UAG5Ec,EAAA,OAAKE,MAAM,2BAA2BQ,QAAS5B,KAAKI,mBAClDc,EAAA,YAAUM,KAAK,e","ignoreList":[]}
+{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,s6BACrB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAmBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CAhC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAK5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAIzB,WAAAQ,CAAYC,GACVd,KAAKe,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBnB,KAAKE,SAAUkB,MAAO,cAAcpB,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJa,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBf,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUa,MAAOf,KAAKe,MAAOM,UAAWrB,KAAKqB,UAAWC,WAAYtB,KAAKa,YAAYU,KAAKvB,OAC1JkB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAAS5B,KAAKI,mBAAiB,UAG5Ec,EAAA,OAAKE,MAAM,2BAA2BQ,QAAS5B,KAAKI,mBAClDc,EAAA,YAAUM,KAAK,e","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as r,g as a}from"./p-e6edf72d.js";const o=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";const n=o;const t=class{constructor(r){e(this,r)}render(){return r("div",{key:"2f4e55e1890a5d5f749d0e951d6971d8cf1b0875",class:"container"},r("slot",{key:"7e0c1226088fcd91ffee21b817f89970bc3ab772"}))}get el(){return a(this)}};t.style=n;export{t as ifx_card_links};
+//# sourceMappingURL=p-37282615.entry.js.map

package/dist/infineon-design-system-stencil/{p-6abc7111.entry.js.map → p-37282615.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardLinksCss","IfxCardLinksStyle0","CardLinks","render","h","key","class"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace250;\n  flex-wrap: wrap;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  padding: 0px 24px 24px 24px;\n\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n\n  &:hover {\n    cursor: initial;\n  }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-links',\n  styleUrl: 'card-links.scss',\n  shadow: true,\n})\n\nexport class CardLinks {\n  @Element() el;\n\n  render() {\n    return (\n      <div class='container'>\n        <slot />\n      </div>\n    )\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,wSACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,yBAGpB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["cardLinksCss","IfxCardLinksStyle0","CardLinks","render","h","key","class"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace250;\n  flex-wrap: wrap;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  padding: 0px 24px 24px 24px;\n\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n\n  &:hover {\n    cursor: initial;\n  }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-links',\n  styleUrl: 'card-links.scss',\n  shadow: true,\n})\n\nexport class CardLinks {\n  @Element() el;\n\n  render() {\n    return (\n      <div class='container'>\n        <slot />\n      </div>\n    )\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,sSACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,yBAGpB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,g as e}from"./p-e6edf72d.js";const s=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family, Source Sans 3)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";const n=s;const a=class{constructor(o){i(this,o);this.ifxDropdownItem=t(this,"ifxDropdownItem",7);this.href="";this.target="_self";this.hide=false;this.size="l"}handleMenuSize(i){this.size=i.detail}handleEventEmission(){this.ifxDropdownItem.emit(this.el.textContent)}render(){let i=this.href?{href:this.href,target:this.target}:{};return o("a",Object.assign({key:"5ec61a932268bd6bc279546d2718347deec616f7"},i,{onClick:()=>this.handleEventEmission(),class:`dropdown-item ${this.size==="s"?"small":""} ${this.hide?"hide":""}`}),this.icon&&o("ifx-icon",{key:"f8644bd37348ec718f54657faaf912d48b2b696d",class:"icon",icon:this.icon}),o("span",{key:"c3643953f6fcf084a3d033df50b79bc8de562640"},o("slot",{key:"624c93095768745e9af06b60f7a7f5fcdbe0d05e"})))}get el(){return e(this)}};a.style=n;export{a as ifx_dropdown_item};
+//# sourceMappingURL=p-3a1f64f5.entry.js.map

package/dist/infineon-design-system-stencil/{p-1a882a37.entry.js.map → p-3a1f64f5.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dropdownItemCss","IfxDropdownItemStyle0","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hrefAttr","h","Object","assign","key","onClick","class","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,yiBACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAiB,QACjBF,KAAAG,KAAgB,MACfH,KAAAI,KAAe,G,CAKxB,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,IAAIC,EAAWd,KAAKC,KAAO,CAAEA,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,GACtE,OACEa,EAAA,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAOJ,EAAQ,CAAEK,QAAS,IAAMnB,KAAKQ,sBAAuBY,MAAO,iBAAiBpB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,OAC1IH,KAAKqB,MAAQN,EAAA,YAAAG,IAAA,2CAAUE,MAAM,OAAOC,KAAMrB,KAAKqB,OAChDN,EAAA,QAAAG,IAAA,4CACEH,EAAA,QAAAG,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["dropdownItemCss","IfxDropdownItemStyle0","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hrefAttr","h","Object","assign","key","onClick","class","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,uiBACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAiB,QACjBF,KAAAG,KAAgB,MACfH,KAAAI,KAAe,G,CAKxB,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,IAAIC,EAAWd,KAAKC,KAAO,CAAEA,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,GACtE,OACEa,EAAA,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAOJ,EAAQ,CAAEK,QAAS,IAAMnB,KAAKQ,sBAAuBY,MAAO,iBAAiBpB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,OAC1IH,KAAKqB,MAAQN,EAAA,YAAAG,IAAA,2CAAUE,MAAM,OAAOC,KAAMrB,KAAKqB,OAChDN,EAAA,QAAAG,IAAA,4CACEH,EAAA,QAAAG,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as n}from"./p-e6edf72d.js";const o=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family, Source Sans 3);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";const a=o;const f=class{constructor(n){e(this,n)}render(){return n("div",{key:"eaa5be7836515fc284e17ed7fb6acfdcc6ce11f1",class:"badge__container"},n("slot",{key:"f00f0415cb6cdfa25ce8e7b0df798f8a98eb2373"}))}};f.style=a;export{f as ifx_badge};
+//# sourceMappingURL=p-3e2ac944.entry.js.map

package/dist/infineon-design-system-stencil/{p-66b1eeab.entry.js.map → p-3e2ac944.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n\n\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAW,yZACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n\n\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAW,uZACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as o,h as i,g as e,c as t}from"./p-e6edf72d.js";const n=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family, Source Sans 3)}";const a=n;const c=class{constructor(i){o(this,i);this.autoCollapse=false}async onItemOpen(o){if(this.autoCollapse){const i=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const e of i){const i=e;if(i!==o.target&&await i.open){i.open=false}}}}render(){return i("div",{key:"663e6aac2f3002d3898856b854dbfd96d9519a68",class:"accordion-wrapper"},i("slot",{key:"0f54044bc1e0d2860ccd3096ee2711eb0a1cb927"}))}static get delegatesFocus(){return true}get el(){return e(this)}};c.style=a;const s=':root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family, Source Sans 3)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const r=s;const d=class{constructor(i){o(this,i);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem()}componentDidUpdate(){this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.maxHeight=`${this.contentEl.scrollHeight}px`}else{this.contentEl.style.maxHeight="0"}}handleSlotChange(o){const i=o.target;const e=i.assignedNodes();if(e.length>0){e.forEach((o=>{const i=new MutationObserver(((o,i)=>{for(let i of o){if(i.type==="childList"){if(this.internalOpen){this.openAccordionItem()}}}}));i.observe(o,{attributes:true,childList:true,subtree:true})}))}if(this.internalOpen){this.openAccordionItem()}}handleKeydown(o){const i=o.composedPath();if(!i.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}render(){return i("div",{key:"7d6ed35b5c84e3dbfe0cc42f74408ab4655a61d2",class:`accordion-item ${this.internalOpen?"open":""}`},i("div",{key:"19350af96518b086d24cfb653ba8c41ce9a8d4e8",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},i("span",{key:"56d40596ed604a5c24274dbde190802dd000e801","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},i("ifx-icon",{key:"c93ace2e23cc1b9d5e50f8ea3e6a4e3b6c65e811",icon:"chevron-down-12"})),i("span",{key:"9ac2410b6c4e9f9918ec7ca7370470c744a2cf6b",id:"accordion-caption",class:"accordion-caption"},this.caption)),i("div",{key:"a8a9058e232dcaae9aaa0ebf43a4f3fba958136a",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},i("div",{key:"81c6d61ccae983dae7ffeff557fa7e51fd10ab77",class:"inner-content"},i("slot",{key:"54ddfcf9375576b2118822057f17ddd765e2ca47",onSlotchange:o=>this.handleSlotChange(o)}))))}get el(){return e(this)}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{c as ifx_accordion,d as ifx_accordion_item};
+//# sourceMappingURL=p-4562cd5b.entry.js.map