@infineon/infineon-design-system-stencil 35.4.3--canary.1904.729ed31665247b9ddbccea97165dd861cf75ee3d.0 → 35.4.3--canary.1904.5714b2e528e5a8082b1fb28d3d6ff6b89080e8fa.0

package/dist/components/{p-85d5b54e.js → p-88300d0a.js}

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
 
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const IfxAccordionStyle0 = accordionCss;
@@ -12,7 +13,9 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
         this.autoCollapse = false;
     }
     componentWillLoad() {
-        trackComponent('ifx-accordion');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-accordion');
+        }
     }
     async onItemOpen(event) {
         if (this.autoCollapse) {
@@ -26,7 +29,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
         }
     }
     render() {
-        return (h("div", { key: '050d2951ccb8ebc85930a4132b721bc0824e4f98', class: "accordion-wrapper" }, h("slot", { key: 'afa32cedbdb91fb255f97783b938fd2bcc4b5cdf' })));
+        return (h("div", { key: '09e451a9b0b348566d74ad71741d57bd48d3ec3a', class: "accordion-wrapper" }, h("slot", { key: '9338154dc8adc933eb6b6b6cbd1396adf839e80a' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -50,4 +53,4 @@ function defineCustomElement() {
 
 export { Accordion as A, defineCustomElement as d };
 
-//# sourceMappingURL=p-85d5b54e.js.map
+//# sourceMappingURL=p-88300d0a.js.map

package/dist/components/p-88300d0a.js.map

@@ -0,0 +1 @@
+{"file":"p-88300d0a.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,wLAAwL,CAAC;AAC9M,2BAAe,YAAY;;MCQd,SAAS;IALtB;;;;QAOU,iBAAY,GAAY,KAAK,CAAC;KA4BvC;IA1BC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,eAAe,CAAC,CAAA;SAChC;KACF;IAGD,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-accordion')\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-93b8dbba.js → p-93610755.js}

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
 import { c as classNames } from './p-5cdc6210.js';
 
 const linkCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}";
@@ -40,10 +41,12 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
         }
     }
     componentWillLoad() {
-        trackComponent('ifx-link');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-link');
+        }
     }
     render() {
-        return (h("a", { key: 'f4d92f6db4e493012426ee9f166abf4ec4936b1b', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '4a1504a55f658cebc4be7866146dc5992f49f30a' })));
+        return (h("a", { key: '34501f54b71028a9886ba198979aa55f88171921', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '5d1e1ff267036c8dfc2fbef139db404d9edf4300' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;
@@ -91,6 +94,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
     linkClassNames() {
         return classNames('link', 'primary', this.getVariantClass(), this.getSizeClass(), this.disabled ? 'disabled' : '');
     }
+    get el() { return this; }
     static get style() { return IfxLinkStyle0; }
 }, [1, "ifx-link", {
         "href": [1],
@@ -120,4 +124,4 @@ function defineCustomElement() {
 
 export { Link as L, defineCustomElement as d };
 
-//# sourceMappingURL=p-93b8dbba.js.map
+//# sourceMappingURL=p-93610755.js.map

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

@@ -0,0 +1 @@
+{"file":"p-93610755.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover { \n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Element() el;\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() ariaLabel: string | null;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-link')\n    }\n  }\n\n  render() {\n    return (\n      <a\n        role=\"link\"\n        aria-label={this.ariaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"],"version":3}

package/dist/components/{p-30ba81f3.js → p-98a1a1bb.js}

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
-import { d as defineCustomElement$2 } from './p-5be59836.js';
-import { d as defineCustomElement$1 } from './p-93b8dbba.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
+import { d as defineCustomElement$2 } from './p-869e8cfa.js';
+import { d as defineCustomElement$1 } from './p-93610755.js';
 
 const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
 const IfxNotificationStyle0 = notificationCss;
@@ -15,7 +16,9 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         this.linkTarget = '_blank';
     }
     componentWillLoad() {
-        trackComponent('ifx-notification');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-notification');
+        }
     }
     getClassName() {
         switch (this.variant) {
@@ -32,9 +35,10 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         }
     }
     render() {
-        return (h(Host, { key: 'e9031e1641a115ff3c23b9bba59d20f82e43e187' }, h("div", { key: '6e4e3d196b0f224c46221e09bd8a955dc00c00c6', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '84ca7f2e0bdb3e95ce080743069860ecc8db77b8', class: "ifx-notification__icon" }, h("ifx-icon", { key: '66fe9f6f1730398db15db5c5212b16572b7e4d91', icon: this.icon })), h("div", { key: 'c39e3c9f4050552937a0b1cafbed54089909b908', class: "ifx-notification__body" }, h("div", { key: '58b9cfe0b0e03f6e1186d5f6676b8cb2574daf44', class: "ifx-notification__slot" }, h("slot", { key: 'eaea2d61beb01dba6a270b3e1faecfe03ec37d5f' })), this.linkText && this.linkHref &&
-            h("div", { key: 'aa1941c875065c257257f539b2cb7c6dadad632f', class: "ifx-notification__link" }, h("ifx-link", { key: '8fb78c246fbc7b8db3b143e1c046543beb7983f8', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '1fee547e5476e9bc3140985fc957181fe877441b', icon: "arrow-right-16" })))))));
+        return (h(Host, { key: 'f4778d8c9d176d004af0356716b3f7dd6bdaaf2e' }, h("div", { key: 'be795f7d0819ad1f6847a5dd44e5c4d87f712956', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: 'c016988ac10a8f5b5bd7c808eb9a32ab624a88ec', class: "ifx-notification__icon" }, h("ifx-icon", { key: '52b0087e6be1fb1a2a53b7dc911a1f9cb82e241c', icon: this.icon })), h("div", { key: 'b474db0e0f1e233439efd5c296902a6e003f4da7', class: "ifx-notification__body" }, h("div", { key: 'ffa148a9926bb29a4b111e64c9a9a3f57f41a5a2', class: "ifx-notification__slot" }, h("slot", { key: '570ec61f92ff65c2cac316c6edcf2df46276ae51' })), this.linkText && this.linkHref &&
+            h("div", { key: 'dad0818ba2662f839a68a34e57a48e653fbae0c4', class: "ifx-notification__link" }, h("ifx-link", { key: '595e62d8ebeb1e71bbd5e963e06a7d8f6beffbfa', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '63a580c022a66faaf91f7f92ff23d61158944555', icon: "arrow-right-16" })))))));
     }
+    get el() { return this; }
     static get style() { return IfxNotificationStyle0; }
 }, [1, "ifx-notification", {
         "icon": [1],
@@ -69,4 +73,4 @@ function defineCustomElement() {
 
 export { Notification as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-30ba81f3.js.map
+//# sourceMappingURL=p-98a1a1bb.js.map

package/dist/components/p-98a1a1bb.js.map

@@ -0,0 +1 @@
+{"file":"p-98a1a1bb.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCSjB,YAAY;IALzB;;;;QAQU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA+CvC;IA7CC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,kBAAkB,CAAC,CAAA;SACnC;KACF;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Element() el;\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-notification')\n    }\n  }\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/p-a22c9102.js

@@ -0,0 +1,18 @@
+const isNestedInIfxComponent = (el) => {
+    let parent = el.parentNode;
+    while (parent) {
+        if (parent instanceof ShadowRoot) {
+            parent = parent.host;
+            continue;
+        }
+        if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx-')) {
+            return true;
+        }
+        parent = parent.parentNode;
+    }
+    return false;
+};
+
+export { isNestedInIfxComponent as i };
+
+//# sourceMappingURL=p-a22c9102.js.map

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

@@ -0,0 +1 @@
+{"file":"p-a22c9102.js","mappings":"MAAa,sBAAsB,GAAG,CAAC,EAAe;IACpD,IAAI,MAAM,GAA6B,EAAE,CAAC,UAAU,CAAC;IAErD,OAAO,MAAM,EAAE;QACb,IAAI,MAAM,YAAY,UAAU,EAAE;YAChC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;YACrB,SAAS;SACV;QAED,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;YACpF,OAAO,IAAI,CAAC;SACb;QAED,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC;AACf;;;;","names":[],"sources":["src/global/utils/dom-utils.ts"],"sourcesContent":["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};"],"version":3}

package/dist/components/{p-8760752b.js → p-afc1e484.js}

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
-import { d as defineCustomElement$3 } from './p-5be59836.js';
-import { d as defineCustomElement$2 } from './p-cf9d0421.js';
-import { d as defineCustomElement$1 } from './p-188d9cbb.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
+import { d as defineCustomElement$3 } from './p-869e8cfa.js';
+import { d as defineCustomElement$2 } from './p-bd8ef20c.js';
+import { d as defineCustomElement$1 } from './p-5b74932c.js';
 
 const paginationCss = "@charset \"UTF-8\";: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)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
 const IfxPaginationStyle0 = paginationCss;
@@ -82,7 +83,9 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.filteredItemsPerPage = items.map(item => (Object.assign(Object.assign({}, item), { label: item.label || item.value })));
     }
     componentWillLoad() {
-        trackComponent('ifx-pagination');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-pagination');
+        }
         this.calculateNumberOfPages();
         this.filterOptionsArray();
         this.updateVisiblePages();
@@ -134,7 +137,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '43bfa18e4a2ad9061042ae48ba32b193002b5a81', class: "container" }, h("div", { key: '4af46992b54594a0dbd87b272c1df2bcee6bd15c', class: "items__per-page-wrapper" }, h("div", { key: 'ed6fe0ff066e8cf42e76d8327a7d30ac30b9cc02', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'cc4a8a25d7e86633f542c1a0b92eaf11e47fe921', class: "items__per-page-field" }, h("ifx-select", { key: '718ffae6176908eb3c36f23ab219404c39cd6e80', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '18da06d6828fe9a58acc2b68ba47ffc7d322aef0', class: "items__total-wrapper" }, h("div", { key: 'e7396afc152c346c2ad5ab2d5b7d38c25c6b3486', class: "pagination" }, h("ifx-icon-button", { key: 'b22abc88bcb3312cfe85d4474ed9961b5000b1f1', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'c9e99496e86c8babe431b177f33a01907f402933' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '3944a6eaf2081a9e467891fad430eae1d1e272d6', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '120f6db1f0899a6cf1a0c8418c1712e1b50726d2', class: "container" }, h("div", { key: 'd21a7b940b7235c1d67c3ffa2bbb87463e9e0e1f', class: "items__per-page-wrapper" }, h("div", { key: '1747ac5690181c57305189fd2ace9e9651a01d28', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'a437b3410a46f1059b57ba2c9b7d3ac96a73d0b1', class: "items__per-page-field" }, h("ifx-select", { key: '6f01aaf8efecbbdeeb7180077e98dcf1851b130f', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '45379d16c815cb271eab074bfb334256d0b8293e', class: "items__total-wrapper" }, h("div", { key: '8c567a2f79cee9affcd7002fcf6808dca68945d3', class: "pagination" }, h("ifx-icon-button", { key: '681ffc9a5f5d61520176fb2e4dfe44035d566a41', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '19e46d1c5f3846f13186d587d5a01e1e2169db4f' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '65b5dfd4edde059345875a0443edb218cde7d6ac', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     get el() { return this; }
     static get style() { return IfxPaginationStyle0; }
@@ -179,4 +182,4 @@ function defineCustomElement() {
 
 export { Pagination as P, defineCustomElement as d };
 
-//# sourceMappingURL=p-8760752b.js.map
+//# sourceMappingURL=p-afc1e484.js.map

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

@@ -0,0 +1 @@
+{"file":"p-afc1e484.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label; \n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1; \n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n  componentDidLoad() {\n    this.initPagination();\n  }\n\n  updateVisiblePages() {\n    const buffer = 2;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n  \n    if (totalPages <= 5) {\n      pages = [...this.numberOfPages];\n    } else {\n      pages.push(1);\n  \n      if (current > buffer + 1) pages.push('...');\n  \n      let start = Math.max(2, current - buffer);\n      let end = Math.min(totalPages - 1, current + buffer);\n  \n      if (current <= buffer + 1) end = buffer * 2 + 1;\n      if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n  \n      for (let i = start; i <= end; i++) pages.push(i);\n  \n      if (current < totalPages - buffer) pages.push('...');\n      pages.push(totalPages);\n    }\n  \n    this.visiblePages = [...new Set(pages)];\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() { \n    const items = typeof this.itemsPerPage === 'string' ? \n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-pagination')\n    }\n    this.calculateNumberOfPages();\n    this.filterOptionsArray();\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() { \n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n    \n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"items__per-page-wrapper\">\n          <div class=\"items__per-page-label\">Results per Page</div>\n          <div class=\"items__per-page-field\">\n            <ifx-select\n              placeholder='false'\n              show-search='false'\n              value={undefined}\n              disabled={false}\n              error={false}\n              size=\"s\"\n              options={this.filteredItemsPerPage}\n              placeholder-value=\"Select\"\n            ></ifx-select>\n          </div>\n        </div>\n        \n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              onClick={() => this.changePage(this.internalPage - 1)}\n            ></ifx-icon-button>\n            \n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li \n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <a href=\"javascript:void(0)\">{page}</a>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span>...</span>\n              </li>\n            ))}\n            </ol>\n            \n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              onClick={() => this.changePage(this.internalPage + 1)}\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-b40948da.js → p-b684c707.js}

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
-import { d as defineCustomElement$2 } from './p-5be59836.js';
-import { d as defineCustomElement$1 } from './p-ea769a07.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
+import { d as defineCustomElement$2 } from './p-869e8cfa.js';
+import { d as defineCustomElement$1 } from './p-18cb44c1.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:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";
 const IfxChipStyle0 = chipCss;
@@ -264,20 +265,22 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
     }
     componentWillLoad() {
         this.syncSelectedOptionsWithProp(this.value);
-        trackComponent('ifx-chip');
+        if (!isNestedInIfxComponent(this.chip)) {
+            trackComponent('ifx-chip');
+        }
     }
     render() {
-        return (h("div", { key: '0dd2e77b55889652912ff5cdc14fd5d32b0e1219', class: 'chip' }, h("div", { key: 'ca48eabb70b8f3722e6147995e0e1bb3d66efcb3', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (h("div", { key: '0e0e72db529b3835f0b5de328f211d0768c6ddee', class: 'chip' }, h("div", { key: '2b61f018f055c39601c1024dee6e1858c01c7863', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '9b41c2355d3d25f09902a5c8f1fff63bbd68dd22', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '61c7ae5868a0ce18faabb0e9f19b643178a22828', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: '774a3bc7138e165a86f5aa470419190745321a17', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-indicator", { key: '999bca2e5bb4eca2af0a2798161d066f5492d4cf', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: 'a3318c0dd4af364eb8f42d2d8e1387fa4ff1ca70', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            h("div", { key: '5e534fd008609b0746b4ddb35c624d5621e6dda0', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: '96666800a28ba7ddb9f66c0db8e240acb5f8915e', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: '8075472143123074144db8bfce0c1a8f63619fc5', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '1fdfff4f1efcb2dd2a04e6144034161bb4379eab' }))));
+            h("div", { key: '33ef743d96c35968e93033e558585c6a942efa70', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-indicator", { key: '5f5e12b89d03af3c5333f13af1f7a4f1eff4355e', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: '77ac62cec78ededc4e01793f33cc236582ae4adf', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            h("div", { key: '22c2f37f9f073cd2e8fe31cf3095f89a49bbeca9', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: 'bf670388198eb70b9cd14823fc34efd2184489e5', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: 'd2ab296e12ff492e87c73bc34e6a2a8e0a2752e4', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '2cd227969f98e74a6e18cbab4a1bb271e0782def' }))));
     }
     get chip() { return this; }
     static get watchers() { return {
@@ -324,4 +327,4 @@ function defineCustomElement() {
 
 export { Chip as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-b40948da.js.map
+//# sourceMappingURL=p-b684c707.js.map

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

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

package/dist/components/{p-cf9d0421.js → p-bd8ef20c.js}

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$1 } from './p-5be59836.js';
+import { d as defineCustomElement$1 } from './p-869e8cfa.js';
 
 const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
 const IfxIconButtonStyle0 = iconButtonCss;
@@ -30,10 +31,12 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
             this.shape = 'round';
         }
         this.internalIcon = this.icon;
-        trackComponent('ifx-icon-button');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-icon-button');
+        }
     }
     render() {
-        return (h(Host, { key: '7c0c9e5f4e029c5295e8b9b8e310f3bd8c8c1754', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
+        return (h(Host, { key: '1ccbca77a6102927f7206f9762e44be10a17dd0f', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -98,4 +101,4 @@ function defineCustomElement() {
 
 export { IconButton as I, defineCustomElement as d };
 
-//# sourceMappingURL=p-cf9d0421.js.map
+//# sourceMappingURL=p-bd8ef20c.js.map

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

@@ -0,0 +1 @@
+{"file":"p-bd8ef20c.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w4EAAw4E,CAAC;AAC/5E,4BAAe,aAAa;;MCUf,UAAU;IANvB;;;;QAYU,WAAM,GAAW,OAAO,CAAC;QACzB,UAAK,GAAW,OAAO,CAAC;KA4FjC;IApFC,WAAW,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAGD,UAAU,CAAC,OAAe;QACxB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;KAC7B;IAGD,MAAM,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KAC/B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;SACtB;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,iBAAiB,CAAC,CAAA;SAClC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,SAAS,IACzB,IAAI,CAAC,IAAI,IACR,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAC5C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,IAEjE,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CAC5C,KAEJ,cACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CACvC,CACV,CACI,EACP;KACH;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;cACpC,WAAW;cACX,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;kBAC9B,UAAU;kBACV,SAAS,CAAC;KACjB;IAED,YAAY;QACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;YAC3B,OAAO,IAAI,CAAA;SACZ;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;;YACI,OAAO,EAAE,CAAC;KAChB;IAED,aAAa;QACX,OAAO,UAAU,CACf,iBAAiB,EACjB,OAAO,IAAI,CAAC,KAAK,EAAE,EACnB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n    this.internalIcon = this.icon;\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-icon-button')\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

package/dist/components/{p-e19718bf.js → p-c552672c.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-5be59836.js';
+import { d as defineCustomElement$1 } from './p-869e8cfa.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}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 const IfxAccordionItemStyle0 = accordionItemCss;
@@ -116,4 +116,4 @@ function defineCustomElement() {
 
 export { IfxAccordionItem as I, defineCustomElement as d };
 
-//# sourceMappingURL=p-e19718bf.js.map
+//# sourceMappingURL=p-c552672c.js.map

package/dist/components/{p-e19718bf.js.map → p-c552672c.js.map}

@@ -1 +1 @@
-{"file":"p-e19718bf.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  //transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n\n     this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n      if (this.contentEl) {\n        this.attachResizeObserver();\n      }\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.contentEl) {\n      if (this.internalOpen) {\n      this.contentEl.style.height = 'auto'; \n      const updatedHeight = this.contentEl.scrollHeight; \n      this.contentEl.style.height = `${updatedHeight}px`; \n        this.contentEl.style.overflow = 'visible';\n      } else {\n        this.contentEl.style.height = '0';\n        this.contentEl.style.overflow = 'hidden';\n      }\n    }\n  }\n\n  attachResizeObserver() { \n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl); \n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-c552672c.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  //transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n\n     this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n      if (this.contentEl) {\n        this.attachResizeObserver();\n      }\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.contentEl) {\n      if (this.internalOpen) {\n      this.contentEl.style.height = 'auto'; \n      const updatedHeight = this.contentEl.scrollHeight; \n      this.contentEl.style.height = `${updatedHeight}px`; \n        this.contentEl.style.overflow = 'visible';\n      } else {\n        this.contentEl.style.height = '0';\n        this.contentEl.style.overflow = 'hidden';\n      }\n    }\n  }\n\n  attachResizeObserver() { \n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl); \n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-eb3a17e1.js → p-c7aa770d.js}

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-bb1128ae.js';
-import { d as defineCustomElement$3 } from './p-c3853636.js';
+import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
+import { d as defineCustomElement$3 } from './p-fce8d48f.js';
 import { d as defineCustomElement$2 } from './p-68016aea.js';
-import { d as defineCustomElement$1 } from './p-5be59836.js';
+import { d as defineCustomElement$1 } from './p-869e8cfa.js';
 
 const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:1000}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}";
 const IfxMultiselectStyle0 = multiselectCss;
@@ -201,7 +202,9 @@ const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H
         // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
     }
     componentWillLoad() {
-        trackComponent('ifx-multiselect');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-multiselect');
+        }
         this.loadInitialOptions();
         this.filteredOptions = [...this.loadedOptions];
     }
@@ -597,4 +600,4 @@ function defineCustomElement() {
 
 export { Multiselect as M, defineCustomElement as d };
 
-//# sourceMappingURL=p-eb3a17e1.js.map
+//# sourceMappingURL=p-c7aa770d.js.map