@infineon/infineon-design-system-stencil 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0 → 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0

package/dist/components/p-28a8736e.js.map

@@ -1 +0,0 @@
-{"file":"p-28a8736e.js","mappings":"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","names":[],"sources":["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-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  @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}"],"version":3}

package/dist/components/p-61ecfa9a.js.map

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

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

@@ -1 +0,0 @@
-{"file":"p-dd91260d.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-fce5491f.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n  position: relative;\n  box-sizing: border-box;\n  font-family: var(--ifx-font-family);\n\n  &.small-select {\n    height: 36px;\n  }\n\n  &.medium-select {\n    height: 40px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n\n  .ifx-label-wrapper {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-error-message-wrapper {\n    color: #CD002F;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-multiselect-wrapper {\n    background-color: tokens.$ifxColorBaseWhite;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadius12;\n    width: 100%;\n    font-weight: 400;\n    font-style: normal;\n\n\n    &.small-select {\n      height: 36px;\n      padding: 8px 12px;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      height: 40px;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible:not(.active):not(:active) {\n      outline: none;\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: calc(100% + 4px);\n        height: calc(100% + 4px);\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid tokens.$ifxColorOcean500;\n        border-radius: 2px;\n\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering200;\n      color: #575352;\n      border-color: #575352;\n      cursor: default;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    &.error {\n      border-color: #CD002F;\n    }\n\n    &:hover:not(.focus, :focus) {\n      border-color: tokens.$ifxColorEngineering500;\n    }\n\n    &.active {\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n      & .icon-wrapper-up {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: tokens.$ifxSpace100;\n      }\n\n      & .icon-wrapper-down {\n        display: none\n      }\n    }\n\n\n    & .icon-wrapper-up {\n      display: none;\n    }\n\n    & .icon-wrapper-down {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-left: tokens.$ifxSpace100;\n    }\n\n    &.is-flipped {\n      .ifx-multiselect-dropdown-menu {\n        top: auto;\n        bottom: 100%;\n      }\n    }\n  }\n\n  .ifx-multiselect-input {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.placeholder {\n      opacity: 0.5;\n    }\n\n  }\n\n\n  .ifx-multiselect-icon-container {\n    margin-left: auto;\n    align-items: center;\n    display: flex;\n  }\n\n\n  .ifx-clear-button {\n    display: flex;\n  }\n\n  .ifx-multiselect-dropdown-menu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    margin-top: 2px;\n    background-color: #fff;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    max-height: 300px;\n    /* Adjust based on your design */\n    overflow-y: auto;\n    z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n    .search-input {\n      position: sticky;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      width: 100%;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      font-style: normal;\n      font-weight: 400;\n      box-sizing: border-box;\n      background-color: tokens.$ifxColorBaseWhite;\n      border: none;\n      border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n      &:focus {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      // Optional: Placeholder style\n      &::placeholder {\n        color: #999;\n      }\n    }\n  }\n\n  .option {\n    position: relative;\n    padding: 8px 16px;\n    gap: 8px;\n    align-items: center;\n    display: flex;\n    font-style: normal;\n    font-weight: 400;\n\n    &.small-select {\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:focus:not(.disabled) {\n      background-color: tokens.$ifxColorEngineering300;\n      outline: none;\n    }\n\n    &.is-highlighted {\n      background-color: tokens.$ifxColorEngineering200;\n      ;\n    }\n\n    &.selected {\n      // color: #0A8276;\n    }\n\n    &.sub-option {\n      padding-left: 30px;\n      /* or however much indentation you want */\n    }\n\n    &.disabled {\n      &:hover {\n        cursor: default;\n      }\n    }\n\n    label {\n      cursor: inherit;\n    }\n  }\n\n\n\n}\n\n.select-all-wrapper {\n  padding-top: 8px;\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n};\n\n@Component({\n  tag: 'ifx-multiselect',\n  styleUrl: 'multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\n\n\n\nexport class Multiselect {\n\n  @Prop() name: string;\n  @Prop() options: any[] | string;\n  @Prop() batchSize: number = 50;\n  @Prop() size: string = 'medium (40px)';\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @State() internalError: boolean = false;\n  @Prop() errorMessage: string = \"Error\";\n  @State() internalErrorMessage: string;\n  @Prop() label: string = \"\";\n  @State()  persistentSelectedOptions: Option[] = [];\n  @Prop() placeholder: string = \"\";\n  @State() dropdownOpen = false;\n  @State() dropdownFlipped: boolean;\n  @Prop() maxItemCount: number;\n  @State() zIndex: number = 1; // default z-index value\n  static globalZIndex = 1; // This will be shared among all instances of the component.\n  private currentIndex: number = 0; //needed for option selection using keyboard\n  @State() isLoading: boolean = false;\n  @State() loadedOptions: Option[] = [];\n  @State() filteredOptions: Option[] = [];\n  @Prop() showSearch: boolean = true;\n  @Prop() showSelectAll: boolean = true;\n  @State() optionCount: number = 0; // number of all options (leaves of the tree)\n  @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved\n\n\n  @Event() ifxSelect: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n\n  @Element() el: HTMLElement;\n  dropdownElement!: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('options')\n  updateOptions() { \n    this.loadedOptions = [];\n    this.filteredOptions = [];\n    this.optionCount = 0;\n    this.optionsProcessed = false;\n    this.persistentSelectedOptions = [];\n\n    this.loadInitialOptions();\n  }\n\n\n  async loadInitialOptions() {\n    this.isLoading = true;\n    this.internalError = this.error;\n    this.internalErrorMessage = this.errorMessage;\n    // Load the first batch of options (e.g., first 20)\n    this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n    this.isLoading = false;\n  }\n\n  async fetchMoreOptions() {\n    this.isLoading = true;\n    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n    this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n    this.isLoading = false;\n  }\n\n\n  handleScroll(event: UIEvent) {\n    const element = event.target as HTMLElement;\n    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n    if (element.scrollTop >= halfwayPoint) {\n      this.fetchMoreOptions();\n    }\n  }\n\n\n\n\n  async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n    let allOptions: Option[] = [];\n\n    // Parse options if it's a string, or use directly if it's an array\n    if (typeof this.options === 'string') {\n      try {\n        allOptions = JSON.parse(this.options);\n       \n      } catch (err) {\n        console.error('Failed to parse options:', err);\n      }\n    } else if (Array.isArray(this.options)) {\n      allOptions = this.options;\n    } else {\n      console.error('Unexpected value for options:', this.options);\n    }\n\n    if (!this.optionsProcessed) {\n      this.optionCount = this.countOptions(allOptions);\n      const initiallySelected = this.collectSelectedOptions(allOptions);\n      const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];\n      this.optionsProcessed = true;\n    }\n    \n    // Slice the options array based on startIndex and count\n    const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n    return slicedOptions;\n  }\n\n  /**\n   * Collects and returns all options that are selected.\n   * When the parent is selected, then the value of the children will be overriden with selected as well.\n   * It will only collect the leaves of the tree.\n   * \n   * @param options A list of options.\n   * @returns A list with all selected options\n   */\n  private collectSelectedOptions(options: Option[]): Option[] {\n    let selectedOptions: Option[] = [];\n  \n    for (const option of options) {\n      if (option.selected) {\n        if (option.children && option.children.length > 0) {\n          // if parent is selected, then select all child options\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n        } else {\n          selectedOptions.push(option);\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\n      }\n    }\n    return selectedOptions;\n  }\n\n  /**\n   * Collects all leaf children options.\n   * \n   * @param option A list with all leaf-children.\n   */\n  private collectLeafOptions(children: Option[]): Option[] {\n    let leafOptions = [];\n  \n    for (const child of children) {\n      if (child.children && child.children.length > 0) {\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n      } else {\n        leafOptions.push(child);\n      }\n    }  \n    return leafOptions;\n  }\n\n  /**\n   * Count the number of options. Only counts the leaves of the options tree.\n   */\n  countOptions(options: Option[]): number {\n    let count = 0;\n    for (const option of options) {\n      if (option.children && option.children.length >= 0) {\n        count += this.countOptions(option.children);\n      } else {\n        count++;\n      }\n    }\n    return count;\n  }\n\n\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\n    const searchTerm = targetElement.value.toLowerCase();\n    if (searchTerm === '') {\n      this.filteredOptions = this.loadedOptions;\n    } else {\n      this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n    }\n  }, 300);\n\n  componentDidLoad() {\n    setTimeout(() => {\n      this.positionDropdown();\n    }, 500);\n\n    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n  }\n\n  componentWillLoad() {\n    this.loadInitialOptions();\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('error')\n  updateInternalError() {\n    this.internalError = this.error;\n  }\n\n  @Watch('errorMessage')\n  updateInternalErrorMessage() {\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  @Watch('loadedOptions')\n  loadedOptionsChanged() {\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('persistentSelectedOptions')\n  onSelectionChange(newValue: Option[], _: Option[]) {\n    const formData = new FormData();\n    newValue.forEach(option => formData.append(this.name, option.value));\n    this.internals.setFormValue(formData);\n  }\n\n  handleOptionClick(option: Option) {\n    this.internalError = false;\n\n    if (!option.selected && this.isSelectionLimitReached(option)) {\n      option.checkboxRef.toggleCheckedState(false)\n      this.internalError = true;\n      this.internalErrorMessage = \"Please consider the maximum number of items to choose from\";\n      return;\n    }\n    \n    this.updateSelection(option);\n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n\n  isSelectionLimitReached(option: Option): boolean {\n    let newOptionsLength = option.children ? option.children.length : 1;\n    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n  }\n\n  updateSelection(option: Option) {\n    const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n    if (option.children && option.children.length > 0) {\n      this.handleParentOptionClick(option);\n    } else {\n      this.handleChildOptionClick(option, wasSelected);\n    }\n  }\n\n  async selectAll() {\n    const allOptions = await this.fetchOptions(0, this.optionCount);\n    this.selectAllRecursive(allOptions);\n    \n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n  private selectAllRecursive(options: Option[]) {\n    for (const opt of options) {\n      if (opt.children && opt.children.length > 0) {\n        this.selectAllRecursive(opt.children);\n      } else {\n        if (!this.persistentSelectedOptions.some((some) => some.value === opt.value )) {\n          opt.selected = true;\n          this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];\n        }\n      }\n    }\n\n  }\n\n  handleParentOptionClick(option: Option) {\n    const allChildrenSelected = option.children.every(child =>\n      this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n    );\n\n    if (allChildrenSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n        selectedOption => !option.children.some(child => child.value === selectedOption.value)\n      )];\n\n      option.selected = false;\n      option.children.forEach(child => {\n        child.selected = false;\n      })\n\n    } else {\n      const newChildren = [...option.children.filter(childOption =>\n            !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n      )];\n      option.selected = true;\n      option.children.forEach(child => {\n        child.selected = true;\n      })\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n    }\n  }\n\n  handleChildOptionClick(option: Option, wasSelected: boolean) {\n    if (wasSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n      option.selected = false;\n    } else {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n      option.selected = true;\n    }\n    this.updateParentSelectedState();\n  }\n\n  updateParentSelectedState() {\n    this.loadedOptions.forEach(option => {\n      if(option.children?.length > 0) {\n        if(option.children.every(child => child.selected === true)) option.selected = true;\n        else {\n          option.selected = false;\n          if(this.isOptionIndeterminate(option)) {\n            option.indeterminate = true;\n          }else{\n            option.indeterminate = false;\n          }\n        }\n      }\n    });\n  }\n\n\n\n  handleDocumentClick = (event: Event) => {\n    const path = event.composedPath();\n    if (!path.includes(this.dropdownElement)) {\n      this.dropdownOpen = false;\n      document.removeEventListener('click', this.handleDocumentClick);\n\n      // Dispatch the ifxOpen event\n      this.ifxOpen.emit(this.dropdownOpen);\n    }\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"small-select\"\n      : \"medium-select\";\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    setTimeout(() => {\n      if (this.dropdownOpen) {\n        document.addEventListener('click', this.handleDocumentClick);\n      }\n      // Dispatch the ifxOpen event\n      this.ifxOpen.emit(this.dropdownOpen);\n    }, 0);\n    this.zIndex = Multiselect.globalZIndex++;\n  }\n\n\n  waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n    let tries = 0;\n    function request() {\n      requestAnimationFrame(() => {\n        const elements = querySelectorFunc();\n        if (elements.length > 0 || tries > maxTries) {\n          callback(elements);\n        } else {\n          tries++;\n          request();\n        }\n      });\n    }\n    request();\n  }\n\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return; // If it's disabled, don't do anything.\n\n    const options = this.dropdownElement.querySelectorAll('.option');\n    \n    switch (event.code) {\n      case 'Enter':\n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'Space': \n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'ArrowDown':\n        this.handleArrowDown(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n      case 'ArrowUp':\n        this.handleArrowUp(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n    }\n  }\n\n  handleWrapperClick(event: MouseEvent) {\n    // This is your existing logic for positioning the dropdown\n    this.positionDropdown();\n\n    // Check if the event target is the wrapper itself and not a child element.\n    if (event.currentTarget === event.target) {\n      this.toggleDropdown();\n    }\n  }\n\n  clearSelection() {\n    this.persistentSelectedOptions = [];\n    this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n  }\n\n  positionDropdown() {\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\n    const spaceAbove = wrapperRect.top;\n\n    // If there's more space above than below the trigger and the dropdown doesn't fit below\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n      this.dropdownFlipped = true;\n    } else {\n      this.dropdownFlipped = false;\n    }\n  }\n\n\n\n  // Helper function to update highlighted option based on currentIndex\n  private updateHighlightedOption(options: NodeList) {\n    // Clear all highlights\n    options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n    // Apply highlight to the current option\n    if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n      (options[this.currentIndex] as Element).classList.add('is-highlighted');\n      (options[this.currentIndex] as HTMLElement).focus();\n    }\n  }\n\n  // Helper function to handle arrow down navigation\n  private handleArrowDown(options: NodeList) {\n    if (this.currentIndex < options.length - 1) {\n      this.currentIndex++;\n    } else {\n      this.currentIndex = 0; // Wrap to the beginning.\n    }\n  }\n\n  // Helper function to handle arrow up navigation\n  private handleArrowUp(options: NodeList) {\n    if (this.currentIndex > 0) {\n      this.currentIndex--;\n    } else {\n      this.currentIndex = options.length - 1; // Wrap to the end.\n    }\n  }\n  \n  handleOptionKeyDown(e: KeyboardEvent, option: Option) {\n    if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n    if(e.key === 'Enter' || e.key === ' ') {\n      this.handleOptionClick(option);\n    }\n  }\n\n  renderOption(option: Option, index: number) {\n    const isIndeterminate = this.isOptionIndeterminate(option);\n    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n    return (\n      <div class=\"option-wrapper\">\n        <div class={`option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} \n        ${this.getSizeClass()}`}\n          data-value={option.value}\n          onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n          onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n          tabindex=\"0\"\n          role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}>\n          <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n          <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n        </div>\n        {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n      </div>\n    );\n  }\n\n  isOptionSelected(option: Option): boolean {\n    if (!option.children) return false;\n\n    return option.children.every(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    );\n  }\n\n\n  isOptionIndeterminate(option: Option): boolean {\n    if (!option.children) return false;\n\n    const selectedChildren = option.children.filter(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    ).length;\n\n    return selectedChildren > 0 && selectedChildren < option.children.length;\n  }\n\n\n  findInOptions(options: Option[], searchTerm: string): Option | null {\n    for (const option of options) {\n      if (option.value === searchTerm) {\n        return option;\n      }\n      if (option.children) {\n        const foundInChildren = this.findInOptions(option.children, searchTerm);\n        if (foundInChildren) {\n          return foundInChildren;\n        }\n      }\n    }\n    return null;\n  }\n\n\n  renderSubOption(option: Option, index: string) {\n    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`;\n\n    return (\n      <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`}\n        data-value={option.value}\n        role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n        onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n        onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n        tabindex=\"0\">\n        <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n        <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n      </div>\n    );\n  }\n\n  private renderSelectAll() {\n    const allSelected = this.persistentSelectedOptions.length === this.optionCount;\n    const noneSelected = this.persistentSelectedOptions.length === 0;\n    const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;\n\n    const that = this;\n    function toggleSelectAll() {\n      if (allSelected) {\n        that.clearSelection();\n      } else {\n        that.selectAll();\n      }\n    }\n\n    function handleSelectAllKeydown(e: KeyboardEvent) {\n      if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n      if(e.key === 'Enter' || e.key === ' ') {\n        toggleSelectAll();\n      }\n    }\n\n    return <div class=\"select-all-wrapper\">\n      <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>\n        <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size=\"s\"></ifx-checkbox>\n        <label htmlFor='selectAll'>Select all</label>\n      </div>\n      <ifx-dropdown-separator></ifx-dropdown-separator>\n    </div>;\n  }\n\n\n  render() {\n    // Create a label for the selected options\n    const selectedOptionsLabels = this.persistentSelectedOptions\n      .filter(option => {\n        // check if option is a child and its parent is selected\n        const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n          parentOption.children &&\n          parentOption.children.some(child => child.value === option.value) &&\n          parentOption.selected\n        );\n        return !isChildSelectedWithParent;\n      })\n      .map(option => option.label)\n      .join(', ');\n\n    return (\n      <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n        {\n          this.label ?\n            <div class=\"ifx-label-wrapper\">\n              <span>{this.label}</span>\n            </div> : null\n        }\n        <div class={`ifx-multiselect-wrapper \n        ${this.getSizeClass()} \n        ${this.dropdownOpen ? 'active' : ''} \n        ${this.dropdownFlipped ? 'is-flipped' : ''}\n        ${this.internalError ? 'error' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n          tabindex=\"0\"\n          onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n          onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n          <div class={`ifx-multiselect-input \n          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n          `}\n            onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n          >\n            {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n          </div>\n          {this.dropdownOpen && (\n            <div class=\"ifx-multiselect-dropdown-menu\"\n              onScroll={(event) => this.handleScroll(event)}\n              style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n              {this.showSearch && <input type=\"text\" role=\"textbox\" class=\"search-input\" onKeyDown={(e) => { e.stopPropagation() }} onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>}\n              {this.showSelectAll && this.renderSelectAll()}\n              {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n              {this.isLoading && <div>Loading more options...</div>}\n            </div>\n          )}\n          <div class=\"ifx-multiselect-icon-container\">\n\n            {/* Clear Button - will show only if there's a selection */}\n            {this.persistentSelectedOptions.length > 0 && (   \n              <div class=\"ifx-clear-button\" onClick={this.disabled ? undefined : () => this.clearSelection()}>\n                <ifx-icon icon=\"cremove16\"></ifx-icon>\n              </div>\n            )}\n            <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-up'\n                icon='chevronup-16'></ifx-icon>\n            </div>\n            <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-down'\n                icon='chevron-down-16'></ifx-icon>\n            </div>\n          </div>\n\n        </div>\n        {\n          this.internalError ?\n            <div class=\"ifx-error-message-wrapper\">\n              <span>{this.internalErrorMessage}</span>\n            </div> : null\n        }\n      </div>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-f619bff3.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const a=n;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.showIcon=true;this.showIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.active=false;this.isActionItem=false;this.internalActiveState=false}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.showIcon=false}else{this.showIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const n=this.getSidebarMenuItems(e);n.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){var e,i;return t("div",{key:"f694b74b5953639d0e1d1cc375d5e88ae53265f7"},t("a",{key:"afcbab9a39bb119dc0a8f4a346793ca63fb9742e",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"050d6035ebdd5c901d5fa1b1040de0e7f9f9d407",class:`sidebar__nav-item-icon-wrapper ${!this.showIcon?"noIcon":""}`},t("ifx-icon",{key:"b1f21d286c355632fef8d066d2ac1c1e351d2650",icon:this.icon})),t("div",{key:"a0ffe6926fb340e965c7e95f7e3f4eff104a372b",class:"sidebar__nav-item-label"},t("slot",{key:"624ee2b5d9e67fe2a7357cde95a07529f335b80c"})),(this.isExpandable||((e=this.numberIndicator)===null||e===void 0?void 0:e.trim()))&&t("div",{key:"85bd348a39ab4e6cbdf41957339b98462adfa3cc",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"62bc4ba74b14283331328aee22066b7d67dcf579",class:"item__arrow-wrapper"},t("ifx-icon",{key:"2c8c0010782627007f2b2d133337d87bb15f1358",icon:"chevron-down-12"})),((i=this.numberIndicator)===null||i===void 0?void 0:i.trim())&&!this.isExpandable&&!this.isNested&&t("span",{key:"d0b2640bdfc164e53c574e9ade8b27c9f61a04f9",class:"item__number-indicator"},t("ifx-number-indicator",{key:"212760cd2ce36c17236ce3f1bdbdc7632182c6d3"},this.numberIndicator)))),this.isExpandable&&t("ul",{key:"cc729ba4945309755b2ab430c9cbd85f722017df",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=a;export{r as ifx_sidebar_item};
-//# sourceMappingURL=p-134d043c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","constructor","hostRef","this","icon","showIcon","showIconWrapper","href","internalHref","target","isExpandable","isNested","isSubMenuItem","active","isActionItem","internalActiveState","handleActiveChange","newValue","oldValue","labelElement","getNavItem","el","shadowRoot","handleClassList","handleConsoleError","event","detail","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","checkIfMenuItemIsSubMenu","navItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","toLowerCase","trim","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","class","_a","numberIndicator","_b"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n  &:focus {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n\n  &:hover {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n}\n\n.sidebar__nav-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  padding: 8px 0px;\n  gap: 4px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  cursor: pointer;\n  font-family: var(--ifx-font-family);\n\n  &.extra-padding__bottom {\n    padding: 8px 0px 16px 0px;\n  }\n\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &.active-section {\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: -32px;\n      height: 40px;\n      width: 2px;\n      background: tokens.$ifxColorOcean500;\n    }\n  }\n\n\n  &.open {\n    padding: 8px 0px;\n\n    & .sidebar__nav-item-label {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          transform: rotate(-180deg);\n        }\n      }\n    }\n  }\n\n  &.header__section {\n    box-sizing: padding-box;\n    border-top: 1px solid tokens.$ifxColorEngineering200;\n    padding: 16px 0px;\n    display: -webkit-flex;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: horizontal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    \n    &.no-top-border {\n      border-top: none;\n    }\n\n    &.active-section {\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -32px;\n        height: 40px;\n        width: 2px;\n        background: tokens.$ifxColorOcean500;\n      }\n    }\n\n    &.open {\n      \n      padding: 16px 0px 8px 0px;\n\n      & .sidebar__nav-item-indicator {\n        & .item__arrow-wrapper {\n          & ifx-icon {\n            transform: rotate(-180deg);\n          }\n        }\n      }\n    }\n\n    & .sidebar__nav-item-label {\n      color: tokens.$ifxColorBaseBlack;\n      font-family: Source Sans 3;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n    }\n  }\n\n  &.submenu__item {\n    padding: 4px 0px;\n    \n    &.extra-padding__bottom {\n      padding: 4px 0px 16px 0px;\n    }\n  }\n\n  & .sidebar__nav-item-icon-wrapper {\n    display: flex;\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    justify-content: center;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    flex-shrink: 0;\n\n    &.noIcon {\n      display: none;\n    }\n\n    & ifx-icon {\n      width: tokens.$ifxSize200;\n      height: tokens.$ifxSize200;\n    }\n  }\n\n  & .sidebar__nav-item-label {\n    font-style: normal;\n    font-weight: 400;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    display: flex;\n    align-items: center;\n    flex: none;\n    order: 1;\n    flex-grow: 1;\n    cursor: pointer;\n  }\n\n  & .sidebar__nav-item-indicator {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px 4px;\n    flex: none;\n    order: 2;\n    flex-grow: 0;\n  }\n}\n\n.expandable__submenu {\n  display: none;\n  list-style-type: none;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  padding-left: 40px;\n\n  &.open {\n    display: flex;\n  }\n}\n\n.header__section + .expandable__submenu{\n  padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar-item',\n  styleUrl: 'sidebar-item.scss',\n  shadow: true\n})\nexport class SidebarItem {\n  @Element() el;\n  @Prop() icon: string = \"\"\n  @State() showIcon: boolean = true;\n  @State() showIconWrapper: boolean = false;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @State() isExpandable: boolean = false;\n  @State() isNested: boolean = true;\n  @State() isSubMenuItem: boolean = false;\n  @Prop() numberIndicator: string;\n  @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n  @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n  @State() internalActiveState: boolean = false;\n\n  @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n  @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n  @Watch('active')\n  handleActiveChange(newValue: boolean, oldValue: boolean) {\n    // If the item is an action item, ignore the active prop\n    if (this.isActionItem) {\n      this.internalActiveState = false;\n      return;\n    }\n    this.internalActiveState = newValue;\n    if (newValue !== oldValue) {\n      let labelElement = this.getNavItem(this.el.shadowRoot)\n      if (!this.isExpandable && !newValue) {\n        this.handleClassList(labelElement, 'remove', 'active');\n      }\n      if (!this.isExpandable && newValue) {\n        this.handleClassList(labelElement, 'add', 'active');\n      }\n    }\n  }\n\n\n\n  @Listen('consoleError')\n  handleConsoleError(event: CustomEvent<boolean>) {\n    if (event.detail) {\n      this.showIcon = false;\n    } else {\n      this.showIcon = true;\n    }\n  }\n\n  handleEventEmission() {\n    // Get the active item section\n    this.ifxSidebarMenu.emit(this.el)\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getExpandableMenu() {\n    const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n    return expandableSubmenu\n  }\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n\n\n  getSidebarMenuItems(el = this.el) {\n    const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n    if (sidebarItems.length === 0) {\n      return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n    }\n    return sidebarItems;\n  }\n\n  getSidebarMenuItem() {\n    const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n    return sidebarItem;\n  }\n\n\n  toggleSubmenu() {\n    if (this.isExpandable) {\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'toggle', 'open');\n      this.handleClassList(menuItem, 'toggle', 'open');\n      // Emit an event with the current component\n      this.handleEventEmission();\n    } else {\n      // If the sidebar item is not expandable, it's a leaf item without a submenu.\n      // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n      if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n        this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n        return;\n      } else { //its a navigation item which becomes active after clicking it\n        this.handleActiveChange(true, this.internalActiveState)\n        this.ifxSidebarNavigationItem.emit(this.el);\n      }\n      // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n      if (this.handleItemClick) {\n        this.handleItemClick(this.el);\n      }\n    }\n    // // Emit an event with the current component\n    // this.handleEventEmission();\n  }\n\n\n\n  handleExpandableMenu(sidebarItems) {\n    const sidebarExpandableMenu = this.getExpandableMenu();\n    sidebarItems.forEach((el: HTMLElement) => {\n      const li = document.createElement('li')\n      li.appendChild(el)\n      sidebarExpandableMenu.appendChild(li)\n    })\n  }\n\n  parentElementIsSidebar() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n      return true;\n    } else return false;\n  }\n\n  checkIfMenuItemIsNested() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      this.isNested = false;\n    }\n  }\n\n  checkIfMenuItemIsSubMenu() {\n    const parentElement = this.el.parentElement;\n    const navItem = this.getNavItem(parentElement.shadowRoot);\n    if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n      this.isSubMenuItem = true;\n    }else {\n      this.isSubMenuItem = false;\n    }\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive\n  }\n\n  getParentSection(el: HTMLElement) {\n    let parentElement = el.parentElement;\n\n    while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n      if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n        return parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return null;\n  }\n\n\n\n  handleBorderIndicatorDisplacement(menuItem) {\n    // Recursive function to handle each item\n    const handleItem = (item, menuItem) => {\n      const isActive = this.isActive(item);\n      if (isActive) {\n        const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n        const activeMenuItemSection = this.getActiveItemSection();\n        if (!isOpen) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        } else {\n          this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n        }\n      }\n\n      // Process each child item\n      const children = this.getSidebarMenuItems(item);\n      children.forEach((child) => handleItem(child, menuItem));\n    }\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems();\n    topLevelItems.forEach((item) => handleItem(item, menuItem));\n  }\n\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  getActiveItemSection() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    } else {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    }\n  }\n\n  @Method()\n  async setActiveClasses() {\n    const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n    this.handleClassList(activeMenuItem, 'add', 'active')\n  }\n\n  @Method()\n  async expandMenu(ac: boolean){\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'add', 'open');\n      this.handleClassList(menuItem, 'add', 'open');\n      if(ac){\n        this.handleClassList(expandableMenu, 'remove', 'active-section')\n        this.handleClassList(menuItem, 'remove', 'active-section')\n      }\n  }\n  \n  @Method()\n  async isItemExpandable(){\n    return this.isExpandable;\n  }\n\n  handleActiveState() {\n    if (this.internalActiveState) {\n      this.setActiveClasses()\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.toggleSubmenu()\n    }\n  }\n\n  componentDidLoad() {\n    this.handleActiveState();\n    if (this.isExpandable) {\n      const sidebarItems = this.getSidebarMenuItems();\n      this.handleExpandableMenu(sidebarItems)\n    }\n  }\n  \n  componentWillLoad() {\n    this.internalActiveState = this.active;\n    this.checkIfMenuItemIsNested();\n    this.checkIfMenuItemIsSubMenu();\n    this.setHref()\n    const sidebarItems = this.getSidebarMenuItems();\n    if (sidebarItems.length !== 0) {\n      this.isExpandable = true;\n    } else {\n      this.isExpandable = false;\n    }\n  }\n\n  componentWillUpdate() {\n    // If the active prop has been set to true and the internalActiveState has not been set to true yet\n    if (this.active && !this.internalActiveState) {\n      // Set the internal active state to true\n      this.internalActiveState = this.active;\n\n      // Emit the event to notify the parent Sidebar\n      this.ifxSidebarNavigationItem.emit(this.el);\n    }\n  }\n\n\n  render() {\n    return (\n      <div>\n        <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n          {this.icon &&\n            <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n              <ifx-icon icon={this.icon}></ifx-icon>\n            </div>}\n          <div class=\"sidebar__nav-item-label\">\n            <slot />\n          </div>\n          {\n          (this.isExpandable || this.numberIndicator?.trim()) && \n            <div class=\"sidebar__nav-item-indicator\">\n              {this.isExpandable &&\n                <span class='item__arrow-wrapper'>\n                  <ifx-icon icon=\"chevron-down-12\" />\n                </span>\n              }\n\n              {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n                <span class='item__number-indicator'>\n                  <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n                </span>}\n\n            </div>\n          }\n        </a>\n        {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-f619bff3.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const l=a;const n=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}render(){return t("div",{key:"8c18c26d395086b72e02bc4a93d0704edd066089",class:"chip"},t("div",{key:"c7a091e32092cb523fba9b450a24c482670c066f",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":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.AriaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"aff84b05d8f36b13c59463af3674150d075f0aa9",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"d6895d41ea10a0c0ae9e20181cc3e112e78f3c06",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-number-indicator",{key:"af8892d23246826d39fc866b292042297f1688e7"},"  ",`+${this.selectedOptions.length-2}`," ")),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"1995a9d622e80b5639af86214a7084427f7c0ad0",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevrondown16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"20669e78ce405e4d323b7c61c3e4f70b1aded6a5",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"b4eebcfbcd125f25cb55f94fbd03bab7202f62da",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"dbd65ac1f1b86541a908b370272dd1f2433043c4",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"807a0107a2fe23f0d72ed3b0aed7659d7f1a3bb4"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};n.style=l;const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=r;const h=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"8a48897962af2131d6f574d602b71e035b2f46a6",class:"chip-item__label"}," ",t("slot",{key:"2945084fa15c686cc6456761f4ca67370d6418b3"})," "),t("div",{key:"94e48f99ce3629f73d2a82530626474a50d0d9c1",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"e9aaef0ae55766df51d8d293bb4405703dcdead8",icon:`check${this.chipState.size==="small"?"12":"16"}`}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};h.style=c;const o='@charset "UTF-8";:root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const p=o;const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.currentPage=0;this.internalPage=1;this.itemsPerPage=10;this.numberOfPages=[];this.total=1;this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.CLASS_SIBLING_ACTIVE="active-sibling";this.DATA_KEY="pagination"}setItemsPerPage(e){if(e.detail){this.itemsPerPage=parseInt(e.detail.label)}else{this.itemsPerPage=10}}componentDidLoad(){this.calculateVisiblePageIndices();var e=this.el.shadowRoot.querySelector(".pagination");let i=e.querySelector(".prev");this.navigateSinglePage(i,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const e=this.total<=this.itemsPerPage?this.itemsPerPage:this.total;const i=this.itemsPerPage;const t=Math.ceil(e/i);if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>t){this.internalPage=t}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:t},((e,i)=>i+1))}componentWillLoad(){this.calculateNumberOfPages()}componentDidUpdate(){var e=this.el.shadowRoot.querySelector(".pagination");var i=e.querySelectorAll("li");this.addEventListenersToPageItems(i,e);if(e.dataset[this.DATA_KEY]<this.numberOfPages){e.dataset[this.DATA_KEY]=e.dataset[this.DATA_KEY]}else e.dataset[this.DATA_KEY]=0;this.changePage(e,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(e){let i=e+1;let t=this.numberOfPages.length;let s=e===0?null:e;let a=e+2>t?null:e+2;let l=this.itemsPerPage;this.ifxPageChange.emit({currentPage:i,totalPages:t,prevPage:s,nextPage:a,itemsPerPage:l})}addEventListenersToPageItems(e,i){e.forEach((e=>{e.addEventListener("click",(e=>{var t=i;let s=t.querySelectorAll("li");t.dataset[this.DATA_KEY]=Array.from(s).indexOf(e.currentTarget);this.changePage(t,false)}))}))}initPagination(e){var i=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(i).indexOf(e.querySelector(".active"));e.querySelector(".prev").addEventListener("click",(e=>this.navigateSinglePage(e,false)));e.querySelector(".next").addEventListener("click",(e=>this.navigateSinglePage(e,false)));this.addEventListenersToPageItems(i,e)}navigateSinglePage(e,i){let t=e;if(typeof e.target==="object"){t=e.target}if(!t.classList.contains(this.CLASS_DISABLED)){var s=t.closest(".pagination");var a=parseInt(s.dataset[this.DATA_KEY],10);a+=1*(t.classList.contains("prev")?-1:1);if(a===-1){a=0}s.dataset[this.DATA_KEY]=a;this.changePage(s,i)}}changePage(e,i){const t=e;var s=t.querySelectorAll("li");var a=parseInt(t.dataset[this.DATA_KEY],10);s.forEach((e=>{e.classList.remove(this.CLASS_ACTIVE);e.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(i&&this.internalPage>1){a=Math.floor(this.internalPage-1);t.dataset[this.DATA_KEY]=a}this.handleEventEmission(a);s[a].classList.add(this.CLASS_ACTIVE);if(a===0){t.querySelector(".prev").classList.add(this.CLASS_DISABLED);t.querySelector(".prev").disabled=true}else{s[a-1].classList.add(this.CLASS_SIBLING_ACTIVE);t.querySelector(".prev").classList.remove(this.CLASS_DISABLED);t.querySelector(".prev").disabled=false}if(a===s.length-1){t.querySelector(".next").classList.add(this.CLASS_DISABLED);t.querySelector(".next").disabled=true}else{t.querySelector(".next").classList.remove(this.CLASS_DISABLED);t.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var e=this.el.shadowRoot.querySelector(".pagination");this.initPagination(e)}render(){return t("div",{key:"db55804ece2792b117f6f5375a6f63253679a393","aria-label":"a pagination","aria-value":this.currentPage,class:"container"},t("div",{key:"bc40446f5905c3f249d243993d7363479d6ce384",class:"items__per-page-wrapper"},t("div",{key:"9c15d938fc18b93fc7e8c10339b71649575386ca",class:"items__per-page-label"},"Results per Page"),t("div",{key:"0b7ba079ffa28c5732df989988afd65396c8adc9",class:"items__per-page-field"},t("ifx-select",{key:"1a031fa45753fc389e3ab386ab6170f50d1df0f0",value:"undefined",size:"s",placeholder:"false","show-search":"false","search-placeholder-value":"Search...",disabled:false,error:false,"error-message":"Error",label:"","placeholder-value":"Placeholder",options:'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),t("div",{key:"d5bd11d957dd37b5af1df9d285ae4098c93c3365",class:"items__total-wrapper"},t("div",{key:"295766066233b8b0f975abcc093cc43839b46125",class:"page__numbers-wrapper"},t("div",{key:"574f2ef606d94c2a6ad16c9b9684f158f3595422",class:"pagination"},t("ifx-icon-button",{key:"f98a3b995d2f08124e2f2e3f96e64cccd7b81b33",variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),t("ol",{key:"07630c257729a369d07baf12e99c0469fccebe0d"},this.numberOfPages.map((e=>t("li",{class:`${this.internalPage===e?"active":""}`},t("a",{href:undefined},e))))),t("ifx-icon-button",{key:"8407562df387e20efa76fdf6ee2d1fe65e6eb6f6",class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return s(this)}};d.style=p;export{n as ifx_chip,h as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-45e42392.entry.js.map

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

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