@infineon/infineon-design-system-stencil 35.4.3--canary.1941.c9a5e850bd5cf754cf4864a37f2bcf38ec080efe.0 → 35.5.0--canary.1904.0d4b003852c0b770dd57c6a1f84fbed5c045769e.0

package/dist/esm/ifx-status.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-status.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,i8FAAi8F,CAAC;AACp9F,wBAAe,SAAS;;MCQX,MAAM;IANnB;;QAQU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAW,YAAY,CAAC;KActC;IAXC,MAAM;;QACJ,MAAM,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QACtE,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,oBAAoB,cAAc,EAAE,GAAG,qBAAqB,CAAC;QAElG,QACE,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,IAChF,6DAAM,KAAK,EAAE,OAAO,cAAc,EAAE,GAAS,EAC7C,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,EACN;KACH;;;;;;","names":[],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-status.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,i8FAAi8F,CAAC;AACp9F,wBAAe,SAAS;;MCSX,MAAM;IANnB;;QASU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAW,YAAY,CAAC;KAmBtC;IAjBC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,YAAY,CAAC,CAAA;SAC7B;KACF;IAED,MAAM;;QACJ,MAAM,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QACtE,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,oBAAoB,cAAc,EAAE,GAAG,qBAAqB,CAAC;QAElG,QACE,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,IAChF,6DAAM,KAAK,EAAE,OAAO,cAAc,EAAE,GAAS,EAC7C,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,EACN;KACH;;;;;;;","names":[],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Element() el;\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-status')\n    }\n  }\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/esm/ifx-stepper.entry.js

@@ -1,4 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
+import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 
 const stepperCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem \"Source Sans 3\";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}";
 const IfxStepperStyle0 = stepperCss;
@@ -113,6 +115,9 @@ const Stepper = class {
         this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));
     }
     componentWillLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-stepper');
+        }
         this.addStepIdsToStepsAndCountSteps();
         this.setInitialActiveStep();
         this.setStepsBeforeActiveToComplete();
@@ -124,10 +129,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '7fb2d127bfaa410d74765766863f9a45c18a5f8c', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (h("div", { key: '13e2b254d6a78e4af02361ae8c6fe31d460b24ed', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: '82be02eb60fee5876779bb46447c5f6adbcf80ea', class: 'stepper-progress' }, h("div", { key: '6e2caf65433902195e4caa0baf9e43e1b99e78ba', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '8db00c33950fdc8d48f314b35cfa186f388d9dc2', class: `stepper-wrapper` }, h("slot", { key: '6b5213c91d8717886311992a0ff28f066ac9a3fe' }))));
+            h("div", { key: '48b7f500417a2ebe80697f708649e0a59a1e46d1', class: 'stepper-progress' }, h("div", { key: '8340e8437af1c1353068da7c62e53cd886dfc1e0', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '4c047851dbae26f52fd53e46d95adfc2c42c8484', class: `stepper-wrapper` }, h("slot", { key: '04dadf43b9f1b3af6d16adf655bd427726ca262a' }))));
     }
     ;
     componentDidRender() {

package/dist/esm/ifx-stepper.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-stepper.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,w6BAAw6B,CAAC;AAC57B,yBAAe,UAAU;;MCiBZ,OAAO;IANpB;;;QAW6B,eAAU,GAAW,CAAC,CAAC;QACxC,sBAAiB,GAAsB,MAAM,CAAC;QAC9C,mBAAc,GAAa,KAAK,CAAC;QACjC,YAAO,GAAwC,SAAS,CAAC;QAIxD,oBAAe,GAAY,IAAI,CAAC;QAChC,mBAAc,GAAY,KAAK,CAAC;KAwJ5C;IArJG,YAAY,CAAC,KAAkB;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,GAAC,CAAC,CAAC,CAAC;QACpE,IAAI,kBAAkB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;YACpD,kBAAkB,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SACpD;KACJ;IAGD,gBAAgB,CAAC,OAAe,EAAE,OAAe;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,OAAO;SACV;;QAED,IAAG,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;gBAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;aACxC;iBAAM;;gBAEH,IAAI,OAAO,GAAG,OAAO,EAAE;oBACnB,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;;oBAE1C,IAAI,CAAC,GAAG,CAAC,EAAE;wBACP,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;qBAC7B;yBAAM;wBACH,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;qBACvB;iBACJ;;qBAEI;oBACD,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;oBACxD,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;wBACrB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;qBAC7B;yBAAM;wBACH,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;qBACvB;iBACJ;aACJ;SACJ;KACJ;IAED,aAAa,CAAC,UAAkB,EAAE,kBAA0B;QACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,UAAU;YACvC,kBAAkB,EAAE,kBAAkB;YACtC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc,EAAE,IAAI,CAAC,cAAc;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;IAED,QAAQ;QACJ,MAAM,KAAK,GAAmC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACnF,OAAO,KAAK,CAAC;KAChB;IAGD,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;KAClC;IAGD,aAAa,CAAC,MAAc,EAAE,aAAsB,KAAK;QACrD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;KAC5B;IAED,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAE,CAAC,IAAI,EAAE,MAAM;YACxB,IAAI,MAAM,GAAC,CAAC,GAAG,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxD,CAAC,CAAC;KACN;IAED,YAAY;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,MAAM,YAAY,GAAiB;gBAC/B,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;gBAC1E,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjG,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;aAC/C,CAAC;YACF,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC;SACxC;KACJ;IAED,oBAAoB;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;KACpH;IAGD,iBAAiB;QACb,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAED,gBAAgB;QACZ,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,mBAAmB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,MAAM;QACF,QACI,0EAAkB,WAAW,EACzB,IAAI,EAAG,YAAY,EACnB,KAAK,EAAI,WAAW,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,UAAU,GAAC,IAAI,CAAC,iBAAiB,GAAE,EAAE,EAAE;;QAG9K,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;YAC3B,4DAAK,KAAK,EAAG,kBAAkB,IAC3B,4DAAK,KAAK,EAAG,iBAAiB,IACzB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,CACpE,CACJ,EAIV,4DAAK,KAAK,EAAI,iBAAiB,IAC3B,8DAAQ,CACN,CACJ,EACR;KACL;;IAED,kBAAkB;;QAEd,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;YAC3B,MAAM,WAAW,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YACvF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;SAC5F;KACJ;;;;;;;;;;","names":[],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"version":3}
+{"file":"ifx-stepper.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,w6BAAw6B,CAAC;AAC57B,yBAAe,UAAU;;MCkBZ,OAAO;IANpB;;;QAW6B,eAAU,GAAW,CAAC,CAAC;QACxC,sBAAiB,GAAsB,MAAM,CAAC;QAC9C,mBAAc,GAAa,KAAK,CAAC;QACjC,YAAO,GAAwC,SAAS,CAAC;QAIxD,oBAAe,GAAY,IAAI,CAAC;QAChC,mBAAc,GAAY,KAAK,CAAC;KA2J5C;IAxJG,YAAY,CAAC,KAAkB;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,GAAC,CAAC,CAAC,CAAC;QACpE,IAAI,kBAAkB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;YACpD,kBAAkB,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SACpD;KACJ;IAGD,gBAAgB,CAAC,OAAe,EAAE,OAAe;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,OAAO;SACV;;QAED,IAAG,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;gBAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;aACxC;iBAAM;;gBAEH,IAAI,OAAO,GAAG,OAAO,EAAE;oBACnB,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;;oBAE1C,IAAI,CAAC,GAAG,CAAC,EAAE;wBACP,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;qBAC7B;yBAAM;wBACH,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;qBACvB;iBACJ;;qBAEI;oBACD,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;oBACxD,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;wBACrB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;qBAC7B;yBAAM;wBACH,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;qBACvB;iBACJ;aACJ;SACJ;KACJ;IAED,aAAa,CAAC,UAAkB,EAAE,kBAA0B;QACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,UAAU;YACvC,kBAAkB,EAAE,kBAAkB;YACtC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc,EAAE,IAAI,CAAC,cAAc;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;IAED,QAAQ;QACJ,MAAM,KAAK,GAAmC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACnF,OAAO,KAAK,CAAC;KAChB;IAGD,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;KAClC;IAGD,aAAa,CAAC,MAAc,EAAE,aAAsB,KAAK;QACrD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;KAC5B;IAED,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAE,CAAC,IAAI,EAAE,MAAM;YACxB,IAAI,MAAM,GAAC,CAAC,GAAG,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxD,CAAC,CAAC;KACN;IAED,YAAY;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,MAAM,YAAY,GAAiB;gBAC/B,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;gBAC1E,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjG,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;aAC/C,CAAC;YACF,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC;SACxC;KACJ;IAED,oBAAoB;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;KACpH;IAGD,iBAAiB;QACb,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACjC,cAAc,CAAC,aAAa,CAAC,CAAA;SAChC;QACD,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAED,gBAAgB;QACZ,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,mBAAmB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,MAAM;QACF,QACI,0EAAkB,WAAW,EACzB,IAAI,EAAG,YAAY,EACnB,KAAK,EAAI,WAAW,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,UAAU,GAAC,IAAI,CAAC,iBAAiB,GAAE,EAAE,EAAE;;QAG9K,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;YAC3B,4DAAK,KAAK,EAAG,kBAAkB,IAC3B,4DAAK,KAAK,EAAG,iBAAiB,IACzB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,CACpE,CACJ,EAIV,4DAAK,KAAK,EAAI,iBAAiB,IAC3B,8DAAQ,CACN,CACJ,EACR;KACL;;IAED,kBAAkB;;QAEd,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;YAC3B,MAAM,WAAW,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YACvF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;SAC5F;KACJ;;;;;;;;;;","names":[],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            trackComponent('ifx-stepper')\n        }\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"version":3}

