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

package/dist/components/{p-ac35091f.js → p-2ab1960f.js}

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
 import { t as trackComponent } from './p-6ecb6a6f.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
 
 const progressBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}";
 const IfxProgressBarStyle0 = progressBarCss;
@@ -18,12 +19,15 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         }
     }
     componentWillLoad() {
-        trackComponent('ifx-progress-bar');
+        if (!isNestedInIfxComponent(this.el)) {
+            trackComponent('ifx-progress-bar');
+        }
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: '46fcb7108f7b9b0f39529e3518eda14a799967a1', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '4ef3652d6641d7c8ecc7fa1e338fbafb1602bec3', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '28fc6f424c210d7e0bb3aab37772d255597687fa', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: 'f32f05b8ca5034bbf4d3270972a84e1054c2a303', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '971450ee9bf27ab0a45eea4428a19fa0812281af', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '54763afdb23db9b4578f39d3230b3060bedc6149', class: "label" }, `${this.internalValue}%`))));
     }
+    get el() { return this; }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }
@@ -52,4 +56,4 @@ function defineCustomElement() {
 
 export { ProgressBar as P, defineCustomElement as d };
 
-//# sourceMappingURL=p-ac35091f.js.map
+//# sourceMappingURL=p-2ab1960f.js.map

package/dist/components/p-2ab1960f.js.map

@@ -0,0 +1 @@
+{"file":"p-2ab1960f.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB,CAAC;AAC/lB,6BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;QAOU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA2BpC;IAtBC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAED,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,kBAAkB,CAAC,CAAA;SACnC;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAED,MAAM;QACJ,QACE,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1F,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, 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-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Element() el: HTMLElement;\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-progress-bar')\n    }\n    this.internalValue = this.value;\n  }\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-83a8f960.js → p-5b74932c.js}

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
 import { t as trackComponent } from './p-6ecb6a6f.js';
-import { d as defineCustomElement$1 } from './p-a068fe64.js';
+import { i as isNestedInIfxComponent } from './p-a22c9102.js';
+import { d as defineCustomElement$1 } from './p-869e8cfa.js';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -7001,7 +7002,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         }
     }
     componentWillLoad() {
-        trackComponent('ifx-select');
+        if (!isNestedInIfxComponent(this.root)) {
+            trackComponent('ifx-select');
+        }
         this.handleCloseButton();
     }
     componentWillUpdate() {
@@ -7058,9 +7061,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: '923331dc38a468bd5f1bbc0d46c31d6a40c7912a', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '463903d1c1d62e7b7d71a09a106bf87ad76973e2', class: `${choicesWrapperClass} 
+        return (h("div", { key: '3858d1a60b3fd30133ab8109a22ad8b9b8a10fc2', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'c91fdf41f9de0a8b327cd7e7b51d6da6749f8bdb', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '00b06a8089e23470c061e1d4a48f20d132810051', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'da962814a77987e96b8402177b3b5be0f96f9cd0', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: 'c8e03cd76324f7fc51f37bb76ab993cb30a0086e', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '3adf9e362c8dbee09d09369a0cd661d17b410998', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'c4782ef54d844990ba0169dcde818ca865fb65a7', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: '6d65c426e243aff53ddab07044e365950012eafb', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'c282d8e004f11deec48a5db901322001e3bc6200', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'fb31899717c1d1262015cc1a43236dcf9481bc7b', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: '6810845cc49566f4e6dfdd9a623aff1e263bdfdd', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '980f0f71907a91fe9572a8c95e5e387dfed071fd', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: '54b2a9d06ca5b3832d167cec5be8372c462431e7', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: '5d2453d225df268fcfdd1f9c28f087c7ca25ff2d', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7387,4 +7390,4 @@ function defineCustomElement() {
 
 export { Choices as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-83a8f960.js.map
+//# sourceMappingURL=p-5b74932c.js.map