@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0

package/dist/esm/ifx-progress-bar.entry.js

@@ -25,7 +25,7 @@ const ProgressBar = class {
         }
     }
     render() {
-        return (h("div", { key: '650b54cfe6d8789f04d2f34345daa65bb2587a74', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: 'e1e9a0bac7727ee6f2b7c75c290cfa99c5fbaa5e', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '29dc81eb76451d391cb888c1f2b031cdcffb2f5d', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '06b7b6b58ce9daa516fa16fbb41d41ccf53a1904', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: '81819666cb90f1511cfa03bbb125e76c69bef5cf', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '29a371be17682cca7cc5b899122239b1b88481c6', class: "label" }, `${this.internalValue}%`))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-progress-bar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-progress-bar.entry.js","sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n  height: tokens.$ifxSize200;\r\n  bottom: 0;\r\n  right: 0;\r\n  top: 0;\r\n  left: 0;\r\n  display: flex;\r\n  height: tokens.$ifxSize250;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  width: 100%; // Ensure the bar itself can grow up to 100% width\r\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\r\n  background-color: tokens.$ifxColorEngineering200;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  \r\n  \r\n  &.s {\r\n    height: 4px;\r\n  }\r\n\r\n  .label {\r\n    font-style: normal;\r\n    font-size: tokens.$ifxFontSizeS;\r\n    font-weight: 400;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n  \r\n  .progress {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: fit-content;\r\n    height: 100%;\r\n    background-color: #0A8276;\r\n    transition: width 0.2s ease;\r\n  }\r\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-progress-bar',\r\n  styleUrl: 'progress-bar.scss',\r\n  shadow: true\r\n})\r\nexport class ProgressBar {\r\n  @Element() el: HTMLElement;\r\n  @Prop() value: number = 0;\r\n  @Prop() size: string;\r\n  @Prop() showLabel: boolean = false;\r\n\r\n  @State() internalValue: number;\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: number, oldValue: number) {\r\n    if (newValue !== oldValue) {\r\n      this.internalValue = newValue;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-progress-bar', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"progressbar\"\r\n        aria-valuenow={this.internalValue}\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\r\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\r\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB;;MCUjlB,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAmCnC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,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;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EACN,eAAA,EAAA,IAAI,CAAC,aAAa,EACnB,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,gBACP,CAAA,UAAA,EAAa,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,KAAK,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG,CAAQ,CACrH,CACF;;;;;;;;;;;"}
+{"version":3,"file":"ifx-progress-bar.entry.js","sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Element() el: HTMLElement;\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-progress-bar', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"progressbar\"\n        aria-valuenow={this.internalValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB;;MCUjlB,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAmCnC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,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;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EACN,eAAA,EAAA,IAAI,CAAC,aAAa,EACnB,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,gBACP,CAAA,UAAA,EAAa,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,KAAK,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG,CAAQ,CACrH,CACF;;;;;;;;;;;"}

package/dist/esm/ifx-radio-button-group.entry.js

@@ -54,7 +54,7 @@ const RadioButtonGroup = class {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '9d56fb1bbb2ad9ce178e55f2e703bcba8be4e6b2', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '314ff595785c24d188cf98dc232a9dae19205f44', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'fe839163d77957b80d72b7bcf8369a68e7a3d992', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '018d84f32df0e17743080ac09d98bc030fe09e30', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: 'd632718b08c8100e6c8604059f86abfc324e2ba8', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: 'dcd66919142f41e8d51054f7de1663361c273232', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '7765acb090b78c495b03b17f242b0efacba29a10', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'e500cc4867c756991d6e76b77640b6fc1f052296', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '05211a3727a84a135588bccee63d22c36511cbee', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '4d9cbd4f52276f6c101306208bd6156e01287f2f', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-radio-button-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-radio-button-group.entry.js","sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.radio-button-group-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.radio-button-group {\r\n    display: flex;\r\n    gap: tokens.$ifxSpace100;\r\n\r\n    &.horizontal {\r\n        flex-direction: row;\r\n        column-gap: tokens.$ifxSpace150;\r\n    }\r\n\r\n    &.vertical {\r\n        flex-direction: column;\r\n        row-gap: tokens.$ifxSpace150;\r\n    }\r\n}\r\n\r\n.group-label {\r\n    font-size: tokens.$ifxFontSizeM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    margin-bottom: tokens.$ifxSpace100;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n    color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n    margin-top: tokens.$ifxSpace100;\r\n    align-self: flex-start;\r\n    display: flex;\r\n    width: 100%;\r\n    column-gap: tokens.$ifxSpace100;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    &.default {\r\n        color: tokens.$ifxColorBaseBlack;\r\n    }\r\n\r\n    &.error {\r\n        color: tokens.$ifxColorRed500;\r\n    }\r\n}\r\n\r\n.caption-text {\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    line-height: tokens.$ifxLineHeightXs;\r\n    flex: 1;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n    flex:0;\r\n    display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n    tag: 'ifx-radio-button-group',\r\n    styleUrl: 'radio-button-group.scss',\r\n    shadow: true,\r\n    // formAssociated: true\r\n})\r\n\r\nexport class RadioButtonGroup {\r\n    private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n    @Element() el: HTMLElement;\r\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n    @Prop() size: string;\r\n    @Prop() showGroupLabel: boolean;\r\n    @Prop() groupLabelText: string = 'Group Label Text';\r\n    @Prop() showCaption: boolean;\r\n    @Prop() captionText: string;\r\n    @Prop() showCaptionIcon: boolean;\r\n    @Prop() required: boolean = false;\r\n    @State() hasErrors: boolean = false;\r\n    \r\n    @Listen('ifxError')\r\n    handleRadioButtonError(event: CustomEvent) {\r\n        const radioButton = event.target as HTMLElement;\r\n        if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\r\n            this.errorStates.set(radioButton, event.detail);\r\n            this.updateHasErrors();\r\n        }\r\n    }\r\n\r\n     // Method to set the error state of all radio-butttons in the group\r\n      @Method()\r\n      async setGroupError(error: boolean) {\r\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n        radioButtons.forEach((radioButton) => {\r\n          (radioButton as any).error = error;\r\n        });\r\n      }\r\n\r\n    componentWillLoad() {\r\n        this.initializeState();\r\n    }\r\n\r\n    async componentDidLoad() { \r\n        if(!isNestedInIfxComponent(this.el)) { \r\n            const framework = detectFramework();\r\n            trackComponent('ifx-radio-button-group', await framework)\r\n        }\r\n    }\r\n\r\n    handleSlotChange = () => {\r\n        this.initializeState();\r\n    };\r\n\r\n    private initializeState() {\r\n        this.errorStates.clear();\r\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n        radioButtons.forEach((radioButton) => {\r\n            if (!this.errorStates.has(radioButton)) {\r\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\r\n            }\r\n        });\r\n        this.updateHasErrors();\r\n    }\r\n\r\n    private updateHasErrors() {\r\n        console.log('here')\r\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class='radio-button-group-container'>\r\n                {this.showGroupLabel && (\r\n                    <div class=\"group-label\">\r\n                        {this.groupLabelText}\r\n                        {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n                    </div>\r\n                )}\r\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\r\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\r\n                </div>\r\n                {this.showCaption ? (\r\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n                        </ifx-icon></div> : ''}\r\n                        <div class='caption-text'>{this.captionText}</div>\r\n                    </div>) : ''}\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-radio-button-group.entry.js","sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.radio-button-group {\n    display: flex;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font-size: tokens.$ifxFontSizeM;\n    color: tokens.$ifxColorBaseBlack;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n    color: tokens.$ifxColorEngineering500;\n    margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n    color: tokens.$ifxColorRed500;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, 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-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    // formAssociated: true\n})\n\nexport class RadioButtonGroup {\n    private errorStates: Map<HTMLElement, boolean> = new Map();\n\n    @Element() el: HTMLElement;\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n    @Prop() size: string;\n    @Prop() showGroupLabel: boolean;\n    @Prop() groupLabelText: string = 'Group Label Text';\n    @Prop() showCaption: boolean;\n    @Prop() captionText: string;\n    @Prop() showCaptionIcon: boolean;\n    @Prop() required: boolean = false;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\n            }\n        });\n        this.updateHasErrors();\n    }\n\n    private updateHasErrors() {\n        console.log('here')\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n    }\n\n    render() {\n        return (\n            <div class='radio-button-group-container'>\n                {this.showGroupLabel && (\n                    <div class=\"group-label\">\n                        {this.groupLabelText}\n                        {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n                    </div>\n                )}\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\n                </div>\n                {this.showCaption ? (\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n                        </ifx-icon></div> : ''}\n                        <div class='caption-text'>{this.captionText}</div>\n                    </div>) : ''}\n            </div>\n        );\n    }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,06BAA06B;;MCYz7B,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQY,QAAA,IAAA,CAAA,WAAW,GAA8B,IAAI,GAAG,EAAE;AAGlD,QAAA,IAAS,CAAA,SAAA,GAA8B,UAAU;AAGjD,QAAA,IAAc,CAAA,cAAA,GAAW,kBAAkB;AAI3C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACxB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA+BnC,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YACpB,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC;AAuCJ;AArEG,IAAA,sBAAsB,CAAC,KAAkB,EAAA;AACrC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAC/C,IAAI,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE;YAC1D,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC;YAC/C,IAAI,CAAC,eAAe,EAAE;;;;IAM5B,MAAM,aAAa,CAAC,KAAc,EAAA;AAChC,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,KAAI;AAClC,YAAA,WAAmB,CAAC,KAAK,GAAG,KAAK;AACpC,SAAC,CAAC;;IAGN,iBAAiB,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;AAG1B,IAAA,MAAM,gBAAgB,GAAA;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACjC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC;;;IAQzD,eAAe,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACxB,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,KAAI;YACjC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC;;AAE9E,SAAC,CAAC;QACF,IAAI,CAAC,eAAe,EAAE;;IAGlB,eAAe,GAAA;AACnB,QAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;;IAGjF,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,8BAA8B,EAAA,EACpC,IAAI,CAAC,cAAc,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACnB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAU,EAAA,GAAA,CAAA,CAClF,CACT,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAC3D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD,EACL,IAAI,CAAC,WAAW,IACb,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,CAAE,CAAA,EAAA,EACxD,IAAI,CAAC,eAAe,GAAG,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CACjE,CAAM,GAAG,EAAE,EACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,WAAW,CAAO,CAChD,IAAI,EAAE,CACd;;;;;;;;"}

package/dist/esm/ifx-radio-button.entry.js

@@ -24,13 +24,13 @@ const RadioButton = class {
         this.fallbackInput.type = 'radio';
         this.fallbackInput.hidden = true;
         this.fallbackInput.className = '_ifx-radiobutton-fallback';
-        this.fallbackInput.style.cssText = `
-      display: none !important;
-      position: absolute !important;
-      opacity: 0 !important;
-      pointer-events: none !important;
-      width: 0 !important;
-      height: 0 !important;
+        this.fallbackInput.style.cssText = `
+      display: none !important;
+      position: absolute !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      width: 0 !important;
+      height: 0 !important;
     `;
         this.fallbackInput.setAttribute('aria-hidden', 'true');
         this.fallbackInput.tabIndex = -1;
@@ -94,9 +94,9 @@ const RadioButton = class {
         }
     }
     render() {
-        return (h("div", { key: 'c5e4fa7c1beea5dcfa20b595d43e21641a6fcae4', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'bdbd998bb8535930ebbd40ba292bf836bdf42bbd', class: `radioButton__wrapper 
-            ${this.internalChecked ? 'checked' : ''}  
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b26cc238ace2996722f6485b51f82c49e5873e0a', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'd43b4e722fd6f968ce267d6fab4343ad43c287f3', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: 'dc7296c8f126ae54814db1589084f9990aac1b18' }))), h("input", { key: '70fd723f9829972c31e29ace9a97fc1d1d8cfbb3', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+        return (h("div", { key: 'cfacddd9fcb1feebcf926fb2a7e441e56e511759', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'badf42cd6e21d2a2b647da3d1cd29c403590ef26', class: `radioButton__wrapper 
+            ${this.internalChecked ? 'checked' : ''}  
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '950b1c9cd2fdaebe227da8d22147f6680652672f', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '86c20225f259e41f6d55299e91f9cbd3616df8d9', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: '346d7d0732bf33d9363a717e99453b3b32332a11' }))), h("input", { key: '3bddb087935626e217325a290de6ec0444d2b2b2', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-radio-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-radio-button.entry.js","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';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: inline-flex;\r\n  --_ifx-fallback-display: none !important;\r\n}\r\n\r\n._ifx-radiobutton-fallback {\r\n  display: var(--_ifx-fallback-display);\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  padding: 0 !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  clip: rect(0, 0, 0, 0) !important;\r\n  border: 0 !important;\r\n}\r\n\r\n.radioButton__container {\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px;\r\n  gap: tokens.$ifxSpace100;\r\n  cursor: pointer;\r\n  font-family: var(--ifx-font-family);\r\n  outline: none;\r\n\r\n  &.disabled {\r\n    cursor: default;\r\n    \r\n    .radioButton__wrapper {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n      border-color: tokens.$ifxColorEngineering300;\r\n      \r\n      &:hover {\r\n        background-color: tokens.$ifxColorEngineering300;\r\n      }\r\n      \r\n      &.checked {\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border-color: tokens.$ifxColorEngineering300;\r\n        \r\n        &::after {\r\n          background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n        \r\n        .radioButton__wrapper-mark {\r\n          background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n        \r\n        &:hover {\r\n          border-color: tokens.$ifxColorEngineering300;\r\n          \r\n          .radioButton__wrapper-mark {\r\n            background-color: tokens.$ifxColorEngineering300;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    \r\n    .label {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled) .radioButton__wrapper {\r\n    &.error {\r\n      border-color: tokens.$ifxColorRed500;\r\n      \r\n      &:hover,\r\n      &:focus-visible {\r\n        border-color: tokens.$ifxColorRed500;\r\n      }\r\n      \r\n      &.checked::after {\r\n        border-color: tokens.$ifxColorRed500;\r\n        background-color: tokens.$ifxColorRed500;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) .radioButton__wrapper {\r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: calc(100% + 4px);\r\n      height: calc(100% + 4px);\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      border: 2px solid tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n    }\r\n  }\r\n\r\n  &.m .radioButton__wrapper {\r\n    width: tokens.$ifxSize300;\r\n    height: tokens.$ifxSize300;\r\n  }\r\n\r\n  .radioButton__wrapper {\r\n    width: tokens.$ifxSize250;\r\n    height: tokens.$ifxSize250;\r\n    position: relative;\r\n    display: block;\r\n    border-radius: 50%;\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering500;\r\n\r\n    .radioButton__wrapper-mark {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      background-color: tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-color: tokens.$ifxColorBaseTransparent;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n\r\n    &.checked {\r\n      border-color: tokens.$ifxColorOcean500;\r\n      \r\n      &::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 10px;\r\n        height: 10px;\r\n        background-color: tokens.$ifxColorOcean500;\r\n        border-radius: 50%;\r\n      }\r\n\r\n      &:hover {\r\n        border-color: tokens.$ifxColorOcean600;\r\n        \r\n        .radioButton__wrapper-mark {\r\n          background-color: tokens.$ifxColorOcean600;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .label {\r\n    display: flex;\r\n    align-items: center;\r\n    height: tokens.$ifxSize250;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    flex: none;\r\n    order: 1;\r\n    flex-grow: 0;\r\n\r\n    &.label-m {\r\n      height: tokens.$ifxSize300;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-radio-button',\r\n  styleUrl: 'radio-button.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class RadioButton {\r\n  @Element() el: HTMLElement;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() value: string;\r\n  @Prop() error: boolean = false;\r\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\r\n  @Prop({ reflect: true }) name: string;\r\n  @Prop({ mutable: true }) checked: boolean;\r\n  @State() internalChecked: boolean = false;\r\n  @State() hasSlot: boolean = false;\r\n\r\n  @Method()\r\n  async isChecked(): Promise<boolean> {\r\n    return this.internalChecked;\r\n  }\r\n  \r\n  private inputElement: HTMLInputElement;\r\n  //private internals: ElementInternals;\r\n  private fallbackInput: HTMLInputElement;\r\n\r\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\r\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\r\n\r\n  componentWillLoad() {\r\n    // Fallback for form association\r\n    this.fallbackInput = document.createElement('input');\r\n    this.fallbackInput.type = 'radio';\r\n    this.fallbackInput.hidden = true;\r\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\r\n    this.fallbackInput.style.cssText = `\r\n      display: none !important;\r\n      position: absolute !important;\r\n      opacity: 0 !important;\r\n      pointer-events: none !important;\r\n      width: 0 !important;\r\n      height: 0 !important;\r\n    `;\r\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\r\n    this.fallbackInput.tabIndex = -1;\r\n    this.el.appendChild(this.fallbackInput);\r\n\r\n    // Initialize ElementInternals if supported\r\n    if ('attachInternals' in HTMLElement.prototype) {\r\n      try {\r\n        //this.internals = this.el.attachInternals();\r\n      } catch (e) {\r\n        console.warn('ElementInternals not supported');\r\n      }\r\n    }\r\n\r\n    // Initial state\r\n    this.internalChecked = this.checked || false;\r\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-radio-button', await framework)\r\n    }\r\n  }\r\n\r\n  @Watch('checked')\r\n  handleCheckedChange(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n  }\r\n\r\n  @Watch('internalChecked')\r\n  updateFormValue() {\r\n    // Update both ElementInternals and fallback input\r\n    // if (this.internals?.setFormValue) {\r\n    //   this.internals.setFormValue(this.internalChecked ? this.value : null);\r\n    // }\r\n    this.fallbackInput.checked = this.internalChecked;\r\n    this.fallbackInput.name = this.name;\r\n    this.fallbackInput.value = this.value;\r\n    this.fallbackInput.disabled = this.disabled;\r\n  }\r\n\r\n  @Watch('error')\r\n    errorChanged(newValue: boolean, oldValue: boolean) {\r\n      if (newValue !== oldValue) {\r\n        this.ifxError.emit(newValue);\r\n      }\r\n    }\r\n\r\n  handleRadioButtonClick(event: Event) {\r\n    if (this.disabled) {\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    this.inputElement.click();\r\n    this.internalChecked = this.inputElement.checked;\r\n    this.checked = this.internalChecked;\r\n    this.ifxChange.emit(this.internalChecked);\r\n\r\n    const changeEvent = new CustomEvent('change', {\r\n      bubbles: true,\r\n      composed: true,\r\n      detail: { checked: this.internalChecked }\r\n    });\r\n    this.el.dispatchEvent(changeEvent);\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if ([' ', 'Enter'].includes(ev.key)) {\r\n      ev.preventDefault();\r\n      this.handleRadioButtonClick(new PointerEvent('click'));\r\n    }\r\n  }\r\n\r\n  @Listen('change', { target: 'document' })\r\n  handleExternalChange(event: Event) {\r\n    const target = event.target as HTMLElement;\r\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\r\n    \r\n    if (target.getAttribute('name') === this.name) {\r\n      this.internalChecked = false;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        role=\"radio\"\r\n        aria-checked={String(this.internalChecked)}\r\n        aria-disabled={String(this.disabled)}\r\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\r\n        onClick={(e) => this.handleRadioButtonClick(e)}\r\n        tabindex={this.disabled ? -1 : 0}\r\n      >\r\n        <div\r\n          class={`radioButton__wrapper \r\n            ${this.internalChecked ? 'checked' : ''}  \r\n            ${this.error ? 'error' : ''}`}\r\n        >\r\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\r\n        </div>\r\n\r\n        {this.hasSlot && (\r\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\r\n            <slot />\r\n          </div>\r\n        )}\r\n\r\n        <input\r\n          type=\"radio\"\r\n          hidden\r\n          ref={el => this.inputElement = el}\r\n          name={this.name}\r\n          value={this.value}\r\n          checked={this.internalChecked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => e.stopPropagation()}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,uyGAAuyG;;MCWjzG,WAAW,GAAA,MAAA;AANxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACL,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAGrC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAuJlC;AApJC,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,eAAe;;IAU7B,iBAAiB,GAAA;;QAEf,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,OAAO;AACjC,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,2BAA2B;AAC1D,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,CAAA;;;;;;;KAOlC;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACtD,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,EAAE;QAChC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;QAYvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK;QAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE;;AAGrF,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;;;AAKvD,IAAA,mBAAmB,CAAC,QAAiB,EAAA;AACnC,QAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;IAIjC,eAAe,GAAA;;;;;QAKb,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QACnC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QACrC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;;IAI3C,YAAY,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;;AAIlC,IAAA,sBAAsB,CAAC,KAAY,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAGF,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO;AAChD,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;AAEzC,QAAA,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;AAC5C,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;AACxC,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;;AAIpC,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YACnC,EAAE,CAAC,cAAc,EAAE;YACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;;;AAK1D,IAAA,oBAAoB,CAAC,KAAY,EAAA;AAC/B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,IAAI,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB;YAAE;QAE/E,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;AAC7C,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;;IAIhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,mBAC3B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAC/E,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA;cACH,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAA;AACrC,YAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAE9B,EAAA,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,EAAA,CAAO,CAClE,EAEL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACP,EAED,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,MAAM,EACN,IAAA,EAAA,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,CACnC,CACE;;;;;;;;;;;;;"}
+{"version":3,"file":"ifx-radio-button.entry.js","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}"],"names":[],"mappings":"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"}

