npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.13.1--canary.1992.854aaf1c0bff5fdb0752d9b89b6e9e1a8f43bab6.0 → 37.13.1--canary.2001.c3b06ba3cc438de9e271efa72087b305440874f3.0 - Mend

@infineon/infineon-design-system-stencil 37.13.1--canary.1992.854aaf1c0bff5fdb0752d9b89b6e9e1a8f43bab6.0 → 37.13.1--canary.2001.c3b06ba3cc438de9e271efa72087b305440874f3.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 (514) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-spinner.ifx-text-field.entry.cjs.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\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 aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@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\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\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: 4px;\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\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.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\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: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\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})\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() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: 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\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 this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\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 aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\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 maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"mappings":"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"}
1	+ {"version":3,"file":"ifx-spinner.ifx-text-field.entry.cjs.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\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 aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@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\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\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: 4px;\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\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.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\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: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\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})\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() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: 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\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 this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\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 aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\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 maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 var index$1 = require('./index-CVw4GUo6.js');
@@ -20,8 +20,8 @@ const Spinner = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6b7ad46e96839ef05b22a11d3e8d1b862dae6948', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: '8254474bb46a0d09e2801bc77f00a545f4234162', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && index.h("div", { key: '4b22e583cf05513a8e2067938cc30519900c9f33', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '7c8747942263ae4828d329456d5c85db84ffd52e', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '81fae51604933fb0d3d720d99c72b956815ada7e', id: "spinner/conductor" }, index.h("path", { key: '18a70652e891152443084db2b00b0d8be421cab3', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (index.h("div", { key: '7cec3ef86795185d14979ea67bb02b94ca428b07', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: 'd8dea5acb66bde0f42beb7fe9ee69d887d5ca178', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && index.h("div", { key: '51decc3e682ab5a2bee56c06d86663865acbf42b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: 'dd0f03cea52f1297d5f46939d2f7d205d846fe80', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'ceed7284918f1a9efc1e29f84b986088729cd89e', id: "spinner/conductor" }, index.h("path", { key: 'a0982b7a458375bcab0d8d6ebb635f6901bca7b1', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -100,14 +100,13 @@ const TextField = class {
         }
     }
     render() {
-        return (index.h("div", { key: '2d0235815c39800ca53f44da5fb8fd2ddb3a5764', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { key: '5825bbc344ce4e43013d812488a4ff3b8891856e', class: "textInput__top-wrapper" }, index.h("label", { key: '5c023d77293758cc1e653afed41580373ca67682', htmlFor: this.internalId }, index.h("slot", { key: 'a6fc1c9ed285a8bdcabe52f2f24d7f941b171e73' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: 'aae5c068405ebf9bee2f0b198a9f0b2fc3786728', class: "textInput__bottom-wrapper" }, index.h("div", { key: 'c60855cde57ecdf8dd5ce738115a3e13a3c75f3d', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: 'b6b1edfbf1764ab9b9e5ce2fcf81bf59963a055f', class: 'input-icon', icon: this.icon })), index.h("input", { key: 'd81795ee0cd84a284107a133efe1a6a16a9224b6', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (index.h("div", { key: '1fa4c334f80cb6d3105194554ac4777b85369805', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { key: 'b75876982fbabf5673c2f227d49f8160c4a07c26', class: "textInput__top-wrapper" }, index.h("label", { key: '4fb7759f0d371930b5565c5a70a81b018d660dd6', htmlFor: this.internalId }, index.h("slot", { key: '4cb1bd39568c2a034676bff3f7a97f44261175b9' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: '435eac9b354e25ffb1834c6190e05c2f4ab13cfe', class: "textInput__bottom-wrapper" }, index.h("div", { key: 'bfe701d70aefb52af6a30cf9ef9c746bdca44fe7', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: 'a1deb537a824d8078c1b98dd0aa3a894a68dfa66', class: 'input-icon', icon: this.icon })), index.h("input", { key: '37fefe274dc327548c5c38d3aa64132cc21c54f1', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""}
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: 'f9f55b6923a7747444575bc6b013808df6cdb55d', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            index.h("div", { key: '5ffd18783308681843568e2bc9ea99077a9fb6f3', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            index.h("div", { key: '4fa4172bf2eb38a0546c46acb03d34da543ee666', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: '2c6c756abcef89bd980deee3ab8bb668c40d4a5b', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            index.h("div", { key: 'f2844c51e651bc4c9ec57620e4277f0f313bc67e', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            index.h("div", { key: '4061f480775df27de8327c607c92916d4a2df186', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
-    static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueWatcher"]

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

	@@ -1 +1 @@
1	- {"file":"ifx-spinner.ifx-text-field.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"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\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 aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@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\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\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: 4px;\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\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.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\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: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\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})\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() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: 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\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 this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\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 aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\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 maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-spinner.ifx-text-field.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"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\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 aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@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\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\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: 4px;\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\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.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\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: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\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})\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() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: 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\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 this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\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 aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\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 maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -22,7 +22,7 @@ const Status = class {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (index.h("div", { key: 'c7d79d216838ff7999a04c00f5b949882b49f49e', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: '68b94da8e9836cf42674ef6d030fc9be674ed689', class: `dot ${effectiveColor}` }), index.h("p", { key: '8c54ac37f19b2485883b97428ab7fd4494b56db2', class: "text" }, this.label)));
+        return (index.h("div", { key: 'e6a8cc7c3cbaf31a53b35af85e1f3bd2930cf01a', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: '2c3a3ff9072807640150f9ae56687aa7faba85db', class: `dot ${effectiveColor}` }), index.h("p", { key: '3e197c73fd1834fd4dd4e17d886d90094acea1f5', class: "text" }, this.label)));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
@@ -48,7 +48,7 @@ const Step = class {
         }
     }
     render() {
-        return (index.h("div", { key: '62f1b63fc7bdd5c2fd8d2238c18f99c672ed5fbe', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
+        return (index.h("div", { key: 'dd6c17bea0cd62475732ea2c577cd102f77df8ba', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -56,11 +56,11 @@ const Step = class {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: '4e7352af5b893979b20aeeb01c7b2d34e796b267', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '76ee6b7c8b2abeb338fc27cac9f90371113f7eb9', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            index.h("div", { key: 'c1248577bc333df817ab507ef9e0f75a4daff3ae', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: 'd5e0c06811661a5025eb6bf5fcc61959071784e9', icon: 'check16' }), this.active && index.h("span", { key: '9ad3e0e89e78beaa55dafc174c077379cab8d979', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: 'c179686f38b3686f1df605065d5eb3c93ada6fff', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '0efa3ac9661487c197127d2d365b804eb1dcec11', class: `step-connector-r ${this.active ? 'active' : ''}` })),
+                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: 'd923bfda8089c8b2199d45acaaf6ac8c9fdeec5d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '13aac7c30b1dcd6ff7df11a4c58f4f9f156c01fc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            index.h("div", { key: '35da868f3749271c369959b782e980dc95c3c92f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '4813fe9d028d7e1a25e7058cce5a79a76cba76f1', icon: 'check16' }), this.active && index.h("span", { key: 'd0c1dbfed346671ca777606ffe5f3efe2016a170', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: 'd5e56742186a732d1cf95069b8a61d59b8a68073', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '188cb1e005c83ad4abc3b05a0c8833968588628e', class: `step-connector-r ${this.active ? 'active' : ''}` })),
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            index.h("div", { key: '81726baa11e62cc9d542a8cc5c1ecf7ec23bbb56', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && index.h("slot", { key: 'd7ca25725dc0f550ace0449d4097ec71c08227b5' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: 'd6be97e466a35eb0e8c7c363ab6c3755f1084180' }))));
+            index.h("div", { key: '4a60050301d4666815c6eb64d85d6a85459fb272', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && index.h("slot", { key: 'cbd47999729966cc8858b41bb54608eab8aa30c7' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: 'acb8a199531960f67d7c9c78238c9510118d79ab' }))));
     }
     ;
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -131,10 +131,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (index.h("div", { key: '6de820c0a213ac5a5c7e07d6a6a507c109fc9d10', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
+        return (index.h("div", { key: 'b9409efa6bcc40d8d71c555251de93090cf26832', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            index.h("div", { key: '9fc2b2d7a92796b781a439fe27f819cd9968c4f9', class: 'stepper-progress' }, index.h("div", { key: '52da796e28c1e76dd35e25c11a8ee46dc1e25349', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: '50343cb27765eebfb7936e14957d42243ff9fe5b', class: `stepper-wrapper` }, index.h("slot", { key: '2babb37cf2014e3733d63c5f972696747ec9b456' }))));
+            index.h("div", { key: 'f5b60e07ea7ac6069e27811077692d6de26427a1', class: 'stepper-progress' }, index.h("div", { key: 'ee8197961a261d53fc76a5f3ee6fdd8a3968bca9', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: '5a7a371e9a65f38a203f871a917703caa2ba2a99', class: `stepper-wrapper` }, index.h("slot", { key: '0c572f5be961109cb14d33e0e62cfd8892ca3492' }))));
     }
     ;
     componentDidRender() {

package/dist/cjs/ifx-switch.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -83,9 +83,8 @@ const Switch = class {
         this.internals.setFormValue(null);
     }
     render() {
-        return (index.h("div", { key: '09250877d542ca23a270571ef0ee83cf2c09500f', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: 'dbf19ddd341e9a67f75c80ffb73c406b5c503eed', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: 'e080fe45f7cf8865314fd03649108106bb70cbab', class: "switch__checkbox-wrapper" }, index.h("input", { key: '1ff93d6d04617f8ea62e9871c7ca90cf16a1ad9f', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: '31abef6f9df4da79d769a34e3c5f0b45a3490abc', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: '917b0869792cfb6cab5c4db9e1dc8f006d0a1c83', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'c8d0dc1b171a453ab89404560a185784f7b45a64', htmlFor: "switch" }, index.h("slot", { key: '27cb7fa588099b3a395e61cef4eaf988ff0b04e1', onSlotchange: () => this.toggleLabelGap() })))));
+        return (index.h("div", { key: '721e94b2ad3eaefd838df483dcb5d71d88232721', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: '8465d7f9484085b1c803e492d3c77ffb2c662116', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: 'd09df6b3ef851b26fc8ac6ccb399a980a2582069', class: "switch__checkbox-wrapper" }, index.h("input", { key: 'af32a99d14cf27fd111e52ab17221a0b6aebe73e', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: '1cd8797abf5515841fb27cc521d9468f5939b51c', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: 'cd68516a598fe78f98fef03d43c26956131b4836', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'c085aed72ebd61b00188f2377942c8ef70e033d0', htmlFor: "switch" }, index.h("slot", { key: '021b99c96d0d0eab72e43cfc0bbfad2d6d89b73b', onSlotchange: () => this.toggleLabelGap() })))));
     }
-    static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "checked": ["valueChanged"]

package/dist/cjs/ifx-switch.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-switch.entry.cjs.js","mappings":"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~~;;;;;;;;;;;;~~","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css /\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\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-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"version":3}
1	+ {"file":"ifx-switch.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css /\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\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-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"version":3}

package/dist/cjs/ifx-switch.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-switch.entry.cjs.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}\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-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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~~;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"ifx-switch.entry.cjs.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}\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-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}

package/dist/cjs/ifx-tab.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 const tabCss = ":host{display:block}";
@@ -15,7 +15,7 @@ const IfxTab = class {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return index.h("slot", { key: 'a42b81a00f0e1dd5c452f5804984006b6e4584be' });
+        return index.h("slot", { key: 'c7a8823e3823036920aef997ea359efee1cd8cc8' });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-table.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var index$1 = require('./index-CVw4GUo6.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -522,12 +522,12 @@ const Table = class {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (index.h(index.Host, { key: '38fcf5f4bbb324615e51889ae9b12741d93fab18' }, index.h("div", { key: '45329029da69adbe6499f122bc434c5cbec4554b', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: 'b89d11039d0a8f372e811917fbb3f31a1bf47b67', class: "sidebar-btn" }, index.h("ifx-button", { key: '11b474f2e06998e49c190bd718be7bfc45ed5064', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '42a42f729ffa2f32fecd6804d038633ea3abb9db', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: 'e3615b010c7464d575aeff8e02db947bba178403', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: 'e9e836d6402c46f9d71744d0f42dade0c4bb5ea6', class: "sidebar-container" }, index.h("div", { key: '1b4da2c19e9a3525fd1603d5f4756fc76edb2e73', class: "filters-title-container" }, index.h("span", { key: '4274addf3f6dc213af28b91ea7ee81ae60a8de2d', class: "filters-title" }, "Filters")), index.h("div", { key: 'af02eb1e41338779085955ebd131ba5490b10b93', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '6a3f6b9d78461dd24c3965935bef6f11faad8b88', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: 'cd4fcb770a3dacc8cfcac8592e6d389efcec2306', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '5202fb1ae12ca45253cc7ad63225c8651f36c8df', name: "topbar-filter" })))), index.h("div", { key: '7ae1e5f65b94ff733a95a2f13ac449098d15df44', class: "table-pagination-wrapper" }, index.h("div", { key: '738ba7165a32d13b8f5512724e121fe65bdcc58b', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (index.h(index.Host, { key: '57d58d8d22bb387b9c43534dd3a401177d93f398' }, index.h("div", { key: '078da88d6909477b0e9d6f05e5ef43f7f11dccd6', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: '3631ac354f20a7f2d8ca37a778fbbdacdaf3a7dc', class: "sidebar-btn" }, index.h("ifx-button", { key: 'da620be61a292844364371a9d216823a506250df', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: 'a691538e44adada86749955c3492a74140023973', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: '6f2f19292c24e976d50e2dddbd89e10f37419505', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '202f8bccf72625c7f82d1a4fb2afebad813d3da5', class: "sidebar-container" }, index.h("div", { key: '6f86580fea19787e0fa79c8b63a1ff20bb4f7c5f', class: "filters-title-container" }, index.h("span", { key: '5df891cbef09a691e8a39444d480789cb17eb1cb', class: "filters-title" }, "Filters")), index.h("div", { key: '72cc704fa2c0b029657958d2e523733cb37e6c7d', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '5e81b3b2d8e54add2612b0d4263630740ef43b1f', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: '2ed6b7d3d36dcb79368af9a103595350967779ac', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '80411817924fe75c67dce87f01fbfdacd7743f51', name: "topbar-filter" })))), index.h("div", { key: '0989b64e4cc8d5b2ac03b7dabc5bf57647b040f4', class: "table-pagination-wrapper" }, index.h("div", { key: '7c1b71032d9220d44f55cd83cc9b45ba0957fcf3', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (index.h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (index.h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (index.h("ifx-button", { key: 'c538517b3a88034aca6af430fce981c3e7da2635', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: '15cfc207efdf7927a5109518e3dc4803258cdee9', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: '9cbc8d7a5d81a8b2790f3a39bcb4a6f951ae0431', class: "matching-results-container" }, index.h("span", { key: 'f94a50a6453530b221b9462bdb22f3443ba4127b', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: 'df1d48bb5d50881d196a9b9707f14883f86b0f6e', class: "matching-results-text" }, "matching results"))), index.h("div", { key: 'bf13a00316a2756fa3ebefc6fffdac608b097877', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '75a7af777731d0b8c8240d5246021f1a82ed0864', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (index.h("ifx-button", { key: 'f359cc77668bfe2659ab4e957e5f829e37a696e5', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: 'c4b80ec2a98d8a7fb898964d91c5af0e111b9336', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: 'aa467b350336adb839975dbdb1e4c74573e420f8', class: "matching-results-container" }, index.h("span", { key: 'cff3d87ce4d72557d085ee95f4b44392dcc11c74', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: '608425fb602084d62dca782bc411b5ea499319a1', class: "matching-results-text" }, "matching results"))), index.h("div", { key: '715e5b6525452071148539e812c54da89cab4cf8', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '998c1175e1dacfa339c86efbec38976d7c367447', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/cjs/ifx-tabs.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -209,9 +209,9 @@ const IfxTabs = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '49fd509566612d2a3bf0a47fe71fcd96f596453c', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { key: '53de69ae95e104e6be3fdfa25f4be6d1010deb9f', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (index.h("div", { key: '8f3a8648448229fad10b8f318fb936a6da6377af', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { key: 'b4150af5a4acc16fd8900273fea4848b71662fd4', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index$1), "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? index.h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), index.h("div", { key: '4128e34ffd2803bc52371b132f18c44799b18aba', class: "active-border" })), index.h("div", { key: 'b12946a31c4095b22bcfded5df9f39cd39e491a1', class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
+                tab.header))), index.h("div", { key: '35af33210885982907746c650c9b1e94f521fa7c', class: "active-border" })), index.h("div", { key: '1fb4dcc61193e1806d581b3ca5190f2c7b953c0a', class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-tag.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-WtSz6hLs.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
@@ -17,7 +17,7 @@ const Tag = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8648ba641a1af145fa4f9561ac7a78b4725afcb5', "aria-label": "a tag", class: "container" }, this.icon && (index.h("ifx-icon", { key: '4a49a3053b85442ba3ebb57d89796a860fb0ee3a', icon: this.icon })), index.h("a", { key: '6668142f4c86f6953d46de5aadf05f55c83d831b', href: "javascript:void(null);", class: "label-wrapper" }, index.h("p", { key: 'b6558dbb22d0abb76d54f4cc277288d6c22ed357', class: "label" }, index.h("slot", { key: 'd5eac199c23ac41ba58e17b8cd2fd697fab54e2b' })))));
+        return (index.h("div", { key: 'a7cfd57c1e6f6f73d3caa1daba46d18e44cd9fbe', "aria-label": "a tag", class: "container" }, this.icon && (index.h("ifx-icon", { key: 'e74bd36b9663cdd3a2399a7d717e219dafc1b548', icon: this.icon })), index.h("a", { key: '7c4d5b73b7dcf6d60a744ee8f21ec9594ca82ddc', href: "javascript:void(null);", class: "label-wrapper" }, index.h("p", { key: '7f72062a2ed212ff5c8653cfb928334cb874ae25', class: "label" }, index.h("slot", { key: '1e880f088a852f4a566e4adbdf5d5457d75bfa62' })))));
     }
     get el() { return index.getElement(this); }
 };