@infineon/infineon-design-system-stencil 35.4.3--canary.1904.8657c5c6c65b2559e0e95772a2affef4166bfc47.0 → 35.4.3--canary.1904.cfa215d4ba9be3aaa74d7093d79587edcf983018.0

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

@@ -1,5 +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-693bd28d.js';
 
 const sliderCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}";
 const IfxSliderStyle0 = sliderCss;
@@ -123,7 +124,9 @@ const IfxSlider = class {
         }
     }
     componentWillLoad() {
-        trackComponent('ifx-slider');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-slider');
+        }
         if (this.value === undefined) {
             this.internalValue = (this.max - this.min) / 2;
         }
@@ -144,10 +147,10 @@ const IfxSlider = class {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: 'baead92450ada8b7b7e2424bc890fb0e4ce6ffd4', class: "ifx-slider" }, this.leftText && (h("span", { key: '35d2d56a7cce887384f4519319d1412212e2d792', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '0a5ea311cdf7f0c6dad1cc622ab1b22c699499f1', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '1d023a0180adddee7da6d6f60fb28f0624bee1e3', class: "ifx-slider" }, this.leftText && (h("span", { key: '2febbc2943053bb241c0ca2672f9e91791fc024e', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'd35fbb5f62c6b7e4159a880a3f19b0633588db3e', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
             :
-                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '03023c78aa6f431c4b6d1a91ca2dcb98f01926ec', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a5a70beeb0ca7eb9814849039a44845c731e54f0', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: 'b14001b277aa90cebe83915554adac5ff56929cb', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: 'e1f134e6789b2a54424f98345175d76e2e178352', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'fe97ccb5245f28b7a9d44591e4ac3187f549cbf2', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '0ab48a57a4df463dbf176c9515b381be69810131', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"ifx-slider.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,82FAA82F,CAAC;AACj4F,wBAAe,SAAS;;MCOX,SAAS;IALtB;;;QAMU,QAAG,GAAW,CAAC,CAAC;QAChB,QAAG,GAAW,GAAG,CAAC;QAClB,SAAI,GAAW,CAAC,CAAC;QAIjB,aAAQ,GAAY,KAAK,CAAC;QAC1B,mBAAc,GAAY,KAAK,CAAC;QAKhC,SAAI,GAAwB,QAAQ,CAAC;QACpC,kBAAa,GAAW,CAAC,CAAC;QAC1B,eAAU,GAAW,CAAC,CAAC;QACvB,qBAAgB,GAAW,CAAC,CAAC;QAC7B,qBAAgB,GAAW,GAAG,CAAC;KA4NzC;IAlNC,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAGD,eAAe,CAAC,QAAgB;QAC9B,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAGD,eAAe,CAAC,QAAgB;QAC9B,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,qBAAqB;QACnB,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACtF,OAAO,kBAAkB,CAAC;KAC3B;IAED,8BAA8B,CAAC,KAAY;QACzC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YAC/E,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;gBAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;aACjD;iBAAI;gBACH,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;aACjD;SACF;QACD,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;YAC7B,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC5D;aAAM;YACL,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC5D;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAC,CAAC,CAAC;QACpF,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;KAC1C;IAED,+BAA+B,CAAC,KAAY;QAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACnD,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;YAC7B,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SAChE;aAAM;YACL,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SAChE;KACF;IAED,wBAAwB;QACtB,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAClD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAChC,IAAI,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,GAAC,GAAG,IAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;KACjE;IAED,iBAAiB,CAAC,KAAY;QAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxC,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAEO,gBAAgB,CAAC,KAAa;QACpC,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACvC,MAAM,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5C,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;YAC9B,OAAO,IAAI,CAAC,GAAG,GAAG,aAAa,IAAI,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;SAC3D;aAAM;YACL,OAAO,IAAI,CAAC,GAAG,GAAG,aAAa,GAAG,SAAS,CAAC;SAC7C;KACF;IAED,kBAAkB;QAChB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAChC,IAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;YACxB,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;gBAC5E,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG,CAAC;gBACnC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,GAAG,UAAU,GAAG,CAAC,CAAC;aAC3F;YAED,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;gBAC5E,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG,CAAC;gBACnC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,GAAG,UAAU,GAAG,CAAC,CAAC;aAC3F;SAEF;aAAM;YAEL,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;gBACzE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;gBAChC,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG,CAAC;gBACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,UAAU,GAAG,CAAC,CAAC;aACtE;SAEF;KACF;;;IAID,yBAAyB,CAAC,WAAmB,EAAE;QAC7C,IAAI,QAAQ,KAAK,YAAY,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;SACrC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;SACrC;KACF;IAED,iBAAiB;QACf,cAAc,CAAC,YAAY,CAAC,CAAA;QAC5B,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,GAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;SAC9C;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SACzE;QAED,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,IAAG,IAAI,CAAC,cAAc,KAAK,SAAS;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC;;YAC7E,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC;QACtC,IAAG,IAAI,CAAC,cAAc,KAAK,SAAS;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC;;YAC7E,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC;KACvC;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAE3B;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAEC,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrB,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBACtC,UAAU,gBACT,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,GAC1B;;gBAEJ,WAAK,KAAK,EAAG,uBAAuB,gBAAY,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,IACnH,aACE,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAsB,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAC9D,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,GACjE,EACF,aACE,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAsB,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAC9D,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,GACjE,CAEE,EAET,IAAI,CAAC,SAAS,KACb,iEAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACb,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,KAC9C,6DACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,UAAU,MACX,CACR,CACG,EACN;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';  \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    trackComponent('ifx-slider')\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-slider.entry.js","mappings":"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","names":[],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';  \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-slider')\n    }\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, c as createEvent, g as getElement } from './index-6c9eba32.js';
+import { r as registerInstance, h, g as getElement, c as createEvent } from './index-6c9eba32.js';
 import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-693bd28d.js';
 import { c as classNames } from './index-72ac5051.js';
 
 const spinnerCss = ":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
@@ -11,11 +12,13 @@ const Spinner = class {
         this.inverted = false;
     }
     componentWillLoad() {
-        trackComponent('ifx-spinner');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-spinner');
+        }
     }
     render() {
-        return (h("div", { key: 'cc03ea6266bc6f2d283fdc5b9e0af78e1cfde896', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '8c8580e31d1c455db8f2c74700780f5730de5bf4', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: 'ed4c832057e9f11e81ccb4c9d30e737023f2b972', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '3052829f5306e28c6bdc9405b69d8e9ef1cd318f', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'de8cebc4b976c82af81bafd109e54cc4693f27b7', id: "spinner/conductor" }, h("path", { key: '49f0088b7b1807da417ffbb684368724ae84df52', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (h("div", { key: 'e047fa1888417840aa3706a145ab3892be6d060f', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '56414eb3ea5fa4ed762a4d25af1801767d993324', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '6609f1e42193a8f2107a6b7db3a3f3cb04c53020', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '4833db100905ae48e0e0c4dc4983d13f5e269b72', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '27bcf7a1de7bb868bdcba73c909242e9b37f8dce', id: "spinner/conductor" }, h("path", { key: '466477a991efe88afced1a798a587f25dd0162b5', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -25,6 +28,7 @@ const Spinner = class {
     getClassNames() {
         return classNames('spinner', this.size && `spinner ${this.getSizeClass()}`);
     }
+    get el() { return getElement(this); }
 };
 Spinner.style = IfxSpinnerStyle0;
 
@@ -85,16 +89,18 @@ const TextField = class {
         this.internals.setFormValue("");
     }
     componentWillLoad() {
-        trackComponent('ifx-text-field');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-text-field');
+        }
         this.handleTypeProp();
     }
     render() {
-        return (h("div", { key: 'd3ff3716ca4afc831a9ea074322baf5f491732ca', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'ab2e90d3995e478166bbd1b6d72938a16df45003', class: "textInput__top-wrapper" }, h("label", { key: '4b01a1c2563b8b978ed56733986be88c2553e5c7', htmlFor: this.internalId }, h("slot", { key: '659c9b14b3c106661dbd66304a57529c62219f21' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '79d7c382f0244baed57449e7b4291eaee06b4a52', class: "textInput__bottom-wrapper" }, h("div", { key: '83a313bc22ec423c910f2bfd86c7fced74ea23cc', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'c64aba8a7c78cc0d80ef4f690063ff5494611257', class: 'input-icon', icon: this.icon })), h("input", { key: '792ea02d00f861b294f3af979c9765fb0a470bec', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: '90c91e0f48e309cb22ec297c8a58d3b4cf463b47', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '0253d226dd7a7d403cadd756c41e8f64abc3c5fa', class: "textInput__top-wrapper" }, h("label", { key: '82f3fc69f50222c97dcf3ac8e721b1fa1009775b', htmlFor: this.internalId }, h("slot", { key: 'c59dd8bd987946944ce216e605c0eff6a8002e04' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '47b74b65d7700e7f85e328fdfcf42d929b763f75', class: "textInput__bottom-wrapper" }, h("div", { key: '63050336a9989dcbfd1d4fa7ff0c9e9d65ff8708', class: "input-container" }, this.icon && (h("ifx-icon", { key: '7528bf901b9f6f5ebf56851334885cc36806f923', class: 'input-icon', icon: this.icon })), h("input", { key: 'e6eefe13d1b70f5166cce2ca7978155707c75909', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '32d38f9f4652134457629eda90bab3d1887e2ce9', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: '9111a42189a28019b42e506d6f907350a58d9de1', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: 'c1e0c17a6722a62fda83da4be4184661e09cc392', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '752cf422732168c7aa6ac8d33ec00813e74f0848', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '9bd4fb69119c920c957a933ba3d9c30927feaa35', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: 'b41ade4b3db695e6238e8549ed933f65fdce974d', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"file":"ifx-spinner.ifx-text-field.entry.js","mappings":"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","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  componentWillLoad() { \n    trackComponent('ifx-spinner')\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    trackComponent('ifx-text-field')\n    this.handleTypeProp()\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-spinner.ifx-text-field.entry.js","mappings":"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","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-spinner')\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-text-field')\n    }\n    this.handleTypeProp()\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h } from './index-6c9eba32.js';
+import { r as registerInstance, h, g as getElement } from './index-6c9eba32.js';
 import { t as trackComponent } from './tracking-a7efdbcd.js';
+import { i as isNestedInIfxComponent } from './dom-utils-693bd28d.js';
 
 const statusCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}";
 const IfxStatusStyle0 = statusCss;
@@ -11,14 +12,17 @@ const Status = class {
         this.color = 'orange-500';
     }
     componentWillLoad() {
-        trackComponent('ifx-status');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-status');
+        }
     }
     render() {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: '91499489972db67380ffeba6afd0ea283d455214', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'a0cd0c74719fc04481ea7c8a1980ec352df6e502', class: `dot ${effectiveColor}` }), h("p", { key: '79bb18cd2192905445d9ac12f63bf0fb98dfa4da', class: "text" }, this.label)));
+        return (h("div", { key: '6a80c0e961e2542e1f05d8eabed0eefb79ecdb37', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '1df54259e0444ec1e3179fa6cc48a3157f28b1f4', class: `dot ${effectiveColor}` }), h("p", { key: '9cb5ce7cafcfc8ce396c0a236e42ac34549b415a', class: "text" }, this.label)));
     }
+    get el() { return getElement(this); }
 };
 Status.style = IfxStatusStyle0;
 

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;KAiBtC;IAfC,iBAAiB;QACf,cAAc,CAAC,YAAY,CAAC,CAAA;KAC7B;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 } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \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  componentWillLoad() { \n    trackComponent('ifx-status')\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,5 +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-693bd28d.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;
@@ -114,7 +115,9 @@ const Stepper = class {
         this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));
     }
     componentWillLoad() {
-        trackComponent('ifx-stepper');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-stepper');
+        }
         this.addStepIdsToStepsAndCountSteps();
         this.setInitialActiveStep();
         this.setStepsBeforeActiveToComplete();
@@ -126,10 +129,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '3aa387cbb7d71af5515150dea7a94f33a56522b2', "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: '44d8f0a5c4141f351b13e034582070d5a974e43c', class: 'stepper-progress' }, h("div", { key: '6aeac4f6af4f249e1ccbc8fc3a0ab96b439571a5', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '3f265f8064e70ee3fc33083e9750fc64cd7c7d76', class: `stepper-wrapper` }, h("slot", { key: 'ca0a81b461b5012533b0ac830ea6943c7909eb45' }))));
+            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":"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","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';\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        trackComponent('ifx-stepper')\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":"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","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,5 +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-693bd28d.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;
@@ -24,7 +25,9 @@ const Switch = class {
         return this.internalChecked;
     }
     componentWillLoad() {
-        trackComponent('ifx-switch');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-switch');
+        }
         this.internalChecked = this.checked;
     }
     toggleLabelGap() {
@@ -78,7 +81,7 @@ const Switch = class {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: 'bf60e3da7c7de105467cea3202124b36c2297d99', 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: '2318e473aa947543fe886c4ec7707923ed99aa00', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'ab2d476c3b782150ad62538673872100c767a24b', class: "switch__checkbox-wrapper" }, h("input", { key: '03e95faf92f42b2f5300a192db4659bee41cacd2', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'f4d8d43fcbd75f33f61639b519a0e1b2f0c6a657', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'eaf978b9fb6ab37bf356fd4e28ff6dd0e4153c09', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '2cb06e0cdab442178366ca8d47b43f8f1e4cc098', htmlFor: "switch" }, h("slot", { key: 'a526e51069d9adf95e5023697723f47578647eca', 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":";;;AAAA,MAAM,SAAS,GAAG,ygDAAygD,CAAC;AAC5hD,wBAAe,SAAS;;MCSX,MAAM;IANnB;;;;;;;;;;QAOU,YAAO,GAAY,KAAK,CAAC;QACzB,SAAI,GAAW,EAAE,CAAC;QAClB,aAAQ,GAAY,KAAK,CAAC;QAEzB,oBAAe,GAAY,KAAK,CAAC;KA6G3C;IApGC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,cAAc,CAAC,YAAY,CAAC,CAAA;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;KACrC;IAGD,cAAc;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE;YAC/B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;SAC/B;aAAM;YACL,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAClC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KAEvB;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;SACjC;KACF;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QAE7C,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACzC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;aAClC;SACF;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;SAClC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;;QAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,gBACzC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAG/C,4DACE,KAAK,EAAE,8BAA8B,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/G,QAAQ,EAAC,GAAG,IAEZ,4DAAK,KAAK,EAAC,0BAA0B,IACnC,8DAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAI,EAC5B,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAChG,CACD,EAGP,4DAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACpE,8DAAO,OAAO,EAAC,QAAQ,IACrB,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,GAAI,CAC7C,CACJ,CACF,EACP;KAEF;;;;;;;;;;;","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'; \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    trackComponent('ifx-switch')\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":";;;;AAAA,MAAM,SAAS,GAAG,ygDAAygD,CAAC;AAC5hD,wBAAe,SAAS;;MCUX,MAAM;IANnB;;;;;;;;;;QAOU,YAAO,GAAY,KAAK,CAAC;QACzB,SAAI,GAAW,EAAE,CAAC;QAClB,aAAQ,GAAY,KAAK,CAAC;QAEzB,oBAAe,GAAY,KAAK,CAAC;KA+G3C;IAtGC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,YAAY,CAAC,CAAA;SAC7B;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;KACrC;IAGD,cAAc;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE;YAC/B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;SAC/B;aAAM;YACL,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAClC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KAEvB;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;SACjC;KACF;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QAE7C,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACzC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;aAClC;SACF;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;SAClC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;;QAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,gBACzC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAG/C,4DACE,KAAK,EAAE,8BAA8B,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/G,QAAQ,EAAC,GAAG,IAEZ,4DAAK,KAAK,EAAC,0BAA0B,IACnC,8DAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAI,EAC5B,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAChG,CACD,EAGP,4DAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACpE,8DAAO,OAAO,EAAC,QAAQ,IACrB,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,GAAI,CAC7C,CACJ,CACF,EACP;KAEF;;;;;;;;;;;","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}