@infineon/infineon-design-system-stencil 35.5.0--canary.1904.c3cb7254ae476891ebdb18f1579f66379ad24854.0 → 36.0.0--canary.1926.3b76d5defe8b9a743d9ec0dd5e6879c04e8055c0.0

package/dist/components/ifx-breadcrumb.js

@@ -1,6 +1,4 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 
 const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const IfxBreadcrumbStyle0 = breadcrumbCss;
@@ -11,11 +9,6 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
         this.__registerHost();
         this.__attachShadow();
     }
-    componentWillLoad() {
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-breadcrumb');
-        }
-    }
     componentDidLoad() {
         const element = this.el.shadowRoot.firstChild;
         this.validateBreadcrumbItemStructure(element);
@@ -42,7 +35,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
         }
     }
     render() {
-        return (h("nav", { key: '1e5111c6a97987cf26f17a4ef391e805595d5f48', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '241741cbdacd345373a5f35ee8300e19cd1291de', class: "breadcrumb" }, h("slot", { key: '2a14681b1293570bf9f6ba5e78cf77bc51390695' }))));
+        return (h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbStyle0; }

package/dist/components/ifx-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"ifx-breadcrumb.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,sPAAsP,CAAC;AAC7Q,4BAAe,aAAa;;MCQf,UAAU;;;;;;IAGrB,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,gBAAgB,CAAC,CAAA;SACjC;KACF;IAED,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-breadcrumb')\n    }\n  }\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sPAAsP,CAAC;AAC7Q,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-button.js

@@ -1,4 +1,4 @@
-import { B as Button, d as defineCustomElement$1 } from './p-816b2612.js';
+import { B as Button, d as defineCustomElement$1 } from './p-17df0350.js';
 
 const IfxButton = Button;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-card.js

@@ -1,6 +1,4 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 
 const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
 const IfxCardStyle0 = cardCss;