package/dist/esm/ifx-search-bar.entry.js

@@ -44,7 +44,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '3c4c2a5448190651f3b9e41f2712598758abcec9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '79e53af4741984e201a7c62711236c8091538b7d', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-search-bar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-search-bar.entry.js","sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  width: 100%; //revert\r\n  display: flex;\r\n}\r\n\r\n.search-bar {\r\n  box-sizing: border-box;\r\n  height: tokens.$ifxSize500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  width: 100%;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.closed {\r\n    display: flex;\r\n    width: auto;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  & .search-bar-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace200;\r\n    width: 100%;\r\n\r\n    & a {\r\n      \r\n      text-decoration: none;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      color: tokens.$ifxColorOcean500;\r\n      cursor: pointer;\r\n      &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n  }\r\n    & ifx-search-field {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .search-bar__icon-wrapper {\r\n    display: none;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    & ifx-icon:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.closed {\r\n    .search-bar__icon-wrapper {\r\n      display: flex;\r\n    }\r\n\r\n    .search-bar-wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-search-bar',\r\n  styleUrl: 'search-bar.scss',\r\n  shadow: true,\r\n})\r\nexport class SearchBar {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() disabled: boolean = false;\r\n  @State() internalState: boolean;\r\n  @Prop({ mutable: true }) value: string;\r\n  @Prop() maxlength?: number;\r\n  @Event() ifxInput: EventEmitter;\r\n  @Event() ifxOpen: EventEmitter;\r\n   @Prop() autocomplete: string = \"on\";\r\n  @Element() el;\r\n\r\n  @Method()\r\n  async onNavbarMobile() {\r\n    this.ifxOpen.emit(false)\r\n    this.internalState = false;\r\n  }\r\n\r\n  @Watch('isOpen')\r\n  handlePropChange() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  handleCloseButton = () => {\r\n    this.internalState = !this.internalState;\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  setInitialState() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setInitialState();\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-search-bar', await framework)\r\n    }\r\n  }\r\n\r\n  handleInput(event: CustomEvent) {\r\n    this.value = event.detail;\r\n  }\r\n\r\n  handleFocus = () => {\r\n    this.internalState = true;\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\r\n        {this.internalState ? (\r\n          <div class=\"search-bar-wrapper\">\r\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\r\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\r\n            </ifx-search-field>\r\n\r\n            <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\r\n          </div>\r\n        ) : (\r\n          <div class=\"search-bar_icon-wrapper\"\r\n          onClick={this.handleCloseButton}>\r\n            <ifx-icon icon=\"search-16\"></ifx-icon>\r\n          </div>\r\n        )}\r\n        </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,u+BAAu+B;;MCU/+B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;"}
+{"version":3,"file":"ifx-search-bar.entry.js","sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      \n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      &:focus{\n    outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n  }\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, 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-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-bar', await framework)\n    }\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar_icon-wrapper\"\n          onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n        </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,u+BAAu+B;;MCU/+B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;"}

