@infineon/infineon-design-system-stencil 29.2.2--canary.1496.81db20b5062bd11fe61e2c6a9d91d86642a87bc7.0 → 29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0

package/dist/infineon-design-system-stencil/{p-a2c65b72.entry.js.map → p-db4a364b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["chipCss","IfxChipStyle0","Chip","undefined","handleValueChange","newValue","this","syncSelectedOptionsWithProp","handleReadOnlyChange","opened","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selectedOptions","variant","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","value","find","option","filter","key","map","emitIfxChipChange","ifxChipChange","emit","currentSelection","name","placeholder","querySelectorAll","getSelectedOptions","label","join","slice","readOnly","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","size","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","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","itemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","Math","ceil","internalPage","numberOfPages","_","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() ifxChipChange: 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.key !== eventDetail.key);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChipChange) {\n      this.ifxChipChange.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.ifxChipChange.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        emitIfxChipChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: 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(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\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);\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  @Event() ifxNextPage: EventEmitter;\n  @Event() ifxPrevPage: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\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    this.itemsPerPage = parseInt(e.detail.label)\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.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\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  componentWillLoad() {\n    this.calculateNumberOfPages()\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.itemsPerPage\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='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\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","undefined","handleValueChange","newValue","this","syncSelectedOptionsWithProp","handleReadOnlyChange","opened","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selectedOptions","variant","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","value","find","option","filter","key","map","emitIfxChipChange","ifxChipChange","emit","currentSelection","name","placeholder","querySelectorAll","getSelectedOptions","label","join","slice","readOnly","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","size","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","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","itemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","Math","ceil","internalPage","numberOfPages","_","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() ifxChipChange: 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.key !== eventDetail.key);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChipChange) {\n      this.ifxChipChange.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.ifxChipChange.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        emitIfxChipChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: 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(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\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);\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  @Event() ifxNextPage: EventEmitter;\n  @Event() ifxPrevPage: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\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.itemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.itemsPerPage = 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.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\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  componentWillLoad() {\n    this.calculateNumberOfPages()\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.itemsPerPage\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='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\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":[]}

package/dist/infineon-design-system-stencil/{p-f93d0e29.entry.js → p-dba5e033.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i,g as t}from"./p-7aa4082c.js";import{i as a}from"./p-38c8a9b0.js";const o='.container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:sticky;top:0;left:0;z-index:99}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const n=o;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIndex=undefined;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`"c-info-24"`}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}componentWillLoad(){for(let e in a){this.iconsArray.push(e)}}render(){return i("div",{key:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"18a2839c3a492c31215bbbb29cbcd3c0fea50bf0",class:"html-wrapper"},i("span",{key:"488ae76fd009a5fa0c9aaf2727deaa33cae3e3a1",class:"html-tag"},"<"),i("span",{key:"b8e95423cc15694f066d47b29dc03f6b41ff82fe",class:"component-name"},"ifx-icon"),i("span",{key:"7b87f22cbb47743521365708561b9f1eba8cdf32",class:"attribute-name"}," icon"),"=",i("span",{key:"13ec8254b12497b899b8960e26edf219205dbc36",class:"attribute-value"},this.iconName),i("span",{key:"6ae1377d4f1ba39b8e59a86da834e783bc343bb9",class:"html-tag"},">"),i("span",{key:"017d823522230476dded7323580c5e288c75cb47",class:"html-tag"},"</"),i("span",{key:"cd9091d4d3de72c0495c17097d0bcce5a9234441",class:"component-name"},"ifx-icon"),i("span",{key:"408b285174e12b46b9e3c2f8e413f5914c8fa62d",class:"html-tag"},">"),i("button",{key:"ce263f21f91373c8bc2f697fc876c72611297f0f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"400251cc2a3dc9aaa646ad631fd37b142aa83381",class:"preview__container"},this.iconsArray.map(((e,t)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===t?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e}))))))}get el(){return t(this)}};c.style=n;export{c as ifx_icons_preview};
-//# sourceMappingURL=p-f93d0e29.entry.js.map
+import{r as e,h as i,g as t}from"./p-80bb0959.js";import{i as o}from"./p-38c8a9b0.js";const a='.container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:sticky;top:0;left:0;z-index:99}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const n=a;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIndex=undefined;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`"c-info-24"`}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}componentWillLoad(){for(let e in o){this.iconsArray.push(e)}}render(){return i("div",{key:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"18a2839c3a492c31215bbbb29cbcd3c0fea50bf0",class:"html-wrapper"},i("span",{key:"488ae76fd009a5fa0c9aaf2727deaa33cae3e3a1",class:"html-tag"},"<"),i("span",{key:"b8e95423cc15694f066d47b29dc03f6b41ff82fe",class:"component-name"},"ifx-icon"),i("span",{key:"7b87f22cbb47743521365708561b9f1eba8cdf32",class:"attribute-name"}," icon"),"=",i("span",{key:"13ec8254b12497b899b8960e26edf219205dbc36",class:"attribute-value"},this.iconName),i("span",{key:"6ae1377d4f1ba39b8e59a86da834e783bc343bb9",class:"html-tag"},">"),i("span",{key:"017d823522230476dded7323580c5e288c75cb47",class:"html-tag"},"</"),i("span",{key:"cd9091d4d3de72c0495c17097d0bcce5a9234441",class:"component-name"},"ifx-icon"),i("span",{key:"408b285174e12b46b9e3c2f8e413f5914c8fa62d",class:"html-tag"},">"),i("button",{key:"ce263f21f91373c8bc2f697fc876c72611297f0f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"400251cc2a3dc9aaa646ad631fd37b142aa83381",class:"preview__container"},this.iconsArray.map(((e,t)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===t?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e}))))))}get el(){return t(this)}};c.style=n;export{c as ifx_icons_preview};
+//# sourceMappingURL=p-dba5e033.entry.js.map

package/dist/infineon-design-system-stencil/{p-8c0caf65.entry.js → p-e6427f2e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as a}from"./p-7aa4082c.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const i=r;const s=class{constructor(t){e(this,t)}render(){return t("div",{key:"6a42cc97dadcab602872bda9d993f9bf7c12b199",class:"sidebar__title"},t("div",{key:"ebd8129870e6d9541b5053e194fe6e271aec9e3a",class:"sidebar__title-label"},t("slot",{key:"c27949801198f4eeb0495b8aebcbdda6576859a8"})))}get el(){return a(this)}};s.style=i;export{s as ifx_sidebar_title};
-//# sourceMappingURL=p-8c0caf65.entry.js.map
+import{r as e,h as t,g as r}from"./p-80bb0959.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const i=a;const s=class{constructor(t){e(this,t)}render(){return t("div",{key:"6a42cc97dadcab602872bda9d993f9bf7c12b199",class:"sidebar__title"},t("div",{key:"ebd8129870e6d9541b5053e194fe6e271aec9e3a",class:"sidebar__title-label"},t("slot",{key:"c27949801198f4eeb0495b8aebcbdda6576859a8"})))}get el(){return r(this)}};s.style=i;export{s as ifx_sidebar_title};
+//# sourceMappingURL=p-e6427f2e.entry.js.map

package/dist/infineon-design-system-stencil/{p-da42f326.entry.js → p-e8cde48d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as s,a as t,g as a}from"./p-7aa4082c.js";const i=":host{display:inline-flex}.list-group-container{display:inline-flex;flex-direction:column;gap:3px}";const l=i;const n=class{constructor(s){e(this,s);this.flush=false;this.bulletpoint=false;this.notification=false}render(){return s(t,{key:"5d89f65af5f1b8e1f78b88f70065c55281eb8c27"},s("div",{key:"0ae653b5307044468d507ee9be6539a430c2103c",class:`list-group-container \n        ${this.flush?"flush":""} \n        ${this.bulletpoint?"bulletpoint":""}`},s("slot",{key:"d7cd601c0b1bfd63aa5dee3f4f657082fa1e30e3",name:"list-item"}),s("slot",{key:"77efa54a094a8f97081f0d2dd26e527e96a3d79f",name:"list-notification"})))}get el(){return a(this)}};n.style=l;export{n as ifx_list_group};
-//# sourceMappingURL=p-da42f326.entry.js.map
+import{r as e,h as s,a as t,g as i}from"./p-80bb0959.js";const a=":host{display:inline-flex}.list-group-container{display:inline-flex;flex-direction:column;gap:3px}";const l=a;const n=class{constructor(s){e(this,s);this.flush=false;this.bulletpoint=false;this.notification=false}render(){return s(t,{key:"5d89f65af5f1b8e1f78b88f70065c55281eb8c27"},s("div",{key:"0ae653b5307044468d507ee9be6539a430c2103c",class:`list-group-container \n        ${this.flush?"flush":""} \n        ${this.bulletpoint?"bulletpoint":""}`},s("slot",{key:"d7cd601c0b1bfd63aa5dee3f4f657082fa1e30e3",name:"list-item"}),s("slot",{key:"77efa54a094a8f97081f0d2dd26e527e96a3d79f",name:"list-notification"})))}get el(){return i(this)}};n.style=l;export{n as ifx_list_group};
+//# sourceMappingURL=p-e8cde48d.entry.js.map

package/dist/infineon-design-system-stencil/{p-2cde10eb.entry.js → p-ea74d7ab.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,a as s,g as a}from"./p-7aa4082c.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=l;const f=class{constructor(i){e(this,i);this.ifxTopbarFilterChange=t(this,"ifxTopbarFilterChange",7);this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector('slot[name="filter-search"]');if(t instanceof HTMLSlotElement){const e=t.assignedElements({flatten:true});e.forEach((e=>{const t=e.querySelector("ifx-filter-search");const i=t.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((e=>{e.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=e=>{this.handleTopbarFilterChange(e)};this.handleFilterSelect=e=>{this.handleTopbarFilterChange(e)};this.handleTopbarFilterChange=e=>{const t=[...this.selectedOptions];if(e.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=e.detail;const a=t.findIndex((e=>e.filterName===i));if(a!==-1){t[a].filterValues=[s]}else{t.push({filterName:i,filterValues:[s],type:"text"})}}else if(e.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=e.detail;const l=t.findIndex((e=>e.filterName===i));if(l!==-1){t[l].filterValues=s;t[l].type=a}else{t.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=t;this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.visibleSlots=undefined;this.showMoreFiltersButton=true}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentDidLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const e=Math.max(0,this.visibleSlots);const t=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(e,t,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((e,t)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${t+1}`}))));return i(s,{key:"854296f871ee52ad7f532f7392ee4ed68512db07"},i("div",{key:"e8aaa87e12b7a19648cfad42936bc5eef8a38e7a",class:"search-container"},i("slot",{key:"bda17ec1b3ef9c2b36036e3b1d564b77b2faed8e",name:"filter-search"})," "),i("div",{key:"ef7809dbb51688f9b964c274d720047e8f513efe",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"12c7145012d4c921141cbda0d5f63ee4f6877e98",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"e946e0de46f9c4d02f8b964125e0baeb28fed60e",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"b8ec8e11b2fdb7c6e92fecb559f2a7b86950d5a3",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};f.style=r;export{f as ifx_filter_bar};
-//# sourceMappingURL=p-2cde10eb.entry.js.map
+import{r as e,c as t,h as i,a as s,g as a}from"./p-80bb0959.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=l;const f=class{constructor(i){e(this,i);this.ifxTopbarFilterChange=t(this,"ifxTopbarFilterChange",7);this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector('slot[name="filter-search"]');if(t instanceof HTMLSlotElement){const e=t.assignedElements({flatten:true});e.forEach((e=>{const t=e.querySelector("ifx-filter-search");const i=t.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((e=>{e.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=e=>{this.handleTopbarFilterChange(e)};this.handleFilterSelect=e=>{this.handleTopbarFilterChange(e)};this.handleTopbarFilterChange=e=>{const t=[...this.selectedOptions];if(e.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=e.detail;const a=t.findIndex((e=>e.filterName===i));if(a!==-1){t[a].filterValues=[s]}else{t.push({filterName:i,filterValues:[s],type:"text"})}}else if(e.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=e.detail;const l=t.findIndex((e=>e.filterName===i));if(l!==-1){t[l].filterValues=s;t[l].type=a}else{t.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=t;this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.visibleSlots=undefined;this.showMoreFiltersButton=true}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentDidLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const e=Math.max(0,this.visibleSlots);const t=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(e,t,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((e,t)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${t+1}`}))));return i(s,{key:"854296f871ee52ad7f532f7392ee4ed68512db07"},i("div",{key:"e8aaa87e12b7a19648cfad42936bc5eef8a38e7a",class:"search-container"},i("slot",{key:"bda17ec1b3ef9c2b36036e3b1d564b77b2faed8e",name:"filter-search"})," "),i("div",{key:"ef7809dbb51688f9b964c274d720047e8f513efe",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"12c7145012d4c921141cbda0d5f63ee4f6877e98",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"e946e0de46f9c4d02f8b964125e0baeb28fed60e",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"b8ec8e11b2fdb7c6e92fecb559f2a7b86950d5a3",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};f.style=r;export{f as ifx_filter_bar};
+//# sourceMappingURL=p-ea74d7ab.entry.js.map

package/dist/infineon-design-system-stencil/{p-bbc7a00e.entry.js → p-ee68427e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,g as n}from"./p-7aa4082c.js";const a='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.itemPosition=undefined}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren()}componentDidLoad(){if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}render(){return i("div",{key:"13634ecaec0e699cd630a988c488bf5f1a78acc6",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"243a36ef46d86276decb997b0600eca0b0d5c5fe",class:"sub__layer-back-button"},i("div",{key:"8934bd3c56917caec9d4d393c2ada5b118b763c8",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"322cb49509916ef87a3c93c95195cf33a026f75c",icon:"arrow-left-16"}),i("span",{key:"7ca43ff202b61aec18c7cd91392f745af9b643a1"},"Back"))),i("a",{key:"6fefb94a500381ea7db602b140603d7b32ee8a6f",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"35c9c7e69206dde9663cb5122006cdc6ceb46192",class:"inner__content-wrapper"},i("div",{key:"9d34ff13cca7e3d987fc5e40bd9567bbad2d1f71",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"427f3744c3a20cd3de4d715409957b631b40fb19",icon:this.icon})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"66409c1673b1214743b192a9310a7cd83c70260f",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"346ee2953bdc95c412ab25a0a7d2ab4ea1a057d2",icon:"chevron-left-12"})),i("span",{key:"43753e73eed3245fc078ac6ee0f7465b332647e6",class:"label__wrapper"},i("slot",{key:"effd9eddf861ebca903beb5a9f989bfa002410b7"}))),i("div",{key:"81ce037c34415e3cd3904677ce6f1497e0d8a84e",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"17e855f85f4f3c9c0f39273fb0e50f7bfa6f13bd",icon:"chevron-down-12"})),i("div",{key:"abb1a9f20ccd63761a95e9d7abd24f6e18ea8ed5",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"c6c6e4c5973e55523cfcbd4c846ccb28a5e05efa",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"61cac30e199cc2fc11b4bcd215e600997257af6b",class:"navbar-menu"}," ",i("slot",{key:"c2448abecc34b3cddbadaf2d121b4f418c0c35f3",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"ce74087ee987d5841b666f42c36ed1ef61a5a8a5",class:"sub__layer-menu"}," ",i("slot",{key:"35494e30c60e050ef6a77722030c6889d3d9a382",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
-//# sourceMappingURL=p-bbc7a00e.entry.js.map
+import{r as e,c as t,h as i,g as n}from"./p-80bb0959.js";const a='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.itemPosition=undefined}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren()}componentDidLoad(){if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}render(){return i("div",{key:"13634ecaec0e699cd630a988c488bf5f1a78acc6",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"243a36ef46d86276decb997b0600eca0b0d5c5fe",class:"sub__layer-back-button"},i("div",{key:"8934bd3c56917caec9d4d393c2ada5b118b763c8",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"322cb49509916ef87a3c93c95195cf33a026f75c",icon:"arrow-left-16"}),i("span",{key:"7ca43ff202b61aec18c7cd91392f745af9b643a1"},"Back"))),i("a",{key:"6fefb94a500381ea7db602b140603d7b32ee8a6f",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"35c9c7e69206dde9663cb5122006cdc6ceb46192",class:"inner__content-wrapper"},i("div",{key:"9d34ff13cca7e3d987fc5e40bd9567bbad2d1f71",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"427f3744c3a20cd3de4d715409957b631b40fb19",icon:this.icon})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"66409c1673b1214743b192a9310a7cd83c70260f",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"346ee2953bdc95c412ab25a0a7d2ab4ea1a057d2",icon:"chevron-left-12"})),i("span",{key:"43753e73eed3245fc078ac6ee0f7465b332647e6",class:"label__wrapper"},i("slot",{key:"effd9eddf861ebca903beb5a9f989bfa002410b7"}))),i("div",{key:"81ce037c34415e3cd3904677ce6f1497e0d8a84e",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"17e855f85f4f3c9c0f39273fb0e50f7bfa6f13bd",icon:"chevron-down-12"})),i("div",{key:"abb1a9f20ccd63761a95e9d7abd24f6e18ea8ed5",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"c6c6e4c5973e55523cfcbd4c846ccb28a5e05efa",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"61cac30e199cc2fc11b4bcd215e600997257af6b",class:"navbar-menu"}," ",i("slot",{key:"c2448abecc34b3cddbadaf2d121b4f418c0c35f3",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"ce74087ee987d5841b666f42c36ed1ef61a5a8a5",class:"sub__layer-menu"}," ",i("slot",{key:"35494e30c60e050ef6a77722030c6889d3d9a382",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
+//# sourceMappingURL=p-ee68427e.entry.js.map