@@ -42,20 +40,17 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
     }
     componentWillLoad() {
         this.handleComponentAdjustment();
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-card');
-        }
     }
     componentWillUpdate() {
         this.handleComponentAdjustment();
     }
     render() {
-        return (h(Host, { key: '40866bf05f61939e47c3bca806213981ae34d0cd' }, h("div", { key: '77f1848385bfe54f1fc5aec2476064d6f598c788', "aria-label": this.ariaLabel, class: `card 
+        return (h(Host, { key: 'aac222aafe681f2024929060a46f5b044b65e772' }, h("div", { key: '9c2f93b40bad857af634c16a9a0459763fada288', "aria-label": this.ariaLabel, class: `card 
           ${this.noBtns ? 'noBtns' : ""}
           ${this.direction} 
           ${this.alignment}`, role: "region" }, this.direction === 'horizontal' &&
-            h("div", { key: '54b1cb826c57dcc7a2d3b6401fa67c3ef448239d', class: "horizontal" }, h("a", { key: '64f25ede6a07526dd9e3125d79a3ffa3de98f46a', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'b7182e7b5f57091a144ce7d940aac1738cf2a4bc', name: "img" })), h("div", { key: '806f501ed32d383015c50aaaa87f533d5703cf63', class: 'lower__body-wrapper' }, h("a", { key: '8ab42796026d5fc313b35eefde304cf4b1df389a', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: '126f437230cabf1d5f884eea7b3b24a406a63c5c' })), h("div", { key: '79abc91a59ff5db1a1bbd6c93faa86e676166fa7' }, h("slot", { key: '8365891d23272c176a8e9ff73e1a9f6f40aa6dd6', name: 'buttons' })))), this.direction === 'vertical' &&
-            h("div", { key: '08e186383115f84efef8bdfacab51bd7467c4f2c', class: "vertical" }, h("a", { key: '796d9fa05184e461d164a9a9e1168b067bd56cbc', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '1f6693dc782f9b0a91fac1d08170b96f73b48028', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '5e05e641395358d9afce4ce8702557a2d605f33d', name: "img" })), h("div", { key: '2ca3b64bb72c17bc31aa33d950d0b9d777af9173', class: 'upper-body' }, h("slot", { key: 'fcced3daa1f072ccdab923c4a43d23e777a11d7f' }))), h("div", { key: 'd145272156a3526f38034cf9bbea7249721d28b0', class: 'lower__body-wrapper' }, h("slot", { key: '250e075bbe73ef3fa61b2b2617ab18c5e1311bc8', name: 'buttons' }))))));
+            h("div", { key: 'a9ecc08c4a5f7c2f7830256e289f485f6422160a', class: "horizontal" }, h("a", { key: '09b1ebffcb703fe8c72224575dd5fe172b741533', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: '1e7bf2700feecf9e35a2aed787f476317252413e', name: "img" })), h("div", { key: '15dda4cdf697bd72673fecc3ad939d30136ca82f', class: 'lower__body-wrapper' }, h("a", { key: '6a20bfbed8fb327cb8f2df9caa7197966362a98f', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'a8d8aa70a1ec0e06f6dcea7e34cab24563465d50' })), h("div", { key: '70697a5b69ba9588cd6d81fcdf47cb59d3537461' }, h("slot", { key: '186152dfa577d47b1edf242a27044de3470f8ae5', name: 'buttons' })))), this.direction === 'vertical' &&
+            h("div", { key: '7e213f66b9c1ce9d0ab67623a3c125783dd0035b', class: "vertical" }, h("a", { key: '3431f72726f0e0019f3dd67fb3290c7003c22ed4', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '1ec3dcd109dda21e13aa45ca679159f5b7b6e91d', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '64a6aae3e828e1741fd55d6fc8b53de5fbf5b3b9', name: "img" })), h("div", { key: '128d6712a7792d33ad77c3761aa3a9c4702cbd49', class: 'upper-body' }, h("slot", { key: '8e8ea25bfb8409692b0579393045a0f5e117e0f3' }))), h("div", { key: '5989e1234a290faf4e1676dc53a5c009eb1e35b4', class: 'lower__body-wrapper' }, h("slot", { key: 'c06013bd5b0db5b8b40251bf6a2960d60205f2a0', name: 'buttons' }))))));
     }
     get el() { return this; }
     static get style() { return IfxCardStyle0; }

package/dist/components/ifx-card.js.map

@@ -1 +1 @@
-{"file":"ifx-card.js","mappings":"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","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, 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-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-card')\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.ariaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,w0DAAw0D,CAAC;AACz1D,sBAAe,OAAO;;MCQT,IAAI;IANjB;;;;QASU,cAAS,GAA8B,UAAU,CAAC;QAGlD,SAAI,GAAW,EAAE,CAAC;QACjB,iBAAY,GAAW,EAAE,CAAA;QAC1B,WAAM,GAAW,OAAO,CAAC;KAqFlC;IAjFC,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;KAC9B;IAED,yBAAyB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QAErD,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;;YAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAE1B,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;;YAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAE3B,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC/B;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KACtC;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;KAC9B;IAGD,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAEH,MAAM;QACF,QACE,EAAC,IAAI,uDACH,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EACpC;YACE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,SAAS,EAAE,EAEpB,IAAI,EAAC,QAAQ,IAEV,IAAI,CAAC,SAAS,KAAK,YAAY;YAC9B,4DAAK,KAAK,EAAC,YAAY,IACrB,0DAAG,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IAClH,6DAAM,IAAI,EAAC,KAAK,GAAG,CACjB,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IACrF,8DAAQ,CACN,EACJ,8DACE,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,EAEP,IAAI,CAAC,SAAS,KAAK,UAAU;YAC5B,4DAAK,KAAK,EAAC,UAAU,IACnB,0DAAG,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACnH,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,EAAE,IACnD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EAEN,4DAAK,KAAK,EAAC,YAAY,IACrB,8DAAQ,CACJ,CACJ,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.ariaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-checkbox-group.js

@@ -1,7 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-4fc475c9.js';
+import { d as defineCustomElement$2 } from './p-9a258534.js';
 
 const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem \"Source Sans 3\";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem \"Source Sans 3\";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
 const IfxCheckboxGroupStyle0 = checkboxGroupCss;
@@ -35,9 +33,6 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
     }
     componentWillLoad() {
         this.initializeState();
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-checkbox-group');
-        }
     }
     initializeState() {
         this.errorStates.clear();
@@ -53,7 +48,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: 'aff89833ebe564e6e0d90e03d637262128fc4870', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '50e14d7cd761c7f4953ffe14e5d9499afdc0cdbc', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '483906c7502d263f70622c89650753d163490af4', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: '2f455a4fa40d089e1aafab0b669aa4f4ded80be0', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'eb6f16bf53e13620681c87eb7cb4062a37abd068', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '00ec08507a2ef1ff8e893b6c8b9aa917a7735224', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-checkbox-group.js.map

@@ -1 +1 @@
-{"file":"ifx-checkbox-group.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,00BAA00B,CAAC;AACp2B,+BAAe,gBAAgB;;MCUlB,aAAa;IAP1B;;;;QAQU,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QA2BpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAiCH;IA3DC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,oBAAoB,CAAC,CAAA;SACrC;KACF;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClF,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-checkbox-group')\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-checkbox-group.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,00BAA00B,CAAC;AACp2B,+BAAe,gBAAgB;;MCQlB,aAAa;IAP1B;;;;QAQU,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QAwBpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAiCH;IAxDC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClF,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-checkbox.js

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-13126216.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-f5675de2.js';
 
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip-item.js

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-ee0f87ac.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-f38c3009.js';
 
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-0905733d.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-e4c0ba88.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-content-switcher.js

@@ -1,6 +1,4 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 
 const contentSwitcherCss = ".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";
 const IfxContentSwitcherStyle0 = contentSwitcherCss;
@@ -22,9 +20,6 @@ const ContentSwitcher = /*@__PURE__*/ proxyCustomElement(class ContentSwitcher e
         this.initializeDividers();
         this.addEventListeners();
         this.ensureSingleSelectedItem();
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-content-switcher');
-        }
     }
     disconnectedCallback() {
         this.removeEventListeners();
@@ -163,7 +158,7 @@ const ContentSwitcher = /*@__PURE__*/ proxyCustomElement(class ContentSwitcher e
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: 'b5344dc79f7f74428ea8ac130d6bfb0048abfdf4' }, h("div", { key: 'ecf87997eaa59421567f286cb8547fd55d386b19', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'ef369e6dbd77115dc39eab533a80ee89e1d3505a' }))));
+        return (h(Host, { key: '9b3bb93d639c01fa5e006228f44e28578c450e10' }, h("div", { key: 'eab613a4ba9055f73e96fd74e42fe3c0787418a8', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '0578016f80517baeb8f6d19db4661046c6c43eea' }))));
     }
     get el() { return this; }
     static get style() { return IfxContentSwitcherStyle0; }

package/dist/components/ifx-content-switcher.js.map

@@ -1 +1 @@
-{"file":"ifx-content-switcher.js","mappings":"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","names":[],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    height: tokens.$ifxSize450;\n    width: fit-content;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & ::slotted(ifx-content-switcher-item) {\n        position: relative;\n        // top: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:first-child) {\n        left: -1px;\n        margin-right: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:last-child) {\n        right: -1px;\n        margin-left: -1px;\n    }\n\n    // Dividers\n    & ::slotted(.ifx-content-switcher-divider) {\n        width: tokens.$ifxSize12;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorEngineering400;\n        margin: 0px 1px;\n        visibility: visible;\n    }\n\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\n        visibility: hidden;\n    }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n  selected: boolean;\n};\n\n@Component({\n  tag: 'ifx-content-switcher',\n  styleUrl: './content-switcher.scss',\n  shadow: true,\n})\nexport class ContentSwitcher {\n  @Element() el: HTMLElement;\n\n  @State() items: Element[];\n  @State() activeIndex = -1;\n  @State() hoverIndex: number = -1;\n  @State() focusIndex: number = -1;\n\n  @State() dividers: Element[] = Array();\n\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n  componentWillLoad() {\n    this.items = Array.from(this.el.children);\n    this.initializeDividers();\n    this.addEventListeners();\n    this.ensureSingleSelectedItem();\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-content-switcher')\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /**\n   * Initialize the dividers between items.\n   */\n  initializeDividers() {\n    this.items.forEach((item, index) => {\n      if (index < this.items.length - 1) {\n        const divider = document.createElement('div');\n        divider.classList.add('ifx-content-switcher-divider');\n        item.after(divider);\n        this.dividers.push(divider);\n      }\n    });\n  }\n\n  /**\n   * Add event listeners for each item.\n   */\n  addEventListeners() {\n    this.items.forEach((item, index) => {\n      const handlers = {\n        click: () => this.selectItem(index),\n        mouseenter: () => this.handleHover(index, true),\n        mouseleave: () => this.handleHover(index, false),\n        focus: () => this.handleFocus(index, true),\n        blur: () => this.handleFocus(index, false),\n      };\n\n      Object.keys(handlers).forEach(event => {\n        item.addEventListener(event, handlers[event]);\n      });\n\n      this.eventHandlers.set(item, handlers);\n    });\n  }\n\n  /**\n   * Remove all event listeners.\n   */\n  removeEventListeners() {\n    this.eventHandlers.forEach((handlers, item) => {\n      Object.keys(handlers).forEach(event => {\n        item.removeEventListener(event, handlers[event]);\n      });\n    });\n    this.eventHandlers.clear();\n  }\n\n  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\n      if (isSelected) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n          (item as ContentSwitcherItem).selected = false;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is hovered.\n   */\n  handleHover(index: number, isActive: boolean) {\n    this.hoverIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is focused.\n   */\n  handleFocus(index: number, isActive: boolean) {\n    this.focusIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Update visibility of dividers adjacent to a specific item.\n   * @param itemIndex - Index of the item.\n   */\n  updateDividersOfItem(itemIndex: number) {\n    if (itemIndex < this.items.length - 1) {\n      this.updateDividerVisibility(itemIndex);\n    }\n    if (itemIndex > 0) {\n      this.updateDividerVisibility(itemIndex - 1);\n    }\n  }\n\n  /**\n   * Update visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   */\n  updateDividerVisibility(dividerIndex: number) {\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n  }\n\n  /**\n   * Set the visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   * @param hidden - Whether the divider should be hidden.\n   */\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\n    if (this.dividers[dividerIndex]) {\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n    }\n  }\n\n  /**\n   * Select a specific item.\n   * @param itemIndex - Index of the item to be selected.\n   */\n  selectItem(itemIndex: number) {\n    if (itemIndex === this.activeIndex) return;\n    const oldIndex = this.activeIndex;\n    if (oldIndex >= 0) {\n      this.items[oldIndex].removeAttribute('selected');\n    }\n\n    this.activeIndex = itemIndex;\n    this.items[itemIndex].setAttribute('selected', 'true');\n\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n    this.updateDividersOfItem(oldIndex);\n    this.updateDividersOfItem(itemIndex);\n  }\n\n  /**\n   * Get the value property of the item at a specific index.\n   * Falls back to the index if no value is set.\n   * \n   * @param index - Index of the item. \n   * @returns The value of the item.\n   */\n  getValueOfItem(index: number): string {\n    if (this.items[index] == null) return index.toLocaleString();\n    return this.items[index].getAttribute('value') || index.toLocaleString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ifx-content-switcher\" role=\"group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-content-switcher.js","mappings":"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","names":[],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    height: tokens.$ifxSize450;\n    width: fit-content;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & ::slotted(ifx-content-switcher-item) {\n        position: relative;\n        // top: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:first-child) {\n        left: -1px;\n        margin-right: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:last-child) {\n        right: -1px;\n        margin-left: -1px;\n    }\n\n    // Dividers\n    & ::slotted(.ifx-content-switcher-divider) {\n        width: tokens.$ifxSize12;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorEngineering400;\n        margin: 0px 1px;\n        visibility: visible;\n    }\n\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\n        visibility: hidden;\n    }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n  selected: boolean;\n};\n\n@Component({\n  tag: 'ifx-content-switcher',\n  styleUrl: './content-switcher.scss',\n  shadow: true,\n})\nexport class ContentSwitcher {\n  @Element() el: HTMLElement;\n\n  @State() items: Element[];\n  @State() activeIndex = -1;\n  @State() hoverIndex: number = -1;\n  @State() focusIndex: number = -1;\n\n  @State() dividers: Element[] = Array();\n\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n  componentWillLoad() {\n    this.items = Array.from(this.el.children);\n    this.initializeDividers();\n    this.addEventListeners();\n    this.ensureSingleSelectedItem();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /**\n   * Initialize the dividers between items.\n   */\n  initializeDividers() {\n    this.items.forEach((item, index) => {\n      if (index < this.items.length - 1) {\n        const divider = document.createElement('div');\n        divider.classList.add('ifx-content-switcher-divider');\n        item.after(divider);\n        this.dividers.push(divider);\n      }\n    });\n  }\n\n  /**\n   * Add event listeners for each item.\n   */\n  addEventListeners() {\n    this.items.forEach((item, index) => {\n      const handlers = {\n        click: () => this.selectItem(index),\n        mouseenter: () => this.handleHover(index, true),\n        mouseleave: () => this.handleHover(index, false),\n        focus: () => this.handleFocus(index, true),\n        blur: () => this.handleFocus(index, false),\n      };\n\n      Object.keys(handlers).forEach(event => {\n        item.addEventListener(event, handlers[event]);\n      });\n\n      this.eventHandlers.set(item, handlers);\n    });\n  }\n\n  /**\n   * Remove all event listeners.\n   */\n  removeEventListeners() {\n    this.eventHandlers.forEach((handlers, item) => {\n      Object.keys(handlers).forEach(event => {\n        item.removeEventListener(event, handlers[event]);\n      });\n    });\n    this.eventHandlers.clear();\n  }\n\n  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\n      if (isSelected) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n          (item as ContentSwitcherItem).selected = false;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is hovered.\n   */\n  handleHover(index: number, isActive: boolean) {\n    this.hoverIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is focused.\n   */\n  handleFocus(index: number, isActive: boolean) {\n    this.focusIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Update visibility of dividers adjacent to a specific item.\n   * @param itemIndex - Index of the item.\n   */\n  updateDividersOfItem(itemIndex: number) {\n    if (itemIndex < this.items.length - 1) {\n      this.updateDividerVisibility(itemIndex);\n    }\n    if (itemIndex > 0) {\n      this.updateDividerVisibility(itemIndex - 1);\n    }\n  }\n\n  /**\n   * Update visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   */\n  updateDividerVisibility(dividerIndex: number) {\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n  }\n\n  /**\n   * Set the visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   * @param hidden - Whether the divider should be hidden.\n   */\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\n    if (this.dividers[dividerIndex]) {\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n    }\n  }\n\n  /**\n   * Select a specific item.\n   * @param itemIndex - Index of the item to be selected.\n   */\n  selectItem(itemIndex: number) {\n    if (itemIndex === this.activeIndex) return;\n    const oldIndex = this.activeIndex;\n    if (oldIndex >= 0) {\n      this.items[oldIndex].removeAttribute('selected');\n    }\n\n    this.activeIndex = itemIndex;\n    this.items[itemIndex].setAttribute('selected', 'true');\n\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n    this.updateDividersOfItem(oldIndex);\n    this.updateDividersOfItem(itemIndex);\n  }\n\n  /**\n   * Get the value property of the item at a specific index.\n   * Falls back to the index if no value is set.\n   * \n   * @param index - Index of the item. \n   * @returns The value of the item.\n   */\n  getValueOfItem(index: number): string {\n    if (this.items[index] == null) return index.toLocaleString();\n    return this.items[index].getAttribute('value') || index.toLocaleString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ifx-content-switcher\" role=\"group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-date-picker.js

@@ -1,7 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-4fc475c9.js';
+import { d as defineCustomElement$2 } from './p-9a258534.js';
 
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
 const IfxDatePickerStyle0 = datePickerCss;
@@ -85,11 +83,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
             input.classList.remove('firefox__classes');
         }
     }
-    componentWillLoad() {
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-date-picker');
-        }
-    }
     componentDidLoad() {
         this.setFireFoxClasses();
     }
@@ -103,8 +96,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '611b9da2e9922cc5221c57c503be407dd185013c', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '26d63c058e9d9d1d3a346979bb124b1ae9c4b19c', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '65fccda39bee8d6d81cec71b7371b76ffcdf7aa8', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '9e8c690a63e83334b5f4084991336bd9f4268853', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'e2dcec3d13663bf52e9c1756f95d527aef6b9a99', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '24b059bb6580122073ff8886c43d37f531e39958', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '9804677d28d83002dec58ebf3c294d51ae738169', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'c5b2cee9eedc206e3f91cc0a0cb795309aa441fa', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: '4fd623e58f74d41cc7871b4971b4bd3806f310b2', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '75f325296e0733fbe2021718b580ed1049248ffa', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '02de17b70b3d0af8d59cb2d13ec7b17ea939f2db', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '7bf28947be09f941fb0bf4972e0c8c105366488b', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'b2413ef548765a108c54c9b338c7274dde36b3f6', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '87880933e1ec373376f2ff4dde170ad29bd326bf', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '81bd4154b84f9c1bb48fc6ac6574a915aca0dfce', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '371a538db6b4c5e119e436b9dfccff1c5ad35cf1', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-date-picker.js.map

@@ -1 +1 @@
-{"file":"ifx-date-picker.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n\n    & .asterisk { \n      display: none;\n      &.required {\n        display: inline;\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n \n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-date-picker')\n    }\n  }\n\n  componentDidLoad() { \n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"version":3}
+{"file":"ifx-date-picker.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n\n    & .asterisk { \n      display: none;\n      &.required {\n        display: inline;\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentDidLoad() { \n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"version":3}

package/dist/components/ifx-download.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-9ea9e274.js';
+import { d as defineCustomElement$2 } from './p-53d4339c.js';
 
 const downloadCss = "";
 const IfxDownloadStyle0 = downloadCss;

package/dist/components/ifx-dropdown-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-4fc475c9.js';
+import { d as defineCustomElement$2 } from './p-9a258534.js';
 
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;

package/dist/components/ifx-dropdown-separator.js

@@ -1,4 +1,32 @@
-import { D as DropdownSeparator, d as defineCustomElement$1 } from './p-68016aea.js';
+import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
+
+const dropdownSeparatorCss = ".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";
+const IfxDropdownSeparatorStyle0 = dropdownSeparatorCss;
+
+const DropdownSeparator = /*@__PURE__*/ proxyCustomElement(class DropdownSeparator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("div", { key: 'f842407a72dcfa69c2e05b821bab2f9ec3e2702f', class: 'dropdown-separator' }));
+    }
+    static get style() { return IfxDropdownSeparatorStyle0; }
+}, [1, "ifx-dropdown-separator"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-dropdown-separator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-dropdown-separator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DropdownSeparator);
+            }
+            break;
+    } });
+}
 
 const IfxDropdownSeparator = DropdownSeparator;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-dropdown-separator.js.map

@@ -1 +1 @@
-{"file":"ifx-dropdown-separator.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"ifx-dropdown-separator.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0EAA0E,CAAC;AACxG,mCAAe,oBAAoB;;MCQtB,iBAAiB;;;;;;IAC5B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACvC;KACF;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.dropdown-separator {\n  height: 1px;\n  background-color: tokens.$ifxColorEngineering200;\n  margin: 8px 16px;\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-separator',\n  styleUrl: 'dropdown-separator.scss',\n  shadow: true\n})\n\nexport class DropdownSeparator {\n  render() {\n    return (\n      <div class='dropdown-separator'></div>\n    )\n  }\n}"],"version":3}

package/dist/components/ifx-dropdown-trigger-button.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$3 } from './p-816b2612.js';
-import { d as defineCustomElement$2 } from './p-4fc475c9.js';
+import { d as defineCustomElement$3 } from './p-17df0350.js';
+import { d as defineCustomElement$2 } from './p-9a258534.js';
 
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;

package/dist/components/ifx-dropdown.js

@@ -1,6 +1,4 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as createPopper } from './p-e459974a.js';
 
 const dropdownCss = ":host{display:inline-block}";
@@ -28,9 +26,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         //maybe not needed
         this.updateSlotContent();
         this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-dropdown');
-        }
     }
     watchHandlerIsOpen(newValue, oldValue) {
         if (newValue !== oldValue && newValue !== this.internalIsOpen) {
@@ -142,7 +137,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         }
     }
     render() {
-        return (h("div", { key: 'dcd149aa4b948818dae0df02014ee38facedce92', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '7aa8982632181090c05b9bf209995f7d0de9257a' })));
+        return (h("div", { key: '69f27816cb5e4907952939cde18bbdaa5e7fce56', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: 'cd37ec9b162b6533f2a865f937976412b4d57e13' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-dropdown.js.map

@@ -1 +1 @@
-{"file":"ifx-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-dropdown')\n    }\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"version":3}
+{"file":"ifx-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"version":3}