package/dist/esm/ifx-search-field.entry.js

@@ -377,12 +377,12 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '7e4c393707a14e0fb180b2871db1a0cdd071a245', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'f16ac525d64cdba8c62a52b2c60ede614386d7ba', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: '7556bc15840895f5ca6d7716471c1fbd51e85c4c', icon: "search-16", class: "search-icon" }), h("input", { key: 'a0f2ae89e3d8b515d66f59919d54d209f834a9e0', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-controls": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: 'd355ec7cdbe980ea99e4238cf02d907ddd76d59b', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2aa3d943caab35213ca10f071586c80358515f1c', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'eaa300dd0f8466a2396c55f3f2fffe9dcf5bbf44', icon: "search-16", class: "search-icon" }), h("input", { key: 'cce86ee892ec624fe8671d7567434ae5433b8702', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-controls": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '9bf17746181be5acb6b9e33d7155396186daaf3b', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '2bb36b6c16c734b47eebf72046e9dc59b23b0998', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'd447e63087ac5b41d2109a16b8db37df4c9db860', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '6a4662d31fd8c755ec1ec9da4bb871750aa63a57', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);

package/dist/esm/ifx-search-field.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-search-field.entry.js","sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.search-field {\r\n  box-sizing: border-box;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  width: 100%;\r\n  font-family: var(--ifx-font-family);\r\n  position: relative; // Wichtig für absolute positioning des Dropdowns\r\n\r\n  .search-field__wrapper {\r\n    box-sizing: border-box;\r\n    height: tokens.$ifxSize500;\r\n    display: flex;\r\n    align-items: center;\r\n    border: 1px solid #8d8786;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    gap: tokens.$ifxSpace150;\r\n    flex: none;\r\n    order: 0;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n    position: relative;\r\n    width: 100%;\r\n    outline: none;\r\n\r\n    &:focus-visible:not(.disabled) {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    &.search-field__wrapper-s {\r\n      height: 36px;\r\n    }\r\n\r\n    &:hover:not(.focused, :focus) {\r\n      border: 1px solid #3c3a39;\r\n    }\r\n\r\n    & .delete-icon {\r\n      outline: 1px solid transparent;\r\n      right: 12px;\r\n      cursor: pointer;\r\n      &:focus-visible {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n        outline-offset: 1px;\r\n      }\r\n    }\r\n\r\n    input[type='text'] {\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      font-size: 16px;\r\n      //line-height: 24px;\r\n      color: #8d8786;\r\n      border: none;\r\n      width: 100%;\r\n      outline: none;\r\n      //height: 100%;\r\n      height: 16px;\r\n\r\n      &:focus {\r\n        outline: none;\r\n        color: #1d1d1d;\r\n      }\r\n\r\n      &:disabled {\r\n        background: tokens.$ifxColorEngineering300;\r\n        color: tokens.$ifxColorBaseWhite;\r\n\r\n        &::placeholder {\r\n          color: tokens.$ifxColorBaseWhite;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background: tokens.$ifxColorEngineering300;\r\n      border: none;\r\n      color: tokens.$ifxColorBaseWhite;\r\n\r\n      &:hover {\r\n        border: none;\r\n        outline: none;\r\n      }\r\n\r\n      & .delete-icon { \r\n        cursor: default;\r\n        &:focus-visible { \r\n          outline: 1px solid transparent;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // Suggestions Dropdown Styles\r\n  .suggestions-dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    background: tokens.$ifxColorBaseWhite;\r\n    margin-top: tokens.$ifxSpace50;\r\n    border: 1px solid tokens.$ifxColorEngineering200;\r\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\r\n    z-index: 1000;\r\n    max-height: 300px;\r\n    overflow-y: auto;\r\n    container-type: inline-size; // Enable container queries\r\n\r\n    .suggestions-header {\r\n      // font: tokens.$ifxEyebrowEyebrow02; TODO\r\n      font-family: Source Sans 3;\r\n      font-size: 0.8125rem;\r\n      font-weight: 600;\r\n      line-height: 1.25rem;\r\n\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: tokens.$ifxColorEngineering500;\r\n      border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n    }\r\n\r\n    .suggestion-item {\r\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n      cursor: pointer;\r\n      transition: background-color 0.2s ease;\r\n\r\n      &:last-child {\r\n        border-bottom: none;\r\n      }\r\n\r\n      &:hover,\r\n      &--selected {\r\n        background-color: tokens.$ifxColorEngineering200;\r\n      }\r\n\r\n      .suggestion-content {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: tokens.$ifxSpace150;\r\n\r\n        .suggestion-icon {\r\n          color: tokens.$ifxColorEngineering500;\r\n          flex-shrink: 0;\r\n\r\n          &--history {\r\n            color: tokens.$ifxColorEngineering500;\r\n          }\r\n        }\r\n\r\n        .suggestion-text {\r\n          flex: 1;\r\n          display: flex;\r\n          align-items: center;\r\n          min-width: 0; // Important for flexbox truncation\r\n\r\n          .suggestion-main-text {\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            flex-shrink: 1;\r\n            min-width: 0;\r\n          }\r\n\r\n          .suggestion-scope {\r\n            color: tokens.$ifxColorEngineering400;\r\n            flex-shrink: 0; // Never truncate the scope\r\n            white-space: nowrap;\r\n            margin-left: tokens.$ifxSpace25; // Add space before the scope\r\n            font-weight: tokens.$ifxFontWeightSemibold;\r\n            font-size: tokens.$ifxFontSizeXs;\r\n          }\r\n\r\n          // When container is narrow, stack scope below main text\r\n          @container (max-width: 320px) {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n\r\n            .suggestion-main-text {\r\n              width: 100%;\r\n              max-width: 100%;\r\n            }\r\n\r\n            .suggestion-scope {\r\n              margin-left: 0;\r\n              margin-top: 0;\r\n              width: 100%;\r\n              max-width: 100%;\r\n              overflow: hidden;\r\n              text-overflow: ellipsis;\r\n              flex-shrink: 1; // Allow truncation when narrow\r\n            }\r\n          }\r\n        }\r\n\r\n        .suggestion-count {\r\n          color: tokens.$ifxColorEngineering400;\r\n          margin-left: auto;\r\n          flex-shrink: 0;\r\n        }\r\n\r\n        .suggestion-delete-icon {\r\n          opacity: 0;\r\n          visibility: hidden;\r\n          transition: opacity 0.2s ease, visibility 0.2s ease;\r\n          cursor: pointer;\r\n          margin-left: auto;\r\n          flex-shrink: 0;\r\n          color: tokens.$ifxColorEngineering500;\r\n\r\n          &:hover {\r\n            color: tokens.$ifxColorEngineering600;\r\n          }\r\n        }\r\n      }\r\n\r\n      &:hover {\r\n        .suggestion-delete-icon {\r\n          opacity: 1;\r\n          visibility: visible;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // Wrapper modifications when dropdown is open\r\n  .search-field__wrapper.dropdown-open {\r\n    border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\r\n    border-color: tokens.$ifxColorOcean500;\r\n  }\r\n}\r\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\nexport interface SuggestionItem {\r\n  id: string;\r\n  text: string;\r\n  type?: 'suggestion' | 'history';\r\n  scope?: string;\r\n  resultCount?: number;\r\n  metadata?: any;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-search-field',\r\n  styleUrl: 'search-field.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class SearchField {\r\n  @Element() el;\r\n  private inputElement: HTMLInputElement;\r\n  private dropdownElement: HTMLDivElement;\r\n\r\n  @Prop({ mutable: true }) value: string = '';\r\n  @Prop() suggestions: SuggestionItem[] = [];\r\n  @Prop() showSuggestions: boolean = false;\r\n  @Prop() maxSuggestions: number = 10;\r\n  @Prop() maxHistoryItems: number = 5;\r\n  @Prop() enableHistory: boolean = true;\r\n  @Prop() historyKey: string = 'ifx-search-history';\r\n  @Prop() historyHeaderText: string = 'Recent Searches';\r\n\r\n  // ARIA Labels and Accessibility Props\r\n  @Prop() ariaLabel: string | null = \"Search Field\"\r\n  @Prop() ariaLabelledBy?: string | null;\r\n  @Prop() ariaDescribedBy?: string | null;\r\n  @Prop() deleteIconAriaLabel: string = 'Clear search';\r\n  @Prop() historyDeleteAriaLabel: string = 'Remove from history';\r\n  @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\r\n  @Prop() suggestionAriaLabel: string = 'Search suggestion';\r\n  @Prop() historyItemAriaLabel: string = 'Search history item';\r\n\r\n  @Event() ifxInput: EventEmitter<string>;\r\n  @Event() ifxSuggestionRequested: EventEmitter<string>;\r\n  @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\r\n  @Event() ifxFocus: EventEmitter<void>;\r\n  @Event() ifxBlur: EventEmitter<void>;\r\n\r\n  @State() showDropdown: boolean = false;\r\n  @State() filteredSuggestions: SuggestionItem[] = [];\r\n  @State() selectedSuggestionIndex: number = -1;\r\n  @State() searchHistory: string[] = [];\r\n\r\n  @Prop() showDeleteIcon: boolean = false;\r\n  @State() showDeleteIconInternalState: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() size: string = 'l';\r\n  @State() isFocused: boolean = false;\r\n  @Prop() placeholder: string = \"Search...\";\r\n  @Prop() autocomplete: string = \"off\";\r\n  @Prop() maxlength?: number = null;\r\n\r\n  private focusEmitted: boolean = false;\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\r\n      this.hideDropdown();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (!this.showDropdown) return;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        this.navigateSuggestions(1);\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.navigateSuggestions(-1);\r\n        break;\r\n      case 'Enter':\r\n        event.preventDefault();\r\n        if (this.selectedSuggestionIndex >= 0) {\r\n          this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\r\n        } else {\r\n          this.handleSearch();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        this.hideDropdown();\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Watch('value')\r\n  valueWatcher(newValue: string) {\r\n    if (this.inputElement && newValue !== this.inputElement.value) {\r\n      this.inputElement.value = newValue;\r\n    }\r\n    this.updateSuggestions();\r\n  }\r\n\r\n  @Watch('suggestions')\r\n  suggestionsWatcher() {\r\n    this.updateSuggestions();\r\n  }\r\n\r\n\r\n  handleInput = () => {\r\n    const query = this.inputElement.value;\r\n    this.value = query;\r\n    this.ifxInput.emit(this.value);\r\n\r\n    if (this.showSuggestions) {\r\n      this.showDropdown = true;\r\n      this.selectedSuggestionIndex = -1;\r\n      this.requestSuggestions(query);\r\n    }\r\n  };\r\n\r\n  handleDelete = () => {\r\n    if(!this.disabled) { \r\n      this.inputElement.value = '';\r\n      this.value = \"\";\r\n      this.ifxInput.emit(this.value);\r\n      this.hideDropdown();\r\n    }\r\n  }\r\n\r\n  handleSearch = () => {\r\n    if (this.value.trim() && this.enableHistory) {\r\n      // Only add to history if there are actual results\r\n      if (this.filteredSuggestions.length > 0) {\r\n        this.addToHistory(this.value);\r\n      }\r\n    }\r\n    this.hideDropdown();\r\n  }\r\n\r\n  focusInput() {\r\n    // Only emit focus event if it hasn't been emitted already\r\n    if (!this.focusEmitted) {\r\n      this.focusEmitted = true;\r\n      this.isFocused = true;\r\n      this.ifxFocus.emit();\r\n    }\r\n\r\n    if (this.showSuggestions) {\r\n      // On focus without input: Show only history\r\n      if (this.value.length === 0) {\r\n        this.showHistoryDropdown();\r\n        // Only show dropdown if history is actually present\r\n        this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\r\n      } else {\r\n        // With existing input: Normal suggestion logic\r\n        this.updateSuggestions();\r\n        this.showDropdown = this.filteredSuggestions.length > 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  blurInput() {\r\n    setTimeout(() => {\r\n      this.isFocused = false;\r\n      this.focusEmitted = false; // Reset focus flag when blur occurs\r\n      this.ifxBlur.emit();\r\n    }, 150);\r\n  }\r\n\r\n  // Public method to update history from external sources\r\n  public loadSearchHistory() {\r\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n      const stored = localStorage.getItem(this.historyKey);\r\n      this.searchHistory = stored ? JSON.parse(stored) : [];\r\n\r\n      // Update suggestions when history is loaded\r\n      this.updateSuggestions();\r\n\r\n      // If no input and no history left, close dropdown\r\n      if (this.value.length === 0 && this.searchHistory.length === 0) {\r\n        this.showDropdown = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Public method to completely clear history\r\n  public clearSearchHistory() {\r\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n      // Clear from localStorage\r\n      localStorage.removeItem(this.historyKey);\r\n\r\n      // Clear internal history\r\n      this.searchHistory = [];\r\n\r\n      // Reset all dropdown-relevant states\r\n      this.filteredSuggestions = [];\r\n      this.selectedSuggestionIndex = -1;\r\n      this.showDropdown = false;\r\n\r\n      // Update suggestions after reset\r\n      this.updateSuggestions();\r\n    }\r\n  }\r\n\r\n  // Suggestion Management Methods\r\n  private addToHistory(term: string) {\r\n    if (!this.enableHistory || !term.trim()) return;\r\n\r\n    const history = [...this.searchHistory];\r\n    const existingIndex = history.indexOf(term);\r\n\r\n    if (existingIndex > -1) {\r\n      history.splice(existingIndex, 1);\r\n    }\r\n\r\n    history.unshift(term);\r\n    // Limit history to maxHistoryItems (default 5)\r\n    this.searchHistory = history.slice(0, this.maxHistoryItems);\r\n\r\n    if (typeof localStorage !== 'undefined') {\r\n      localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n    }\r\n  }\r\n\r\n  // Remove individual history entry\r\n  private removeFromHistory(term: string) {\r\n    if (!this.enableHistory) return;\r\n\r\n    const history = [...this.searchHistory];\r\n    const index = history.indexOf(term);\r\n\r\n    if (index > -1) {\r\n      history.splice(index, 1);\r\n      this.searchHistory = history;\r\n\r\n      // Update localStorage\r\n      if (typeof localStorage !== 'undefined') {\r\n        localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n      }\r\n\r\n      // Update suggestions after removal\r\n      this.updateSuggestions();\r\n\r\n      // Close dropdown if no history remains\r\n      if (this.searchHistory.length === 0 && this.value.length === 0) {\r\n        this.showDropdown = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Handle click on history delete button\r\n  private handleHistoryDelete = (event: Event, term: string) => {\r\n    event.stopPropagation(); // Prevent selection of the entry\r\n    this.removeFromHistory(term);\r\n  }\r\n\r\n  private requestSuggestions(query: string) {\r\n    this.ifxSuggestionRequested.emit(query);\r\n    this.updateSuggestions();\r\n  }\r\n\r\n  private updateSuggestions() {\r\n    const query = this.value.toLowerCase();\r\n    let suggestions: SuggestionItem[] = [];\r\n\r\n    if (query.length > 0) {\r\n      // For text input: Mix external suggestions and relevant history\r\n\r\n      // 1. Filter external suggestions\r\n      if (this.suggestions && this.suggestions.length > 0) {\r\n        const filteredExternal = this.suggestions.filter(s =>\r\n          s.text.toLowerCase().includes(query)\r\n        );\r\n        suggestions = [...suggestions, ...filteredExternal];\r\n      }\r\n\r\n      // 2. Filter relevant history entries\r\n      if (this.enableHistory && this.searchHistory.length > 0) {\r\n        const filteredHistory = this.searchHistory\r\n          .filter(term => term.toLowerCase().includes(query))\r\n          .map((term, index) => ({\r\n            id: `history-${index}`,\r\n            text: term,\r\n            type: 'history' as const\r\n          }));\r\n        suggestions = [...suggestions, ...filteredHistory];\r\n      }\r\n\r\n      // 3. Sort by relevance (exact matches first, then prefix matches)\r\n      suggestions.sort((a, b) => {\r\n        const aText = a.text.toLowerCase();\r\n        const bText = b.text.toLowerCase();\r\n\r\n        // Exact match has highest priority\r\n        if (aText === query && bText !== query) return -1;\r\n        if (bText === query && aText !== query) return 1;\r\n\r\n        // Prefix match has second highest priority\r\n        const aStartsWith = aText.startsWith(query);\r\n        const bStartsWith = bText.startsWith(query);\r\n\r\n        if (aStartsWith && !bStartsWith) return -1;\r\n        if (bStartsWith && !aStartsWith) return 1;\r\n\r\n        // With equal relevance: external suggestions before history\r\n        if (a.type === 'suggestion' && b.type === 'history') return -1;\r\n        if (a.type === 'history' && b.type === 'suggestion') return 1;\r\n\r\n        // Alphabetical sorting as last criterion\r\n        return aText.localeCompare(bText);\r\n      });\r\n\r\n    } else {\r\n      // For empty query: Show only history (no external suggestions)\r\n      if (this.enableHistory && this.searchHistory.length > 0) {\r\n        const historySuggestions = this.searchHistory.map((term, index) => ({\r\n          id: `history-${index}`,\r\n          text: term,\r\n          type: 'history' as const\r\n        }));\r\n\r\n        suggestions = historySuggestions;\r\n      }\r\n      // For empty query DO NOT show external suggestions\r\n    }\r\n\r\n    // Remove duplicates based on text and scope combination (history takes precedence over external)\r\n    const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\r\n      const existingIndex = unique.findIndex(item =>\r\n        item.text.toLowerCase() === current.text.toLowerCase() &&\r\n        item.scope === current.scope\r\n      );\r\n      if (existingIndex === -1) {\r\n        unique.push(current);\r\n      } else {\r\n        // If already exists, prefer history over external suggestions\r\n        if (current.type === 'history' && unique[existingIndex].type !== 'history') {\r\n          unique[existingIndex] = current;\r\n        }\r\n      }\r\n      return unique;\r\n    }, []);\r\n\r\n    this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\r\n    this.selectedSuggestionIndex = -1;\r\n  }\r\n\r\n  private navigateSuggestions(direction: number) {\r\n    const maxIndex = this.filteredSuggestions.length - 1;\r\n\r\n    if (direction > 0) {\r\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\r\n        ? this.selectedSuggestionIndex + 1\r\n        : 0;\r\n    } else {\r\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\r\n        ? this.selectedSuggestionIndex - 1\r\n        : maxIndex;\r\n    }\r\n  }\r\n\r\n  private selectSuggestion(suggestion: SuggestionItem) {\r\n    this.value = suggestion.text;\r\n    this.inputElement.value = suggestion.text;\r\n    this.ifxSuggestionSelected.emit(suggestion);\r\n    this.ifxInput.emit(this.value);\r\n\r\n    if (this.enableHistory) {\r\n      // Always add selected suggestions to history since they are valid results\r\n      this.addToHistory(suggestion.text);\r\n    }\r\n\r\n    this.hideDropdown();\r\n  }\r\n\r\n  private hideDropdown() {\r\n    this.showDropdown = false;\r\n    this.selectedSuggestionIndex = -1;\r\n    this.isFocused = false;\r\n  }\r\n\r\n  // Show only history in dropdown (e.g. on focus without input)\r\n  private showHistoryDropdown() {\r\n    if (this.enableHistory && this.searchHistory.length > 0) {\r\n      // Show only history entries\r\n      const historySuggestions = this.searchHistory.map((term, index) => ({\r\n        id: `history-${index}`,\r\n        text: term,\r\n        type: 'history' as const\r\n      }));\r\n\r\n      this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\r\n      this.selectedSuggestionIndex = -1;\r\n    } else {\r\n      this.filteredSuggestions = [];\r\n    }\r\n  }\r\n\r\n  // Check if only history entries are displayed (without text input)\r\n  private isShowingOnlyHistory(): boolean {\r\n    return this.value.length === 0 &&\r\n           this.filteredSuggestions.length > 0 &&\r\n           this.filteredSuggestions.every(s => s.type === 'history');\r\n  }\r\n\r\n  // Render text with highlighted matches\r\n  private renderHighlightedText(text: string, query: string) {\r\n    if (!query || query.length === 0) {\r\n      return text;\r\n    }\r\n\r\n    const lowerText = text.toLowerCase();\r\n    const lowerQuery = query.toLowerCase();\r\n    const index = lowerText.indexOf(lowerQuery);\r\n\r\n    if (index === -1) {\r\n      return text;\r\n    }\r\n\r\n    const before = text.substring(0, index);\r\n    const match = text.substring(index, index + query.length);\r\n    const after = text.substring(index + query.length);\r\n\r\n    return [\r\n      before,\r\n      <strong>{match}</strong>,\r\n      after\r\n    ];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadSearchHistory();\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework()\r\n      trackComponent('ifx-search-field', await framework)\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    if (this.value !== \"\") {\r\n      this.showDeleteIconInternalState = true;\r\n    } else this.showDeleteIconInternalState = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        aria-disabled={this.disabled}\r\n        aria-value={this.value}\r\n        class='search-field'\r\n      >\r\n        <div\r\n          class={this.getWrapperClassNames()}\r\n          tabindex={1}\r\n          onClick={() => this.focusInput()}\r\n        >\r\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\r\n          <input\r\n            ref={(el) => (this.inputElement = el)}\r\n            type=\"text\"\r\n            autocomplete={this.autocomplete}\r\n            onInput={() => this.handleInput()}\r\n            onFocus={() => this.focusInput()}\r\n            onBlur={() => this.blurInput()}\r\n            placeholder={this.placeholder}\r\n            disabled={this.disabled}\r\n            maxlength={this.maxlength}\r\n            value={this.value}\r\n            role=\"combobox\"\r\n            aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n            aria-expanded={this.showDropdown}\r\n            aria-autocomplete=\"list\"\r\n            aria-haspopup=\"listbox\"\r\n            aria-label={this.ariaLabel}\r\n            aria-labelledby={this.ariaLabelledBy}\r\n            aria-describedby={this.ariaDescribedBy}\r\n            aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n            aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\r\n          />\r\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\r\n            <ifx-icon\r\n              icon=\"cRemove16\"\r\n              class=\"delete-icon\"\r\n              onClick={this.handleDelete}\r\n              role=\"button\"\r\n              tabindex=\"0\"\r\n              aria-label={this.deleteIconAriaLabel}\r\n              onKeyDown={(event) => {\r\n                if (event.key === 'Enter' || event.key === ' ') {\r\n                  event.preventDefault();\r\n                  this.handleDelete();\r\n                }\r\n              }}>\r\n            </ifx-icon>\r\n          ) : null}\r\n        </div>\r\n\r\n        {/* Suggestions Dropdown */}\r\n        {this.showDropdown && this.filteredSuggestions.length > 0 && (\r\n          <div\r\n            ref={(el) => (this.dropdownElement = el)}\r\n            id=\"suggestions-dropdown\"\r\n            class=\"suggestions-dropdown\"\r\n            role=\"listbox\"\r\n            aria-label={this.dropdownAriaLabel}\r\n          >\r\n            {/* History Header - only show when exclusively showing history entries */}\r\n            {this.isShowingOnlyHistory() && (\r\n              <div class=\"suggestions-header\">\r\n                {this.historyHeaderText}\r\n              </div>\r\n            )}\r\n\r\n            {this.filteredSuggestions.map((suggestion, index) => (\r\n              <div\r\n                key={suggestion.id}\r\n                id={`suggestion-${index}`}\r\n                class={this.getSuggestionClassNames(index)}\r\n                role=\"option\"\r\n                aria-selected={index === this.selectedSuggestionIndex}\r\n                aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\r\n                onClick={() => this.selectSuggestion(suggestion)}\r\n                onMouseEnter={() => this.selectedSuggestionIndex = index}\r\n              >\r\n                <div class=\"suggestion-content\">\r\n                  {suggestion.type === 'history' && (\r\n                    <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\r\n                  )}\r\n                  {suggestion.type === 'suggestion' && (\r\n                    <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\r\n                  )}\r\n                  <span class=\"suggestion-text\">\r\n                    <span class=\"suggestion-main-text\">\r\n                      {this.renderHighlightedText(suggestion.text, this.value)}\r\n                    </span>\r\n                    {suggestion.scope && (\r\n                      <span class=\"suggestion-scope\">– {suggestion.scope}</span>\r\n                    )}\r\n                  </span>\r\n\r\n                  {suggestion.resultCount !== undefined && suggestion.scope && (\r\n                    <span class=\"suggestion-count\">{suggestion.resultCount}</span>\r\n                  )}\r\n\r\n                  {/* Delete Button only for history entries */}\r\n                  {suggestion.type === 'history' && (\r\n                    <ifx-icon\r\n                      icon=\"cross16\"\r\n                      class=\"suggestion-delete-icon\"\r\n                      role=\"button\"\r\n                      tabindex=\"0\"\r\n                      aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\r\n                      onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\r\n                      onKeyDown={(event) => {\r\n                        if (event.key === 'Enter' || event.key === ' ') {\r\n                          event.preventDefault();\r\n                          this.handleHistoryDelete(event, suggestion.text);\r\n                        }\r\n                      }}\r\n                    ></ifx-icon>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  getSizeClass() {\r\n    return `${this.size}` === \"s\"\r\n      ? \"search-field__wrapper-s\"\r\n      : \"\";\r\n  }\r\n\r\n  getWrapperClassNames() {\r\n    return classNames(\r\n      `search-field__wrapper`,\r\n      `search-field__wrapper ${this.getSizeClass()}`,\r\n      `${this.isFocused ? 'focused' : \"\"}`,\r\n      `${this.showDropdown ? 'dropdown-open' : \"\"}`,\r\n      `${this.disabled ? 'disabled' : \"\"}`\r\n    );\r\n  }\r\n\r\n  getSuggestionClassNames(index: number) {\r\n    return classNames(\r\n      'suggestion-item',\r\n      {\r\n        'suggestion-item--selected': index === this.selectedSuggestionIndex,\r\n        'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\r\n      }\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-search-field.entry.js","sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative; // Wichtig für absolute positioning des Dropdowns\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8d8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n\n    &:focus-visible:not(.disabled) {\n      outline: 2px solid tokens.$ifxColorOcean500;\n      outline-offset: 2px;\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3c3a39;\n    }\n\n    & .delete-icon {\n      outline: 1px solid transparent;\n      right: 12px;\n      cursor: pointer;\n      &:focus-visible {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 1px;\n      }\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8d8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background: tokens.$ifxColorEngineering300;\n        color: tokens.$ifxColorBaseWhite;\n\n        &::placeholder {\n          color: tokens.$ifxColorBaseWhite;\n        }\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering300;\n      border: none;\n      color: tokens.$ifxColorBaseWhite;\n\n      &:hover {\n        border: none;\n        outline: none;\n      }\n\n      & .delete-icon { \n        cursor: default;\n        &:focus-visible { \n          outline: 1px solid transparent;\n        }\n      }\n    }\n  }\n\n  // Suggestions Dropdown Styles\n  .suggestions-dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: tokens.$ifxColorBaseWhite;\n    margin-top: tokens.$ifxSpace50;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n    z-index: 1000;\n    max-height: 300px;\n    overflow-y: auto;\n    container-type: inline-size; // Enable container queries\n\n    .suggestions-header {\n      // font: tokens.$ifxEyebrowEyebrow02; TODO\n      font-family: Source Sans 3;\n      font-size: 0.8125rem;\n      font-weight: 600;\n      line-height: 1.25rem;\n\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      color: tokens.$ifxColorEngineering500;\n      border-bottom: 1px solid tokens.$ifxColorEngineering200;\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n    }\n\n    .suggestion-item {\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n      cursor: pointer;\n      transition: background-color 0.2s ease;\n\n      &:last-child {\n        border-bottom: none;\n      }\n\n      &:hover,\n      &--selected {\n        background-color: tokens.$ifxColorEngineering200;\n      }\n\n      .suggestion-content {\n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace150;\n\n        .suggestion-icon {\n          color: tokens.$ifxColorEngineering500;\n          flex-shrink: 0;\n\n          &--history {\n            color: tokens.$ifxColorEngineering500;\n          }\n        }\n\n        .suggestion-text {\n          flex: 1;\n          display: flex;\n          align-items: center;\n          min-width: 0; // Important for flexbox truncation\n\n          .suggestion-main-text {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            flex-shrink: 1;\n            min-width: 0;\n          }\n\n          .suggestion-scope {\n            color: tokens.$ifxColorEngineering400;\n            flex-shrink: 0; // Never truncate the scope\n            white-space: nowrap;\n            margin-left: tokens.$ifxSpace25; // Add space before the scope\n            font-weight: tokens.$ifxFontWeightSemibold;\n            font-size: tokens.$ifxFontSizeXs;\n          }\n\n          // When container is narrow, stack scope below main text\n          @container (max-width: 320px) {\n            flex-direction: column;\n            align-items: flex-start;\n\n            .suggestion-main-text {\n              width: 100%;\n              max-width: 100%;\n            }\n\n            .suggestion-scope {\n              margin-left: 0;\n              margin-top: 0;\n              width: 100%;\n              max-width: 100%;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              flex-shrink: 1; // Allow truncation when narrow\n            }\n          }\n        }\n\n        .suggestion-count {\n          color: tokens.$ifxColorEngineering400;\n          margin-left: auto;\n          flex-shrink: 0;\n        }\n\n        .suggestion-delete-icon {\n          opacity: 0;\n          visibility: hidden;\n          transition: opacity 0.2s ease, visibility 0.2s ease;\n          cursor: pointer;\n          margin-left: auto;\n          flex-shrink: 0;\n          color: tokens.$ifxColorEngineering500;\n\n          &:hover {\n            color: tokens.$ifxColorEngineering600;\n          }\n        }\n      }\n\n      &:hover {\n        .suggestion-delete-icon {\n          opacity: 1;\n          visibility: visible;\n        }\n      }\n    }\n  }\n\n  // Wrapper modifications when dropdown is open\n  .search-field__wrapper.dropdown-open {\n    border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\n    border-color: tokens.$ifxColorOcean500;\n  }\n}\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, 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\nexport interface SuggestionItem {\n  id: string;\n  text: string;\n  type?: 'suggestion' | 'history';\n  scope?: string;\n  resultCount?: number;\n  metadata?: any;\n}\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  private dropdownElement: HTMLDivElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() suggestions: SuggestionItem[] = [];\n  @Prop() showSuggestions: boolean = false;\n  @Prop() maxSuggestions: number = 10;\n  @Prop() maxHistoryItems: number = 5;\n  @Prop() enableHistory: boolean = true;\n  @Prop() historyKey: string = 'ifx-search-history';\n  @Prop() historyHeaderText: string = 'Recent Searches';\n\n  // ARIA Labels and Accessibility Props\n  @Prop() ariaLabel: string | null = \"Search Field\"\n  @Prop() ariaLabelledBy?: string | null;\n  @Prop() ariaDescribedBy?: string | null;\n  @Prop() deleteIconAriaLabel: string = 'Clear search';\n  @Prop() historyDeleteAriaLabel: string = 'Remove from history';\n  @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\n  @Prop() suggestionAriaLabel: string = 'Search suggestion';\n  @Prop() historyItemAriaLabel: string = 'Search history item';\n\n  @Event() ifxInput: EventEmitter<string>;\n  @Event() ifxSuggestionRequested: EventEmitter<string>;\n  @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\n  @Event() ifxFocus: EventEmitter<void>;\n  @Event() ifxBlur: EventEmitter<void>;\n\n  @State() showDropdown: boolean = false;\n  @State() filteredSuggestions: SuggestionItem[] = [];\n  @State() selectedSuggestionIndex: number = -1;\n  @State() searchHistory: string[] = [];\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"off\";\n  @Prop() maxlength?: number = null;\n\n  private focusEmitted: boolean = false;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\n      this.hideDropdown();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.showDropdown) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigateSuggestions(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigateSuggestions(-1);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.selectedSuggestionIndex >= 0) {\n          this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\n        } else {\n          this.handleSearch();\n        }\n        break;\n      case 'Escape':\n        this.hideDropdown();\n        break;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (this.inputElement && newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n    this.updateSuggestions();\n  }\n\n  @Watch('suggestions')\n  suggestionsWatcher() {\n    this.updateSuggestions();\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query;\n    this.ifxInput.emit(this.value);\n\n    if (this.showSuggestions) {\n      this.showDropdown = true;\n      this.selectedSuggestionIndex = -1;\n      this.requestSuggestions(query);\n    }\n  };\n\n  handleDelete = () => {\n    if(!this.disabled) { \n      this.inputElement.value = '';\n      this.value = \"\";\n      this.ifxInput.emit(this.value);\n      this.hideDropdown();\n    }\n  }\n\n  handleSearch = () => {\n    if (this.value.trim() && this.enableHistory) {\n      // Only add to history if there are actual results\n      if (this.filteredSuggestions.length > 0) {\n        this.addToHistory(this.value);\n      }\n    }\n    this.hideDropdown();\n  }\n\n  focusInput() {\n    // Only emit focus event if it hasn't been emitted already\n    if (!this.focusEmitted) {\n      this.focusEmitted = true;\n      this.isFocused = true;\n      this.ifxFocus.emit();\n    }\n\n    if (this.showSuggestions) {\n      // On focus without input: Show only history\n      if (this.value.length === 0) {\n        this.showHistoryDropdown();\n        // Only show dropdown if history is actually present\n        this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\n      } else {\n        // With existing input: Normal suggestion logic\n        this.updateSuggestions();\n        this.showDropdown = this.filteredSuggestions.length > 0;\n      }\n    }\n  }\n\n  blurInput() {\n    setTimeout(() => {\n      this.isFocused = false;\n      this.focusEmitted = false; // Reset focus flag when blur occurs\n      this.ifxBlur.emit();\n    }, 150);\n  }\n\n  // Public method to update history from external sources\n  public loadSearchHistory() {\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\n      const stored = localStorage.getItem(this.historyKey);\n      this.searchHistory = stored ? JSON.parse(stored) : [];\n\n      // Update suggestions when history is loaded\n      this.updateSuggestions();\n\n      // If no input and no history left, close dropdown\n      if (this.value.length === 0 && this.searchHistory.length === 0) {\n        this.showDropdown = false;\n      }\n    }\n  }\n\n  // Public method to completely clear history\n  public clearSearchHistory() {\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\n      // Clear from localStorage\n      localStorage.removeItem(this.historyKey);\n\n      // Clear internal history\n      this.searchHistory = [];\n\n      // Reset all dropdown-relevant states\n      this.filteredSuggestions = [];\n      this.selectedSuggestionIndex = -1;\n      this.showDropdown = false;\n\n      // Update suggestions after reset\n      this.updateSuggestions();\n    }\n  }\n\n  // Suggestion Management Methods\n  private addToHistory(term: string) {\n    if (!this.enableHistory || !term.trim()) return;\n\n    const history = [...this.searchHistory];\n    const existingIndex = history.indexOf(term);\n\n    if (existingIndex > -1) {\n      history.splice(existingIndex, 1);\n    }\n\n    history.unshift(term);\n    // Limit history to maxHistoryItems (default 5)\n    this.searchHistory = history.slice(0, this.maxHistoryItems);\n\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n    }\n  }\n\n  // Remove individual history entry\n  private removeFromHistory(term: string) {\n    if (!this.enableHistory) return;\n\n    const history = [...this.searchHistory];\n    const index = history.indexOf(term);\n\n    if (index > -1) {\n      history.splice(index, 1);\n      this.searchHistory = history;\n\n      // Update localStorage\n      if (typeof localStorage !== 'undefined') {\n        localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n      }\n\n      // Update suggestions after removal\n      this.updateSuggestions();\n\n      // Close dropdown if no history remains\n      if (this.searchHistory.length === 0 && this.value.length === 0) {\n        this.showDropdown = false;\n      }\n    }\n  }\n\n  // Handle click on history delete button\n  private handleHistoryDelete = (event: Event, term: string) => {\n    event.stopPropagation(); // Prevent selection of the entry\n    this.removeFromHistory(term);\n  }\n\n  private requestSuggestions(query: string) {\n    this.ifxSuggestionRequested.emit(query);\n    this.updateSuggestions();\n  }\n\n  private updateSuggestions() {\n    const query = this.value.toLowerCase();\n    let suggestions: SuggestionItem[] = [];\n\n    if (query.length > 0) {\n      // For text input: Mix external suggestions and relevant history\n\n      // 1. Filter external suggestions\n      if (this.suggestions && this.suggestions.length > 0) {\n        const filteredExternal = this.suggestions.filter(s =>\n          s.text.toLowerCase().includes(query)\n        );\n        suggestions = [...suggestions, ...filteredExternal];\n      }\n\n      // 2. Filter relevant history entries\n      if (this.enableHistory && this.searchHistory.length > 0) {\n        const filteredHistory = this.searchHistory\n          .filter(term => term.toLowerCase().includes(query))\n          .map((term, index) => ({\n            id: `history-${index}`,\n            text: term,\n            type: 'history' as const\n          }));\n        suggestions = [...suggestions, ...filteredHistory];\n      }\n\n      // 3. Sort by relevance (exact matches first, then prefix matches)\n      suggestions.sort((a, b) => {\n        const aText = a.text.toLowerCase();\n        const bText = b.text.toLowerCase();\n\n        // Exact match has highest priority\n        if (aText === query && bText !== query) return -1;\n        if (bText === query && aText !== query) return 1;\n\n        // Prefix match has second highest priority\n        const aStartsWith = aText.startsWith(query);\n        const bStartsWith = bText.startsWith(query);\n\n        if (aStartsWith && !bStartsWith) return -1;\n        if (bStartsWith && !aStartsWith) return 1;\n\n        // With equal relevance: external suggestions before history\n        if (a.type === 'suggestion' && b.type === 'history') return -1;\n        if (a.type === 'history' && b.type === 'suggestion') return 1;\n\n        // Alphabetical sorting as last criterion\n        return aText.localeCompare(bText);\n      });\n\n    } else {\n      // For empty query: Show only history (no external suggestions)\n      if (this.enableHistory && this.searchHistory.length > 0) {\n        const historySuggestions = this.searchHistory.map((term, index) => ({\n          id: `history-${index}`,\n          text: term,\n          type: 'history' as const\n        }));\n\n        suggestions = historySuggestions;\n      }\n      // For empty query DO NOT show external suggestions\n    }\n\n    // Remove duplicates based on text and scope combination (history takes precedence over external)\n    const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\n      const existingIndex = unique.findIndex(item =>\n        item.text.toLowerCase() === current.text.toLowerCase() &&\n        item.scope === current.scope\n      );\n      if (existingIndex === -1) {\n        unique.push(current);\n      } else {\n        // If already exists, prefer history over external suggestions\n        if (current.type === 'history' && unique[existingIndex].type !== 'history') {\n          unique[existingIndex] = current;\n        }\n      }\n      return unique;\n    }, []);\n\n    this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\n    this.selectedSuggestionIndex = -1;\n  }\n\n  private navigateSuggestions(direction: number) {\n    const maxIndex = this.filteredSuggestions.length - 1;\n\n    if (direction > 0) {\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\n        ? this.selectedSuggestionIndex + 1\n        : 0;\n    } else {\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\n        ? this.selectedSuggestionIndex - 1\n        : maxIndex;\n    }\n  }\n\n  private selectSuggestion(suggestion: SuggestionItem) {\n    this.value = suggestion.text;\n    this.inputElement.value = suggestion.text;\n    this.ifxSuggestionSelected.emit(suggestion);\n    this.ifxInput.emit(this.value);\n\n    if (this.enableHistory) {\n      // Always add selected suggestions to history since they are valid results\n      this.addToHistory(suggestion.text);\n    }\n\n    this.hideDropdown();\n  }\n\n  private hideDropdown() {\n    this.showDropdown = false;\n    this.selectedSuggestionIndex = -1;\n    this.isFocused = false;\n  }\n\n  // Show only history in dropdown (e.g. on focus without input)\n  private showHistoryDropdown() {\n    if (this.enableHistory && this.searchHistory.length > 0) {\n      // Show only history entries\n      const historySuggestions = this.searchHistory.map((term, index) => ({\n        id: `history-${index}`,\n        text: term,\n        type: 'history' as const\n      }));\n\n      this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\n      this.selectedSuggestionIndex = -1;\n    } else {\n      this.filteredSuggestions = [];\n    }\n  }\n\n  // Check if only history entries are displayed (without text input)\n  private isShowingOnlyHistory(): boolean {\n    return this.value.length === 0 &&\n           this.filteredSuggestions.length > 0 &&\n           this.filteredSuggestions.every(s => s.type === 'history');\n  }\n\n  // Render text with highlighted matches\n  private renderHighlightedText(text: string, query: string) {\n    if (!query || query.length === 0) {\n      return text;\n    }\n\n    const lowerText = text.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const index = lowerText.indexOf(lowerQuery);\n\n    if (index === -1) {\n      return text;\n    }\n\n    const before = text.substring(0, index);\n    const match = text.substring(index, index + query.length);\n    const after = text.substring(index + query.length);\n\n    return [\n      before,\n      <strong>{match}</strong>,\n      after\n    ];\n  }\n\n  componentWillLoad() {\n    this.loadSearchHistory();\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework()\n      trackComponent('ifx-search-field', await framework)\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div\n        aria-disabled={this.disabled}\n        aria-value={this.value}\n        class='search-field'\n      >\n        <div\n          class={this.getWrapperClassNames()}\n          tabindex={1}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            onFocus={() => this.focusInput()}\n            onBlur={() => this.blurInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value}\n            role=\"combobox\"\n            aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\n            aria-expanded={this.showDropdown}\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledBy}\n            aria-describedby={this.ariaDescribedBy}\n            aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\n            aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon\n              icon=\"cRemove16\"\n              class=\"delete-icon\"\n              onClick={this.handleDelete}\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label={this.deleteIconAriaLabel}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  this.handleDelete();\n                }\n              }}>\n            </ifx-icon>\n          ) : null}\n        </div>\n\n        {/* Suggestions Dropdown */}\n        {this.showDropdown && this.filteredSuggestions.length > 0 && (\n          <div\n            ref={(el) => (this.dropdownElement = el)}\n            id=\"suggestions-dropdown\"\n            class=\"suggestions-dropdown\"\n            role=\"listbox\"\n            aria-label={this.dropdownAriaLabel}\n          >\n            {/* History Header - only show when exclusively showing history entries */}\n            {this.isShowingOnlyHistory() && (\n              <div class=\"suggestions-header\">\n                {this.historyHeaderText}\n              </div>\n            )}\n\n            {this.filteredSuggestions.map((suggestion, index) => (\n              <div\n                key={suggestion.id}\n                id={`suggestion-${index}`}\n                class={this.getSuggestionClassNames(index)}\n                role=\"option\"\n                aria-selected={index === this.selectedSuggestionIndex}\n                aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\n                onClick={() => this.selectSuggestion(suggestion)}\n                onMouseEnter={() => this.selectedSuggestionIndex = index}\n              >\n                <div class=\"suggestion-content\">\n                  {suggestion.type === 'history' && (\n                    <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\n                  )}\n                  {suggestion.type === 'suggestion' && (\n                    <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\n                  )}\n                  <span class=\"suggestion-text\">\n                    <span class=\"suggestion-main-text\">\n                      {this.renderHighlightedText(suggestion.text, this.value)}\n                    </span>\n                    {suggestion.scope && (\n                      <span class=\"suggestion-scope\">– {suggestion.scope}</span>\n                    )}\n                  </span>\n\n                  {suggestion.resultCount !== undefined && suggestion.scope && (\n                    <span class=\"suggestion-count\">{suggestion.resultCount}</span>\n                  )}\n\n                  {/* Delete Button only for history entries */}\n                  {suggestion.type === 'history' && (\n                    <ifx-icon\n                      icon=\"cross16\"\n                      class=\"suggestion-delete-icon\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\n                      onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\n                      onKeyDown={(event) => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                          event.preventDefault();\n                          this.handleHistoryDelete(event, suggestion.text);\n                        }\n                      }}\n                    ></ifx-icon>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`,\n      `${this.showDropdown ? 'dropdown-open' : \"\"}`,\n      `${this.disabled ? 'disabled' : \"\"}`\n    );\n  }\n\n  getSuggestionClassNames(index: number) {\n    return classNames(\n      'suggestion-item',\n      {\n        'suggestion-item--selected': index === this.selectedSuggestionIndex,\n        'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\n      }\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,s9KAAs9K;;MCqBh+K,WAAW,GAAA,MAAA;AANxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;AAW2B,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AACnC,QAAA,IAAW,CAAA,WAAA,GAAqB,EAAE;AAClC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAC3B,QAAA,IAAe,CAAA,eAAA,GAAW,CAAC;AAC3B,QAAA,IAAa,CAAA,aAAA,GAAY,IAAI;AAC7B,QAAA,IAAU,CAAA,UAAA,GAAW,oBAAoB;AACzC,QAAA,IAAiB,CAAA,iBAAA,GAAW,iBAAiB;;AAG7C,QAAA,IAAS,CAAA,SAAA,GAAkB,cAAc;AAGzC,QAAA,IAAmB,CAAA,mBAAA,GAAW,cAAc;AAC5C,QAAA,IAAsB,CAAA,sBAAA,GAAW,qBAAqB;AACtD,QAAA,IAAiB,CAAA,iBAAA,GAAW,gCAAgC;AAC5D,QAAA,IAAmB,CAAA,mBAAA,GAAW,mBAAmB;AACjD,QAAA,IAAoB,CAAA,oBAAA,GAAW,qBAAqB;AAQnD,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAmB,CAAA,mBAAA,GAAqB,EAAE;AAC1C,QAAA,IAAuB,CAAA,uBAAA,GAAW,EAAE;AACpC,QAAA,IAAa,CAAA,aAAA,GAAa,EAAE;AAE7B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAC9B,QAAA,IAA2B,CAAA,2BAAA,GAAY,KAAK;AAC7C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AACjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC3B,QAAA,IAAW,CAAA,WAAA,GAAW,WAAW;AACjC,QAAA,IAAY,CAAA,YAAA,GAAW,KAAK;AAC5B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAEzB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAmDrC,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK;AACrC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAE9B,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,gBAAA,IAAI,CAAC,uBAAuB,GAAG,EAAE;AACjC,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;AAElC,SAAC;AAED,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE;AAC5B,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;gBACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC9B,IAAI,CAAC,YAAY,EAAE;;AAEvB,SAAC;AAED,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAClB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;;gBAE3C,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,EAAE;AACvC,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;;YAGjC,IAAI,CAAC,YAAY,EAAE;AACrB,SAAC;;QAkHO,IAAA,CAAA,mBAAmB,GAAG,CAAC,KAAY,EAAE,IAAY,KAAI;AAC3D,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC9B,SAAC;AAwVF;AA1hBC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;YAC7E,IAAI,CAAC,YAAY,EAAE;;;AAKvB,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;AAExB,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBAC3B;AACF,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC;gBAC5B;AACF,YAAA,KAAK,OAAO;gBACV,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;AACrC,oBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;;qBACxE;oBACL,IAAI,CAAC,YAAY,EAAE;;gBAErB;AACF,YAAA,KAAK,QAAQ;gBACX,IAAI,CAAC,YAAY,EAAE;gBACnB;;;AAKN,IAAA,YAAY,CAAC,QAAgB,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7D,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ;;QAEpC,IAAI,CAAC,iBAAiB,EAAE;;IAI1B,kBAAkB,GAAA;QAChB,IAAI,CAAC,iBAAiB,EAAE;;IAmC1B,UAAU,GAAA;;AAER,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;AAGtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC3B,IAAI,CAAC,mBAAmB,EAAE;;AAE1B,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;;iBAClE;;gBAEL,IAAI,CAAC,iBAAiB,EAAE;gBACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC;;;;IAK7D,SAAS,GAAA;QACP,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;AAC1B,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;SACpB,EAAE,GAAG,CAAC;;;IAIF,iBAAiB,GAAA;QACtB,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE;YAC7D,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;AACpD,YAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE;;YAGrD,IAAI,CAAC,iBAAiB,EAAE;;AAGxB,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9D,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;;;IAMxB,kBAAkB,GAAA;QACvB,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE;;AAE7D,YAAA,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;;AAGxC,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE;;AAGvB,YAAA,IAAI,CAAC,mBAAmB,GAAG,EAAE;AAC7B,YAAA,IAAI,CAAC,uBAAuB,GAAG,EAAE;AACjC,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;YAGzB,IAAI,CAAC,iBAAiB,EAAE;;;;AAKpB,IAAA,YAAY,CAAC,IAAY,EAAA;QAC/B,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE;QAEzC,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;AAE3C,QAAA,IAAI,aAAa,GAAG,EAAE,EAAE;AACtB,YAAA,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;;AAGlC,QAAA,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;;AAErB,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC;AAE3D,QAAA,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE;AACvC,YAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;;;AAKrE,IAAA,iBAAiB,CAAC,IAAY,EAAA;QACpC,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE;QAEzB,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;AAEnC,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACd,YAAA,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AACxB,YAAA,IAAI,CAAC,aAAa,GAAG,OAAO;;AAG5B,YAAA,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE;AACvC,gBAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;;YAI3E,IAAI,CAAC,iBAAiB,EAAE;;AAGxB,YAAA,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9D,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;;AAWvB,IAAA,kBAAkB,CAAC,KAAa,EAAA;AACtC,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,iBAAiB,EAAE;;IAGlB,iBAAiB,GAAA;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;QACtC,IAAI,WAAW,GAAqB,EAAE;AAEtC,QAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;;;AAIpB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBACnD,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAChD,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CACrC;gBACD,WAAW,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,gBAAgB,CAAC;;;AAIrD,YAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AACvD,gBAAA,MAAM,eAAe,GAAG,IAAI,CAAC;AAC1B,qBAAA,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;qBACjD,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAM;oBACrB,EAAE,EAAE,CAAW,QAAA,EAAA,KAAK,CAAE,CAAA;AACtB,oBAAA,IAAI,EAAE,IAAI;AACV,oBAAA,IAAI,EAAE;AACP,iBAAA,CAAC,CAAC;gBACL,WAAW,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,eAAe,CAAC;;;YAIpD,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;gBACxB,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;gBAClC,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;;AAGlC,gBAAA,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK;oBAAE,OAAO,EAAE;AACjD,gBAAA,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK;AAAE,oBAAA,OAAO,CAAC;;gBAGhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;gBAC3C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;gBAE3C,IAAI,WAAW,IAAI,CAAC,WAAW;oBAAE,OAAO,EAAE;gBAC1C,IAAI,WAAW,IAAI,CAAC,WAAW;AAAE,oBAAA,OAAO,CAAC;;gBAGzC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS;oBAAE,OAAO,EAAE;gBAC9D,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY;AAAE,oBAAA,OAAO,CAAC;;AAG7D,gBAAA,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;AACnC,aAAC,CAAC;;aAEG;;AAEL,YAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AACvD,gBAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAM;oBAClE,EAAE,EAAE,CAAW,QAAA,EAAA,KAAK,CAAE,CAAA;AACtB,oBAAA,IAAI,EAAE,IAAI;AACV,oBAAA,IAAI,EAAE;AACP,iBAAA,CAAC,CAAC;gBAEH,WAAW,GAAG,kBAAkB;;;;;QAMpC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,MAAwB,EAAE,OAAO,KAAI;YACjF,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AACtD,gBAAA,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAC7B;AACD,YAAA,IAAI,aAAa,KAAK,EAAE,EAAE;AACxB,gBAAA,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;;iBACf;;AAEL,gBAAA,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;AAC1E,oBAAA,MAAM,CAAC,aAAa,CAAC,GAAG,OAAO;;;AAGnC,YAAA,OAAO,MAAM;SACd,EAAE,EAAE,CAAC;AAEN,QAAA,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC;AAC1E,QAAA,IAAI,CAAC,uBAAuB,GAAG,EAAE;;AAG3B,IAAA,mBAAmB,CAAC,SAAiB,EAAA;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC;AAEpD,QAAA,IAAI,SAAS,GAAG,CAAC,EAAE;AACjB,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,GAAG;AAC5D,kBAAE,IAAI,CAAC,uBAAuB,GAAG;kBAC/B,CAAC;;aACA;AACL,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,GAAG;AAC5D,kBAAE,IAAI,CAAC,uBAAuB,GAAG;kBAC/B,QAAQ;;;AAIR,IAAA,gBAAgB,CAAC,UAA0B,EAAA;AACjD,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI;QAC5B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI;AACzC,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,UAAU,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAE9B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;;AAEtB,YAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC;;QAGpC,IAAI,CAAC,YAAY,EAAE;;IAGb,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,uBAAuB,GAAG,EAAE;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;;IAIhB,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;;AAEvD,YAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAM;gBAClE,EAAE,EAAE,CAAW,QAAA,EAAA,KAAK,CAAE,CAAA;AACtB,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,IAAI,EAAE;AACP,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,mBAAmB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC;AAC3E,YAAA,IAAI,CAAC,uBAAuB,GAAG,EAAE;;aAC5B;AACL,YAAA,IAAI,CAAC,mBAAmB,GAAG,EAAE;;;;IAKzB,oBAAoB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;AACvB,YAAA,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC;AACnC,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;;;IAI1D,qBAAqB,CAAC,IAAY,EAAE,KAAa,EAAA;QACvD,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE;AACpC,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;AAE3C,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;AAChB,YAAA,OAAO,IAAI;;QAGb,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;AACvC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;AACzD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAElD,OAAO;YACL,MAAM;AACN,YAAA,CAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;YACxB;SACD;;IAGH,iBAAiB,GAAA;QACf,IAAI,CAAC,iBAAiB,EAAE;;AAG1B,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;;;IAIvD,mBAAmB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;AACrB,YAAA,IAAI,CAAC,2BAA2B,GAAG,IAAI;;;AAClC,YAAA,IAAI,CAAC,2BAA2B,GAAG,KAAK;;IAGjD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EACiB,IAAI,CAAC,QAAQ,EAAA,YAAA,EAChB,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,cAAc,EAAA,EAEpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAClC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAA,EAEhC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAY,CAAA,EAC1D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAC9B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,IAAI,CAAC,YAAY,GAAG,sBAAsB,GAAG,SAAS,EACtD,eAAA,EAAA,IAAI,CAAC,YAAY,EAAA,mBAAA,EACd,MAAM,EAAA,eAAA,EACV,SAAS,EACX,YAAA,EAAA,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EAAA,kBAAA,EAClB,IAAI,CAAC,eAAe,EAAA,WAAA,EAC3B,IAAI,CAAC,YAAY,GAAG,sBAAsB,GAAG,SAAS,EAAA,uBAAA,EAC1C,IAAI,CAAC,uBAAuB,IAAI,CAAC,GAAG,CAAA,WAAA,EAAc,IAAI,CAAC,uBAAuB,CAAE,CAAA,GAAG,SAAS,EACnH,CAAA,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtD,CACE,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,mBAAmB,EACpC,SAAS,EAAE,CAAC,KAAK,KAAI;AACnB,gBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;oBAC9C,KAAK,CAAC,cAAc,EAAE;oBACtB,IAAI,CAAC,YAAY,EAAE;;aAEtB,GACQ,IACT,IAAI,CACJ,EAGL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,KACvD,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,IAAI,CAAC,iBAAiB,EAAA,EAGjC,IAAI,CAAC,oBAAoB,EAAE,KAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC5B,EAAA,IAAI,CAAC,iBAAiB,CACnB,CACP,EAEA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MAC9C,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,EAAE,EAAE,CAAA,WAAA,EAAc,KAAK,CAAE,CAAA,EACzB,KAAK,EAAE,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAC1C,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,KAAK,KAAK,IAAI,CAAC,uBAAuB,EAAA,YAAA,EACzC,CAAA,EAAG,UAAU,CAAC,IAAI,KAAK,SAAS,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,mBAAmB,KAAK,UAAU,CAAC,IAAI,CAAG,EAAA,UAAU,CAAC,KAAK,GAAG,CAAK,EAAA,EAAA,UAAU,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE,CAAG,EAAA,UAAU,CAAC,WAAW,GAAG,KAAK,UAAU,CAAC,WAAW,CAAU,QAAA,CAAA,GAAG,EAAE,CAAA,CAAE,EACjP,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAChD,YAAY,EAAE,MAAM,IAAI,CAAC,uBAAuB,GAAG,KAAK,EAAA,EAExD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,UAAU,CAAC,IAAI,KAAK,SAAS,KAC5B,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,0CAA0C,GAAY,CACzF,EACA,UAAU,CAAC,IAAI,KAAK,YAAY,KAC/B,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,6CAA6C,GAAY,CAC3F,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAC/B,EAAA,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CACnD,EACN,UAAU,CAAC,KAAK,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,aAAI,UAAU,CAAC,KAAK,CAAQ,CAC3D,CACI,EAEN,UAAU,CAAC,WAAW,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,KACvD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,UAAU,CAAC,WAAW,CAAQ,CAC/D,EAGA,UAAU,CAAC,IAAI,KAAK,SAAS,KAC5B,CAAA,CAAA,UAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACA,YAAA,EAAA,GAAG,IAAI,CAAC,sBAAsB,CAAA,EAAA,EAAK,UAAU,CAAC,IAAI,CAAE,CAAA,EAChE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,EACpE,SAAS,EAAE,CAAC,KAAK,KAAI;AACnB,gBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;oBAC9C,KAAK,CAAC,cAAc,EAAE;oBACtB,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;;aAEnD,EAAA,CACS,CACb,CACG,CACF,CACP,CAAC,CACE,CACP,CACG;;IAIV,YAAY,GAAA;AACV,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAE,KAAK;AACxB,cAAE;cACA,EAAE;;IAGR,oBAAoB,GAAA;QAClB,OAAO,UAAU,CACf,CAAA,qBAAA,CAAuB,EACvB,CAAA,sBAAA,EAAyB,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,EAC9C,CAAA,EAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,CAAA,CAAE,EACpC,CAAA,EAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,EAAE,CAAA,CAAE,EAC7C,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,CACrC;;AAGH,IAAA,uBAAuB,CAAC,KAAa,EAAA;;QACnC,OAAO,UAAU,CACf,iBAAiB,EACjB;AACE,YAAA,2BAA2B,EAAE,KAAK,KAAK,IAAI,CAAC,uBAAuB;AACnE,YAAA,0BAA0B,EAAE,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAK;AACvE,SAAA,CACF;;;;;;;;;;;;"}

package/dist/esm/ifx-segment.entry.js

@@ -23,7 +23,7 @@ const Segment = class {
         }
     }
     render() {
-        return (h("div", { key: 'f1c3d94b360aa39d61b021f9fcd8aa3e3533a3bf', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'a421ad55148b0d098f65fa002610a929cd544e5b', icon: this.icon }), " ", h("slot", { key: '3a700e57d8c7681162e1c067590c99c9ffb5a7a0' })));
+        return (h("div", { key: '7e3de00d0927c957e99a81faf334f096a1f3b4fc', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '6d6d9d9d02bebbe45aa32250fe73ee4deac9876a', icon: this.icon }), " ", h("slot", { key: '2c860e35d492f81d846356e60bdcf04919cc6bc7' })));
     }
 };
 Segment.style = segmentCss;

