@infineon/infineon-design-system-stencil 32.3.0--canary.1690.287f79c46cfd71b9841b04ef5e96d03a6615735b.0 → 32.3.1--canary.1737.36410c23fb3680e351257808670351cef8ef674d.0

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

@@ -22,7 +22,7 @@ const ProgressBar = class {
         this.internalValue = this.value;
     }
     render() {
-        return (index.h("div", { key: 'dbca8c4b413f06cffe00828250b904b7f012e3e2', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: '7b5ca791c98572bbf870b35e84ae75886a6a8f21', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: '6b30d72565bbcd61addcc1e4ff96a311c681dd28', class: "label" }, `${this.internalValue}%`))));
+        return (index.h("div", { key: '3f68729d3447897fb8b0d6ac8e5cfa4b4d1bbd0e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: '86abff96eb8a1260c96e6736f90fe4e79e2a5a03', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: '55d35acd3cc70a2b0a1f9058569f1a0a7751990e', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -49,7 +49,7 @@ const RadioButtonGroup = class {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (index.h("div", { key: '8316d55cd2188e39adc39b4ae2cff2a6a00645d7', class: 'radio-button-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '2d173aa92a70454f51e5cc51832a6c6dee190bca', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '5d0743555c2c7f8575bdfde588b8e60fa705103c', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (index.h("div", { key: '0c359fed41079b31dae0c28ace5192cdd43cc076', class: 'radio-button-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '735ec208d1aee30020ccd60621f90690c765c8bb', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '1d42c5173fc75d43c3497a2ed602fc781e98271b', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -98,10 +98,10 @@ const RadioButton = class {
         }
     }
     render() {
-        return (index.h("div", { key: '50f91a7e62f42eca90c3a5b0e5be2305fc724993', 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 }, index.h("div", { key: 'bc8584815a87f47e01e5fe13d299ae76dfa9ad41', class: `radioButton__wrapper 
+        return (index.h("div", { key: 'd77cdd158994c94969dca737cb524625e36a3178', 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 }, index.h("div", { key: 'd3057ff92826d2b482bb24f813d938d239e04c96', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: '5ded48e0ad8f94e7069d7fd7d134521c87f5bb80', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '4e54b2170790de0b6a0819634db1223804000522', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: 'ae995e898c7c811b32e0226577fdb11e72914961' }))), index.h("input", { key: '76d3c452563072034296964feaf90c406a7b89de', 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() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: '9bf957a824cc53794df205c719772d14a8727137', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '38b619b9b9eba2d9ff59b22b0dac7afc14df170e', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: 'af664f76c38c0a6b5e0a74209e93da583c2e292b' }))), index.h("input", { key: '04b94bf5849d08d28cda7cefba44c42a10dd1b17', 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() })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -40,7 +40,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (index.h("div", { key: '15b0a35d009af8564ce4f7f529b093aff5749061', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
+        return (index.h("div", { key: 'c313e088c8320ea5ba602f5da512624edaf44c36', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -55,7 +55,7 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (index.h("div", { key: '97056685e044ef83e9da78455a25ffc2347c43b3', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: 'f7f004953a2687b6aa937d21847a43a8abfc06b9', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '49aa10a205a30704c2936bffc18dc2673dcc9ad3', icon: "search-16", class: "search-icon" }), index.h("input", { key: '2626ee1e512110afa75f5cb01219b874a8e0a9f1', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (index.h("div", { key: '403a2f56ce9b8d71dbb9cc14bc85fd5d404958ea', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '0533ff88e0efe32a9bf5f1cb58d543d5ad40ab4a', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '8e3a8ddc88e737019dc4b168b8af0649772a5fac', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'e01caa6b37d268995ed385e3ffb7121f15342ad1', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"

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

@@ -28,7 +28,7 @@ const Segment = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'e99e1a35e80b8d05a075416b97264c79feb1c43d', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '5575b532732b647992d3cae14fe7ef82e91f9557', icon: this.icon }), " ", index.h("slot", { key: '479048280a0c85b6581eb6640190719508900f55' })));
+        return (index.h("div", { key: '2faaac48b77184cbd62852220903045cbf815a67', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: 'a69957b7ff87a6a4f717371b9227ddf3885e3878', icon: this.icon }), " ", index.h("slot", { key: 'ae2b9b7a9d2a2bce3b0b28f907df5755e32dcc4f' })));
     }
 };
 Segment.style = IfxSegmentStyle0;

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

@@ -72,8 +72,8 @@ const SegmentedControl = class {
         this.setActiveSegment();
     }
     render() {
-        return (index.h("div", { key: 'a88cbd45c79867e92a6f521e37ec07b603783925', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: '59d4a06dcf05290714f6debe80ff8b723f49b1ad', class: 'group__label' }, this.label.trim()), index.h("div", { key: 'ab2ea99cbb68237acadb0cb02397025aa8065686', class: 'group__controls' }, index.h("slot", { key: 'f029e1999e4102adef822c334fa5de6045ec15ae' })), this.caption.trim() &&
-            index.h("div", { key: '0cd3c610e7fc38c664b47467547ec0b954a97e96', class: 'group__caption' }, index.h("ifx-icon", { key: '3608411e811c84bd601d8d5fdf5f1175c2fb15fa', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (index.h("div", { key: 'f16a4862c4630a165c0af78ab548c543f361c8a1', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: '0fedee3b59c3bad5f2d456cb8d9c1e93bdaa7983', class: 'group__label' }, this.label.trim()), index.h("div", { key: 'a194d05342ac05dbbe14f60a4cbffcff3876dd81', class: 'group__controls' }, index.h("slot", { key: '3c14e9cdd5aec6283dff6d61ee4fef59cef54b18' })), this.caption.trim() &&
+            index.h("div", { key: '76d3c32b1670d7c4690ddd235a19b5f11bcd8be8', class: 'group__caption' }, index.h("ifx-icon", { key: '7418495c943d83788a2a1b2dac6131041dc049d6', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/cjs/ifx-select.cjs.entry.js

@@ -7038,6 +7038,15 @@ const Choices = class {
             this.resizeObserver = null;
         }
     }
+    handleWrapperClick(event) {
+        const target = event.target;
+        const isSearchInput = target.classList.contains('choices__input') || target.closest('.choices__input');
+        const isDropdownItem = target.closest('.choices__list--dropdown .choices__item');
+        // Only toggle dropdown if clicking on wrapper itself
+        if (!isSearchInput && !isDropdownItem) {
+            this.toggleDropdown();
+        }
+    }
     render() {
         const attributes = {
             'data-selector': 'root',
@@ -7048,9 +7057,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (index.h("div", { key: '846d24e0c0ef3c61c981f20d2e08af51dc293a0f', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: 'e22c1b98bed2d81dff795f9924d70d98eee639a3', class: `${choicesWrapperClass} 
+        return (index.h("div", { key: '21623bb2329c6fbe07fdaf7a13ed1c7ced0f76c6', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '733439a9d0fc293e2338423cc4dfd2b2f4596fd4', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: 'cd776b7cae49297611c55738acd1c23dfcbb1d69', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: 'da9b337def11ac370233900306e6b6ef71dbe548', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: '57558512924dcd174fae891849f8e363eee0364e', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: 'f6129ff46f304e3e4c0217d602adf1aa877954b1', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: '4d6ca7e6563dd94a70e8745fa3b38cab84f2d9e6', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: 'cb182ccf4cbecd1a810122e3b5ee3265b6f3ef91', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: '781e8a7567c660c5e896f32be84a3704ea34f43a', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: 'c7600e164145027a85ff2e4370825868b5290229', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: '5ebb1b1f69c7879ace354e63c814063c5ea4c6e5', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: 'ce160e99cdf0bcf02a005d4ec8287a7f47cf9dcd', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: 'f1ff0fde3fe57b61b90d19b835011338bfe62ea1', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: '2e1fa631b36b6fd12ce01a1b8f798b820f0b2c90', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');