npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0 → 30.11.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0 → 30.11.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 (815) hide show

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
+import { d as defineCustomElement$2 } from './p-828bbb25.js';
 const sliderCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-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:129px;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;
@@ -13,15 +13,8 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends H {
         this.min = 0;
         this.max = 100;
         this.step = 1;
-        this.value = undefined;
-        this.minValueHandle = undefined;
-        this.maxValueHandle = undefined;
         this.disabled = false;
         this.showPercentage = false;
-        this.leftIcon = undefined;
-        this.rightIcon = undefined;
-        this.leftText = undefined;
-        this.rightText = undefined;
         this.type = 'single';
         this.internalValue = 0;
         this.percentage = 0;

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

	@@ -1 +1 @@
1	- {"file":"ifx-slider.js","mappings":"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","names":["IfxSlider"],"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\n// ifx-slider.scss\n:host {\n display: inline-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: 129px;\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';\n \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(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}
1	+ {"file":"ifx-slider.js","mappings":"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","names":["IfxSlider"],"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\n// ifx-slider.scss\n:host {\n display: inline-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: 129px;\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';\n \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(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/components/ifx-spinner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
 import { c as classNames } from './p-5cdc6210.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)}}";
@@ -9,8 +9,6 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.size = undefined;
-        this.variant = undefined;
         this.inverted = false;
     }
     render() {

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

	@@ -1 +1 @@
1	- {"file":"ifx-spinner.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCQZ,OAAO~~;;;;;;;wBAGU~~,KAAK~~;;IAGjC~~,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.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 classNames from 'classnames';\n \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\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"],"version":3}
1	+ {"file":"ifx-spinner.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCQZ,OAAO;IALpB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;KA+BnC;IA5BC,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.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 classNames from 'classnames';\n \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\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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
 const statusCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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-orange{border:1px solid #E16B25}.container.border-ocean{border:1px solid #0A8276}.container.border-grey{border:1px solid #575352}.container.border-light-grey{border:1px solid #BFBBBB}.container.border-red{border:1px solid #CD002F}.container.border-green{border:1px solid #4CA460}.container.border-berry{border:1px solid #9C216E}.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.orange{background-color:#E16B25}.dot.ocean{background-color:#0A8276}.dot.grey{background-color:#575352}.dot.light-grey{background-color:#BFBBBB}.dot.red{background-color:#CD002F}.dot.green{background-color:#4CA460}.dot.berry{background-color:#9C216E}";
 const IfxStatusStyle0 = statusCss;
@@ -8,7 +8,6 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.label = undefined;
         this.border = false;
         this.color = 'orange';
     }

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

	@@ -1 +1 @@
1	- {"file":"ifx-status.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ujCAAujC,CAAC;AAC1kC,wBAAe,SAAS;;MCQX,MAAM~~;;;;;;sBAES~~,KAAK;~~qBACyD~~,QAAQ~~;;IAIhG~~,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,qBAAqB,CAAC;QAE9F,QACE,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,IAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS,EACzC,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);\n\n &.no-border {\n padding: 0; // Remove padding when border is not present\n }\n\n &.border-orange {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n }\n\n &.border-ocean {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n }\n\n &.border-grey {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n }\n\n &.border-light-grey {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n }\n\n &.border-red {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n }\n\n &.border-green {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n }\n\n &.border-berry {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\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 &.orange {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.ocean {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.grey {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.light-grey {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &.red {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.green {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.berry {\n background-color: tokens.$ifxColorBerry500;\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: 'orange' \| 'ocean' \| 'grey' \| 'light-grey' \| 'red' \| 'green' \| 'berry' = 'orange';\n\n\n\n render() {\n const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n return (\n <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n <span class={`dot ${this.color}`}></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,ujCAAujC,CAAC;AAC1kC,wBAAe,SAAS;;MCQX,MAAM;IANnB;;;;QAQU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAA2E,QAAQ,CAAC;KAclG;IAVC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,qBAAqB,CAAC;QAE9F,QACE,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,IAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS,EACzC,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);\n\n &.no-border {\n padding: 0; // Remove padding when border is not present\n }\n\n &.border-orange {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n }\n\n &.border-ocean {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n }\n\n &.border-grey {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n }\n\n &.border-light-grey {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n }\n\n &.border-red {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n }\n\n &.border-green {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n }\n\n &.border-berry {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\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 &.orange {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.ocean {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.grey {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.light-grey {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &.red {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.green {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.berry {\n background-color: tokens.$ifxColorBerry500;\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: 'orange' \| 'ocean' \| 'grey' \| 'light-grey' \| 'red' \| 'green' \| 'berry' = 'orange';\n\n\n\n render() {\n const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n return (\n <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n <span class={`dot ${this.color}`}></span>\n <p class=\"text\">{this.label}</p>\n </div>\n );\n }\n}"],"version":3}

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { d as defineCustomElement$2 } from './p-828bbb25.js';
 const stepCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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;
@@ -18,7 +18,6 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
             showStepNumber: false,
             variant: 'default',
             indicatorPosition: 'left' };
-        this.active = undefined;
         this.clickable = false;
     }
     onStepChange(event) {

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,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
 const stepperCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.stepper{display:flex;align-items:center}.stepper.compact{justify-content:space-between;align-items:center}.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;
@@ -13,7 +13,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         this.indicatorPosition = 'left';
         this.showStepNumber = false;
         this.variant = 'default';
-        this.stepsCount = undefined;
         this.shouldEmitEvent = true;
         this.emittedByClick = false;
     }

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 justify-content: space-between;\n align-items: center;\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].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 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":"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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 justify-content: space-between;\n align-items: center;\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].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 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,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
 const switchCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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;
