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

@infineon/infineon-design-system-stencil 39.4.3 → 39.4.4--canary.2074.d943070f9cdd99fe53a3a22232500eeb825c9004.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 (831) hide show

package/dist/components/{p-R79iWjuc.js → p-BDwn5rZl.js} RENAMED Viewed

@@ -5,9 +5,11 @@ import { c as classNames } from './p-DMLRPGid.js';
 const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.variant = 'primary';
         this.theme = 'default';
@@ -166,6 +168,6 @@ function defineCustomElement() {
 }
 export { Button as B, defineCustomElement as d };
-//# sourceMappingURL=p-R79iWjuc.js.map
+//# sourceMappingURL=p-BDwn5rZl.js.map
-//# sourceMappingURL=p-R79iWjuc.js.map
+//# sourceMappingURL=p-BDwn5rZl.js.map

package/dist/components/p-BDwn5rZl.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BDwn5rZl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } 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-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string | null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel || undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}

package/dist/components/{p-RF9z92mE.js → p-BH1fOB-w.js} RENAMED Viewed

@@ -4,9 +4,11 @@ import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.autoCollapse = false;
     }
@@ -51,6 +53,6 @@ function defineCustomElement() {
 }
 export { Accordion as A, defineCustomElement as d };
-//# sourceMappingURL=p-RF9z92mE.js.map
+//# sourceMappingURL=p-BH1fOB-w.js.map
-//# sourceMappingURL=p-RF9z92mE.js.map
+//# sourceMappingURL=p-BH1fOB-w.js.map

package/dist/components/p-BH1fOB-w.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BH1fOB-w.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,wLAAwL;;MCUhM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6BtC;AA3BC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKpD,MAAM,UAAU,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAMhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } 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-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-accordion', await framework)\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CnXEcTdH.js → p-BXtTIODa.js} RENAMED Viewed

@@ -1,13 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-DPR3SJRC.js';
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.ifxClose = createEvent(this, "ifxClose", 7);
         this.variant = 'primary';
@@ -73,6 +75,6 @@ function defineCustomElement() {
 }
 export { Alert as A, defineCustomElement as d };
-//# sourceMappingURL=p-CnXEcTdH.js.map
+//# sourceMappingURL=p-BXtTIODa.js.map
-//# sourceMappingURL=p-CnXEcTdH.js.map
+//# sourceMappingURL=p-BXtTIODa.js.map

package/dist/components/p-BXtTIODa.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BXtTIODa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter, State, 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-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Element() el: HTMLElement;\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('alert');\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) {\n const framework = await detectFramework();\n trackComponent('ifx-alert', framework);\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-v3vmQuAS.js → p-BgT5gPxL.js} RENAMED Viewed

@@ -1,14 +1,16 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$1 } from './p-C12r4j5b.js';
+import { d as defineCustomElement$2 } from './p-DPR3SJRC.js';
+import { d as defineCustomElement$1 } from './p-CcrhUlD4.js';
 const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
 const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.variant = 'success';
         this.linkTarget = '_blank';
@@ -71,6 +73,6 @@ function defineCustomElement() {
 }
 export { Notification as N, defineCustomElement as d };
-//# sourceMappingURL=p-v3vmQuAS.js.map
+//# sourceMappingURL=p-BgT5gPxL.js.map
-//# sourceMappingURL=p-v3vmQuAS.js.map
+//# sourceMappingURL=p-BgT5gPxL.js.map

package/dist/components/p-BgT5gPxL.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BgT5gPxL.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD;;MCWlpD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AAGxC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAgDtC;AA9CC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAI/C,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,mCAAmC;AAC5C,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,kCAAkC;AAC3C,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA;AACE,gBAAA,OAAO,oCAAoC;;;IAIjD,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACnD,IAAI,CAAC,QAAQ,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EACrC,CAAA,CACA,CACP,CAEF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, 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';\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Element() el;\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-notification', await framework)\n }\n }\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}

package/dist/components/{p-DRqwZrk0.js → p-Bl0VvOaG.js} RENAMED Viewed

@@ -1,12 +1,14 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-DPR3SJRC.js';
 const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";
 const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.ifxOpen = createEvent(this, "ifxOpen", 7);
         this.ifxClose = createEvent(this, "ifxClose", 7);
@@ -127,6 +129,6 @@ function defineCustomElement() {
 }
 export { AccordionItem as A, defineCustomElement as d };
-//# sourceMappingURL=p-DRqwZrk0.js.map
+//# sourceMappingURL=p-Bl0VvOaG.js.map
-//# sourceMappingURL=p-DRqwZrk0.js.map
+//# sourceMappingURL=p-Bl0VvOaG.js.map

