@infineon/infineon-design-system-stencil 32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0 → 32.2.0--canary.1735.73ac0fc3ba8a84e7408b2b0ddf5922d4ab28ecf8.0

package/dist/components/ifx-pagination.js

@@ -1,4 +1,4 @@
-import { P as Pagination, d as defineCustomElement$1 } from './p-1ab9b2d3.js';
+import { P as Pagination, d as defineCustomElement$1 } from './p-432e892a.js';
 
 const IfxPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-progress-bar.js

@@ -20,7 +20,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: '3f68729d3447897fb8b0d6ac8e5cfa4b4d1bbd0e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '86abff96eb8a1260c96e6736f90fe4e79e2a5a03', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '55d35acd3cc70a2b0a1f9058569f1a0a7751990e', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '9a1fc68c768dc22c5926f0eae299862f2d2de371', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '6e847900044f4bc04eacbcc194ffac8bf6b83e0a', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '8e6fa2713fbcd0b956b8f27b873816adc0c3cb7f', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/components/ifx-radio-button.js

@@ -1,4 +1,4 @@
-import { R as RadioButton, d as defineCustomElement$1 } from './p-e3b1b73d.js';
+import { R as RadioButton, d as defineCustomElement$1 } from './p-977668df.js';
 
 const IfxRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-search-bar.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
 import { d as defineCustomElement$3 } from './p-4cd3a589.js';
-import { d as defineCustomElement$2 } from './p-6758b716.js';
+import { d as defineCustomElement$2 } from './p-25dce5bf.js';
 
 const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
 const IfxSearchBarStyle0 = searchBarCss;
