npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.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 (1205) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-slider.entry.js","sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 4px;}\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n \n\n &:not(:disabled)::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorOcean500;\n border-radius: 50%;\n cursor: pointer;\n transition: box-shadow 0.2s;\n\n &:hover {\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n\n input[type='range']:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorEngineering300;\n border-radius: 50%;\n cursor: default;\n }\n \n & .range-slider__wrapper {\n position: relative;\n width: 100%;\n height: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0px 2px;\n \n background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n &:has(input[type='range']:disabled) {\n background: tokens.$ifxColorEngineering300;\n }\n\n \n @mixin thumb() {\n -webkit-appearance: none;\n border: none; \n pointer-events: auto;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n \n @mixin track() {\n -webkit-appearance: none;\n border: none;\n background: none; \n width: 100%;\n }\n\n input[type='range'] {\n position: absolute;\n pointer-events: none; \n background: none;\n \n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 4px;}\n\n &::-webkit-slider-thumb { @include thumb; }\n &::-moz-range-thumb { @include thumb; }\n &::-ms-thumb { @include thumb; }\n\n &::-webkit-slider-runnable-track { @include track; }\n &::-moz-range-track { @include track; }\n }\n }\n \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Prop() ariaLabel: string \| null;\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 async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-slider', await framework)\n }\n this.updateValuePercent();\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=\"Slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalValue}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n /> \n :\n <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\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 aria-label=\"Minimum value slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\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 aria-label=\"Maximum value slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalMaxValue}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\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}"],"names":[],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,ujGAAujG;;MCU5jG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAG,CAAA,GAAA,GAAW,CAAC;AACf,QAAA,IAAG,CAAA,GAAA,GAAW,GAAG;AACjB,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC;AAIhB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAK/B,QAAA,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAEnC,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AACzB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAgB,CAAA,gBAAA,GAAW,CAAC;AAC5B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;AAwOxC;AA9NC,IAAA,YAAY,CAAC,QAAgB,EAAA;AAC3B,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;QAC7B,IAAI,CAAC,kBAAkB,EAAE;;AAI3B,IAAA,eAAe,CAAC,QAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;QAChC,IAAI,CAAC,kBAAkB,EAAE;;AAI3B,IAAA,eAAe,CAAC,QAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;QAChC,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,qBAAqB,GAAA;AACnB,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC;AACrF,QAAA,OAAO,kBAAkB;;AAG3B,IAAA,8BAA8B,CAAC,KAAY,EAAA;AACzC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;AAC/E,YAAA,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;gBAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK;;iBAC5C;gBACH,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK;;;AAGnD,QAAA,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;YAC7B,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;aACrD;YACL,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;AAE5D,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAC,CAAC;QACnF,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAC;;AAG3C,IAAA,+BAA+B,CAAC,KAAY,EAAA;AAC1C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE;AAClD,QAAA,IAAG,MAAM,CAAC,EAAE,KAAK,YAAY,EAAE;YAC7B,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;;aACzD;YACL,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;;;IAIlE,wBAAwB,GAAA;AACtB,QAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;QACjD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG;QAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,GAAC,GAAG,IAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;;AAGjE,IAAA,iBAAiB,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACvC,IAAI,CAAC,wBAAwB,EAAE;QAC/B,IAAI,CAAC,kBAAkB,EAAE;;AAGnB,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG;AACtC,QAAA,MAAM,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI;QAC3C,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;AAC9B,YAAA,OAAO,IAAI,CAAC,GAAG,GAAG,aAAa,IAAI,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;;aACpD;AACL,YAAA,OAAO,IAAI,CAAC,GAAG,GAAG,aAAa,GAAG,SAAS;;;IAI/C,kBAAkB,GAAA;QAChB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG;AAC/B,QAAA,IAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;AACxB,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;gBAC3E,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG;AAClC,gBAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,CAAG,CAAC;;AAG3F,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;gBAC3E,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG;AAClC,gBAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,CAAG,CAAC;;;aAGtF;AAEL,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;gBACxE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG;gBAC/B,MAAM,UAAU,GAAG,CAAC,GAAG,GAAC,GAAG,IAAI,GAAG;AAClC,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,CAAG,CAAC;;;;;;IAQ1E,yBAAyB,CAAC,WAAmB,EAAE,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,YAAY,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACnC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;;aAC9B;YACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACnC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;;;IAIvC,iBAAiB,GAAA;AACf,QAAA,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC3B,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,GAAC,IAAI,CAAC,GAAG,IAAI,CAAC;;aACvC;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGzE,IAAI,CAAC,wBAAwB,EAAE;AAE/B,QAAA,IAAG,IAAI,CAAC,cAAc,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc;;AAC5E,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG;AACrC,QAAA,IAAG,IAAI,CAAC,cAAc,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc;;AAC5E,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;QAE/C,IAAI,CAAC,kBAAkB,EAAE;;IAI3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,QAAQ,KACZ,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EACrB,EAAA,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,EAAA,CAAI,CACzF,EAEC,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrB,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EACtC,YAAA,EAAA,QAAQ,mBACJ,IAAI,CAAC,GAAG,EAAA,eAAA,EACR,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,aAAa,EAClB,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC7C;;gBAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAG,uBAAuB,EAAa,YAAA,EAAA,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,EAC3E,CACE,CAAA,OAAA,EAAA,EAAA,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAsB,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAC9D,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,gBACtD,sBAAsB,EAAA,eAAA,EAClB,IAAI,CAAC,GAAG,EAAA,eAAA,EACR,IAAI,CAAC,GAAG,EACR,eAAA,EAAA,IAAI,CAAC,gBAAgB,mBAAiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EACrF,CAAA,EACF,CACE,CAAA,OAAA,EAAA,EAAA,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAsB,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAC9D,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAA,YAAA,EACtD,sBAAsB,EAClB,eAAA,EAAA,IAAI,CAAC,GAAG,EACR,eAAA,EAAA,IAAI,CAAC,GAAG,EAAA,eAAA,EACR,IAAI,CAAC,gBAAgB,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,CAC/C,CACE,EAET,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE,CAAA,EAAA,CAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE,CAAA,EAAA,EACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,KAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,kBAAA,EAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EAAA,EAE7D,IAAI,CAAC,UAAU,MACX,CACR,CACG;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ifx-slider.entry.js","sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.left-icon,\r\n.right-icon,\r\n.left-text,\r\n.right-text,\r\n.percentage-display {\r\n font-size: tokens.$ifxFontSizeS;\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace100;\r\n\r\n &.disabled {\r\n // Add the disabled state for the percentage display\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n}\r\n\r\n.left-icon,\r\n.left-text {\r\n margin-right: tokens.$ifxSpace100;\r\n}\r\n\r\n.right-icon,\r\n.right-text,\r\n.percentage-display {\r\n margin-left: tokens.$ifxSpace100;\r\n}\r\n\r\n\r\n.ifx-slider {\r\n display: flex;\r\n align-items: center;\r\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n\r\n input[type='range'] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 4px;\r\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\r\n outline: none;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n\r\n &:focus-visible {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 4px;}\r\n\r\n &::-moz-range-thumb {\r\n width: tokens.$ifxSize250;\r\n height: tokens.$ifxSize250;\r\n border-radius: 50%;\r\n background: tokens.$ifxColorOcean500;\r\n cursor: pointer;\r\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n\r\n &:not(:disabled)::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n background: tokens.$ifxColorOcean500;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: box-shadow 0.2s;\r\n\r\n &:hover {\r\n background: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active {\r\n background: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n }\r\n\r\n input[type='range']:disabled {\r\n background: tokens.$ifxColorEngineering300;\r\n cursor: default;\r\n }\r\n\r\n input[type='range']:disabled::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n background: tokens.$ifxColorEngineering300;\r\n border-radius: 50%;\r\n cursor: default;\r\n }\r\n \r\n & .range-slider__wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0px 2px;\r\n \r\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%);\r\n\r\n &:has(input[type='range']:disabled) {\r\n background: tokens.$ifxColorEngineering300;\r\n }\r\n\r\n \r\n @mixin thumb() {\r\n -webkit-appearance: none;\r\n border: none; \r\n pointer-events: auto;\r\n cursor: pointer;\r\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n @mixin track() {\r\n -webkit-appearance: none;\r\n border: none;\r\n background: none; \r\n width: 100%;\r\n }\r\n\r\n input[type='range'] {\r\n position: absolute;\r\n pointer-events: none; \r\n background: none;\r\n \r\n &:focus-visible {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 4px;}\r\n\r\n &::-webkit-slider-thumb { @include thumb; }\r\n &::-moz-range-thumb { @include thumb; }\r\n &::-ms-thumb { @include thumb; }\r\n\r\n &::-webkit-slider-runnable-track { @include track; }\r\n &::-moz-range-track { @include track; }\r\n }\r\n }\r\n \r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-slider',\r\n styleUrl: 'slider.scss',\r\n shadow: true,\r\n})\r\nexport class IfxSlider {\r\n @Prop() min: number = 0;\r\n @Prop() max: number = 100;\r\n @Prop() step: number = 1;\r\n @Prop() value: number;\r\n @Prop() minValueHandle: number;\r\n @Prop() maxValueHandle: number;\r\n @Prop() disabled: boolean = false;\r\n @Prop() showPercentage: boolean = false;\r\n @Prop() leftIcon: string;\r\n @Prop() rightIcon: string;\r\n @Prop() leftText: string;\r\n @Prop() rightText: string;\r\n @Prop() type: 'single' \| 'double' = 'single';\r\n @Prop() ariaLabel: string \| null;\r\n @State() internalValue: number = 0;\r\n @State() percentage: number = 0;\r\n @State() internalMinValue: number = 0;\r\n @State() internalMaxValue: number = 100;\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Element() el;\r\n\r\n private inputRef: HTMLInputElement;\r\n private minInputRef: HTMLInputElement;\r\n private maxInputRef: HTMLInputElement;\r\n \r\n @Watch('value')\r\n valueChanged(newValue: number) {\r\n this.internalValue = newValue;\r\n this.updateValuePercent();\r\n }\r\n\r\n @Watch('minValueHandle')\r\n minValueChanged(newValue: number) {\r\n this.internalMinValue = newValue;\r\n this.updateValuePercent();\r\n }\r\n \r\n @Watch('maxValueHandle')\r\n maxValueChanged(newValue: number) {\r\n this.internalMaxValue = newValue;\r\n this.updateValuePercent();\r\n }\r\n\r\n getRangeSliderWrapper() {\r\n const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\r\n return rangeSliderWrapper;\r\n }\r\n\r\n handleInputChangeOfRangeSlider(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\r\n if(target.id === 'max-slider') {\r\n this.maxInputRef.value = this.minInputRef.value;\r\n }else{\r\n this.minInputRef.value = this.maxInputRef.value;\r\n }\r\n }\r\n if(target.id === 'max-slider') {\r\n this.internalMaxValue = parseFloat(this.maxInputRef.value);\r\n } else {\r\n this.internalMinValue = parseFloat(this.minInputRef.value);\r\n }\r\n this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\r\n this.updateValuePercent();\r\n this.updateZIndexIfRangeSlider(target.id)\r\n }\r\n \r\n handleOnMouseLeaveOfRangeSlider(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n const sliderWrapper = this.getRangeSliderWrapper();\r\n if(target.id === 'max-slider') {\r\n sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\r\n } else {\r\n sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\r\n }\r\n }\r\n\r\n calculatePercentageValue() {\r\n const num = (this.internalValue - this.min) * 1.0;\r\n const den = this.max - this.min;\r\n this.percentage = +parseFloat(String((num/den)100)).toFixed(2);\r\n }\r\n\r\n handleInputChange(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = parseFloat(target.value);\r\n this.ifxChange.emit(this.internalValue);\r\n this.calculatePercentageValue();\r\n this.updateValuePercent();\r\n }\r\n\r\n private roundToValidStep(value: number) {\r\n const relativeValue = value - this.min;\r\n const remainder = relativeValue % this.step;\r\n if (remainder >= this.step / 2) {\r\n return this.min + relativeValue + (this.step - remainder);\r\n } else {\r\n return this.min + relativeValue - remainder;\r\n }\r\n }\r\n\r\n updateValuePercent() {\r\n const den = this.max - this.min;\r\n if(this.type === 'double'){\r\n if (this.minInputRef) {\r\n const num = (this.roundToValidStep(this.internalMinValue) - this.min) 1.0;\r\n const minPercent = (num/den) * 100;\r\n this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\r\n }\r\n\r\n if (this.maxInputRef) {\r\n const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\r\n const maxPercent = (num/den) * 100;\r\n this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\r\n }\r\n\r\n } else {\r\n\r\n if (this.inputRef) {\r\n const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\r\n const den = this.max - this.min;\r\n const percentage = (num/den) * 100;\r\n this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\r\n }\r\n\r\n }\r\n } \r\n \r\n // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \r\n // if min and max thumbs take the same value.\r\n updateZIndexIfRangeSlider(targetId: string = '') {\r\n if (targetId === 'max-slider') {\r\n this.minInputRef.style.zIndex = '1';\r\n this.maxInputRef.style.zIndex = '2';\r\n } else {\r\n this.minInputRef.style.zIndex = '2';\r\n this.maxInputRef.style.zIndex = '1';\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n if(this.value === undefined) {\r\n this.internalValue = (this.max-this.min) / 2;\r\n } else {\r\n this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\r\n }\r\n\r\n this.calculatePercentageValue();\r\n\r\n if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\r\n else this.internalMinValue = this.min;\r\n if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\r\n else this.internalMaxValue = this.max;\r\n }\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-slider', await framework)\r\n }\r\n this.updateValuePercent();\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div class=\"ifx-slider\">\r\n {this.leftText && (\r\n <span class={`left-text`}>\r\n {this.leftText}\r\n </span>\r\n )}\r\n {this.leftIcon && (\r\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\r\n )}\r\n {\r\n (this.type !== 'double') ?\r\n <input\r\n type=\"range\"\r\n min={this.min}\r\n max={this.max}\r\n step={this.step}\r\n value={this.internalValue}\r\n disabled={this.disabled}\r\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleInputChange(event)}\r\n aria-label=\"Slider\"\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n aria-valuenow={this.internalValue}\r\n aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n /> \r\n :\r\n <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\r\n <input \r\n id='min-slider'\r\n type='range'\r\n min={this.min}\r\n max={this.max}\r\n step={this.step}\r\n value={this.internalMinValue}\r\n disabled={this.disabled}\r\n ref={(el) => (this.minInputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n aria-label=\"Minimum value slider\"\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n />\r\n <input \r\n id='max-slider'\r\n type='range'\r\n min={this.min}\r\n max={this.max}\r\n step={this.step}\r\n value={this.internalMaxValue}\r\n disabled={this.disabled}\r\n ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n aria-label=\"Maximum value slider\"\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n aria-valuenow={this.internalMaxValue}\r\n aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n />\r\n </div>\r\n }\r\n {this.rightIcon && (\r\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\r\n )}\r\n {this.rightText && (\r\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\r\n {this.rightText}\r\n </span>\r\n )}\r\n\r\n {this.showPercentage && (this.type !== \"double\") && (\r\n <span\r\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\r\n >\r\n {this.percentage}%\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"names":[],"mappings":"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"}

package/dist/esm/ifx-spinner.ifx-text-field.entry.js.map CHANGED Viewed

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

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

@@ -18,8 +18,8 @@ const Spinner = class {
         }
     }
     render() {
-        return (h("div", { key: 'dcb5fa927ad5ad53c34eb4c47a115cf3ae9958cd', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, h("div", { key: '490dd918800c9ae2dad8289cc5b7adaefeff8ab7', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '4da8f91e1154a482b8f196e7a8c972db546ca16a', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'd1e37b9d383892fc9528588184fb3af7c76934de', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'f750eebbab8e00e9f1b6913d8f229ad13f1b94a2', id: "spinner/conductor" }, h("path", { key: 'c96fa1feb182affde75eabf4a4cc834f2f3d3dcc', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (h("div", { key: '3494b108576459cad2c7d1c9796c32486df2049f', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, h("div", { key: '4c38429b38606bbfa4886e1c5a356b567961726d', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '9c76d02a9a93eb20882b89875fc18b15ff7219d3', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '7b09ca8942f361fed1e5c4af040e2facc7ae9044', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '28fff6e48621daf10ba79f86975b6c11860a9d6f', id: "spinner/conductor" }, h("path", { key: '31a4c0c243b82b3c3f0c870f6990b5d41e7c5ef2', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -100,11 +100,11 @@ const TextField = class {
         }
     }
     render() {
-        return (h("div", { key: 'fde8ba65931e70265b84ddd75143a78627cbbba7', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '662198ca46ff5a6d568589b5d0ebb4b6117a6205', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'be2ec4dec1d869c891f8defac11181ca18f06053', htmlFor: this.internalId }, h("span", { key: '46d77c5682c4ed8ac8cfb41a4ef676bc061236a8' }, this.label), this.required && h("span", { key: '28ddfeee2b30168c4c755bdc822fec0ef98c529a', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: '20457f5caf1857c5e7259763a885ed7c7a9df636', class: "textInput__bottom-wrapper" }, h("div", { key: '7e9a0bfc6a2f590d741ece4639d5f38e4c712085', class: "input-container" }, this.icon && h("ifx-icon", { key: 'ebdc52fb4dcca7912fd6ac428f1f42442fbb2313', class: "input-icon", icon: this.icon }), h("input", { key: '4760819b300477cbac4da643c41b3dfb97d62285', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
-                ${this.error ? 'error' : ''}
-                ${this.readOnly ? 'readonly' : ''}
-              ${this.size === 's' ? 'input-s' : ''}
-              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: '34d4b05f44f3b5a0f4afddf40b2d3a0384482a57', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: 'da655fe4c12336e535e9f1be649136ce9344c115', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
+        return (h("div", { key: 'd67359eb3f5b01ca82f3d7e100c932b394f5dd72', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '984feba03b24e932834781c8f816e79817fbec7f', class: "textInput__top-wrapper" }, this.label && (h("label", { key: '02c23276205f851ee2c8807d2b67bccc11fb4350', htmlFor: this.internalId }, h("span", { key: '8473ccc62f76dad8aa84b5f98b36caacaa5c3fb2' }, this.label), this.required && h("span", { key: '60b25e7269a034b0d4fa7fd63e25151c1e0b8de0', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: 'f9e0d1caa7c5f8774132fbed4857e84af4dbb5a2', class: "textInput__bottom-wrapper" }, h("div", { key: '10ae27bf8edb9a9fc1a35b9e79db46dc07272a76', class: "input-container" }, this.icon && h("ifx-icon", { key: 'e78ef7ef5c27a8366fcc87148112c3f2fd5c6432', class: "input-icon", icon: this.icon }), h("input", { key: 'f384201d840524143d8e9e75dd25e7d09b64ab52', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
+                ${this.error ? 'error' : ''}
+                ${this.readOnly ? 'readonly' : ''}
+              ${this.size === 's' ? 'input-s' : ''}
+              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: 'b2e4e802c696d38c22975c09c1e2737187bf51f6', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: '870558a1ab7766ffc694ae7e0fcb1b6ba95e5f6b', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

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

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

@@ -20,7 +20,7 @@ const Status = class {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: 'df3241b7191cf739ee30f03c16d86572c6383e47', role: "status", class: containerClass }, h("span", { key: '24cef43702366494d9fbaaa11f8f1b5d84d007d3', class: `dot ${effectiveColor}` }), h("p", { key: 'a2e8854926c0b976f5fbda21d0299fa74d90122e', class: "text" }, this.label)));
+        return (h("div", { key: '91324962c9fe55931ec6b01b6eb9605865bfa202', role: "status", class: containerClass }, h("span", { key: '1b207b051a6de02f8f193a7c3e4e7f101d78b2f9', class: `dot ${effectiveColor}` }), h("p", { key: 'bd518bf45e24efa53c904096b144fda3f9b04ae5', class: "text" }, this.label)));
     }
     get el() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-status.entry.js","sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-block;\n}\n\n.container {\n display: flex;\n min-height: 1.25em;\n align-items: center;\n padding: 0 tokens.$ifxSpace100;\n border-radius: tokens.$ifxBorderRadiusRound;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.no-border {\n padding: 0; // Remove padding when border is not present\n }\n\n &.border-engineering-100{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n }\n\n &.border-engineering-200{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n }\n\n &.border-engineering-300{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n }\n\n &.border-engineering-400{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n }\n\n &.border-engineering-500{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n }\n\n &.border-engineering-600{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n }\n\n &.border-ocean-100 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n }\n\n &.border-ocean-200 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n }\n\n &.border-ocean-300 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n }\n\n &.border-ocean-400 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n }\n\n &.border-ocean-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n }\n\n &.border-ocean-600 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n }\n\n &.border-ocean-700 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n }\n\n &.border-red-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n }\n\n &.border-red-600 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n }\n\n &.border-red-700 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n }\n\n &.border-orange-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n }\n\n &.border-green-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n }\n\n &.border-lawn-400 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n }\n\n &.border-lawn-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n }\n\n &.border-lawn-700 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n }\n\n &.border-berry-400 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n }\n\n &.border-berry-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n }\n\n &.border-sun-400 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n }\n\n &.border-sun-500 {\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n }\n\n &.border-sand-400{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n }\n\n &.border-sand-500{\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n }\n\n\n}\n\n.text {\n margin: 0;\n padding-left: tokens.$ifxSpace50;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightS;\n display: inline;\n color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n display: inline-block;\n width: tokens.$ifxSize100;\n height: tokens.$ifxSize100;\n border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n &.engineering-100 {\n background-color: tokens.$ifxColorEngineering100;\n }\n\n &.engineering-200 {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.engineering-300 {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &.engineering-400 {\n background-color: tokens.$ifxColorEngineering400;\n }\n\n &.engineering-500 {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.engineering-600 {\n background-color: tokens.$ifxColorEngineering600;\n }\n\n &.ocean-100 {\n background-color: tokens.$ifxColorOcean100;\n }\n\n &.ocean-200 {\n background-color: tokens.$ifxColorOcean200;\n }\n\n &.ocean-300 {\n background-color: tokens.$ifxColorOcean300;\n }\n\n &.ocean-400 {\n background-color: tokens.$ifxColorOcean400;\n }\n\n &.ocean-500 {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.ocean-600 {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &.ocean-700 {\n background-color: tokens.$ifxColorOcean700;\n }\n\n &.red-500 {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.red-600 {\n background-color: tokens.$ifxColorRed600;\n }\n\n &.red-700 {\n background-color: tokens.$ifxColorRed700;\n }\n\n &.orange-500 {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.green-500 {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.lawn-400{\n background-color: tokens.$ifxColorLawn400;\n }\n\n &.lawn-500{\n background-color: tokens.$ifxColorLawn500;\n }\n\n &.lawn-700 {\n background-color: tokens.$ifxColorLawn700;\n }\n\n &.berry-400 {\n background-color: tokens.$ifxColorBerry400;\n }\n\n &.berry-500 {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &.sun-400 {\n background-color: tokens.$ifxColorSun400;\n }\n\n &.sun-500 {\n background-color: tokens.$ifxColorSun500;\n }\n\n &.sand-400{\n background-color: tokens.$ifxColorSand400;\n }\n\n &.sand-500{\n background-color: tokens.$ifxColorSand500;\n }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-status',\n styleUrl: 'status.scss',\n shadow: true\n})\n\nexport class Status {\n @Element() el;\n @Prop() label: string;\n @Prop() border: boolean = false;\n @Prop() color: string = 'orange-500';\n \n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-status', await framework)\n }\n }\n\n render() {\n const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n return (\n <div role=\"status\" class={containerClass}>\n <span class={`dot ${effectiveColor}`}></span>\n <p class=\"text\">{this.label}</p>\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,i8FAAi8F;;MCWt8F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAoBrC;AAlBC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACJ,QAAA,MAAM,cAAc,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY;AACrE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,iBAAA,EAAoB,cAAc,CAAE,CAAA,GAAG,qBAAqB;QAEjG,QACE,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,IAAA,EAAO,cAAc,CAAA,CAAE,EAAS,CAAA,EAC7C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CAC5B;;;;;;;;"}
1	+ {"version":3,"file":"ifx-status.entry.js","sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n min-height: 1.25em;\r\n align-items: center;\r\n padding: 0 tokens.$ifxSpace100;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n &.no-border {\r\n padding: 0; // Remove padding when border is not present\r\n }\r\n\r\n &.border-engineering-100{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\r\n }\r\n\r\n &.border-engineering-200{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &.border-engineering-300{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\r\n }\r\n\r\n &.border-engineering-400{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\r\n }\r\n\r\n &.border-engineering-500{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\r\n }\r\n\r\n &.border-engineering-600{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\r\n }\r\n\r\n &.border-ocean-100 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\r\n }\r\n\r\n &.border-ocean-200 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\r\n }\r\n\r\n &.border-ocean-300 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\r\n }\r\n\r\n &.border-ocean-400 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\r\n }\r\n\r\n &.border-ocean-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.border-ocean-600 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\r\n }\r\n\r\n &.border-ocean-700 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\r\n }\r\n\r\n &.border-red-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\r\n }\r\n\r\n &.border-red-600 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\r\n }\r\n\r\n &.border-red-700 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\r\n }\r\n\r\n &.border-orange-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\r\n }\r\n\r\n &.border-green-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\r\n }\r\n\r\n &.border-lawn-400 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\r\n }\r\n\r\n &.border-lawn-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\r\n }\r\n\r\n &.border-lawn-700 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\r\n }\r\n\r\n &.border-berry-400 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\r\n }\r\n\r\n &.border-berry-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\r\n }\r\n\r\n &.border-sun-400 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\r\n }\r\n\r\n &.border-sun-500 {\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\r\n }\r\n\r\n &.border-sand-400{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\r\n }\r\n\r\n &.border-sand-500{\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\r\n }\r\n\r\n\r\n}\r\n\r\n.text {\r\n margin: 0;\r\n padding-left: tokens.$ifxSpace50;\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightS;\r\n display: inline;\r\n color: tokens.$ifxColorBaseBlack;\r\n}\r\n\r\n.dot {\r\n display: inline-block;\r\n width: tokens.$ifxSize100;\r\n height: tokens.$ifxSize100;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n}\r\n\r\n\r\n.dot {\r\n &.engineering-100 {\r\n background-color: tokens.$ifxColorEngineering100;\r\n }\r\n\r\n &.engineering-200 {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &.engineering-300 {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n\r\n &.engineering-400 {\r\n background-color: tokens.$ifxColorEngineering400;\r\n }\r\n\r\n &.engineering-500 {\r\n background-color: tokens.$ifxColorEngineering500;\r\n }\r\n\r\n &.engineering-600 {\r\n background-color: tokens.$ifxColorEngineering600;\r\n }\r\n\r\n &.ocean-100 {\r\n background-color: tokens.$ifxColorOcean100;\r\n }\r\n\r\n &.ocean-200 {\r\n background-color: tokens.$ifxColorOcean200;\r\n }\r\n\r\n &.ocean-300 {\r\n background-color: tokens.$ifxColorOcean300;\r\n }\r\n\r\n &.ocean-400 {\r\n background-color: tokens.$ifxColorOcean400;\r\n }\r\n\r\n &.ocean-500 {\r\n background-color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.ocean-600 {\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &.ocean-700 {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n\r\n &.red-500 {\r\n background-color: tokens.$ifxColorRed500;\r\n }\r\n\r\n &.red-600 {\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &.red-700 {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n\r\n &.orange-500 {\r\n background-color: tokens.$ifxColorOrange500;\r\n }\r\n\r\n &.green-500 {\r\n background-color: tokens.$ifxColorGreen500;\r\n }\r\n\r\n &.lawn-400{\r\n background-color: tokens.$ifxColorLawn400;\r\n }\r\n\r\n &.lawn-500{\r\n background-color: tokens.$ifxColorLawn500;\r\n }\r\n\r\n &.lawn-700 {\r\n background-color: tokens.$ifxColorLawn700;\r\n }\r\n\r\n &.berry-400 {\r\n background-color: tokens.$ifxColorBerry400;\r\n }\r\n\r\n &.berry-500 {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n\r\n &.sun-400 {\r\n background-color: tokens.$ifxColorSun400;\r\n }\r\n\r\n &.sun-500 {\r\n background-color: tokens.$ifxColorSun500;\r\n }\r\n\r\n &.sand-400{\r\n background-color: tokens.$ifxColorSand400;\r\n }\r\n\r\n &.sand-500{\r\n background-color: tokens.$ifxColorSand500;\r\n }\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-status',\r\n styleUrl: 'status.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Status {\r\n @Element() el;\r\n @Prop() label: string;\r\n @Prop() border: boolean = false;\r\n @Prop() color: string = 'orange-500';\r\n \r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-status', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\r\n const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\r\n\r\n return (\r\n <div role=\"status\" class={containerClass}>\r\n <span class={`dot ${effectiveColor}`}></span>\r\n <p class=\"text\">{this.label}</p>\r\n </div>\r\n );\r\n }\r\n}"],"names":[],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,i8FAAi8F;;MCWt8F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAoBrC;AAlBC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACJ,QAAA,MAAM,cAAc,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY;AACrE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,iBAAA,EAAoB,cAAc,CAAE,CAAA,GAAG,qBAAqB;QAEjG,QACE,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,IAAA,EAAO,cAAc,CAAA,CAAE,EAAS,CAAA,EAC7C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CAC5B;;;;;;;;"}

package/dist/esm/ifx-step.entry.js CHANGED Viewed

@@ -46,19 +46,19 @@ const Step = class {
         }
     }
     render() {
-        return (h("div", { key: '9a603ade945d1020bcba53fa85777a27f08f7df1', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
-                        ${this.error ? 'error' : ''}
-                        ${this.stepperState.variant}
-                        ${this.complete ? 'complete' : ''}
-                        ${this.lastStep ? 'last-step' : ''}
-                        indicator-${this.stepperState.indicatorPosition}
-                        ${this.active ? 'active' : ''}
-                        ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '1b27252ddf3369c3732e7b40786645ec2720d8bb', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '38bf07c39837ed4f77de59c44a2a32fbdb069439', class: `step-connector-r ${this.active ? 'active' : ''}` })),
+        return (h("div", { key: '1f778ed752335fa923c0a67eab7f7809a8386109', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
+                        ${this.error ? 'error' : ''}
+                        ${this.stepperState.variant}
+                        ${this.complete ? 'complete' : ''}
+                        ${this.lastStep ? 'last-step' : ''}
+                        indicator-${this.stepperState.indicatorPosition}
+                        ${this.active ? 'active' : ''}
+                        ${this.clickable ? 'clickable' : ''}
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'aa426822898b5151f6d5647befea92729117ef8d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '07937dc730e69e916b45bdf1caa328901b0dc1ff', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: '13de06c3623199feeea739654ded0cd16fca3531', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'e42c6f5cc67f840addf4b66f829cd1c1cebf19ee', icon: 'check16' }), this.active && h("span", { key: '198a9faaed9ed2c04622d39e1fd07753cc781d90', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '4580d809db3368e8bb76c07e3e32b77c77dd98d2', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '9766552769baedf48b506cc790cef3ffcfef85cd', class: `step-connector-r ${this.active ? 'active' : ''}` })),
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: 'f13581114efa81deaeecd38ffe27b14d1d3dcc87', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '6accb517e6d561549759a3a723c4c24b1729e80a' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'c6960ab0dd25316c6407433ecad376b66b47d28c' }))));
+            h("div", { key: '875dec70a774a03043aa35e0a2448ed8ea1d5402', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'df35686cab150ffceb42278824a74e2f754a5164' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '25dd5987f5fa7e0c61a5e0c07d3874bb3718d39d' }))));
     }
     ;
     static get watchers() { return {

package/dist/esm/ifx-step.entry.js.map CHANGED Viewed

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

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

@@ -129,10 +129,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'b6ddc5830bc2c1a371411fa1ddeef157b940acd5', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
+        return (h("div", { key: '7a529875a281c722a74d58f109a31e6743a331df', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: '043992aa871a912d5f3326e2c8c263865d07c5b3', class: 'stepper-progress' }, h("div", { key: '901254c7f8f706e9541d79ecbbbfb0a37925dd73', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '7b2757662fb0acd26f47338fdbfce65a977f37ab', class: `stepper-wrapper` }, h("slot", { key: 'b4fd58e8b562c58c4837e5418e24739dc666f35a' }))));
+            h("div", { key: '62184eccbf9a14c2a2f1a1c8654336ef1d16981a', class: 'stepper-progress' }, h("div", { key: '002baf0e8c26d13b7b1a3cfc970cb35f874fad0a', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: 'b9d78e30894a1db1b05f3c4555e64be6cd4070b3', class: `stepper-wrapper` }, h("slot", { key: '69161109bcba147be42a8293b3e864fb2a2357f4' }))));
     }
     ;
     componentDidRender() {