package/dist/components/p-Bl0VvOaG.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-Bl0VvOaG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px 4px 0px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n overflow: hidden;\n height: 0;\n transition: height 0.3s ease;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace200;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n align-self: stretch;\n margin: 0 4px 4px;\n border: 1px solid transparent;\n border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n.accordion-item.open .accordion-content {\n max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border-color: tokens.$ifxColorEngineering200;\n border-top-color: transparent;\n transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class AccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n })\n open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.checkSlotContent()\n this.openAccordionItem();\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.checkSlotContent()\n this.openAccordionItem();\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n getInnerContentWrapper() {\n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n return innerContentEl;\n }\n\n attachResizeObserver() {\n const innerContentEl = this.getInnerContentWrapper();\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl);\n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if (!path.includes(this.titleEl)) {\n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n checkSlotContent() {\n const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n const innerContent = this.getInnerContentWrapper();\n if (!hasContent) {\n innerContent.classList.add('no-content');\n } else if (innerContent.classList.contains('no-content')) {\n innerContent.classList.remove('no-content');\n }\n }\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div\n role=\"button\"\n aria-expanded={this.internalOpen}\n aria-controls=\"accordion-content\"\n class=\"accordion-title\"\n onClick={() => this.toggleOpen()}\n tabindex=\"0\"\n ref={el => (this.titleEl = el as HTMLElement)}\n >\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">\n {this.caption}\n </span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BGgzlGhs.js → p-BoK1X1nJ.js} RENAMED Viewed