@@ -13,7 +13,6 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.checked = false;
         this.name = '';
         this.disabled = false;
-        this.value = undefined;
         this.internalChecked = false;
     }
     async isChecked() {

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

	@@ -1 +1 @@
1	- {"file":"ifx-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,iiDAAiiD,CAAC;AACpjD,wBAAe,SAAS;;MCSX,MAAM~~;;;;;;;uBACU~~,KAAK;~~oBACT~~,EAAE;~~wBACG~~,KAAK~~;;+BAEG~~,KAAK~~;;IASzC~~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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}
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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
 const tabCss = ":host{display:block}";
 const IfxTabStyle0 = tabCss;
@@ -8,8 +8,6 @@ const IfxTab$1 = /*@__PURE__*/ proxyCustomElement(class IfxTab extends H {
         super();
         this.__registerHost();
         this.tabHeaderChange = createEvent(this, "tabHeaderChange", 7);
-        this.header = undefined;
-        this.disabled = undefined;
         this.icon = '';
         this.iconPosition = 'left';
     }

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

	@@ -1 +1 @@
1	- {"file":"ifx-tab.js","mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB,CAAC;AACtC,qBAAe,MAAM;;MCMRA,QAAM~~;;;;;;;oBAIM~~,EAAE;~~4BACgB~~,MAAM~~;;IAG/C~~,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACvC;IAED,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxTab"],"sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n display: block;\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n @Prop() icon: string = '';\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n @Event() tabHeaderChange: EventEmitter;\n\n componentWillUpdate() { \n this.tabHeaderChange.emit(this.header)\n }\n\n render() {\n return <slot />;\n }\n}"],"version":3}
1	+ {"file":"ifx-tab.js","mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB,CAAC;AACtC,qBAAe,MAAM;;MCMRA,QAAM;IALnB;;;;QASU,SAAI,GAAW,EAAE,CAAC;QAClB,iBAAY,GAAqB,MAAM,CAAC;KAUjD;IAPC,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACvC;IAED,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxTab"],"sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n display: block;\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n @Prop() icon: string = '';\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n @Event() tabHeaderChange: EventEmitter;\n\n componentWillUpdate() { \n this.tabHeaderChange.emit(this.header)\n }\n\n render() {\n return <slot />;\n }\n}"],"version":3}

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

@@ -1,15 +1,15 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-3ee20ed5.js';
 import { c as classNames } from './p-5cdc6210.js';
 import { c as createGrid } from './p-1429e9ea.js';
-import { d as defineCustomElement$a } from './p-d0a26bd5.js';
-import { d as defineCustomElement$9 } from './p-f0f583d5.js';
-import { d as defineCustomElement$8 } from './p-c1f3a68c.js';
-import { d as defineCustomElement$7 } from './p-23cdd5a7.js';
-import { d as defineCustomElement$6 } from './p-7e430b83.js';
-import { d as defineCustomElement$5 } from './p-8eed2f39.js';
-import { d as defineCustomElement$4 } from './p-9ee4ea24.js';
-import { d as defineCustomElement$3 } from './p-2f1e7628.js';
-import { d as defineCustomElement$2 } from './p-11922b8b.js';
+import { d as defineCustomElement$a } from './p-5bc6d67d.js';
+import { d as defineCustomElement$9 } from './p-6fd6d1a9.js';
+import { d as defineCustomElement$8 } from './p-261ae64c.js';
+import { d as defineCustomElement$7 } from './p-e57d6c00.js';
+import { d as defineCustomElement$6 } from './p-828bbb25.js';
+import { d as defineCustomElement$5 } from './p-e74c8dfd.js';
+import { d as defineCustomElement$4 } from './p-8554cfb9.js';
+import { d as defineCustomElement$3 } from './p-15d94c58.js';
+import { d as defineCustomElement$2 } from './p-14204f28.js';
 class ButtonCellRenderer {
     init(params) {
@@ -117,25 +117,21 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.allRowData = [];
-        this.originalRowData = [];
         this.currentPage = 1;
-        this.cols = undefined;
-        this.rows = undefined;
-        this.buttonRendererOptions = undefined;
         this.rowData = [];
         this.colData = [];
         this.filterOptions = {};
         this.currentFilters = {};
-        this.uniqueKey = undefined;
+        this.allRowData = [];
         this.rowHeight = 'default';
         this.tableHeight = 'auto';
         this.pagination = true;
         this.paginationPageSize = 10;
-        this.filterOrientation = 'sidebar';
+        this.filterOrientation = 'sidebar'; // topbar / none
         this.showSidebarFilters = true;
         this.matchingResultsCount = 0;
         this.showLoading = false;
+        this.originalRowData = [];
     }
     handleChipChange(event) {
         const { name, currentSelection } = event.detail;