@@ -40,7 +40,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: 'c313e088c8320ea5ba602f5da512624edaf44c36', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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: '9a6033dd56aecd4444cf7b5bee7916ce8d534760', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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 this; }
     static get watchers() { return {

package/dist/components/ifx-search-field.js

@@ -1,4 +1,4 @@
-import { S as SearchField, d as defineCustomElement$1 } from './p-6758b716.js';
+import { S as SearchField, d as defineCustomElement$1 } from './p-25dce5bf.js';
 
 const IfxSearchField = SearchField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-segment.js

@@ -27,7 +27,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
         }
     }
     render() {
-        return (h("div", { key: '2faaac48b77184cbd62852220903045cbf815a67', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'a69957b7ff87a6a4f717371b9227ddf3885e3878', icon: this.icon }), " ", h("slot", { key: 'ae2b9b7a9d2a2bce3b0b28f907df5755e32dcc4f' })));
+        return (h("div", { key: '82774e43f27d8995c36d7d356780bbe14b76f70c', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '58ea805311f071bf39562bb043a4ea4e77b6cd57', icon: this.icon }), " ", h("slot", { key: '659727a8768c1988b251d795c9a7ae5b9554b1f0' })));
     }
     static get style() { return IfxSegmentStyle0; }
 }, [1, "ifx-segment", {

package/dist/components/ifx-segmented-control.js

@@ -71,8 +71,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: 'f16a4862c4630a165c0af78ab548c543f361c8a1', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '0fedee3b59c3bad5f2d456cb8d9c1e93bdaa7983', class: 'group__label' }, this.label.trim()), h("div", { key: 'a194d05342ac05dbbe14f60a4cbffcff3876dd81', class: 'group__controls' }, h("slot", { key: '3c14e9cdd5aec6283dff6d61ee4fef59cef54b18' })), this.caption.trim() &&
-            h("div", { key: '76d3c32b1670d7c4690ddd235a19b5f11bcd8be8', class: 'group__caption' }, h("ifx-icon", { key: '7418495c943d83788a2a1b2dac6131041dc049d6', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '9fb656fefd8b61e7c563ac77a20a303d40c6f146', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'de4f8bf1f2404f106ff180167bf4c79abd2b165b', class: 'group__label' }, this.label.trim()), h("div", { key: 'e110c6c98b981142df08e7dda574b2d3e102a19d', class: 'group__controls' }, h("slot", { key: '3dd13439a68201c2f42104c4853b371c669e18df' })), this.caption.trim() &&
+            h("div", { key: '946fe774c7cf3f9642447b9a8cb0e258d3f9d493', class: 'group__caption' }, h("ifx-icon", { key: '39f21a9eae4961da05f38d6930bcc373671e9794', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/components/ifx-select.js

@@ -1,4 +1,4 @@
-import { C as Choices, d as defineCustomElement$1 } from './p-da211009.js';
+import { C as Choices, d as defineCustomElement$1 } from './p-2eb42cd6.js';
 
 const IfxSelect = Choices;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-set-filter.js

@@ -3,8 +3,8 @@ import { d as defineCustomElement$7 } from './p-d8045654.js';
 import { d as defineCustomElement$6 } from './p-ec51e955.js';
 import { d as defineCustomElement$5 } from './p-4cd3a589.js';
 import { d as defineCustomElement$4 } from './p-9c7d6c8c.js';
-import { d as defineCustomElement$3 } from './p-da211009.js';
-import { d as defineCustomElement$2 } from './p-c24216e7.js';
+import { d as defineCustomElement$3 } from './p-2eb42cd6.js';
+import { d as defineCustomElement$2 } from './p-3d46d2af.js';
 
 const setFilterCss = "";
 const IfxSetFilterStyle0 = setFilterCss;

package/dist/components/ifx-slider.js

@@ -145,10 +145,10 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends H {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: '8cd3872e29ca5a7c35ef9991db8f74b2dfb1562d', class: "ifx-slider" }, this.leftText && (h("span", { key: 'af9eb0dd16d9936d18be75eef0c6b2ea8a6617a4', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '265016e5326dfadd3ca9080384bd1ab863e4a4c7', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '3a43035d99bb5ae166d215994ba35dcc0a72f800', class: "ifx-slider" }, this.leftText && (h("span", { key: 'b5b672dd97b5fbe71f4e23ac0f35311fb4014112', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '1b167231afc1aba9165c7b0e340ba692ffb3ec04', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
             :
-                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '6ce6262cb945e24e813f59137fb3e4eb999937d0', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'be785686c57bb4fd19a333bd45616bb90e947e33', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: 'dfbad6ac5e8965642419846f7b85501ea98823e5', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '7b199e3e1024289bfde3e200c3b03b1a7600f7fd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a77ecafe2e47167c7014fdf5aa710d59cfc18659', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '344dd484214e0a5cbd4a530cfaec229f90dc7e7a', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-spinner.js

@@ -1,4 +1,4 @@
-import { S as Spinner, d as defineCustomElement$1 } from './p-efb9a50a.js';
+import { S as Spinner, d as defineCustomElement$1 } from './p-47853a7b.js';
 
 const IfxSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-status.js

@@ -15,7 +15,7 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: '5584af4d19e2ed3e4c43937254b6496ac3498bab', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'd6ea110d9b65e05257f2a58220c78833af2e61c5', class: `dot ${effectiveColor}` }), h("p", { key: '4593faaff5f1a430d7c1ef77dd182ffac5dcdfe1', class: "text" }, this.label)));
+        return (h("div", { key: 'd6594837b2884bfcb3aa73a47f335a240c6567b2', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'ebb8c7eaeb4a951ade8568b5fa08ba479e2f614d', class: `dot ${effectiveColor}` }), h("p", { key: '3061c0fa17b6f1f4895f43e627496c3469976191', class: "text" }, this.label)));
     }
     static get style() { return IfxStatusStyle0; }
 }, [1, "ifx-status", {

package/dist/components/ifx-step.js

@@ -50,7 +50,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
         }
     }
     render() {
-        return (h("div", { key: '89bf8ebdda8d27e4d64eb115375f101e6bd63a47', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
+        return (h("div", { key: 'cbee70d7f0f5c76a09d48423566bc3d485cd929a', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -58,11 +58,11 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '7d132907a091474aab641783df974ef713d2e082', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'addc3091c2c1bff1f15bff47b688b41503ac0170', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: '36ea1c2447f4d1315c67c1d7c55c008ada016eb7', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '7f9cd53a08acdb8a91c636a033d4728159857533', icon: 'check16' }), this.active && h("span", { key: 'fd7461691611746decffa1f53a6d7c5d3401e267', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '47b3af98bab586eb434a8161fe1b3954268aa7ab', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '1e67448a5a81c2dfb049ac20f0dd353dd83e3ab6', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'fee2738c8478680320ec50c53a92d6e7b92a86e3', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '96aa1a741cd013b6ae17f32de2725c368ea51618', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'c9c696ac8898befd165fed334c36e7f77c91aa4f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '98ff6e603c94aa1a57c5f8491dcf2a17cd4a4864', icon: 'check16' }), this.active && h("span", { key: '2fc5ce8a43ef62ecae07fbf25688af0b629b8e6d', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '72db4eb91a114022e470d14e035c1ff4364f6f00', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '0a215fa7c2df964b4743f0fb0b16652b92003bfa', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: 'fc375ac7341cdae182d5cdb32e03a7ca93dd10aa', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '40fc3dfa9690e41aa522857c67e07765f68251dc' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '5d43cd127b2a67b63d976084ef8265d048c27b2a' }))));
+            h("div", { key: '9b77faa804a42714b79535bfe530854c68ca6372', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'a84af39da90db9e59e3b614f63de9802161a0e51' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'bdfaff2aed9faf5503fb89b7e2105c48d721dbe2' }))));
     }
     ;
     static get watchers() { return {

package/dist/components/ifx-stepper.js

@@ -124,10 +124,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '719914f95d3ad6cdd1a691e850a87eb071bd8cce', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (h("div", { key: 'c7e51b5fe17beb80cac38fe0da1600f44b4ca111', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: 'c4ebfb6dc14d0d80c1b5ad564fedacab324773d7', class: 'stepper-progress' }, h("div", { key: 'dffd68985729abdcd767270d85232eb83422fa2c', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '1b5016a54756a1d000449c185c1ee116dcf0acf2', class: `stepper-wrapper` }, h("slot", { key: '923375c6e3929b63796198d1956e702ee7cc456e' }))));
+            h("div", { key: '233c1234510997adab316ffb47e341c575036b95', class: 'stepper-progress' }, h("div", { key: '45c775b8727bac00e4c57a6e6e6129fe320e5a5b', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '35ad66a86c1b1f6d008a232ae33944a3d7e122a6', class: `stepper-wrapper` }, h("slot", { key: '671a05ed6ce3927369e202f2a9218944bb6bb7cf' }))));
     }
     ;
     componentDidRender() {

package/dist/components/ifx-switch.js

@@ -72,7 +72,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '360fc8c66c42ca0abe29a8a1c7f719d7584ff84f', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '13f5e32ddc32582010d9e1c27f4c030b86e36712', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '0f931031b5d338598f95dad4ce43a5fca6a0d8a3', class: "switch__checkbox-wrapper" }, h("input", { key: '86731f8df0ad982510263794f1c498066f89e3f9', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '2c26fa3bbc7b2a095b51dc89088906c7fa069fb9', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '1136f618847607a27671e4a6ddf98a6506bafcbb', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'bec0ca4982b7d978f54633341464820f18015603', htmlFor: "switch" }, h("slot", { key: '83948bfbeec352d2666d96299302a9ba01d3c7d2', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '0481403a878470cdb42c03be663b88f19fe59c58', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'c84f8e06349d1ffa03efb077e64881b12c4ac640', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '533ca85af87c3edff93c76aaa0860f997b107e67', class: "switch__checkbox-wrapper" }, h("input", { key: 'fd9a8c6442c321a81161645c7e84f1d03cae3002', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'ad951898b5b38de29aff0be91f734d443399f050', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '14219d030661fed97b8210d67ec3794147884225', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '3892d20ad28a1f1823e8302e9820973df938ee70', htmlFor: "switch" }, h("slot", { key: 'e350367180975d30978ec7c7d026b34e86c79741', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-tab.js

@@ -15,7 +15,7 @@ const IfxTab$1 = /*@__PURE__*/ proxyCustomElement(class IfxTab extends H {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: '37043a27bd989be177366265767fcd7a9ed21e87' });
+        return h("slot", { key: '845e795d2a758c1612b8601ea2eafab0385f02dc' });
     }
     get el() { return this; }
     static get style() { return IfxTabStyle0; }

package/dist/components/ifx-table.js

@@ -8,8 +8,8 @@ import { d as defineCustomElement$7 } from './p-2cb994f0.js';
 import { d as defineCustomElement$6 } from './p-4cd3a589.js';
 import { d as defineCustomElement$5 } from './p-5f01ab1d.js';
 import { d as defineCustomElement$4 } from './p-6925a52c.js';
-import { d as defineCustomElement$3 } from './p-1ab9b2d3.js';
-import { d as defineCustomElement$2 } from './p-da211009.js';
+import { d as defineCustomElement$3 } from './p-432e892a.js';
+import { d as defineCustomElement$2 } from './p-2eb42cd6.js';
 
 class ButtonCellRenderer {
     init(params) {
@@ -465,12 +465,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: 'ca27d66579b36a35943b42f26c152355337fd7e0' }, h("div", { key: 'a8441afd7cc158dcb845ef0e08e92a6f253295d4', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '4562d5b52546a66bb44ed20d141770b82babe011', class: "sidebar-btn" }, h("ifx-button", { key: '2b1ca677c2d8534ef7e0019d9c0fee6a4c7ebeb2', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '4edc158cec10a16b3fdcec3389cbb726247219cc', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'd82c1a1d8d7c25f0c5d4301e552a1f07febc345c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '5000c0f4b4c342ce863d0c63042c41c7b10e71d0', class: "sidebar-container" }, h("div", { key: '971fa35458bbe4391b2bca5673bb4395db9ffb5c', class: "filters-title-container" }, h("span", { key: '71be790bc93bdefe9df3087de7d5f40f37a51b71', class: "filters-title" }, "Filters")), h("div", { key: 'e6e11f96cfdc23dd1e10441c5a68583f9f5e61a6', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '6fcc1e285a543c59c0c1d2b542ff10d28700af5d', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2ee1540762249a77400aa3cb509742ec12443eaa', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '33e466bc340c5de4be400dcf4d7a0afd3ed3f323', name: "topbar-filter" })))), h("div", { key: 'f9d150eb60941ffa62cfd1fc31d302078da8e4a4', class: "table-pagination-wrapper" }, h("div", { key: '984fe856aa3e3df884c0adbe0a7aef7b218af0d5', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'ef6d50ee7b08b86a5534feed83df514f7de1ca6d' }, h("div", { key: 'c3d3184293fe3b7bb34ca87126f56acc5abe2812', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'f0cd79a6d7a912f629a170998f53575c047529df', class: "sidebar-btn" }, h("ifx-button", { key: 'd4ac7961a437f6e18628693e3dee32ff357326c0', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a46b1fc02a4a7888ed02aa7b7599f2687bb43291', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f76f786bb6d06f02cbd54735bf042adbf892ae8', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'bc5966d2c801c7a660949ede006c3b9e81d228dc', class: "sidebar-container" }, h("div", { key: '646d3a6b689bedac78db621b50ba49b3f235f590', class: "filters-title-container" }, h("span", { key: '75420b67f11bd70a7bf88f6733a960b3b12a0877', class: "filters-title" }, "Filters")), h("div", { key: '4a26a7e37038cc124c5602871e9ae3efd03ece38', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'b57db55a41c57f5421c5a1cf1f41e1a895d70752', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'd44dd84651cd5a88736adb2ee3b93105569ea621', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '75cd86d074b880b9227df048222e6e1f71444c5c', name: "topbar-filter" })))), h("div", { key: '22ce3434d5073daac916a81975347c2635ebface', class: "table-pagination-wrapper" }, h("div", { key: '9986934e5c38ef7801523ba32edc9bc96d28cf91', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '15ddf1b9ec292abcdeef5df58e1915bcb1c0cbc7', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '2a61e609ae85ee9a9cf7b58fc980377285172c6e', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'b6e47ae8fdf63b9c290892007365fc8d016c48f2', class: "matching-results-container" }, h("span", { key: '6d446c83abea3b3975666b590beee51676deb99b', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '6dfee4e96e729a799a63f567631eacbaf8ccc6db', class: "matching-results-text" }, "matching results"))), h("div", { key: '06ae73e8b0f9ee655d7e85b8a87e0b6f96bd1173', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '22a918d161d6b827030d2c7a41f43586fea5de0b', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'c4bfcc611183bac5a09d0b4abc50e072e22c8bad', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'a0a23f693e59bb22d4d6d70d3a7fe37c4da70c87', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '2d8e228d37046165d08054ba76cd3888224e2567', class: "matching-results-container" }, h("span", { key: 'fa68665c33fa576c64fd3def0eb0d1a2be287458', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '6ce30960e908bc45f4d9d61f008174035ebd0f73', class: "matching-results-text" }, "matching results"))), h("div", { key: 'e888428f6e43473ccc1b18ee0a75f49c750ec70e', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'c01494f8e3648908326f65d914c91a3a071f8c8d', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/components/ifx-tabs.js

@@ -200,9 +200,9 @@ const IfxTabs$1 = /*@__PURE__*/ proxyCustomElement(class IfxTabs extends H {
     }
     render() {
         var _a;
-        return (h("div", { key: 'f2663abe44d99b51791ae20c24fd6d8255bf80b5', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '0b949be9e67da9496346bf619af9c322236c8fd3', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: 'd4e05ff054e60c53638ed293d85986b20a831f9c', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '6815e7449952ed21744ffe024d356bbd1e1ebc8a', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '2caa33a941a3aaa5b6a9d2e6f748f7880f1037cf', class: "active-border" })), h("div", { key: '9dc32106ee0e5dda07ed4e33c829a67772463c9d', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: '77b59e1fca18afe592610a35a26569538851b2b1', class: "active-border" })), h("div", { key: '89c6c472aee1a525e8be3a7d19008b372300b06c', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-tag.js

@@ -11,7 +11,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '77c20a8047f83ad313438cefde30e0bc5b6551ef', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'd13d992176898e60faf045c1ebec0967e44d0825', icon: this.icon })), h("a", { key: '2507414c6bb49499c9f9c0361575b6df1fbb55f6', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '946daf5532025ce4da084044bb14e1cbd7032ad0', class: "label" }, h("slot", { key: 'fe49bdfd098c349cfdcbfa414717a34dc28ef617' })))));
+        return (h("div", { key: 'ebe5d8e2f3bc59ad1bdef92eb7e4fbc7a07f9c4c', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'accc8280c6248bb81a2d139e85da8a048329e917', icon: this.icon })), h("a", { key: '1282f2372cc961db61fefee89e2a21bf1a998537', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '76534734832475e44606e0fed6d3577802525d2f', class: "label" }, h("slot", { key: '6d422addc814889fc71d851bc2dc3ab65a7cb3e6' })))));
     }
     static get style() { return IfxTagStyle0; }
 }, [1, "ifx-tag", {

package/dist/components/ifx-template.js

@@ -1,4 +1,4 @@
-import { T as Template, d as defineCustomElement$1 } from './p-bf0b6855.js';
+import { T as Template, d as defineCustomElement$1 } from './p-80856f14.js';
 
 const IfxTemplate = Template;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-templates-ui.js

@@ -4,9 +4,9 @@ import { d as defineCustomElement$8 } from './p-c7cced92.js';
 import { d as defineCustomElement$7 } from './p-4cd3a589.js';
 import { d as defineCustomElement$6 } from './p-5f01ab1d.js';
 import { d as defineCustomElement$5 } from './p-be22dd11.js';
-import { d as defineCustomElement$4 } from './p-efb9a50a.js';
-import { d as defineCustomElement$3 } from './p-bf0b6855.js';
-import { d as defineCustomElement$2 } from './p-c24216e7.js';
+import { d as defineCustomElement$4 } from './p-47853a7b.js';
+import { d as defineCustomElement$3 } from './p-80856f14.js';
+import { d as defineCustomElement$2 } from './p-3d46d2af.js';
 
 const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
 const IfxTemplatesUiStyle0 = templatesUiCss;
@@ -55,7 +55,7 @@ const TemplatesUI = /*@__PURE__*/ proxyCustomElement(class TemplatesUI extends H
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'bf4c5ead310d88f7fe5c9bc213e40267bf429cb8', class: 'templates__container' }, h("div", { key: 'e248745b8db68d2b1512202fa134d042edeb010e', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'f10c5d5b37071427b674f11a4debd5a80df1af5e', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'e5960d85b1e46f37580a3b62547164d0356cf575', class: "alert__wrapper" }, h("ifx-alert", { key: 'ea1ce75c12f68e79f688e5bca76f40cf25fd72f9', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '8bbfa839ab5da993bc89ff3371e8bc64460f1c68', class: "templates__title" }, "Choose your template"), h("div", { key: '9f30ea639383bde71678215f0b80ee7111c4c5b1', class: "templates__wrapper" }, h("ifx-template", { key: '06d4725d8707904e4af6c4e302fbd00900cb0d9b', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '755c2d29318c854be38e364d6c971b9931da19c6', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '23e25649965f489853cb1ba784a53479e53847fb', class: 'templates__container' }, h("div", { key: '2eac1a1cba9d1f33fde04c0ea2589758efcafbd2', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '7244dba86edf6f82f77e621e412ccce4f2af38c2', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '58045bb50dbcc65ce2320277983f81a0f429f735', class: "alert__wrapper" }, h("ifx-alert", { key: '591a2adff63451c789490bfa086156099abce152', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: 'f655cc87e64cfdc7a66b44e3e145a35ae594f66c', class: "templates__title" }, "Choose your template"), h("div", { key: '81019e69e74c00df6425ed113d0b3f9c657b96ef', class: "templates__wrapper" }, h("ifx-template", { key: '458caa648b5cfc03d821f1614659e10a17350eaa', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '33401929cfc91de74dc2f9c2a083c7c230c3b9c4', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/ifx-text-field.js

@@ -1,4 +1,4 @@
-import { T as TextField, d as defineCustomElement$1 } from './p-c24216e7.js';
+import { T as TextField, d as defineCustomElement$1 } from './p-3d46d2af.js';
 
 const IfxTextField = TextField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-textarea.js

@@ -53,7 +53,7 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '146538196346541c8b375878f2f2160375acd65a', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '04ef3fae2b80fff2a201cc9525794fa9eaaf3e24', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '385249e168003aa04ad324959849f48efecfbab5', class: 'wrapper__textarea' }, h("textarea", { key: 'f4a39d7c68dae8ea6dde67c1d11a7d5c94d41487', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'b6d6d4127b5db04d80031fda02a4a34ccc61c439', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: 'f6dad1fd412d07775ede50165eee294a1bb527c7', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'd9e433cf857369d09e9dc7b4439e4186f5c71dfa', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '9230ede30b10f47dc2868784e1bd5e41f6b1980c', class: 'wrapper__textarea' }, h("textarea", { key: '4499888b439a4f0d3e460e17ef6fb816178b6aeb', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '0a57adb212132a9afd51d60286c61d7df6707eb3', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-tooltip.js

@@ -155,10 +155,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '506af35d3cc603e10da9e7e876b0cbb8f178848f', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'b9e4ba99abe1e3a8f6b565bdc7e0d474aea87978' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'c456b23ba375682d6034372ac7b6bf4f7859c043', class: tooltipDismissible }, h("button", { key: '65a84189cbdad93b6089e272f9e13338eb0108b4', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '3955b9bfb5df89fc6c66d711fa4656150611a7f1', icon: "cross16" })), h("div", { key: '03258c50dbb13154e924243871ffbccb6928dc38', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'ba48e4e73733a42793612ebbca4b06c84d3956c7', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '46bdcbb01fb37b5891d3aa0c488a6c92e07541d2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '7aa9ebdb6c80cd5bab576416049f6c3b81973502', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7556ea74cff95938870d45dc451034d7446cc229', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '1352f2d81b04fb79aa5bb4c280839a819264f00c', class: tooltipCompact }, this.text, h("svg", { key: '386e78fbd87ddd0b69a5689bc6fee904a4600326', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '84b1f1ff3fd5087f4a324846d0709aebb8f26a94', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'ede68a870e45f4f643d7eac689e88a9d20d1d758', class: tooltipExtended }, h("slot", { key: '1243ab83fc3c6290e7f27c0246d5e1e71e1c4264', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '58c82f5021968d4a92c2009d0ba6f4049b50681f', class: "tooltip-extended-content" }, this.header && h("div", { key: '455b7a234ae4516b452a0b95c318a18ef8f7f3ec', class: "tooltip-extended-header" }, this.header), h("div", { key: '8fb07ece39017c45e43becf4754055356fb506fb', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '1b72fb690cdcfd11c33df69539b54daf0944c607', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f2f6f5b41a8bb22821a89f9cdb62873c5323f1a9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'd1011613a465b3f6283965385fa58c0757d37b72', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '8ecdc7cfd8ace95c5201e5aef989fd5a2d690fb6' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '4d855121ef44f72e920dafbe165fbbb28757e2fd', class: tooltipDismissible }, h("button", { key: '0e5459e6f90c3e966303e72c261002e8aae19e31', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'a7cee4fab2cfca1c88f8c5e5bdb55f10dbc77aa2', icon: "cross16" })), h("div", { key: '8d3c651b0fd3c9d74ce22edfe3dc7b21f065da54', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '835731e8d02674197ed4e0ff479b0493fc4a89b4', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'ad5d1d9d66a05af968aadce2c85e0f51a54d19fc', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'ddd6f30d4e4e70e7eb00aaa8af172d00bd5a2000', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9afaa9623221b73dbfc84197763ccf74a3f55044', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'dce5e22d5cb05d2333cf5846f2c16f51a463423d', class: tooltipCompact }, this.text, h("svg", { key: 'd6cd8374b050b4c907aa9ab83fcf9e6b64468f3b', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c3ae17c174a63d918614154ce424cb27a130fa7f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '4c6b1a492d7950cb3441babbe74e2111bdbccb61', class: tooltipExtended }, h("slot", { key: '463bb3a005dba221542b3ba7ccd8c2a2e0ce8cd4', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '8b513f1bb9d4a661570f00d8419a054827c81e2d', class: "tooltip-extended-content" }, this.header && h("div", { key: '13df155ca7f7182c5a4975f54e20bdee6845cc67', class: "tooltip-extended-header" }, this.header), h("div", { key: '20ff208b9337416c20561e9aff96b1ab54e69d9b', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ba54cfd306135108839d9d8406fc7a2bde0f36ef', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'be0b68a7e3ccc70a0ab110bd2b847394c458bc23', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-6758b716.js → p-25dce5bf.js}

@@ -54,7 +54,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '403a2f56ce9b8d71dbb9cc14bc85fd5d404958ea', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '0533ff88e0efe32a9bf5f1cb58d543d5ad40ab4a', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '8e3a8ddc88e737019dc4b168b8af0649772a5fac', icon: "search-16", class: "search-icon" }), 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 ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: 'dd5d16c933ec70acb8950279f4642ac93ab8b801', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '92159e695d65890de079c49c25dba47a0243e56b', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '27c96d542775740161ea3630851b0b19d90a177f', icon: "search-16", class: "search-icon" }), h("input", { key: 'df87749e87af361855083fc54ff76826d2ca12b2', 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 ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -102,4 +102,4 @@ function defineCustomElement() {
 
 export { SearchField as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6758b716.js.map
+//# sourceMappingURL=p-25dce5bf.js.map

package/dist/components/{p-6758b716.js.map → p-25dce5bf.js.map}

@@ -1 +1 @@
-{"file":"p-6758b716.js","mappings":"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","names":[],"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\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    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\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-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\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() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \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 aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\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            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}
+{"file":"p-25dce5bf.js","mappings":"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","names":[],"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\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    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\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-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\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() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \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 aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\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            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}

package/dist/components/{p-da211009.js → p-2eb42cd6.js}

@@ -7036,6 +7036,15 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
             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',
@@ -7046,9 +7055,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'fea26b0d75050a64b85be4a9d60c5353e64c28a6', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '122cdbeb12cd1c268a274971a0d0619d95fcc0a2', class: `${choicesWrapperClass} 
+        return (h("div", { key: '91e098e1a55037ad7c173de8879564945b424810', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'f9c6fe622d141197e8587919c7437d4c5cc7cbab', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'c138c46ae14722f0629b89649824a6414e19fcaf', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '3999f9e02015fecc4758b269c43d2f0c3ba2ba69', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'd91f27712ff0febb0a6186b0dec1f41eff67c5d4', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '580986c3a71f9210c1a48caa6ee5f02d46531aa3', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '002e77d28f1e5c75c7e6df46680120a7e7061727', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '0cf642c93a5daed04a01e7229573c06c45ab843d', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '2edd006818738308a19f6927ac7dba28e7fc0915', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '8eface6caae23e10b4260ed0745a27dbd8a3bba3', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '6767486ddc75c65fb6ea11683049ca4b6660abf6', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '7663e59188773f9ce3b6c6bd04979f142b46e4cc', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '889e421813563b7897bc40701f130edf92c36189', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'b236e7e56549ac3dd6ae92ad0a927e3b02c864d0', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7373,4 +7382,4 @@ function defineCustomElement() {
 
 export { Choices as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-da211009.js.map
+//# sourceMappingURL=p-2eb42cd6.js.map