@@ -4,9 +4,11 @@ import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent
 const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family);outline:none}.radioButton__container.disabled{cursor:default}.radioButton__container.disabled .radioButton__wrapper{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper:hover{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked::after{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked:hover{border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container.disabled .label{color:#BFBBBB}.radioButton__container:not(.disabled) .radioButton__wrapper.error{border-color:#CD002F}.radioButton__container:not(.disabled) .radioButton__wrapper.error:hover,.radioButton__container:not(.disabled) .radioButton__wrapper.error:focus-visible{border-color:#CD002F}.radioButton__container:not(.disabled) .radioButton__wrapper.error.checked::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container:focus:not(.disabled) .radioButton__wrapper::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}";
 const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.ifxChange = createEvent(this, "ifxChange", 7);
         this.ifxError = createEvent(this, "ifxError", 7);
@@ -136,6 +138,6 @@ function defineCustomElement() {
 }
 export { RadioButton as R, defineCustomElement as d };
-//# sourceMappingURL=p-BGgzlGhs.js.map
+//# sourceMappingURL=p-BoK1X1nJ.js.map
-//# sourceMappingURL=p-BGgzlGhs.js.map
+//# sourceMappingURL=p-BoK1X1nJ.js.map

package/dist/components/p-BoK1X1nJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BoK1X1nJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n border: 0 !important;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n outline: none;\n\n &.disabled {\n cursor: default;\n \n .radioButton__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n \n &:hover {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &.checked {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: tokens.$ifxColorEngineering300;\n \n &::after {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &:hover {\n border-color: tokens.$ifxColorEngineering300;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n }\n }\n \n .label {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &:not(.disabled) .radioButton__wrapper {\n &.error {\n border-color: tokens.$ifxColorRed500;\n \n &:hover,\n &:focus-visible {\n border-color: tokens.$ifxColorRed500;\n }\n \n &.checked::after {\n border-color: tokens.$ifxColorRed500;\n background-color: tokens.$ifxColorRed500;\n }\n }\n }\n\n &:focus:not(.disabled) .radioButton__wrapper {\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.checked {\n border-color: tokens.$ifxColorOcean500;\n \n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } 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-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n private inputElement: HTMLInputElement;\n //private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n //this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked || false;\n this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', await framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n // if (this.internals?.setFormValue) {\n // this.internals.setFormValue(this.internalChecked ? this.value : null);\n // }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-4wfkxGlJ.js → p-CBIHXuxX.js} RENAMED Viewed

@@ -1,13 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-BQj9WQQe.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-jHNGBPQv.js';
+import { d as defineCustomElement$1 } from './p-DPR3SJRC.js';
 const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
 const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.ifxChipItemSelect = createEvent(this, "ifxChipItemSelect", 5);
         this.value = undefined;
@@ -76,7 +78,7 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
     static get style() { return chipItemCss; }
 }, [257, "ifx-chip-item", {
         "value": [1],
-        "chipState": [16, "chip-state"],
+        "chipState": [16],
         "selected": [1540]
     }, [[16, "ifxChipItemSelect", "updateItemSelection"]], {
         "selected": ["validateSelected"]
@@ -106,6 +108,6 @@ function defineCustomElement() {
 }
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-4wfkxGlJ.js.map
+//# sourceMappingURL=p-CBIHXuxX.js.map
-//# sourceMappingURL=p-4wfkxGlJ.js.map
+//# sourceMappingURL=p-CBIHXuxX.js.map

package/dist/components/p-CBIHXuxX.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CBIHXuxX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. */\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n /* Do not emit if ChipState does not allow. */\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n /* Propogating the selected state to the Chip (Parent) component if it is set. */\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/* Checkbox; renders only in 'multi' variant. */}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/* Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon='check-16'> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}

package/dist/components/{p-C12r4j5b.js → p-CcrhUlD4.js} RENAMED Viewed

@@ -5,9 +5,11 @@ import { c as classNames } from './p-DMLRPGid.js';
 const linkCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}";
 const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.href = undefined;
         this.target = '_self';
@@ -122,6 +124,6 @@ function defineCustomElement() {
 }
 export { Link as L, defineCustomElement as d };
-//# sourceMappingURL=p-C12r4j5b.js.map
+//# sourceMappingURL=p-CcrhUlD4.js.map
-//# sourceMappingURL=p-C12r4j5b.js.map
+//# sourceMappingURL=p-CcrhUlD4.js.map

package/dist/components/p-CcrhUlD4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CcrhUlD4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.link {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n text-decoration: none;\n color: tokens.$ifxColorOcean500;\n gap: tokens.$ifxSpace100;\n line-height: 1.6;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover { \n cursor: pointer;\n }\n\n &:focus {\n outline-width: 2px;\n outline-style: solid;\n outline-color: #0A8276;\n outline-offset: 4px;\n border-radius: 3px;\n }\n\n &.bold {\n font-weight: tokens.$ifxFontWeightSemibold;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:active {\n color: #08665C;\n font-style: normal;\n font-weight: 600;\n text-decoration: underline;\n }\n\n }\n\n &.underlined {\n text-decoration: underline;\n text-decoration-color: tokens.$ifxColorOcean500;\n color: #1D1D1D;\n text-underline-offset: 8px;\n \n &:hover {\n color: tokens.$ifxColorOcean500;;\n }\n \n &:active {\n color: #0A8276;\n }\n\n &:disabled,\n &.disabled {\n text-decoration-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.title {\n text-decoration: none;\n font-weight: tokens.$ifxFontWeightSemibold;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.menu {\n font-weight: 400;\n font-style: normal;\n line-height: 26px;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.small {\n font-size: tokens.$ifxFontSizeS;\n }\n\n &.medium {\n font-size: tokens.$ifxFontSizeM;\n }\n\n &.large {\n font-size: tokens.$ifxFontSizeL;\n }\n\n &.extraLarge {\n font-size: tokens.$ifxFontSizeXl;\n }\n\n &.underline {\n text-decoration: underline;\n }\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n cursor: default;\n pointer-events: none;\n }\n\n}","import { Component, Prop, h, State, 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-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Element() el;\n @Prop() href: string = undefined;\n @Prop() target: string = '_self';\n @Prop() variant: string = 'bold';\n @Prop() size: string;\n @Prop() disabled: boolean = false;\n @Prop() download: string;\n @Prop() ariaLabel: string | null;\n @State() internalHref: string ='';\n @State() internalTarget: string = '';\n @State() internalVariant: string = '';\n\n setInternalStates() {\n if(this.href){\n this.internalHref = this.href.trim();\n }else{\n this.internalHref = undefined;\n }\n this.internalTarget = this.target.trim();\n this.internalVariant = this.variant.trim().toLowerCase();\n }\n\n componentWillRender(){\n this.setInternalStates();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n event.preventDefault();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-link', await framework)\n }\n }\n\n render() {\n return (\n <a\n tabindex=\"0\"\n role=\"link\"\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled || !this.internalHref}\n href={this.disabled ? undefined : this.internalHref}\n download={this.download}\n target={this.internalTarget}\n class={this.linkClassNames()}>\n <slot></slot>\n </a>)\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.internalVariant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.internalVariant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\n const title = this.internalVariant === 'title' ? 'title' : null;\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass(),\n this.disabled ? 'disabled' : '',\n );\n }\n}"],"version":3}

package/dist/components/{p-F-WOWp_H.js → p-Cgqbp_bF.js} RENAMED Viewed

@@ -1,14 +1,16 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
 import { c as classNames } from './p-DMLRPGid.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-DPR3SJRC.js';
 const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
 const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.target = '_self';
         this.shape = 'round';
@@ -101,6 +103,6 @@ function defineCustomElement() {
 }
 export { IconButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-F-WOWp_H.js.map
+//# sourceMappingURL=p-Cgqbp_bF.js.map
-//# sourceMappingURL=p-F-WOWp_H.js.map
+//# sourceMappingURL=p-Cgqbp_bF.js.map

package/dist/components/p-Cgqbp_bF.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-Cgqbp_bF.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: tokens.$ifxSize500;\n padding: 8px;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n flex-direction: row;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n outline: none;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n text-decoration: none;\n user-select: none;\n border: 1px solid rgba(0, 0, 0, 0);\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn-primary {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-secondary {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary {\n background-color: transparent;\n color: tokens.$ifxColorBaseBlack;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n\n.btn {\n\n &.icon-button {\n min-width: initial;\n min-height: initial;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n padding: 0;\n justify-content: center;\n\n &.btn-round {\n border-radius: 100px;\n }\n\n &.btn-square {\n border-radius: tokens.$ifxBorderRadius12;\n }\n\n &.btn-s {\n width: tokens.$ifxSize400;\n height: tokens.$ifxSize400;\n padding: 8px;\n }\n\n\n &.btn-l {\n width: tokens.$ifxSize600;\n height: tokens.$ifxSize600;\n padding: 8px;\n }\n }\n\n &.btn-primary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n border-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n\n &.btn-secondary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n border-color: tokens.$ifxColorOcean600;\n color: tokens.$ifxColorBaseWhite;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-tertiary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n color: tokens.$ifxColorBaseBlack;\n box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean600;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } 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-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\n\nexport class IconButton {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n @Prop() size: string;\n @Prop() disabled: boolean;\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() shape: string = 'round';\n @Prop() ariaLabel: string | null;\n @State() internalIcon: string;\n @Element() el;\n\n private focusableElement: HTMLElement;\n \n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n componentWillLoad() {\n if (this.shape === '') {\n this.shape = 'round';\n }\n this.internalIcon = this.icon;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-icon-button', await framework)\n }\n }\n\n render() {\n return (\n <Host \n aria-disabled={this.disabled}\n aria-label={this.ariaLabel}> \n {this.href ? (\n <a\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.href : undefined} \n target={this.target}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </a>\n ) : (\n <button\n class={this.getClassNames()}\n type=\"button\"\n disabled={this.disabled}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </button>\n )}\n </Host>\n );\n }\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary`\n : `${this.variant}` === 'tertiary'\n ? `tertiary`\n : `primary`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn icon-button',\n `btn-${this.shape}`,\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}

package/dist/components/{p-CcGE_f9F.js → p-CrB6T7qw.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$3 } from './p-BQj9WQQe.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$1 } from './p-CRSbKJxa.js';
+import { d as defineCustomElement$3 } from './p-jHNGBPQv.js';
+import { d as defineCustomElement$2 } from './p-DPR3SJRC.js';
+import { d as defineCustomElement$1 } from './p-YPIdsxYd.js';
 const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.disabled .ifx-label-wrapper{color:#BFBBBB}.ifx-multiselect-container.disabled .ifx-multiselect-wrapper{background:#BFBBBB;color:#FFFFFF;border-color:#BFBBBB;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-label-wrapper .required{margin-left:4px}.ifx-multiselect-container .ifx-label-wrapper .required.error{color:#CD002F}.ifx-multiselect-container .multi__select-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.ifx-multiselect-container .multi__select-caption.error{color:#CD002F}.ifx-multiselect-container .multi__select-caption.disabled{color:#BFBBBB}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;border:1px solid #EEEDED;background-color:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-container:not(.disabled) .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #EEEDED;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0A8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665C}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}";
@@ -18,9 +18,11 @@ function debounce(func, wait) {
     };
 }
 const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.ifxSelect = createEvent(this, "ifxSelect", 7);
         this.ifxOpen = createEvent(this, "ifxOpen", 7);
@@ -587,6 +589,6 @@ function defineCustomElement() {
 }
 export { Multiselect as M, defineCustomElement as d };
-//# sourceMappingURL=p-CcGE_f9F.js.map
+//# sourceMappingURL=p-CrB6T7qw.js.map
-//# sourceMappingURL=p-CcGE_f9F.js.map
+//# sourceMappingURL=p-CrB6T7qw.js.map