npm - @infineon/infineon-design-system-stencil - Versions diffs - 34.4.1 → 34.4.2--canary.1845.f9381a0b22ea284783550a9e2559b4ee30524194.0 - Mend

@infineon/infineon-design-system-stencil 34.4.1 → 34.4.2--canary.1845.f9381a0b22ea284783550a9e2559b4ee30524194.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (631) hide show

package/dist/components/ifx-status.js.map CHANGED Viewed

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

package/dist/components/ifx-step.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
 import { d as defineCustomElement$2 } from './p-11e95622.js';
-const stepCss = ":root{font-family:\"Source Sans 3\", sans-serif}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
+const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
 const IfxStepStyle0 = stepCss;
 const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {

package/dist/components/ifx-step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-step.js","mappings":"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","names":[],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering400; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering400;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering400;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering400;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering400;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering400;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering400;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active \|\| this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector /}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error \|\| (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n \n {/ Right connector /}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n / Step labels */\n (this.stepperState.variant !== 'compact' \|\| (this.stepperState.variant === 'compact' && (this.active \|\| this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}
1	+ {"file":"ifx-step.js","mappings":"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","names":[],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering400; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering400;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering400;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering400;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering400;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering400;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering400;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active \|\| this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector /}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error \|\| (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n \n {/ Right connector /}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n / Step labels */\n (this.stepperState.variant !== 'compact' \|\| (this.stepperState.variant === 'compact' && (this.active \|\| this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}

package/dist/components/ifx-stepper.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-const stepperCss = ":root{font-family:\"Source Sans 3\", 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 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;
 const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {

package/dist/components/ifx-stepper.js.map CHANGED Viewed

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

package/dist/components/ifx-switch.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-const switchCss = ":root{font-family:\"Source Sans 3\", 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 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;
 const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {

package/dist/components/ifx-switch.js.map CHANGED Viewed

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