@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

package/dist/components/{p-CnXEcTdH.js → p-TR-rcXLt.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 
@@ -73,6 +73,6 @@ function defineCustomElement() {
 }
 
 export { Alert as A, defineCustomElement as d };
-//# sourceMappingURL=p-CnXEcTdH.js.map
+//# sourceMappingURL=p-TR-rcXLt.js.map
 
-//# sourceMappingURL=p-CnXEcTdH.js.map
+//# sourceMappingURL=p-TR-rcXLt.js.map

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

@@ -0,0 +1 @@
+{"file":"p-TR-rcXLt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.alert__info-wrapper {\r\n  display: flex;\r\n  padding: 16px 24px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\r\n\r\n  & .info__text-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: tokens.$ifxSpace100;\r\n    width: 100%;\r\n\r\n    & .info__headline-wrapper {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 1;\r\n      line-clamp: 1;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n\r\n    & .info__headline-wrapper,\r\n    .info__description-wrapper {\r\n      color: #1D1D1D;\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 24px;\r\n\r\n      ::slotted(p) {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n    }\r\n\r\n    & .info__description-wrapper {\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  & .close-icon-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    justify-content: flex-start;\r\n    //min-width: tokens.$ifxSize500;\r\n\r\n    & button {\r\n      all: unset;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 0;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      height: tokens.$ifxSize300;\r\n      width: tokens.$ifxSize300;\r\n\r\n\r\n      &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 2px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.alert {\r\n  display: flex;\r\n  border: 1px solid tokens.$ifxColorOcean500;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\r\n\r\n\r\n  & .close-icon-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: tokens.$ifxSize500;\r\n\r\n    & button {\r\n      all: unset;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 0;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      height: tokens.$ifxSize300;\r\n      width: tokens.$ifxSize300;\r\n\r\n      &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .icon-wrapper {\r\n    position: relative;\r\n    min-width: tokens.$ifxSize600;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .alert-text {\r\n    font-size: 16px;\r\n    width: 100%;\r\n    padding: 12px 0px 12px 12px;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    white-space: pre-wrap;\r\n    /* wraps text at spaces and within words */\r\n    word-wrap: break-word;\r\n    /* breaks text within a word if necessary */\r\n    overflow-wrap: anywhere;\r\n    /* breaks text at arbitrary points when needed */\r\n  }\r\n\r\n  &.primary {\r\n    border: 1px solid tokens.$ifxColorOcean500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorOcean500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.success {\r\n    border: 1px solid tokens.$ifxColorGreen500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorGreen500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.danger {\r\n    border: 1px solid tokens.$ifxColorRed500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorRed500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.warning {\r\n    border: 1px solid tokens.$ifxColorOrange500;\r\n\r\n    & .icon-wrapper {\r\n      background-color: tokens.$ifxColorOrange500;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n}\r\n\r\n.close-icon-wrapper {\r\n  & ifx-icon {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n}","import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-alert',\r\n  styleUrl: 'alert.scss',\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element() el: HTMLElement;\r\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\r\n  @Prop() icon: string;\r\n  @Event() ifxClose: EventEmitter;\r\n  @Prop() closable: boolean = true;\r\n  @Prop() AriaLive = 'assertive';\r\n  @State() uniqueId: string;\r\n\r\n  alertTypeDescription = {\r\n    \"primary\": 'Neutral alert',\r\n    \"success\": 'Success Alert',\r\n    \"danger\": 'Error Alert',\r\n    \"warning\": 'Warning Alert',\r\n    \"info\": 'Neutral alert',\r\n  };\r\n\r\n  handleClose() {\r\n    this.ifxClose.emit();\r\n  }\r\n\r\n  renderCloseButton() {\r\n    return (\r\n      <div class=\"close-icon-wrapper\">\r\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\r\n          <ifx-icon icon=\"cross-16\" />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  generateUniqueId(prefix = 'id') {\r\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    if (!this.uniqueId) {\r\n      this.uniqueId = this.generateUniqueId('alert');\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = await detectFramework();\r\n      trackComponent('ifx-alert', framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return this.variant === 'info' ? (\r\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\r\n        <div class=\"info__text-wrapper\">\r\n          <div class=\"info__headline-wrapper\">\r\n            <slot name=\"headline\" />\r\n          </div>\r\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\r\n            <slot name=\"desc\" />\r\n          </div>\r\n        </div>\r\n        {this.closable ? this.renderCloseButton() : null}\r\n      </div>\r\n    ) : (\r\n      <div class={`alert ${this.variant}`} role=\"alert\">\r\n        {this.icon && (\r\n          <div class=\"icon-wrapper\">\r\n            <ifx-icon icon={this.icon} />\r\n          </div>\r\n        )}\r\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\r\n          <slot />\r\n        </div>\r\n        {this.closable ? this.renderCloseButton() : null}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BG0cmSVP.js → p-UJUcpUZI.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$3 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$2 } from './p-F-WOWp_H.js';
-import { d as defineCustomElement$1 } from './p-DHLzWSzN.js';
+import { d as defineCustomElement$3 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$2 } from './p-BpoV3zpc.js';
+import { d as defineCustomElement$1 } from './p-C0oKAW62.js';
 
 const paginationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family);flex-wrap:wrap}.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}.page__button{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) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{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 (max-width: 768px){.container{gap:16px;justify-content:left}.container .items__total-wrapper .pagination ol{gap:12px}}@media (max-width: 374px){.pagination .ellipsis+.active{margin-left:8px}.pagination .active+.ellipsis{margin-left:8px}}";
 
@@ -235,7 +235,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '9a4b41bb714202dcc144f626b9a2096480852ad6', class: "container" }, this.showItemsPerPage && (h("div", { key: '9e829381e98967180e89bf8f8988c67bbb998814', class: "items__per-page-wrapper" }, h("div", { key: 'be5d328337c18096cd1363f3c7c0c060693fe525', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '37f663194a695059779305e0723321c26f55d191', class: "items__per-page-field" }, h("ifx-select", { key: '916cc188fd2f7d86243db5955f091e188defbacc', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: 'f6531ac8c0710f53ff375e8ee4fa19bb47be5cef', class: "items__total-wrapper" }, h("div", { key: '4edaf3f1bc17c3423c2b39473a0f5ddc959278d6', class: "pagination" }, h("ifx-icon-button", { key: '7341fced786739f5970cfc9940381b2b2901de63', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: 'b7af29f3b08ee99b3c880c7af51b4d491630e55c' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: 'page__button', role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: '5bdcefa2773fb49f8d7c4190a48fe5a98f6e0442', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
+        return (h("div", { key: '11d342b11b38051ffd0b1e08e0696b1e3ef4e3c5', class: "container" }, this.showItemsPerPage && (h("div", { key: 'e2bedb6b48ac138ec8ff9640363d5d01a3195b33', class: "items__per-page-wrapper" }, h("div", { key: '506874c6bfeeacab1203cc5403639d91b2bf93a2', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '8d0fafee79171e56b4672d4fd4c4cd2049ebd614', class: "items__per-page-field" }, h("ifx-select", { key: '650869a3583ef25e5b78dcafb9efaf1760c6101c', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: '230aea64459ffa9c32a6e974eacf174bb9631c6b', class: "items__total-wrapper" }, h("div", { key: 'ec6765efbffeec485d4c3400541a72f96cf3436a', class: "pagination" }, h("ifx-icon-button", { key: 'ab52e4afbebcf6e1bb8ba51a85de505fcaa1cf45', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: 'ecda1907072a09082fa25dac33608f0a3819d5e9' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: 'page__button', role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: 'fd46bf3e767ebed96da040f53ad872bfb16d885c', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -287,6 +287,6 @@ function defineCustomElement() {
 }
 
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-BG0cmSVP.js.map
+//# sourceMappingURL=p-UJUcpUZI.js.map
 
-//# sourceMappingURL=p-BG0cmSVP.js.map
+//# sourceMappingURL=p-UJUcpUZI.js.map

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

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

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

@@ -1 +1 @@
-{"file":"p-bqYaVeZb.js","mappings":"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","names":[],"sources":["src/global/utils/tracking.ts","src/global/utils/dom-utils.ts","src/global/utils/dom-ready.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\n  interface Window {\n    btntConfig?: any;\n    btntQueue?: any[];\n    btnt?: (data: object) => void;\n    INFINEON_TRACKED_COMPONENTS?: Set<string>; \n  }\n}\n\nconst isTestEnvironment = typeof process !== 'undefined' &&\n  process.env &&\n  process.env.NODE_ENV === 'test';\n\nfunction initializeTracking() {\n  if (isTestEnvironment) {\n    if (!window.btnt) { \n      window.btnt = () => { };\n    }\n    return;\n  }\n\n  (function (t, r, _kk, n, pp) {\n    if (typeof window.btntConfig !== \"object\") {\n      window.btntConfig = {\n        domain: \"https://ssgtm.infineon.com\",\n        withCookies: true,\n        maxBatchSize: 10\n      };\n    }\n\n    if (window[\"btnt\"]) return;\n\n    window[\"btnt\"] = function (z) {\n      if (typeof z !== \"object\") {\n        z = {};\n      }\n      if (typeof window.btntQueue !== \"object\") {\n        window.btntQueue = [];\n      }\n      window.btntQueue.push(z);\n    };\n\n    n = t.createElement(r);\n\n    // Add safety check for test environments\n    pp = t.getElementsByTagName(r)[0];\n    if (pp && pp.parentNode) {\n      n.async = 1;\n      n.src = window.btntConfig.domain + \"/btnt.js\";\n      pp.parentNode.insertBefore(n, pp);\n    }\n  })(document, \"script\");\n}\n\nexport function trackComponent(componentName: string, environment: string) {\n  const skipEnvironments = ['jest', 'localhost', 'error'];\n  if (skipEnvironments.includes(environment)) {\n    return;\n  }\n\n  if (!window.INFINEON_TRACKED_COMPONENTS) {\n    window.INFINEON_TRACKED_COMPONENTS = new Set();\n  }\n\n  if (window.INFINEON_TRACKED_COMPONENTS.has(componentName)) {\n    return; \n  }\n\n  window.INFINEON_TRACKED_COMPONENTS.add(componentName);\n\n  if (!window.btnt) initializeTracking();\n\n  window.btnt({\n    event_name: \"component_initialized\",\n    component_name: componentName,\n    environment: environment\n  });\n}\n\nexport default trackComponent;","export const isNestedInIfxComponent = (el: HTMLElement): boolean => {\n  let parent: Node | ShadowRoot | null = el.parentNode;\n  \n  while (parent) {\n    if (parent instanceof ShadowRoot) {\n      parent = parent.host;\n      continue;\n    }\n    \n    if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {\n      return true;\n    }\n    \n    parent = parent.parentNode;\n  }\n  \n  return false;\n};","export const waitForDOMReady = (): Promise<void> => {\n  return new Promise((resolve) => {\n    if (document.readyState === 'complete' || document.readyState === 'interactive') {\n      resolve();\n    } else {\n      const onReady = () => {\n        resolve();\n        document.removeEventListener('DOMContentLoaded', onReady);\n      };\n      document.addEventListener('DOMContentLoaded', onReady);\n    }\n  });\n};","let frameworkCache: string | null = null;\nimport { waitForDOMReady } from './dom-ready';\n\nexport const detectFramework = async (): Promise<string> => {\n  if (frameworkCache) return frameworkCache;\n  \n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    frameworkCache = 'non-browser';\n    return frameworkCache;\n  }\n\n  const win = window as any;\n  const doc = document;\n\n  const isJest = typeof process !== 'undefined' && \n                 process.env && \n                 process.env.NODE_ENV === 'test';\n  if (isJest) {\n    frameworkCache = 'jest';\n    return frameworkCache;\n  }\n\n  const isStorybook = win.location.search.includes('viewMode') || \n                      win.location.href.includes('viewMode') ||\n                      win.__STORYBOOK_ENV__;\n  \n  if (isStorybook) {\n    frameworkCache = 'Storybook';\n    return frameworkCache;\n  }\n\n  const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);\n  if (isLocalhost) {\n    frameworkCache = 'localhost';\n    return frameworkCache;\n  }\n\n  try {\n\n    if (win.React || win.ReactDOM) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    if (win.ng || win.getAllAngularRootElements) {\n      frameworkCache = 'Angular';\n      return frameworkCache;\n    }\n    \n    if (win.Vue || win.__VUE__) {\n      frameworkCache = 'Vue';\n      return frameworkCache;\n    }\n\n    await waitForDOMReady();\n\n    const reactRoot = doc.querySelector('[data-reactroot], [data-reactid]');\n    if (reactRoot) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    const rootContainers = Array.from(doc.querySelectorAll('body > div'));\n    const hasReactRoot = rootContainers.some(container => {\n      const keys = Object.keys(container);\n      return keys.some(key => key.startsWith('__reactContainer'));\n    });\n    \n    if (hasReactRoot) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    if (doc.querySelector('[ng-version], [ng-app]')) {\n      frameworkCache = 'Angular';\n      return frameworkCache;\n    }\n    \n    if (doc.querySelector('[data-v-app]')) {\n      frameworkCache = 'Vue';\n      return frameworkCache;\n    }\n\n    frameworkCache = 'Vanilla';\n    return frameworkCache;\n  } catch (e) {\n    frameworkCache = 'error';\n    return frameworkCache;\n  }\n};"],"version":3}
+{"file":"p-bqYaVeZb.js","mappings":"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","names":[],"sources":["src/global/utils/tracking.ts","src/global/utils/dom-utils.ts","src/global/utils/dom-ready.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\r\n  interface Window {\r\n    btntConfig?: any;\r\n    btntQueue?: any[];\r\n    btnt?: (data: object) => void;\r\n    INFINEON_TRACKED_COMPONENTS?: Set<string>; \r\n  }\r\n}\r\n\r\nconst isTestEnvironment = typeof process !== 'undefined' &&\r\n  process.env &&\r\n  process.env.NODE_ENV === 'test';\r\n\r\nfunction initializeTracking() {\r\n  if (isTestEnvironment) {\r\n    if (!window.btnt) { \r\n      window.btnt = () => { };\r\n    }\r\n    return;\r\n  }\r\n\r\n  (function (t, r, _kk, n, pp) {\r\n    if (typeof window.btntConfig !== \"object\") {\r\n      window.btntConfig = {\r\n        domain: \"https://ssgtm.infineon.com\",\r\n        withCookies: true,\r\n        maxBatchSize: 10\r\n      };\r\n    }\r\n\r\n    if (window[\"btnt\"]) return;\r\n\r\n    window[\"btnt\"] = function (z) {\r\n      if (typeof z !== \"object\") {\r\n        z = {};\r\n      }\r\n      if (typeof window.btntQueue !== \"object\") {\r\n        window.btntQueue = [];\r\n      }\r\n      window.btntQueue.push(z);\r\n    };\r\n\r\n    n = t.createElement(r);\r\n\r\n    // Add safety check for test environments\r\n    pp = t.getElementsByTagName(r)[0];\r\n    if (pp && pp.parentNode) {\r\n      n.async = 1;\r\n      n.src = window.btntConfig.domain + \"/btnt.js\";\r\n      pp.parentNode.insertBefore(n, pp);\r\n    }\r\n  })(document, \"script\");\r\n}\r\n\r\nexport function trackComponent(componentName: string, environment: string) {\r\n  const skipEnvironments = ['jest', 'localhost', 'error'];\r\n  if (skipEnvironments.includes(environment)) {\r\n    return;\r\n  }\r\n\r\n  if (!window.INFINEON_TRACKED_COMPONENTS) {\r\n    window.INFINEON_TRACKED_COMPONENTS = new Set();\r\n  }\r\n\r\n  if (window.INFINEON_TRACKED_COMPONENTS.has(componentName)) {\r\n    return; \r\n  }\r\n\r\n  window.INFINEON_TRACKED_COMPONENTS.add(componentName);\r\n\r\n  if (!window.btnt) initializeTracking();\r\n\r\n  window.btnt({\r\n    event_name: \"component_initialized\",\r\n    component_name: componentName,\r\n    environment: environment\r\n  });\r\n}\r\n\r\nexport default trackComponent;","export const isNestedInIfxComponent = (el: HTMLElement): boolean => {\r\n  let parent: Node | ShadowRoot | null = el.parentNode;\r\n  \r\n  while (parent) {\r\n    if (parent instanceof ShadowRoot) {\r\n      parent = parent.host;\r\n      continue;\r\n    }\r\n    \r\n    if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {\r\n      return true;\r\n    }\r\n    \r\n    parent = parent.parentNode;\r\n  }\r\n  \r\n  return false;\r\n};","export const waitForDOMReady = (): Promise<void> => {\r\n  return new Promise((resolve) => {\r\n    if (document.readyState === 'complete' || document.readyState === 'interactive') {\r\n      resolve();\r\n    } else {\r\n      const onReady = () => {\r\n        resolve();\r\n        document.removeEventListener('DOMContentLoaded', onReady);\r\n      };\r\n      document.addEventListener('DOMContentLoaded', onReady);\r\n    }\r\n  });\r\n};","let frameworkCache: string | null = null;\r\nimport { waitForDOMReady } from './dom-ready';\r\n\r\nexport const detectFramework = async (): Promise<string> => {\r\n  if (frameworkCache) return frameworkCache;\r\n  \r\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\r\n    frameworkCache = 'non-browser';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const win = window as any;\r\n  const doc = document;\r\n\r\n  const isJest = typeof process !== 'undefined' && \r\n                 process.env && \r\n                 process.env.NODE_ENV === 'test';\r\n  if (isJest) {\r\n    frameworkCache = 'jest';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const isStorybook = win.location.search.includes('viewMode') || \r\n                      win.location.href.includes('viewMode') ||\r\n                      win.__STORYBOOK_ENV__;\r\n  \r\n  if (isStorybook) {\r\n    frameworkCache = 'Storybook';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);\r\n  if (isLocalhost) {\r\n    frameworkCache = 'localhost';\r\n    return frameworkCache;\r\n  }\r\n\r\n  try {\r\n\r\n    if (win.React || win.ReactDOM) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (win.ng || win.getAllAngularRootElements) {\r\n      frameworkCache = 'Angular';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (win.Vue || win.__VUE__) {\r\n      frameworkCache = 'Vue';\r\n      return frameworkCache;\r\n    }\r\n\r\n    await waitForDOMReady();\r\n\r\n    const reactRoot = doc.querySelector('[data-reactroot], [data-reactid]');\r\n    if (reactRoot) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    const rootContainers = Array.from(doc.querySelectorAll('body > div'));\r\n    const hasReactRoot = rootContainers.some(container => {\r\n      const keys = Object.keys(container);\r\n      return keys.some(key => key.startsWith('__reactContainer'));\r\n    });\r\n    \r\n    if (hasReactRoot) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (doc.querySelector('[ng-version], [ng-app]')) {\r\n      frameworkCache = 'Angular';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (doc.querySelector('[data-v-app]')) {\r\n      frameworkCache = 'Vue';\r\n      return frameworkCache;\r\n    }\r\n\r\n    frameworkCache = 'Vanilla';\r\n    return frameworkCache;\r\n  } catch (e) {\r\n    frameworkCache = 'error';\r\n    return frameworkCache;\r\n  }\r\n};"],"version":3}

package/dist/components/{p-Djr4amRx.js → p-ncBPrnzY.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BQj9WQQe.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-B61ip_5M.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 const multiselectOptionCss = ":host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#FFFFFF;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#F7F7F7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3C3A39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#BFBBBB}";
 
@@ -371,25 +371,25 @@ const MultiselectOption = /*@__PURE__*/ proxyCustomElement(class MultiselectOpti
         const additionalPadding = this.hasChildren ? 0 : 28;
         let totalPadding = basePadding + additionalPadding;
         const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };
-        return (h(Host, { key: '4dd008dabc4aec3070ad355aa877ff391e3883df' }, h("div", { key: '848afd2fa2a34c2b5763dc8c979d898b498b39b1', class: {
+        return (h(Host, { key: '617d8ce1013166fc73932cd1e43d7d490ec00a87' }, h("div", { key: 'e2ee562a87f68aaaea5e90cf341522cfe6dfbfe1', class: {
                 'option': true,
                 'option--has-children': this.hasChildren,
                 'option--expanded': this.isExpanded,
                 'option--disabled': this.disabled,
                 'option--selected': this.selected,
-            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, h("div", { key: '28fe299c78e8f42d9ef763ba14c84e0123276de8', class: "option-item", style: optionItemStyle }, h("div", { key: '891cd1a5c09c53df6c8079642aab48a893295cd8', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
+            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, h("div", { key: '72d190bde19d6329af703bd8fb2982ec6a0639ac', class: "option-item", style: optionItemStyle }, h("div", { key: 'a9212c96004f34980597f2f8ed6ac9e81a0bc04a', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.toggleExpansion();
                 }
-            } }, this.hasChildren && (h("ifx-icon", { key: '7ddb0f0245f14fd8bc64fbfb3278c1d3a53f3834', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), h("div", { key: 'a688fb56fd51cc1aefccf9b42d8f5c2a6ac271f8', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, h("ifx-checkbox", { key: '6ba8ea62a25285a59f3866dc0e7911b658477b3d', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
+            } }, this.hasChildren && (h("ifx-icon", { key: '55a61a7a42a5fb4628a4f06f0810f31e0a7d244d', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), h("div", { key: '71410122f4e0214c1d8709cf8b5f9b319b4b06d9', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, h("ifx-checkbox", { key: '208a2148b6a0742a9877e4e2856b34bb22d1e9b1', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.handleCheckboxClick(e);
                 }
-            } })), h("div", { key: '63d0d6313ee94b3e80a2a0058fa1e79431becb29', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, h("slot", { key: 'f503e85ef020cedec37931b6079a9164c1ce8d5d' }))), this.isExpanded && h("div", { key: '75297050484cdc4a9c80b2bff614119a7c18ff3f', class: "option-children" }, h("slot", { key: 'f33fbe0abb5e7c9277e24e0445838d8e4d0a6910', name: "children" })))));
+            } })), h("div", { key: '3e4501e66dd09541073024b17eaa33befa11ee4e', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, h("slot", { key: 'e8f334fed373853ece6cb304cb97642c710f7468' }))), this.isExpanded && h("div", { key: 'bf40126d48e75986260d8fb0fcf39d5269c1afb8', class: "option-children" }, h("slot", { key: '2c523595e535075930b91f12135a934c3ea7b53a', name: "children" })))));
     }
     get el() { return this; }
     static get style() { return multiselectOptionCss; }
@@ -430,6 +430,6 @@ function defineCustomElement() {
 }
 
 export { MultiselectOption as M, defineCustomElement as d };
-//# sourceMappingURL=p-Djr4amRx.js.map
+//# sourceMappingURL=p-ncBPrnzY.js.map
 
-//# sourceMappingURL=p-Djr4amRx.js.map
+//# sourceMappingURL=p-ncBPrnzY.js.map

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

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

package/dist/components/{p-BxahGQyq.js → p-rP_UHrBl.js}

@@ -28,8 +28,8 @@ const Indicator = /*@__PURE__*/ proxyCustomElement(class Indicator extends H {
         this.handleNumber();
     }
     render() {
-        return (h("div", { key: '35211d70a31d9bf69b84614694d4669877c8a6d9', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
-            h("div", { key: '888f42cb6ad70bb973b62468734bae7abf73f3d9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '4578b32ca5e7b7747eb7ae729e9732d06da3fcbc', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '2b3cd2500d4d64bbb27131201ca2d56f720209a0', class: "dot__wrapper" })));
+        return (h("div", { key: '6bb6533b5cb81151a3133951e79bf3296b976d4a', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
+            h("div", { key: 'bb5dbd9fa7bb3c70dcd8f0a8c257e65e26b74ff9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '500dd5cef6c3adb0d7b6a1404a8102fb1d25e969', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '9671fb9b2522f02c3c3b98727335045827d4f759', class: "dot__wrapper" })));
     }
     get el() { return this; }
     static get style() { return indicatorCss; }
@@ -55,6 +55,6 @@ function defineCustomElement() {
 }
 
 export { Indicator as I, defineCustomElement as d };
-//# sourceMappingURL=p-BxahGQyq.js.map
+//# sourceMappingURL=p-rP_UHrBl.js.map
 
-//# sourceMappingURL=p-BxahGQyq.js.map
+//# sourceMappingURL=p-rP_UHrBl.js.map

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

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

package/dist/components/{p-DNZFFt4T.js → p-sukt4tRE.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$1 } from './p-BxahGQyq.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$1 } from './p-rP_UHrBl.js';
 
 const chipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper .icon__wrapper{display:flex}.chip__wrapper.outlined,.chip__wrapper.filled-dark,.chip__wrapper.filled-light{outline:2px solid transparent}.chip__wrapper.outlined:focus-visible,.chip__wrapper.filled-dark:focus-visible,.chip__wrapper.filled-light:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only),.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only){background-color:#0A8276;color:white}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover{background-color:#08665C}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled{background-color:#0A8276}.chip__wrapper.outlined{border:1px solid #8D8786}.chip__wrapper.outlined:hover:not(.read-only){border-color:#575352;background-color:#F7F7F7}.chip__wrapper.outlined:active:not(.read-only){border-color:#575352;background-color:#BFBBBB}.chip__wrapper.outlined.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.outlined.chip__wrapper--selected{outline:3px solid #0A8276;border:1px solid transparent;background-color:white}.chip__wrapper.outlined.chip__wrapper--selected:focus-visible{outline-offset:0px}.chip__wrapper.outlined.chip__wrapper--selected:hover:not(.read-only){outline-color:#08665C}.chip__wrapper.outlined.chip__wrapper--selected.read-only{outline:none;border:1px solid black}.chip__wrapper.outlined.disabled{outline:none;color:#BFBBBB;border:1px solid #BFBBBB}.chip__wrapper.outlined.disabled:hover{outline:none;border-color:#BFBBBB;background-color:white}.chip__wrapper.outlined.read-only{border:1px solid black}.chip__wrapper.outlined.read-only:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.filled-dark{background-color:#3C3A39;color:white}.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#575352}.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#8D8786;color:black}.chip__wrapper.filled-dark.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected){background-color:#3C3A39}.chip__wrapper.filled-dark.chip__wrapper--selected.read-only{border:1px solid #8D8786}.chip__wrapper.filled-dark.read-only{border:1px solid #8D8786}.chip__wrapper.filled-light{background-color:#EEEDED}.chip__wrapper.filled-light:hover:not(.read-only){background-color:#BFBBBB}.chip__wrapper.filled-light:active:not(.read-only){background-color:#8D8786}.chip__wrapper.filled-light.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected){background-color:#EEEDED}.chip__wrapper.filled-light.chip__wrapper--selected.read-only{border:1px solid black}.chip__wrapper.filled-light.read-only{border:1px solid black}.chip__wrapper.chip__wrapper--small{padding:4px 8px;height:24px}.chip__wrapper.chip__wrapper--medium{padding:4px 12px;height:28px}.chip__wrapper.chip__wrapper--large{padding:8px 12px;height:36px}.wrapper__label{display:inline-flex;align-items:center;gap:4px}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center}.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}";
 
@@ -274,20 +274,20 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
         }
     }
     render() {
-        return (h("div", { key: 'cd16644a94a1e31cea0b2cbbe39394d4a05a5a5b', class: 'chip' }, h("div", { key: '951decf38e88ff684f283a09f6bc513ca4a2c704', class: `chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}
-                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
-                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}
-                  ${this.theme ? this.theme : 'outlined'}
-                  ${this.disabled ? 'disabled' : ""}
+        return (h("div", { key: '7d09fa1bb6292dcaabffecf990abc7aa891895aa', class: 'chip' }, h("div", { key: '564c97208bb9b0173576a9e4f39c4b983f1062e0', class: `chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}
+                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
+                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}
+                  ${this.theme ? this.theme : 'outlined'}
+                  ${this.disabled ? 'disabled' : ""}
                   ${this.readOnly ? 'read-only' : ""}`, tabIndex: 0, onClick: !this.readOnly && !this.disabled ? () => { 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 }, this.icon &&
-            h("div", { key: 'cd8ab00ddfde3ba1dcdb7a82f963df1b81e4b5d5', class: "icon__wrapper" }, h("ifx-icon", { key: 'b14f92a609f24bc0b4617bb2b0d8262c52f11fab', icon: this.icon })), h("div", { key: '7ac3305d90985ddf45eb4df3cc22f9de89bf60de', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&
+            h("div", { key: '88fb92751635c158dba1fae00c768e8553b42fa4', class: "icon__wrapper" }, h("ifx-icon", { key: '12e163b1c6c7916653e66e0ebabe5142ad0ec0da', icon: this.icon })), h("div", { key: 'af6687d4b75fa5321747dafbb56be79e36bf4b16', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: 'e7c907adafd7e1601a4cbd05e1a7b415e1da05b6', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-indicator", { key: '4520777b0d729d95d57d87d5a32a95fcf44e0d84', variant: 'number', inverted: this.theme === 'outlined' ? false : true, number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: 'ade24c6456b5443be577a4c0bd61d1b2dba68c91', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: '8b1937382b467ca305493896aaf065c10f7a01e8', class: 'wrapper__unselect-button', onClick: !this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e); } : undefined }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: '073b6641d2320716a6d4b1149e72b61fa9b47dd8', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '55587cb1d438b11f0682c3b1d596a5dfb1d251d0' }))));
+            h("div", { key: 'aedd029de20cb3a0321a69dda6aa64bde0ed364a', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-indicator", { key: 'cc2bbfa2415a03e655b13d24275bb92cbc4f2b3a', variant: 'number', inverted: this.theme === 'outlined' ? false : true, number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: 'cb8a825f3465b0e66bd98a95639649fd82ff2e00', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: '43774f6eb2e8c8b6418c64f43f8334e926e9c174', class: 'wrapper__unselect-button', onClick: !this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e); } : undefined }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: '60a7abc36fc1659a7ae6382cdb69d0c312c93016', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '2cd17e0b7e73bd5257a5721a8d3597873ea73d06' }))));
     }
     get chip() { return this; }
     static get watchers() { return {
@@ -336,6 +336,6 @@ function defineCustomElement() {
 }
 
 export { Chip as C, defineCustomElement as d };
-//# sourceMappingURL=p-DNZFFt4T.js.map
+//# sourceMappingURL=p-sukt4tRE.js.map
 
-//# sourceMappingURL=p-DNZFFt4T.js.map
+//# sourceMappingURL=p-sukt4tRE.js.map

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

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

package/dist/components/{p-DRqwZrk0.js → p-y82FFfi8.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";
 
@@ -92,7 +92,7 @@ const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem exten
         }
     }
     render() {
-        return (h("div", { key: '1317347110a9c74932695b8ffff8ca31d3c8e6c3', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: 'ad5d46e476f76ac121239c15904a4884a6ba4cc5', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: el => (this.titleEl = el) }, h("span", { key: '924e061fd270701a7c78433a56fcd70a40dfe7f5', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '40cee40a058eb576d0ef5482f6f7f0adb47a5f4e', icon: "chevron-down-16" })), h("span", { key: '37715ae9f3621954f081bec3d4e861d1dd60847b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '32c1186d1f4dd1a5a09842224cbfe3d648cc7fac', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '35618fea4d36844fbad5aed1c07dc2e7378a1d4e', class: "inner-content" }, h("slot", { key: 'eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb' })))));
+        return (h("div", { key: '8e4ee04a7a8fa3dbea906d43a1be6064e4c208a6', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '109998fb112b8206eb8a28a6ef479e40e317e92c', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: el => (this.titleEl = el) }, h("span", { key: '4936b00dd6203f5856e68ffb6c13ac8f588057fa', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '511d52bd160ccbe2e1936152c45517567061f57d', icon: "chevron-down-16" })), h("span", { key: 'fd82b2df5cbf8d50cfb00c54e59793348500323b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '77c229869cdf02d27ff1011cd5e5ad3fa201343e', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '0c9f7ea889fe60957ad9223426142b9509b3883b', class: "inner-content" }, h("slot", { key: '1e4218f5554a774a3cde38749a21a7490f72d18d' })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -127,6 +127,6 @@ function defineCustomElement() {
 }
 
 export { AccordionItem as A, defineCustomElement as d };
-//# sourceMappingURL=p-DRqwZrk0.js.map
+//# sourceMappingURL=p-y82FFfi8.js.map
 
-//# sourceMappingURL=p-DRqwZrk0.js.map
+//# sourceMappingURL=p-y82FFfi8.js.map