package/dist/esm/ifx-switch.entry.js

@@ -1,4 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
+import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 
 const switchCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";
 const IfxSwitchStyle0 = switchCss;
@@ -23,6 +25,9 @@ const Switch = class {
         return this.internalChecked;
     }
     componentWillLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-switch');
+        }
         this.internalChecked = this.checked;
     }
     toggleLabelGap() {
@@ -76,7 +81,7 @@ const Switch = class {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '257114f827ae403a93e9ae36a64e4bc0377ca9dd', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '9e5e9bf3a3864060ba90f81e8a4b6e00c31f96ab', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'a6457b4ec80ea8239b97154c43e7e80dd741f5be', class: "switch__checkbox-wrapper" }, h("input", { key: '4184498a110971709643b4622a302d7530f4bb54', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '4a347f9e0e505bbe813f2095f0d4d87a4d2c3635', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '1c1ae6991a58db2d1a6fa2ec197d53997e887705', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ac603b0936b795b8d35cbeb087f2c875103af494', htmlFor: "switch" }, h("slot", { key: 'c95fd094cfdee769c8561ca5f6b3651c42870b14', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '368900f5901207bf6ed9dc294940ee895f80de02', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'dfbab5f622c50f88382c8befd431230dd463d331', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'a2babe514da4d48c407d7f9da26f076c3f5b5d50', class: "switch__checkbox-wrapper" }, h("input", { key: '13edfa115a2e8fdc87dc5b7d19d45bf6720a4fdc', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '77b8d52724436403c64b65df10b7add428fdd004', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '4c4720445c6f71c5037bb530ecacc080149757fe', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '98d48093adb22ca832ff536546cef451c159cab4', htmlFor: "switch" }, h("slot", { key: '18ecfccc0535975209229a1e399bf093b8930690', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ifx-switch.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    this.toggleLabelGap();\n\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}
+{"file":"ifx-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-switch')\n    }\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    this.toggleLabelGap();\n\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}

package/dist/esm/ifx-table.entry.js

@@ -1,5 +1,7 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-6c9eba32.js';
 import { c as classNames } from './index-72ac5051.js';
+import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 import { c as createGrid } from './main.esm-b8709563.js';
 
 class ButtonCellRenderer {
@@ -276,6 +278,9 @@ const Table = class {
         this.gridApi.showLoadingOverlay();
     }
     componentWillLoad() {
+        if (!isNestedInIfxComponent(this.host)) {
+            trackComponent('ifx-table');
+        }
         this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
         this.rowData = this.getRowData();
         this.colData = this.getColData();
@@ -455,12 +460,12 @@ const Table = class {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '8b3797de279a017b562d7abf269e04b95bb80a50' }, h("div", { key: 'a7b28a1074fcbb2eff5ab01b658dbe5d95c7e7d8', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '0a6a43bddca15da05771331be505823a04157f73', class: "sidebar-btn" }, h("ifx-button", { key: 'cb3a454d2cd6d3bbe8dc5f7cf385ebffb1da8289', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'fd6c3e1868fa0e12a72fef6302d016e5ea8f06e6', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '25eff3e745f6cb0ce49d64726d6f0fc75f0778bd', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'cc4c710870d99c35b289893a8501d317ed9b8536', class: "sidebar-container" }, h("div", { key: 'f97fdbe6c237e30f54453acd6c1770f9fd01dc9d', class: "filters-title-container" }, h("span", { key: 'b9ee9fc9a3db591361a75bbfd605fa4430c4b6fa', class: "filters-title" }, "Filters")), h("div", { key: '43f4ca8ae3d897ca22b9d731d46b50176d406df5', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '68b2cfa03f3ad845a8b32ffe6956f0c535721af6', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '17a04f15e182f1a25fa13cddab491c58fc265ccb', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'b65693deacca5f308c40b36e5f4fe9947f1bad84', name: "topbar-filter" })))), h("div", { key: '64a206b5714ad07606590b4a2708e7214e071042', class: "table-pagination-wrapper" }, h("div", { key: '0c304f23e0e0ceb3dc298e1c8b94cf12648e89e8', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: '28c882e7420ca996be8453f8c4b40bddd7fc4532' }, h("div", { key: '8cd8e54c7de75d53143610edfbe45fa2b48dd6bf', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '1110e550cc741f9c2cd2fc13f9373326d313ecd4', class: "sidebar-btn" }, h("ifx-button", { key: '29d6e05494ff26828d59d7549bf24d6209483ec7', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'ff8dab817e39f90374ad86453c6c73ff3873bae6', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '71b6fd1ffcf1c16390d408f10d7bf973a7e6b114', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '3f814e1c21da42dca21dd29c06a38bc3513fcb28', class: "sidebar-container" }, h("div", { key: 'f3641e3ea9ff0cb263df5178841ce0bec8208d09', class: "filters-title-container" }, h("span", { key: '9a9682bdd599c53a07e6441de068b5a82459047c', class: "filters-title" }, "Filters")), h("div", { key: '9035d9fbdf08d830dfbac64f8c56abccd31f2767', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '59cfbc4d0d948c48f2859765ba8c6ac5fab11c1d', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '3576a6856828d9107b0c2597e58ff4305f43fa0b', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'e099dd49ba2da4e5bdcd8b7e5f70048a08803289', name: "topbar-filter" })))), h("div", { key: 'd134a5ac9b2874cf913920c9b7b994035109b216', class: "table-pagination-wrapper" }, h("div", { key: 'bfb341fc1962833f978f77d78577c793f125a22b', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '5b53f4298e4e386f23c790059916c57fb1ed1232', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'ffbedda7008d92e0d878f635db9b30052652c62f', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '4a59b97c8dd0c20e410130877e05a519d5161343', class: "matching-results-container" }, h("span", { key: '7a4b56c0c357a68d6011918f12cd7a6d8773eb0f', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'dd0e692f4f9c2bd76dbbd9fa6c7276f97458326f', class: "matching-results-text" }, "matching results"))), h("div", { key: 'b1641675cad37b5ec21dd9e815c794e962118256', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '531ec8a493b78f35397f8531f3de1525157f6b99', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '8364f42522bc03041af8b4963ab16764c9259efc', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '7684c3341c50c1fa3cf1d98705c8f4711247eff8', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '5f3902dfea763257812c878bdd8d84a7a9dab3f5', class: "matching-results-container" }, h("span", { key: '4e0211bd0d825cca8afb6c0093b403fbb74758ca', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '0ffb830a69ded3a437cab54a161e7481bd39cd26', class: "matching-results-text" }, "matching results"))), h("div", { key: 'bec5cd416e6c0dade0d55f448b8028295477b497', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'a80f1cb1e68eb04985bd114f7f07ba51f33d5c76', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/esm/ifx-table.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-table.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n  eGui!: HTMLDivElement;\n  eButton!: HTMLElement;  // Change to a generic HTMLElement to accommodate custom elements\n  eventListener!: (event: Event) => void;\n\n  init(params: ICellRendererParams) {\n    this.createButton(params);\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(params: ICellRendererParams) {\n    this.updateButton(params);\n    return true;\n  }\n\n  private createButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    this.eGui = document.createElement('div');\n    this.eButton = document.createElement('ifx-button') as HTMLElement;\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.eGui.appendChild(this.eButton);\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private updateButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.detachEventListener();\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private setButtonAttributes(config: ButtonInterface) {\n    this.eButton.setAttribute('disabled', config.disabled.toString());\n    this.eButton.setAttribute('variant', config.variant);\n    this.eButton.setAttribute('theme', config.theme);\n    this.eButton.setAttribute('type', config.type);\n    this.eButton.setAttribute('size', config.size);\n    this.eButton.setAttribute('full-width', config.fullWidth.toString());\n    this.eButton.setAttribute('target', config.target);\n    this.eButton.setAttribute('href', config.href);\n    this.eButton.textContent = config.text;\n  }\n\n  private attachEventListener(options: any, params: ICellRendererParams) {\n    this.eventListener = (event: Event) => {\n      if (options.onButtonClick) {\n        options.onButtonClick(params, event);\n      }\n    };\n    this.eButton.addEventListener('click', this.eventListener);\n  }\n\n  private detachEventListener() {\n    if (this.eventListener) {\n      this.eButton.removeEventListener('click', this.eventListener);\n    }\n  }\n\n  private hasRequiredKeys(config: ButtonInterface): boolean {\n    return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n  }\n}\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n               ${params.noRowsMessageFunc()}\n            </div>\n        `;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n            </div>`;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n\n.zebra { \n  & .ag-row-odd { \n    background-color: tokens.$ifxColorEngineering100!important;\n  }\n\n  & .ag-row { \n    border-bottom: none!important;\n  }\n}\n\n.ag-header-viewport { \n  background-color: tokens.$ifxColorEngineering200!important;\n}\n\n\n.table-container {\n  display: block;\n}\n\n.sidebar-btn {\n  margin-bottom: 24px;\n}\n\n.sidebar-container {\n  margin-right: 24px;\n}\n\n.sidebar-layout {\n  display: flex;\n  flex-direction: row;\n}\n\n.topbar-layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.table-pagination-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; // stretches items to fill the container horizontally\n  width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n  flex: 1; // allows the table to take up the remaining space\n  padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.table-wrapper .ag-root-wrapper-body {\n  height: auto !important;\n  min-height: 100px !important;\n  min-width: 100px;\n}\n\n.filter-chips { \n  display:flex;\n  gap:tokens.$ifxSpace100;\n  margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n  margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  margin-bottom: tokens.$ifxSpace100;\n  background: tokens.$ifxColorEngineering100;\n  padding-top: 32px;\n  padding-bottom: 32px;\n  gap: 24px;\n }\n\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: calc(50% - 12px);\n  height: 24px; \n  width: 1px;\n  background-color: tokens.$ifxColorEngineering300; \n}\n\n\n.ag-overlay-loading-center {\n  border: none;\n  background: none;\n  border-radius: none;\n  box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n  border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n\n.ag-header {\n  background-color: tokens.$ifxColorEngineering100;\n  border-bottom: none;\n\n  &.ag-header-active {\n    outline: none !important;\n    border-color: #0A8276 !important;\n  }\n}\n\n.ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n  gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n.ag-header-cell-text {\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n  background-color: inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n  background-color: inherit !important;\n}\n\n\n\n.ag-row {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n  background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n  display: flex;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n  display: none;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n  font-size: 24px;\n  font-weight: 600;\n}\n\n\n.matching-results-container {\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n}\n\n.matching-results-count {\n  font-weight: 600;\n}\n\n.matching-results-text {\n  font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n  tag: 'ifx-table',\n  styleUrl: 'table.scss',\n  shadow: true\n})\nexport class Table {\n  gridOptions: GridOptions;\n  gridApi: GridApi;\n  @State() currentPage: number = 1;\n  @Prop() cols: any;\n  @Prop() rows: any;\n  @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n  @State() rowData: any[] = [];\n  @State() colData: any[] = [];\n  @State() filterOptions: { [key: string]: string[] } = {};\n  @State() currentFilters = {};\n  @State() uniqueKey: string;\n  allRowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @Prop() pagination: boolean = true;\n  @Prop() paginationPageSize: number = 10;\n  @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n  @State() showSidebarFilters: boolean = true;\n  @State() matchingResultsCount: number = 0;\n  @Prop() variant: string = 'default'\n\n  @Prop() showLoading: boolean = false;\n  private container: HTMLDivElement;\n  @Element() host: HTMLElement;\n  originalRowData: any[] = [];\n\n  @Listen('ifxChange')\n  handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n    const { name, currentSelection, previousSelection } = event.detail;\n    if(currentSelection && previousSelection) { \n      // Clone the current filters state\n      const updatedFilters = { ...this.currentFilters };\n  \n      if (currentSelection.length === 0) {\n        // If there are no selections for this filter, delete the filter\n        delete updatedFilters[name];\n  \n        // Emit event with specific filter name\n        const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n        this.host.dispatchEvent(customEvent);\n      } else {\n        // Otherwise, update the filter values with the current selection\n        updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n      }\n  \n      // Update the component's filters\n      this.currentFilters = updatedFilters;\n  \n      // Ensure table data is updated\n      this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n      this.updateTableView();\n    }\n  }\n\n  @Watch('buttonRendererOptions')\n  onButtonRendererOptionsChanged() {\n     this.colData = this.getColData();  // Re-fetch column data to apply new renderer options\n    if (this.gridApi) {\n      this.gridApi.setColumnDefs(this.colData);  // Update column definitions in the grid API\n    }\n  }\n\n  toggleSidebarFilters() {\n    this.showSidebarFilters = !this.showSidebarFilters;\n  }\n\n  updateFilterOptions() {\n    const options = {};\n    for (let col of this.colData) {\n      options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n    }\n    this.filterOptions = options;\n  }\n\n  handleSidebarFilterChange(event: CustomEvent) {\n    const filterGroups = event.detail;\n    const updatedFilters = {};\n\n    filterGroups.forEach(filterGroup => {\n      const filterName = filterGroup.filterGroupName;\n      let filterValues;\n      let type;\n\n      if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n        filterValues = filterGroup.selectedItems.map(item => item.label);\n        type = 'multi-select';\n      } else if (filterGroup.value) {\n        filterValues = [filterGroup.value];\n        type = 'text';\n      } else {\n        filterValues = [];\n      }\n\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        updatedFilters[filterName] = { filterValues, type };\n      }\n    });\n\n    this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n    this.updateTableView();\n    this.currentFilters = updatedFilters;\n  }\n\n\n  handleTopbarFilterChange(event: CustomEvent) {\n    const filters = event.detail;\n\n    // Start by resetting the filter conditions to a blank object\n    this.currentFilters = {};\n\n    // Loop through each filter group provided in the event detail\n    filters.forEach(filter => {\n      const filterName = filter.filterName;\n      let filterValues;\n\n      let type = filter.type;\n\n      if (type === 'text') {\n        // Search/Text filter\n        filterValues = filter.filterValues\n      } else {\n        // Multi-select/Single-Select\n        filterValues = filter.filterValues.map(item => item.label);\n      }\n\n      // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        // Add or update the filter in the currentFilters object\n        this.currentFilters[filterName] = { filterValues, type };\n      }\n    });\n\n\n    // Now that the currentFilters object has been updated, apply all filters to the data\n    this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n    // After filtering, update the table view with the new filtered data\n    this.updateTableView();\n  }\n\n\n  applyAllFilters(data, filters) {\n    return data.filter(row => {\n      for (const filterName in filters) {\n        const filterInfo = filters[filterName];\n        let selectedValues = (filterInfo.filterValues || []).map(value => {\n          if (typeof value === 'string') {\n            return value.toLowerCase();\n          } else if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n          }\n          return '';\n        });\n\n        // For text filters, check if row values start with any of the selectedValues\n        if (filterInfo.type === 'text') {\n          let textFilterMatched = false;\n          for (let property in row) {\n            if (row.hasOwnProperty(property)) {\n              let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n              if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n                textFilterMatched = true;\n                break;\n              }\n            }\n          }\n          if (!textFilterMatched) return false;\n        }\n        // For multi-select filters, this remains unchanged\n        else if (filterInfo.type === 'multi-select') {\n          let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n          // Check if 'undefined' is a selected value and include rows with empty values in that case\n          let includesUndefined = selectedValues.includes('undefined');\n          if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n            return false;\n          }\n        }\n      }\n      return true;\n    });\n  }\n\n\n\n  updateTableView() {\n    // Calculate the slice of data to display based on pagination\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n    // Update the row data in the table\n    this.rowData = visibleRowData;\n    this.gridApi.setGridOption('rowData', this.rowData);\n\n    // Update matching results count\n    this.matchingResultsCount = this.allRowData.length;\n  }\n\n\n  clearAllFilters() {\n    this.currentFilters = {};\n    this.allRowData = [...this.originalRowData];\n  }\n\n\n  @Method()\n  async onBtShowLoading() {\n    this.gridApi.showLoadingOverlay();\n  }\n\n  componentWillLoad() {\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n\n    this.rowData = this.getRowData();\n    this.colData = this.getColData();\n    this.updateFilterOptions();\n\n    this.gridOptions = {\n\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressDragLeaveHidesColumns: true,\n      enableCellTextSelection: true,\n      onFirstDataRendered: this.onFirstDataRendered.bind(this),\n      columnDefs: this.colData,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found' //at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>'\n      },\n      rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n      animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n    };\n\n  }\n\n  componentDidRender() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.colData);\n    }\n  }\n\n\n\n  componentDidLoad() {\n    if (this.container) {\n      this.gridApi = createGrid(this.container, this.gridOptions);\n      if (this.gridApi) {\n        this.gridApi.sizeColumnsToFit({\n          defaultMinWidth: 100,\n        });\n        this.gridApi.setGridOption('columnDefs', this.colData);\n        this.gridApi.setGridOption('rowData', this.rowData);\n\n        if (this.pagination) {\n          const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n          if (paginationElement) {\n            paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n          }\n        }\n        const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n        // Add an event listener to each SetFilter component\n        sidebarFilterElements.forEach(sidebarFilterElement => {\n          sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n        });\n        const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n        // Add an event listener to each SetFilter component\n        topbarFilterElements.forEach(topbarFilterElement => {\n          topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n        });\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n      }\n    }\n    const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    sidebarFilters.forEach(sidebarFilter => {\n      sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n    });\n    const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    topbarFilters.forEach(topbarFilter => {\n      topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n    });\n  }\n\n  handlePageChange(event) {\n    this.currentPage = event.detail.currentPage;\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n    // Update the data in the grid\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', visibleRowData);\n    }\n  }\n\n  isJSONParseable(str) {\n    try {\n      JSON.parse(str);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n\n  getRowData() {\n    let rows: any[] = [];\n    if (this.rows === undefined || this.rows === null) {\n      return rows;\n    }\n \n    if (this.isJSONParseable(this.rows)) {\n      rows = [...JSON.parse(this.rows)];\n    }\n    else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n       rows = [...this.rows];\n    }\n    else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    this.allRowData = rows;\n    this.originalRowData = [...rows]; // Deep copy the original data\n    this.matchingResultsCount = this.allRowData.length;\n\n    return rows.slice(0, this.paginationPageSize);\n  }\n\n\n  getColData() {\n    let cols: any[] = [];\n    if (this.cols === undefined || this.cols === null) {\n      return cols;\n    }\n  \n    if (this.isJSONParseable(this.cols)) {\n      cols = [...JSON.parse(this.cols)];\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n      cols = [...this.cols];\n    } else {\n      console.error('Unexpected value for cols: ', this.cols);\n    }\n  \n    const buttonColumn = cols.find(column => column.field === 'button');\n    if (buttonColumn) {\n      buttonColumn.cellRenderer = ButtonCellRenderer;\n      buttonColumn.valueFormatter = params => params.value.text;\n      \n      // No JSON.parse needed now\n      if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n        if (this.buttonRendererOptions.onButtonClick) {\n          buttonColumn.cellRendererParams = {\n            onButtonClick: this.buttonRendererOptions.onButtonClick\n          };\n        }\n      }\n    }\n  \n    return cols;\n  }\n  \n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  handleResetButtonClick() {\n    const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n    window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n    this.clearAllFilters();\n    this.updateTableView();  // Update table view with the original data\n  }\n\n\n  disconnectedCallback() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n      }\n    }\n\n    const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n    if (resetButton) {\n      resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n    }\n  }\n\n\n\n  getTableClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n\n  render() {\n    let style = {};\n    if (this.tableHeight !== 'auto') {\n      style = {\n        'height': this.tableHeight\n      };\n    }\n    const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n    return (\n      <Host>\n        <div class=\"table-container\">\n          {this.filterOrientation === 'sidebar' && (\n            <div class=\"sidebar-btn\">\n              <ifx-button\n                type=\"button\"\n                disabled={false}\n                variant=\"secondary\"\n                size=\"m\"\n                target=\"_blank\"\n                theme=\"default\"\n                full-width=\"false\"\n                onClick={() => this.toggleSidebarFilters()}\n              >\n                <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n              </ifx-button>\n            </div>\n          )}\n\n          <div class={filterClass}>\n            {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n              <div class=\"sidebar-container\">\n                <div class=\"filters-title-container\">\n                  <span class=\"filters-title\">Filters</span>\n                </div>\n                <div class=\"set-filter-wrapper-sidebar\">\n                  {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                    <slot name=\"sidebar-filter\"></slot>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n              <div class=\"set-filter-wrapper-topbar\">\n                {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                  <slot name=\"topbar-filter\"></slot>\n                )}\n              </div>\n            )}\n\n            <div class=\"table-pagination-wrapper\">\n              <div class=\"filter-chips\">\n                {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n                  Object.keys(this.currentFilters).map(name => {\n                    const filter = this.currentFilters[name];\n                    const filterValues = filter.filterValues;\n                    const isMultiSelect = filter.type !== 'text';\n\n                    return filterValues.length > 0 ? (\n                      <ifx-chip\n                        placeholder={name}\n                        size=\"large\"\n                        variant={isMultiSelect ? \"multi\" : \"single\"}\n                        readOnly={true}\n                        value={filterValues} // Ensure value prop is set\n                        key={name}\n                      >\n                        {filterValues.map(filterValue => (\n                          <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n                            {filterValue}\n                          </ifx-chip-item>\n                        ))}\n                      </ifx-chip>\n                    ) : null;\n                  })\n                )}\n\n                {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n                  <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n                  >\n                    <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n                  </ifx-button>\n                )}\n              </div>\n\n              {this.filterOrientation !== 'none' && (\n                <div class=\"matching-results-container\">\n                  <span class=\"matching-results-count\">\n                    {this.matchingResultsCount}\n                  </span>\n                  <span class=\"matching-results-text\">\n                    matching results\n                  </span>\n                </div>\n              )}\n\n              <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n                <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n                </div>\n              </div>\n              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n\n  hasButtonCol(): boolean {\n    return this.getColData().some(column => column.field === 'button');\n  }\n\n  onDragOver(event) {\n    var dragSupported = event.dataTransfer.length;\n\n    if (dragSupported) {\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    event.preventDefault();\n  }\n\n  onDrop(event) {\n    var jsonData = event.dataTransfer.getData('application/json');\n\n    var eJsonRow = document.createElement('div');\n    eJsonRow.classList.add('json-row');\n    eJsonRow.innerText = jsonData;\n\n    var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n    eJsonDisplay.appendChild(eJsonRow);\n    event.preventDefault();\n  }\n\n}\n"],"version":3}
+{"file":"ifx-table.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n  eGui!: HTMLDivElement;\n  eButton!: HTMLElement;  // Change to a generic HTMLElement to accommodate custom elements\n  eventListener!: (event: Event) => void;\n\n  init(params: ICellRendererParams) {\n    this.createButton(params);\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(params: ICellRendererParams) {\n    this.updateButton(params);\n    return true;\n  }\n\n  private createButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    this.eGui = document.createElement('div');\n    this.eButton = document.createElement('ifx-button') as HTMLElement;\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.eGui.appendChild(this.eButton);\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private updateButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.detachEventListener();\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private setButtonAttributes(config: ButtonInterface) {\n    this.eButton.setAttribute('disabled', config.disabled.toString());\n    this.eButton.setAttribute('variant', config.variant);\n    this.eButton.setAttribute('theme', config.theme);\n    this.eButton.setAttribute('type', config.type);\n    this.eButton.setAttribute('size', config.size);\n    this.eButton.setAttribute('full-width', config.fullWidth.toString());\n    this.eButton.setAttribute('target', config.target);\n    this.eButton.setAttribute('href', config.href);\n    this.eButton.textContent = config.text;\n  }\n\n  private attachEventListener(options: any, params: ICellRendererParams) {\n    this.eventListener = (event: Event) => {\n      if (options.onButtonClick) {\n        options.onButtonClick(params, event);\n      }\n    };\n    this.eButton.addEventListener('click', this.eventListener);\n  }\n\n  private detachEventListener() {\n    if (this.eventListener) {\n      this.eButton.removeEventListener('click', this.eventListener);\n    }\n  }\n\n  private hasRequiredKeys(config: ButtonInterface): boolean {\n    return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n  }\n}\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n               ${params.noRowsMessageFunc()}\n            </div>\n        `;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n            </div>`;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n\n.zebra { \n  & .ag-row-odd { \n    background-color: tokens.$ifxColorEngineering100!important;\n  }\n\n  & .ag-row { \n    border-bottom: none!important;\n  }\n}\n\n.ag-header-viewport { \n  background-color: tokens.$ifxColorEngineering200!important;\n}\n\n\n.table-container {\n  display: block;\n}\n\n.sidebar-btn {\n  margin-bottom: 24px;\n}\n\n.sidebar-container {\n  margin-right: 24px;\n}\n\n.sidebar-layout {\n  display: flex;\n  flex-direction: row;\n}\n\n.topbar-layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.table-pagination-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; // stretches items to fill the container horizontally\n  width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n  flex: 1; // allows the table to take up the remaining space\n  padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.table-wrapper .ag-root-wrapper-body {\n  height: auto !important;\n  min-height: 100px !important;\n  min-width: 100px;\n}\n\n.filter-chips { \n  display:flex;\n  gap:tokens.$ifxSpace100;\n  margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n  margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  margin-bottom: tokens.$ifxSpace100;\n  background: tokens.$ifxColorEngineering100;\n  padding-top: 32px;\n  padding-bottom: 32px;\n  gap: 24px;\n }\n\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: calc(50% - 12px);\n  height: 24px; \n  width: 1px;\n  background-color: tokens.$ifxColorEngineering300; \n}\n\n\n.ag-overlay-loading-center {\n  border: none;\n  background: none;\n  border-radius: none;\n  box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n  border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n\n.ag-header {\n  background-color: tokens.$ifxColorEngineering100;\n  border-bottom: none;\n\n  &.ag-header-active {\n    outline: none !important;\n    border-color: #0A8276 !important;\n  }\n}\n\n.ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n  gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n.ag-header-cell-text {\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n  background-color: inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n  background-color: inherit !important;\n}\n\n\n\n.ag-row {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n  background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n  display: flex;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n  display: none;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n  font-size: 24px;\n  font-weight: 600;\n}\n\n\n.matching-results-container {\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n}\n\n.matching-results-count {\n  font-weight: 600;\n}\n\n.matching-results-text {\n  font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n  tag: 'ifx-table',\n  styleUrl: 'table.scss',\n  shadow: true\n})\nexport class Table {\n  gridOptions: GridOptions;\n  gridApi: GridApi;\n  @State() currentPage: number = 1;\n  @Prop() cols: any;\n  @Prop() rows: any;\n  @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n  @State() rowData: any[] = [];\n  @State() colData: any[] = [];\n  @State() filterOptions: { [key: string]: string[] } = {};\n  @State() currentFilters = {};\n  @State() uniqueKey: string;\n  allRowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @Prop() pagination: boolean = true;\n  @Prop() paginationPageSize: number = 10;\n  @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n  @State() showSidebarFilters: boolean = true;\n  @State() matchingResultsCount: number = 0;\n  @Prop() variant: string = 'default'\n\n  @Prop() showLoading: boolean = false;\n  private container: HTMLDivElement;\n  @Element() host: HTMLElement;\n  originalRowData: any[] = [];\n\n  @Listen('ifxChange')\n  handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n    const { name, currentSelection, previousSelection } = event.detail;\n    if(currentSelection && previousSelection) { \n      // Clone the current filters state\n      const updatedFilters = { ...this.currentFilters };\n  \n      if (currentSelection.length === 0) {\n        // If there are no selections for this filter, delete the filter\n        delete updatedFilters[name];\n  \n        // Emit event with specific filter name\n        const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n        this.host.dispatchEvent(customEvent);\n      } else {\n        // Otherwise, update the filter values with the current selection\n        updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n      }\n  \n      // Update the component's filters\n      this.currentFilters = updatedFilters;\n  \n      // Ensure table data is updated\n      this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n      this.updateTableView();\n    }\n  }\n\n  @Watch('buttonRendererOptions')\n  onButtonRendererOptionsChanged() {\n     this.colData = this.getColData();  // Re-fetch column data to apply new renderer options\n    if (this.gridApi) {\n      this.gridApi.setColumnDefs(this.colData);  // Update column definitions in the grid API\n    }\n  }\n\n  toggleSidebarFilters() {\n    this.showSidebarFilters = !this.showSidebarFilters;\n  }\n\n  updateFilterOptions() {\n    const options = {};\n    for (let col of this.colData) {\n      options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n    }\n    this.filterOptions = options;\n  }\n\n  handleSidebarFilterChange(event: CustomEvent) {\n    const filterGroups = event.detail;\n    const updatedFilters = {};\n\n    filterGroups.forEach(filterGroup => {\n      const filterName = filterGroup.filterGroupName;\n      let filterValues;\n      let type;\n\n      if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n        filterValues = filterGroup.selectedItems.map(item => item.label);\n        type = 'multi-select';\n      } else if (filterGroup.value) {\n        filterValues = [filterGroup.value];\n        type = 'text';\n      } else {\n        filterValues = [];\n      }\n\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        updatedFilters[filterName] = { filterValues, type };\n      }\n    });\n\n    this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n    this.updateTableView();\n    this.currentFilters = updatedFilters;\n  }\n\n\n  handleTopbarFilterChange(event: CustomEvent) {\n    const filters = event.detail;\n\n    // Start by resetting the filter conditions to a blank object\n    this.currentFilters = {};\n\n    // Loop through each filter group provided in the event detail\n    filters.forEach(filter => {\n      const filterName = filter.filterName;\n      let filterValues;\n\n      let type = filter.type;\n\n      if (type === 'text') {\n        // Search/Text filter\n        filterValues = filter.filterValues\n      } else {\n        // Multi-select/Single-Select\n        filterValues = filter.filterValues.map(item => item.label);\n      }\n\n      // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        // Add or update the filter in the currentFilters object\n        this.currentFilters[filterName] = { filterValues, type };\n      }\n    });\n\n\n    // Now that the currentFilters object has been updated, apply all filters to the data\n    this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n    // After filtering, update the table view with the new filtered data\n    this.updateTableView();\n  }\n\n\n  applyAllFilters(data, filters) {\n    return data.filter(row => {\n      for (const filterName in filters) {\n        const filterInfo = filters[filterName];\n        let selectedValues = (filterInfo.filterValues || []).map(value => {\n          if (typeof value === 'string') {\n            return value.toLowerCase();\n          } else if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n          }\n          return '';\n        });\n\n        // For text filters, check if row values start with any of the selectedValues\n        if (filterInfo.type === 'text') {\n          let textFilterMatched = false;\n          for (let property in row) {\n            if (row.hasOwnProperty(property)) {\n              let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n              if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n                textFilterMatched = true;\n                break;\n              }\n            }\n          }\n          if (!textFilterMatched) return false;\n        }\n        // For multi-select filters, this remains unchanged\n        else if (filterInfo.type === 'multi-select') {\n          let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n          // Check if 'undefined' is a selected value and include rows with empty values in that case\n          let includesUndefined = selectedValues.includes('undefined');\n          if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n            return false;\n          }\n        }\n      }\n      return true;\n    });\n  }\n\n\n\n  updateTableView() {\n    // Calculate the slice of data to display based on pagination\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n    // Update the row data in the table\n    this.rowData = visibleRowData;\n    this.gridApi.setGridOption('rowData', this.rowData);\n\n    // Update matching results count\n    this.matchingResultsCount = this.allRowData.length;\n  }\n\n\n  clearAllFilters() {\n    this.currentFilters = {};\n    this.allRowData = [...this.originalRowData];\n  }\n\n\n  @Method()\n  async onBtShowLoading() {\n    this.gridApi.showLoadingOverlay();\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.host)) { \n      trackComponent('ifx-table')\n    }\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n\n    this.rowData = this.getRowData();\n    this.colData = this.getColData();\n    this.updateFilterOptions();\n\n    this.gridOptions = {\n\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressDragLeaveHidesColumns: true,\n      enableCellTextSelection: true,\n      onFirstDataRendered: this.onFirstDataRendered.bind(this),\n      columnDefs: this.colData,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found' //at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>'\n      },\n      rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n      animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n    };\n\n  }\n\n  componentDidRender() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.colData);\n    }\n  }\n\n\n\n  componentDidLoad() {\n    if (this.container) {\n      this.gridApi = createGrid(this.container, this.gridOptions);\n      if (this.gridApi) {\n        this.gridApi.sizeColumnsToFit({\n          defaultMinWidth: 100,\n        });\n        this.gridApi.setGridOption('columnDefs', this.colData);\n        this.gridApi.setGridOption('rowData', this.rowData);\n\n        if (this.pagination) {\n          const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n          if (paginationElement) {\n            paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n          }\n        }\n        const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n        // Add an event listener to each SetFilter component\n        sidebarFilterElements.forEach(sidebarFilterElement => {\n          sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n        });\n        const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n        // Add an event listener to each SetFilter component\n        topbarFilterElements.forEach(topbarFilterElement => {\n          topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n        });\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n      }\n    }\n    const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    sidebarFilters.forEach(sidebarFilter => {\n      sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n    });\n    const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    topbarFilters.forEach(topbarFilter => {\n      topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n    });\n  }\n\n  handlePageChange(event) {\n    this.currentPage = event.detail.currentPage;\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n    // Update the data in the grid\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', visibleRowData);\n    }\n  }\n\n  isJSONParseable(str) {\n    try {\n      JSON.parse(str);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n\n  getRowData() {\n    let rows: any[] = [];\n    if (this.rows === undefined || this.rows === null) {\n      return rows;\n    }\n \n    if (this.isJSONParseable(this.rows)) {\n      rows = [...JSON.parse(this.rows)];\n    }\n    else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n       rows = [...this.rows];\n    }\n    else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    this.allRowData = rows;\n    this.originalRowData = [...rows]; // Deep copy the original data\n    this.matchingResultsCount = this.allRowData.length;\n\n    return rows.slice(0, this.paginationPageSize);\n  }\n\n\n  getColData() {\n    let cols: any[] = [];\n    if (this.cols === undefined || this.cols === null) {\n      return cols;\n    }\n  \n    if (this.isJSONParseable(this.cols)) {\n      cols = [...JSON.parse(this.cols)];\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n      cols = [...this.cols];\n    } else {\n      console.error('Unexpected value for cols: ', this.cols);\n    }\n  \n    const buttonColumn = cols.find(column => column.field === 'button');\n    if (buttonColumn) {\n      buttonColumn.cellRenderer = ButtonCellRenderer;\n      buttonColumn.valueFormatter = params => params.value.text;\n      \n      // No JSON.parse needed now\n      if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n        if (this.buttonRendererOptions.onButtonClick) {\n          buttonColumn.cellRendererParams = {\n            onButtonClick: this.buttonRendererOptions.onButtonClick\n          };\n        }\n      }\n    }\n  \n    return cols;\n  }\n  \n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  handleResetButtonClick() {\n    const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n    window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n    this.clearAllFilters();\n    this.updateTableView();  // Update table view with the original data\n  }\n\n\n  disconnectedCallback() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n      }\n    }\n\n    const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n    if (resetButton) {\n      resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n    }\n  }\n\n\n\n  getTableClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n\n  render() {\n    let style = {};\n    if (this.tableHeight !== 'auto') {\n      style = {\n        'height': this.tableHeight\n      };\n    }\n    const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n    return (\n      <Host>\n        <div class=\"table-container\">\n          {this.filterOrientation === 'sidebar' && (\n            <div class=\"sidebar-btn\">\n              <ifx-button\n                type=\"button\"\n                disabled={false}\n                variant=\"secondary\"\n                size=\"m\"\n                target=\"_blank\"\n                theme=\"default\"\n                full-width=\"false\"\n                onClick={() => this.toggleSidebarFilters()}\n              >\n                <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n              </ifx-button>\n            </div>\n          )}\n\n          <div class={filterClass}>\n            {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n              <div class=\"sidebar-container\">\n                <div class=\"filters-title-container\">\n                  <span class=\"filters-title\">Filters</span>\n                </div>\n                <div class=\"set-filter-wrapper-sidebar\">\n                  {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                    <slot name=\"sidebar-filter\"></slot>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n              <div class=\"set-filter-wrapper-topbar\">\n                {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                  <slot name=\"topbar-filter\"></slot>\n                )}\n              </div>\n            )}\n\n            <div class=\"table-pagination-wrapper\">\n              <div class=\"filter-chips\">\n                {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n                  Object.keys(this.currentFilters).map(name => {\n                    const filter = this.currentFilters[name];\n                    const filterValues = filter.filterValues;\n                    const isMultiSelect = filter.type !== 'text';\n\n                    return filterValues.length > 0 ? (\n                      <ifx-chip\n                        placeholder={name}\n                        size=\"large\"\n                        variant={isMultiSelect ? \"multi\" : \"single\"}\n                        readOnly={true}\n                        value={filterValues} // Ensure value prop is set\n                        key={name}\n                      >\n                        {filterValues.map(filterValue => (\n                          <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n                            {filterValue}\n                          </ifx-chip-item>\n                        ))}\n                      </ifx-chip>\n                    ) : null;\n                  })\n                )}\n\n                {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n                  <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n                  >\n                    <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n                  </ifx-button>\n                )}\n              </div>\n\n              {this.filterOrientation !== 'none' && (\n                <div class=\"matching-results-container\">\n                  <span class=\"matching-results-count\">\n                    {this.matchingResultsCount}\n                  </span>\n                  <span class=\"matching-results-text\">\n                    matching results\n                  </span>\n                </div>\n              )}\n\n              <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n                <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n                </div>\n              </div>\n              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n\n  hasButtonCol(): boolean {\n    return this.getColData().some(column => column.field === 'button');\n  }\n\n  onDragOver(event) {\n    var dragSupported = event.dataTransfer.length;\n\n    if (dragSupported) {\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    event.preventDefault();\n  }\n\n  onDrop(event) {\n    var jsonData = event.dataTransfer.getData('application/json');\n\n    var eJsonRow = document.createElement('div');\n    eJsonRow.classList.add('json-row');\n    eJsonRow.innerText = jsonData;\n\n    var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n    eJsonDisplay.appendChild(eJsonRow);\n    event.preventDefault();\n  }\n\n}\n"],"version":3}

package/dist/esm/ifx-tabs.entry.js

@@ -1,4 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
+import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 
 const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
 const IfxTabsStyle0 = tabsCss;
@@ -44,6 +46,9 @@ const IfxTabs = class {
         }
     }
     componentWillLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-tabs');
+        }
         this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
         if (this.internalActiveTabIndex !== this.activeTabIndex) {
             this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
@@ -202,9 +207,9 @@ const IfxTabs = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'd26a8393f237ca51009ec6a169efa5b0b8913633', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '090d79d9c5df5174ec4c8e4b79cf7eeb7d950f53', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '35944f91c394b22adc0f9a9d9b258b53dad7d150', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'e9f6d73e37571b0fbd1091f45da2d5581f63c22c', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '9889f746a990049c2fba52b16ad85a8ab8ee5962', class: "active-border" })), h("div", { key: '9f2e3fe4f9fd5ce6b322f2002f83db44d7f8ae27', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: '956481eb5326e82355fe026a48950863d575c234', class: "active-border" })), h("div", { key: '62b78e8df53e61b6ebdf8456716882ad333c97c3', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {