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

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

package/dist/infineon-design-system-stencil/ifx-spinner.ifx-text-field.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-spinner.ifx-text-field.entry.esm.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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"}
1	+ {"version":3,"file":"ifx-spinner.ifx-text-field.entry.esm.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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"}

package/dist/infineon-design-system-stencil/ifx-status.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-status.entry.esm.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;;;;;;;;"}
1	+ {"version":3,"file":"ifx-status.entry.esm.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;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-step.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-step.entry.esm.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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"}
1	+ {"version":3,"file":"ifx-step.entry.esm.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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"}

package/dist/infineon-design-system-stencil/ifx-stepper.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-stepper.entry.esm.js","sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.stepper {\r\n display: flex;\r\n align-items: center;\r\n \r\n &.compact {\r\n align-items: center;\r\n gap: 8px;\r\n \r\n &.compact-right {\r\n flex-direction: row-reverse;\r\n text-align: left;\r\n }\r\n \r\n .stepper-wrapper{\r\n width: unset;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n &.vertical {\r\n height: 100%;\r\n\r\n .stepper-wrapper {\r\n flex-direction: column;\r\n width: unset;\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n.stepper-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n}\r\n\r\n.stepper-wrapper ::slotted(){\r\n display: flex;\r\n flex: 1;\r\n justify-content: flex-start;\r\n}\r\n\r\n.stepper-progress {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font: tokens.$ifxBodyBodySemibold04;\r\n min-width: tokens.$ifxSize700;\r\n height: tokens.$ifxSize700;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering300 0);\r\n \r\n .progress-detail {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n background: white;\r\n }\r\n}\r\n\r\n","import { h, \r\n Component, \r\n Element, \r\n Event, \r\n EventEmitter, \r\n Listen, \r\n Prop, \r\n State, \r\n Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"./interfaces\";\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-stepper',\r\n styleUrl: 'stepper.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Stepper {\r\n @Element() el: HTMLElement;\r\n\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Prop({ mutable: true }) activeStep: number = 1;\r\n @Prop() indicatorPosition?: 'left' \| 'right' = 'left';\r\n @Prop() showStepNumber?: boolean = false;\r\n @Prop() variant?: 'default' \| 'compact' \| 'vertical' = 'default';\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() ariaCurrent: string \| null;\r\n\r\n\r\n\r\n @State() stepsCount: number;\r\n @State() shouldEmitEvent: boolean = true;\r\n @State() emittedByClick: boolean = false;\r\n\r\n @Listen('ifxChange') \r\n onStepChange(event: CustomEvent) {\r\n const steps = this.getSteps();\r\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\r\n if (previousActiveStep && !previousActiveStep.complete) {\r\n previousActiveStep.setAttribute('error', 'true');\r\n }\r\n } \r\n\r\n @Watch('activeStep')\r\n handleActiveStep(newStep: number, oldStep: number) {\r\n const steps = this.getSteps();\r\n if (!this.shouldEmitEvent) {\r\n this.shouldEmitEvent = true;\r\n return;\r\n }\r\n // Skipping until the enabled step is found \r\n if(steps[newStep-1]) { \r\n if (!steps[newStep-1].disabled) {\r\n this.emitIfxChange(newStep, oldStep);\r\n } else {\r\n // If coming from higher step number to the lower step number\r\n if (newStep < oldStep) {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i >= 1 && steps[i-1].disabled) i--;\r\n // if all the steps are disabled no change.\r\n if (i < 1) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n } \r\n // If coming from lower step number to the higher step number\r\n else {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\r\n if (i > this.stepsCount) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n emitIfxChange(activeStep: number, previousActiveStep: number) {\r\n this.ifxChange.emit({activeStep: activeStep, \r\n previousActiveStep: previousActiveStep, \r\n totalSteps: this.stepsCount,\r\n emittedByClick: this.emittedByClick\r\n });\r\n this.emittedByClick = false;\r\n }\r\n\r\n getSteps() {\r\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\r\n return steps;\r\n }\r\n\r\n\r\n addStepIdsToStepsAndCountSteps() {\r\n const steps = this.getSteps()\r\n steps[steps.length - 1].lastStep = true;\r\n for (let i = 0; i < steps.length; i++) {\r\n steps[i].stepId = i + 1;\r\n }\r\n this.stepsCount = steps.length;\r\n }\r\n\r\n\r\n setActiveStep(stepId: number, setByClick: boolean = false) {\r\n this.emittedByClick = setByClick;\r\n this.activeStep = stepId;\r\n }\r\n\r\n setStepsBeforeActiveToComplete() {\r\n const steps = this.getSteps();\r\n steps.forEach( (step, stepId) => {\r\n if (stepId+1 < this.activeStep) step.complete = true;\r\n });\r\n }\r\n\r\n syncIfxSteps() {\r\n const steps = this.getSteps()\r\n for (let i = 0; i < steps.length; i++) {\r\n const stepperState: StepperState = { \r\n activeStep: this.activeStep,\r\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \r\n showStepNumber: this.showStepNumber, \r\n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \r\n setActiveStep: this.setActiveStep.bind(this)\r\n };\r\n steps[i].stepperState = stepperState;\r\n }\r\n }\r\n\r\n setInitialActiveStep() {\r\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\r\n }\r\n\r\n\r\n componentWillLoad() {\r\n this.addStepIdsToStepsAndCountSteps();\r\n this.setInitialActiveStep();\r\n this.setStepsBeforeActiveToComplete();\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-stepper', await framework)\r\n }\r\n this.syncIfxSteps();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.syncIfxSteps();\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label = {this.ariaLabel}\r\n aria-current={this.ariaCurrent}\r\n role = 'navigation' \r\n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\r\n {\r\n / Progress bar for compact variant. /\r\n (this.variant === 'compact') && \r\n <div class = 'stepper-progress'>\r\n <div class = 'progress-detail'>\r\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\r\n </div>\r\n </div>\r\n }\r\n \r\n {/ Slot for ifx-steps. /}\r\n <div class = {`stepper-wrapper`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n componentDidRender() {\r\n / Updating progress bar in compact version. /\r\n if (this.variant == 'compact') {\r\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\r\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) 100}%`);\r\n }\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,w6BAAw6B;;MCoB96B,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAW6B,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACvC,QAAA,IAAiB,CAAA,iBAAA,GAAsB,MAAM;AAC7C,QAAA,IAAc,CAAA,cAAA,GAAa,KAAK;AAChC,QAAA,IAAO,CAAA,OAAA,GAAwC,SAAS;AAOvD,QAAA,IAAe,CAAA,eAAA,GAAY,IAAI;AAC/B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AA6J3C;AA1JG,IAAA,YAAY,CAAC,KAAkB,EAAA;AAC3B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,GAAC,CAAC,CAAC;AACnE,QAAA,IAAI,kBAAkB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;AACpD,YAAA,kBAAkB,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;;;IAKxD,gBAAgB,CAAC,OAAe,EAAE,OAAe,EAAA;AAC7C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;YAC3B;;;AAGJ,QAAA,IAAG,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;AAC5B,gBAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC;;iBACjC;;AAEH,gBAAA,IAAI,OAAO,GAAG,OAAO,EAAE;oBACnB,IAAI,CAAC,GAAG,OAAO;AACf,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;oBAC5B,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;AAAE,wBAAA,CAAC,EAAE;;AAEzC,oBAAA,IAAI,CAAC,GAAG,CAAC,EAAE;AACP,wBAAA,IAAI,CAAC,UAAU,GAAG,OAAO;;yBACtB;AACH,wBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC;AAC9B,wBAAA,IAAI,CAAC,UAAU,GAAG,CAAC;;;;qBAItB;oBACD,IAAI,CAAC,GAAG,OAAO;AACf,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAC5B,oBAAA,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;AAAE,wBAAA,CAAC,EAAE;AACvD,oBAAA,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;AACrB,wBAAA,IAAI,CAAC,UAAU,GAAG,OAAO;;yBACtB;AACH,wBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC;AAC9B,wBAAA,IAAI,CAAC,UAAU,GAAG,CAAC;;;;;;IAOvC,aAAa,CAAC,UAAkB,EAAE,kBAA0B,EAAA;QACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,UAAU;AACvC,YAAA,kBAAkB,EAAE,kBAAkB;YACtC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc,EAAE,IAAI,CAAC;AACxB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAG/B,QAAQ,GAAA;QACJ,MAAM,KAAK,GAAmC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC;AAClF,QAAA,OAAO,KAAK;;IAIhB,8BAA8B,GAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI;AACvC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC;;AAE3B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;;AAIlC,IAAA,aAAa,CAAC,MAAc,EAAE,UAAA,GAAsB,KAAK,EAAA;AACrD,QAAA,IAAI,CAAC,cAAc,GAAG,UAAU;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM;;IAG5B,8BAA8B,GAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,KAAK,CAAC,OAAO,CAAE,CAAC,IAAI,EAAE,MAAM,KAAI;AAC5B,YAAA,IAAI,MAAM,GAAC,CAAC,GAAG,IAAI,CAAC,UAAU;AAAE,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACxD,SAAC,CAAC;;IAGN,YAAY,GAAA;AACR,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,YAAA,MAAM,YAAY,GAAiB;gBAC/B,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;gBAC1E,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBACjG,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI;aAC9C;AACD,YAAA,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY;;;IAI5C,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;;IAIpH,iBAAiB,GAAA;QACb,IAAI,CAAC,8BAA8B,EAAE;QACrC,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,8BAA8B,EAAE;;AAGzC,IAAA,MAAM,gBAAgB,GAAA;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACjC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC;;QAElD,IAAI,CAAC,YAAY,EAAE;;IAGvB,mBAAmB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;IAGvB,MAAM,GAAA;AACF,QAAA,QACI,CAAmB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,SAAS,EACf,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAG,YAAY,EACnB,KAAK,EAAI,CAAW,QAAA,EAAA,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,UAAU,GAAC,IAAI,CAAC,iBAAiB,GAAE,EAAE,EAAE,EAAA;;AAG9K,QAAA,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;AAC3B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,iBAAiB,EAAA,EACzB,CAAG,EAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CACpE,CACJ,EAIV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAI,iBAAiB,EAAA,EAC3B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;IAId,kBAAkB,GAAA;;AAEd,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;AAC3B,YAAA,MAAM,WAAW,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC;YACtF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,CAAG,EAAA,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,CAAG,CAAA,CAAA,CAAC;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ifx-stepper.entry.esm.js","sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n display: flex;\n align-items: center;\n \n &.compact {\n align-items: center;\n gap: 8px;\n \n &.compact-right {\n flex-direction: row-reverse;\n text-align: left;\n }\n \n .stepper-wrapper{\n width: unset;\n flex-direction: column;\n }\n }\n\n &.vertical {\n height: 100%;\n\n .stepper-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n}\n\n.stepper-wrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.stepper-wrapper ::slotted(){\n display: flex;\n flex: 1;\n justify-content: flex-start;\n}\n\n.stepper-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n font: tokens.$ifxBodyBodySemibold04;\n min-width: tokens.$ifxSize700;\n height: tokens.$ifxSize700;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering300 0);\n \n .progress-detail {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n }\n}\n\n","import { h, \n Component, \n Element, \n Event, \n EventEmitter, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-stepper',\n styleUrl: 'stepper.scss',\n shadow: true\n})\n\nexport class Stepper {\n @Element() el: HTMLElement;\n\n @Event() ifxChange: EventEmitter;\n\n @Prop({ mutable: true }) activeStep: number = 1;\n @Prop() indicatorPosition?: 'left' \| 'right' = 'left';\n @Prop() showStepNumber?: boolean = false;\n @Prop() variant?: 'default' \| 'compact' \| 'vertical' = 'default';\n @Prop() ariaLabel: string \| null;\n @Prop() ariaCurrent: string \| null;\n\n\n\n @State() stepsCount: number;\n @State() shouldEmitEvent: boolean = true;\n @State() emittedByClick: boolean = false;\n\n @Listen('ifxChange') \n onStepChange(event: CustomEvent) {\n const steps = this.getSteps();\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\n if (previousActiveStep && !previousActiveStep.complete) {\n previousActiveStep.setAttribute('error', 'true');\n }\n } \n\n @Watch('activeStep')\n handleActiveStep(newStep: number, oldStep: number) {\n const steps = this.getSteps();\n if (!this.shouldEmitEvent) {\n this.shouldEmitEvent = true;\n return;\n }\n // Skipping until the enabled step is found \n if(steps[newStep-1]) { \n if (!steps[newStep-1].disabled) {\n this.emitIfxChange(newStep, oldStep);\n } else {\n // If coming from higher step number to the lower step number\n if (newStep < oldStep) {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i >= 1 && steps[i-1].disabled) i--;\n // if all the steps are disabled no change.\n if (i < 1) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n } \n // If coming from lower step number to the higher step number\n else {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\n if (i > this.stepsCount) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n }\n }\n }\n }\n \n emitIfxChange(activeStep: number, previousActiveStep: number) {\n this.ifxChange.emit({activeStep: activeStep, \n previousActiveStep: previousActiveStep, \n totalSteps: this.stepsCount,\n emittedByClick: this.emittedByClick\n });\n this.emittedByClick = false;\n }\n\n getSteps() {\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n return steps;\n }\n\n\n addStepIdsToStepsAndCountSteps() {\n const steps = this.getSteps()\n steps[steps.length - 1].lastStep = true;\n for (let i = 0; i < steps.length; i++) {\n steps[i].stepId = i + 1;\n }\n this.stepsCount = steps.length;\n }\n\n\n setActiveStep(stepId: number, setByClick: boolean = false) {\n this.emittedByClick = setByClick;\n this.activeStep = stepId;\n }\n\n setStepsBeforeActiveToComplete() {\n const steps = this.getSteps();\n steps.forEach( (step, stepId) => {\n if (stepId+1 < this.activeStep) step.complete = true;\n });\n }\n\n syncIfxSteps() {\n const steps = this.getSteps()\n for (let i = 0; i < steps.length; i++) {\n const stepperState: StepperState = { \n activeStep: this.activeStep,\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n showStepNumber: this.showStepNumber, \n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n setActiveStep: this.setActiveStep.bind(this)\n };\n steps[i].stepperState = stepperState;\n }\n }\n\n setInitialActiveStep() {\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n }\n\n\n componentWillLoad() {\n this.addStepIdsToStepsAndCountSteps();\n this.setInitialActiveStep();\n this.setStepsBeforeActiveToComplete();\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-stepper', await framework)\n }\n this.syncIfxSteps();\n }\n\n componentWillUpdate() {\n this.syncIfxSteps();\n }\n\n render() {\n return (\n <div aria-label = {this.ariaLabel}\n aria-current={this.ariaCurrent}\n role = 'navigation' \n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n {\n / Progress bar for compact variant. /\n (this.variant === 'compact') && \n <div class = 'stepper-progress'>\n <div class = 'progress-detail'>\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n </div>\n </div>\n }\n \n {/ Slot for ifx-steps. /}\n <div class = {`stepper-wrapper`}>\n <slot />\n </div>\n </div>\n );\n };\n\n componentDidRender() {\n / Updating progress bar in compact version. /\n if (this.variant == 'compact') {\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) 100}%`);\n }\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-switch.entry.esm.js.map CHANGED Viewed

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

package/dist/infineon-design-system-stencil/ifx-tab.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-tab.entry.esm.js","sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-tab',\r\n styleUrl: 'tab.scss',\r\n shadow: false\r\n})\r\nexport class IfxTab {\r\n @Element() el: HTMLElement;\r\n @Prop() header: string;\r\n @Prop() disabled: boolean;\r\n @Prop() icon: string = '';\r\n @Prop() iconPosition: 'left' \| 'right' = 'left';\r\n @Event() tabHeaderChange: EventEmitter;\r\n\r\n componentWillUpdate() { \r\n this.tabHeaderChange.emit(this.header)\r\n }\r\n\r\n render() {\r\n return <slot />;\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAY,CAAA,YAAA,GAAqB,MAAM;AAUhD;IAPC,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGxC,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;;"}
1	+ {"version":3,"file":"ifx-tab.entry.esm.js","sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n display: block;\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n @Prop() icon: string = '';\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n @Event() tabHeaderChange: EventEmitter;\n\n componentWillUpdate() { \n this.tabHeaderChange.emit(this.header)\n }\n\n render() {\n return <slot />;\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAY,CAAA,YAAA,GAAqB,MAAM;AAUhD;IAPC,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGxC,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;;"}