npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.2134.84be7b9e85db8400d052b6d3b5addde807790384.0 → 39.4.4--canary.2136.61ca080385a85b28f9e73c1ac2fcb72fcc5e023a.0 - Mend

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

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

@@ -3,7 +3,8 @@
 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-DihxupoM.js');
+var index$1 = require('./index-CVw4GUo6.js');
+require('./_commonjsHelpers-CFO10eej.js');
 const spinnerCss = ":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";

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

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

@@ -4,7 +4,7 @@ var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
-const statusCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}";
+const statusCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:400;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}";
 const Status = class {
     constructor(hostRef) {

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

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

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

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