package/dist/esm/ifx-segment.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-segment.entry.js","sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.segment {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: tokens.$ifxSize100;\r\n    position: relative;\r\n\r\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\r\n    \r\n    height: 34px;\r\n\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n\r\n    transition: all 100ms ease;\r\n    transition-property: color, background;\r\n    \r\n    font: tokens.$ifxBodyBodySemibold04;\r\n\r\n    &:focus-visible {\r\n        color: tokens.$ifxColorBaseWhite;\r\n        background-color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {         \r\n        color: tokens.$ifxColorBaseWhite;\r\n        background-color: tokens.$ifxColorOcean600;\r\n        \r\n        cursor: pointer;\r\n    }\r\n    \r\n    &:active {\r\n        background-color: tokens.$ifxColorOcean700;\r\n    }\r\n    \r\n    &.segment--selected {\r\n        color: tokens.$ifxColorBaseWhite;\r\n        \r\n        background-color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &.segment--small {\r\n        height: 30px;\r\n    }\r\n}\r\n\r\n.segment::after {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n\r\n    content: '';\r\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\n@Component ({\r\n    tag: 'ifx-segment',\r\n    styleUrl: 'segment.scss',\r\n    shadow: true\r\n})\r\n\r\nexport class Segment {\r\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\r\n\r\n    @Prop() icon: string;\r\n    @Prop() segmentIndex: number;\r\n    @Prop({ mutable: true }) selected: boolean = false;\r\n    @Prop() value!: string;\r\n\r\n    handleSegmentClick() {\r\n        if (this.selected) return;\r\n        this.selected = true;\r\n        this.segmentSelect.emit(this.segmentIndex);\r\n    }\r\n    \r\n    handleSegmentKeyDown(event: KeyboardEvent) {\r\n        if (event.code === 'Enter' || event.code === 'Space') {\r\n            if (this.selected) return;\r\n            this.selected = true;\r\n            this.segmentSelect.emit(this.segmentIndex);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \r\n                tabIndex={0}\r\n                onClick={() => {this.handleSegmentClick()}}\r\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\r\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,8vBAA8vB;;MCQpwB,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAW6B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BrD;IAxBG,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG9C,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACrC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;;IAIlD,MAAM,GAAA;QACF,QACI,4DAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,kBAAkB,EAAE,CAAA,EAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,OAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC7C;;;;;;;"}
+{"version":3,"file":"ifx-segment.entry.js","sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,8vBAA8vB;;MCQpwB,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAW6B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BrD;IAxBG,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG9C,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACrC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;;IAIlD,MAAM,GAAA;QACF,QACI,4DAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,kBAAkB,EAAE,CAAA,EAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,OAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC7C;;;;;;;"}

package/dist/esm/ifx-segmented-control.entry.js

@@ -71,8 +71,8 @@ const SegmentedControl = class {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '706d281e237d35c615ef19fc5843bcc1d0f69cd5', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '1ba15cc20ec7dbe8fd38c7078a6a25f4f6074c7b', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '1edd2c6760432e9d1e6cea3494e15f0ce61aa833', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: 'cbcc9f0ec911a27a0adb273cff1c9732ac24b7c3', class: 'group__controls' }, h("slot", { key: '1d9949d1a9381f688238599f8f084039d22842b3' })), this.caption.trim() &&
-            h("div", { key: '04a9a16afbb6217391a891e4f003f23a454e68b6', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '9bda23de0c260440d1cfc9d3808b451cc6221253', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '74bfd584af640b44d4fdeaa674e0df4003d58383', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '233e32decc7484857fe34397d10191fa60f101ff', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '59e000fd4bf388832d2dc31f2487f90a555aedf7', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '4368841e6a763be4407ada54434297b699e8d2b8', class: 'group__controls' }, h("slot", { key: 'f4d60a5f83969042e4198aa67687628b25dbf68b' })), this.caption.trim() &&
+            h("div", { key: '4c46eec275fea48fd95df56519739fd2ba97b807', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '656b6becac2b36bb32bf7ba8b4b247fe69e1a212', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();