@infineon/infineon-design-system-stencil 30.0.0--canary.1626.ffb29ef0579b15bc19c3bb02e9b882c9b0e882e1.0 → 30.0.0--canary.1626.aeec3483953b238b8058a8bc41c443ffa47eb680.0

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

@@ -24,7 +24,7 @@ const ProgressBar = class {
         this.internalValue = this.value;
     }
     render() {
-        return (index.h("div", { key: '0ff795929756b1595746d14884de3a3d867cd1a3', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: '07a41eb8ad3b9a7447ff267c844585c386f9a0fd', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: 'e5f1e82c316f7cf7a35ae1f7c85a16c4a7fd7236', class: "label" }, `${this.internalValue}%`))));
+        return (index.h("div", { key: 'c222329efb633757b013203285668579d0844786', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: 'bd5235aa565957461162fe913960b491c1486768', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: '6294c5ae3aff2295b65d2e66631794b1bafe369d', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -64,10 +64,10 @@ const RadioButton = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'adbc1e3cd0d1b07cebc552cabf82b98fe8d6d90f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, index.h("div", { key: 'e879a477842a0e81d9d336761722f71ac1c1b933', class: `radioButton__wrapper 
+        return (index.h("div", { key: '7539ce1d49d368b2058d560004414eff39dbf5bd', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, index.h("div", { key: '62e50981447a6e61b2f5d04ff5800cb726350aa5', class: `radioButton__wrapper 
           ${this.internalChecked ? 'checked' : ''} 
           ${this.disabled ? 'disabled' : ''} 
-          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && index.h("div", { key: '81625e73c7c2b9faef955a5a787b6c80dc955b00', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '9ea8933266a9ba8e3e56d26173cd5e42c4e264f8', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '40dd116cf1a9501f3bd1c019dedf73571c93558e' }))), index.h("input", { key: '502a972c7e29b310778c387b3164218b2d109349', 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' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && index.h("div", { key: '52ba94878760826c60d77860788732dbb854285b', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: 'ea499531c8a51124d46146edf1e6c05cc06095ef', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '84db2093fc6adf5f7f583fee18cabbe6cf078373' }))), index.h("input", { key: '5a273fb554e67d8ac98c7bd2dc81effb24d18767', 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 index.getElement(this); }
 };

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

@@ -43,7 +43,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (index.h("div", { key: 'a0d45dc79e136db856db02b31a16eb3e93b516ae', "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: '06b4122a9df300f357050cd6b70cace1d2cfc4bd', "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: '35a7d21e49cc486f0ce3de499ef09beb85c62f77', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '4bfb711716fd01e5546edbe7b47605e6a075b284', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '419be07ffef581ef26d1acccf7b1d26483a96b3e', icon: "search-16", class: "search-icon" }), index.h("input", { key: '46e0d6434693c655bef6ad62da0ab70c803f3279', 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: '18c2ea8d58a2b4ad32ead8b20d6e49ffe4b7ce4a', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '1c3fe7676ae2cb0298d0cf62765c1629b47d4f60', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '47456570d79f9ec6d07c0eb0c73dfe0964d577a2', icon: "search-16", class: "search-icon" }), index.h("input", { key: '3587e8503f87b609afa36bb95b2f2fff645b73fd', 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

@@ -31,7 +31,7 @@ const Segment = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'd21c9af8c4d3e120a7ea69cceb89dbd6bbea3a50', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '2a26824f3960ba1e14721edd21900c5a6a7bcec7', icon: this.icon }), " ", index.h("slot", { key: '173b327a36428d9136aafb4ccf8c66bb03755b3a' })));
+        return (index.h("div", { key: '0a115fe376c6484b9c301689ffdf81bc9645d5e3', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '565df7e4a349afca13c80ee467f7199c18756e67', icon: this.icon }), " ", index.h("slot", { key: '3389c7d009e67542d3c4ba4ccbc32774cbd9b997' })));
     }
 };
 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: '42d423ccf53e16757603b95584926e01ef05b9fe', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: '261921695c16c88d62564383590d3fa2c249a5f7', class: 'group__label' }, this.label.trim()), index.h("div", { key: '5acd2baa0945e9bfbb38feb4112d4cc7e1093c1c', class: 'group__controls' }, index.h("slot", { key: '2bb4ded58d002a67122eafb10c7f1969b8824822' })), this.caption.trim() &&
-            index.h("div", { key: 'efc69ec956cf953c8fe07a46058b31158e2c2224', class: 'group__caption' }, index.h("ifx-icon", { key: 'b25e0f621f8eee2874c27eb5219c0367ba0da401', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (index.h("div", { key: '5ca0ee9243e0823492e12fe8b2630985f694fd69', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: 'b3675371fb2e67ceed8ace372b127b9e9113f939', class: 'group__label' }, this.label.trim()), index.h("div", { key: '917662be651673665491b329aa0b50b0cb40a2cd', class: 'group__controls' }, index.h("slot", { key: 'd4ce45676acc1fda36e03129756cf74b3bb1c939' })), this.caption.trim() &&
+            index.h("div", { key: '0881e270ba2a728c5800658f9f2a1eea0ffc2ae8', class: 'group__caption' }, index.h("ifx-icon", { key: '3279f97de64a7d2ae369c934c4f3ea9efecdbb5b', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -6834,7 +6834,7 @@ function isJSONParseable(str) {
     }
 }
 
-const selectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-select-container{box-sizing:border-box;font-family:var(--ifx-font-family);}.ifx-select-container.small-select{height:36px}.ifx-select-container.medium-select{height:40px}.ifx-select-container:hover{cursor:pointer}.ifx-select-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-choices__wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;font-weight:400;font-style:normal}.ifx-select-container .ifx-choices__wrapper.small-select{height:36px;line-height:20px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-select-container .ifx-choices__wrapper.medium-select{height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-select-container .ifx-choices__wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .ifx-choices__wrapper.disabled .ifx-choices__icon-wrapper-down:hover{cursor:default}.ifx-select-container .ifx-choices__wrapper.error{border-color:#CD002F}.ifx-select-container .ifx-choices__wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-select-container .ifx-choices__wrapper.active{border-color:#0A8276 !important}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-down{display:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-select-container .ifx-choices__wrapper:focus:not(.active,:active):not(.disabled)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%)}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up{display:none}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete{display:flex;align-items:center;justify-content:center}.ifx-select-container .choices{width:100%}.ifx-select-container .choices:focus{outline:none}.choices .ifx-select-container.is-focused{outline:none}.ifx-select-container .choices:last-child{margin-bottom:0}.ifx-select-container .choices.is-disabled .choices__inner,.ifx-select-container .choices.is-disabled .choices__input{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .choices.is-disabled .choices__item{cursor:default;color:#575352}.ifx-select-container .choices [hidden]{display:none !important}.ifx-select-container .choices[data-type*=select-one]{cursor:pointer}.ifx-select-container .choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:8px 16px;border-bottom:1px solid #8D8786;background-color:#ffffff;margin:0;font-style:normal;font-weight:400}.ifx-select-container .choices[data-type*=select-one] .choices__input.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices[data-type*=select-one] .choices__input.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices[data-type*=select-one] .choices__single-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:0.5}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:hover,.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{opacity:1}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{box-shadow:0px 0px 0px 2px #0A8276}.ifx-select-container .choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__single-button{display:none}.ifx-select-container .choices[data-type*=select-one].is-open:after{margin-top:-7.5px}.ifx-select-container .choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.ifx-select-container .choices[data-type*=select-one][dir=rtl] .choices__single-button{right:auto;left:0;margin-left:25px;margin-right:0}.ifx-select-container .choices[data-type*=select-multiple]{cursor:pointer}.ifx-select-container .choices[data-type*=select-multiple] .choices__input{display:block;width:100%;margin:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__inner,.ifx-select-container .choices[data-type*=text] .choices__inner{cursor:text}.ifx-select-container .choices[data-type*=select-multiple] .choices__button,.ifx-select-container .choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-top:0;margin-right:-4px;margin-bottom:0;margin-left:8px;padding-left:16px;border-left:1px solid #0A8276;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:0.75;border-radius:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__button:hover,.ifx-select-container .choices[data-type*=select-multiple] .choices__button:focus,.ifx-select-container .choices[data-type*=text] .choices__button:hover,.ifx-select-container .choices[data-type*=text] .choices__button:focus{opacity:1}.ifx-select-container .choices__inner{overflow:hidden}.ifx-select-container .is-focused .choices__inner,.ifx-select-container .is-open .choices__inner{border-color:#b7b7b7}.ifx-select-container .is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.ifx-select-container .is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.ifx-select-container .choices__list{margin:0;padding-left:0;list-style:none}.ifx-select-container .choices__list--single .choices__item{width:100%;display:flex;justify-content:space-between}.ifx-select-container .disabled>.choices__list--single .choices__item[data-value=\"\"]{color:#8D8786;}.ifx-select-container .choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:0.75rem;line-height:1rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#0A8276;border:1px solid #0A8276;color:#FFFFFF;word-break:break-all;box-sizing:border-box}.ifx-select-container .choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.ifx-select-container [dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.ifx-select-container .choices__list--multiple .choices__item.is-highlighted{background-color:#EEEDED;border:1px solid #0A8276}.ifx-select-container .choices__list--dropdown{visibility:hidden;box-sizing:border-box;position:absolute;width:100%;background-color:#fff;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0px 0px 16px rgba(29, 29, 29, 0.12);border-radius:1px;margin-top:8px;z-index:1000;left:0}.ifx-select-container .choices__list--dropdown.is-active{visibility:visible}.ifx-select-container .is-open .choices__list--dropdown{border-color:#b7b7b7}.ifx-select-container .is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.ifx-select-container .choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.ifx-select-container .choices__list--dropdown .choices__item{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;justify-content:space-between;font-style:normal;font-weight:400}.ifx-select-container .choices__list--dropdown .choices__item.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices__list--dropdown .choices__item.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices__list--dropdown .choices__item.selected{color:#0A8276}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width: 640px){.ifx-select-container .choices__list--dropdown .choices__item--selectable:after{font-size:0.75rem;line-height:1rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:0.5}.ifx-select-container .choices__item{cursor:default}.ifx-select-container .choices__item--selectable{cursor:pointer}.ifx-select-container .choices__item--disabled{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}.ifx-select-container .choices__heading{font-weight:600;font-size:0.75rem;line-height:1rem;padding:10px;border-bottom:1px solid #f7f7f7;color:#1D1D1D}.ifx-select-container .choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.ifx-select-container .choices__button:focus{outline:none}.ifx-select-container .choices__single-button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;visibility:hidden}.ifx-select-container .choices__single-button:focus{outline:none}.ifx-select-container .choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:0.875rem;line-height:1.25rem;margin-bottom:5px;border:0;border-radius:0;max-width:100%}.ifx-select-container .choices__input--cloned{background-color:transparent}.ifx-select-container .choices__input::-ms-clear{display:none;width:0;height:0}.ifx-select-container .choices__input::-ms-reveal{display:none;width:0;height:0}.ifx-select-container .choices__input::-webkit-search-decoration,.ifx-select-container .choices__input::-webkit-search-cancel-button,.ifx-select-container .choices__input::-webkit-search-results-button,.ifx-select-container .choices__input::-webkit-search-results-decoration{display:none}.ifx-select-container .choices__input:focus{outline:0}.ifx-select-container [dir=rtl] .choices__input{padding-right:2px;padding-left:0}.ifx-select-container .choices__placeholder{opacity:0.5}";
+const selectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-select-container{box-sizing:border-box;font-family:var(--ifx-font-family);}.ifx-select-container.small-select{height:36px}.ifx-select-container.medium-select{height:40px}.ifx-select-container:hover{cursor:pointer}.ifx-select-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-choices__wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;font-weight:400;font-style:normal}.ifx-select-container .ifx-choices__wrapper.small-select{height:36px;line-height:20px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-select-container .ifx-choices__wrapper.medium-select{height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-select-container .ifx-choices__wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .ifx-choices__wrapper.disabled .ifx-choices__icon-wrapper-down:hover{cursor:default}.ifx-select-container .ifx-choices__wrapper.error{border-color:#CD002F}.ifx-select-container .ifx-choices__wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-select-container .ifx-choices__wrapper.active{border-color:#0A8276 !important}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-down{display:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-select-container .ifx-choices__wrapper:focus:not(.active,:active):not(.disabled)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%)}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up{display:none}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete{display:flex;align-items:center;justify-content:center}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete.hide{display:none}.ifx-select-container .choices{width:100%}.ifx-select-container .choices:focus{outline:none}.choices .ifx-select-container.is-focused{outline:none}.ifx-select-container .choices:last-child{margin-bottom:0}.ifx-select-container .choices.is-disabled .choices__inner,.ifx-select-container .choices.is-disabled .choices__input{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .choices.is-disabled .choices__item{cursor:default;color:#575352}.ifx-select-container .choices [hidden]{display:none !important}.ifx-select-container .choices[data-type*=select-one]{cursor:pointer}.ifx-select-container .choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:8px 16px;border-bottom:1px solid #8D8786;background-color:#ffffff;margin:0;font-style:normal;font-weight:400}.ifx-select-container .choices[data-type*=select-one] .choices__input.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices[data-type*=select-one] .choices__input.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices[data-type*=select-one] .choices__single-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:0.5}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:hover,.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{opacity:1}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{box-shadow:0px 0px 0px 2px #0A8276}.ifx-select-container .choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__single-button{display:none}.ifx-select-container .choices[data-type*=select-one].is-open:after{margin-top:-7.5px}.ifx-select-container .choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.ifx-select-container .choices[data-type*=select-one][dir=rtl] .choices__single-button{right:auto;left:0;margin-left:25px;margin-right:0}.ifx-select-container .choices[data-type*=select-multiple]{cursor:pointer}.ifx-select-container .choices[data-type*=select-multiple] .choices__input{display:block;width:100%;margin:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__inner,.ifx-select-container .choices[data-type*=text] .choices__inner{cursor:text}.ifx-select-container .choices[data-type*=select-multiple] .choices__button,.ifx-select-container .choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-top:0;margin-right:-4px;margin-bottom:0;margin-left:8px;padding-left:16px;border-left:1px solid #0A8276;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:0.75;border-radius:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__button:hover,.ifx-select-container .choices[data-type*=select-multiple] .choices__button:focus,.ifx-select-container .choices[data-type*=text] .choices__button:hover,.ifx-select-container .choices[data-type*=text] .choices__button:focus{opacity:1}.ifx-select-container .choices__inner{overflow:hidden}.ifx-select-container .is-focused .choices__inner,.ifx-select-container .is-open .choices__inner{border-color:#b7b7b7}.ifx-select-container .is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.ifx-select-container .is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.ifx-select-container .choices__list{margin:0;padding-left:0;list-style:none}.ifx-select-container .choices__list--single .choices__item{width:100%;display:flex;justify-content:space-between}.ifx-select-container .disabled>.choices__list--single .choices__item[data-value=\"\"]{color:#8D8786;}.ifx-select-container .choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:0.75rem;line-height:1rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#0A8276;border:1px solid #0A8276;color:#FFFFFF;word-break:break-all;box-sizing:border-box}.ifx-select-container .choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.ifx-select-container [dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.ifx-select-container .choices__list--multiple .choices__item.is-highlighted{background-color:#EEEDED;border:1px solid #0A8276}.ifx-select-container .choices__list--dropdown{visibility:hidden;box-sizing:border-box;position:absolute;width:100%;background-color:#fff;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0px 0px 16px rgba(29, 29, 29, 0.12);border-radius:1px;margin-top:8px;z-index:1000;left:0}.ifx-select-container .choices__list--dropdown.is-active{visibility:visible}.ifx-select-container .is-open .choices__list--dropdown{border-color:#b7b7b7}.ifx-select-container .is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.ifx-select-container .choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.ifx-select-container .choices__list--dropdown .choices__item{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;justify-content:space-between;font-style:normal;font-weight:400}.ifx-select-container .choices__list--dropdown .choices__item.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices__list--dropdown .choices__item.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices__list--dropdown .choices__item.selected{color:#0A8276}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width: 640px){.ifx-select-container .choices__list--dropdown .choices__item--selectable:after{font-size:0.75rem;line-height:1rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:0.5}.ifx-select-container .choices__item{cursor:default}.ifx-select-container .choices__item--selectable{cursor:pointer}.ifx-select-container .choices__item--disabled{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}.ifx-select-container .choices__heading{font-weight:600;font-size:0.75rem;line-height:1rem;padding:10px;border-bottom:1px solid #f7f7f7;color:#1D1D1D}.ifx-select-container .choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.ifx-select-container .choices__button:focus{outline:none}.ifx-select-container .choices__single-button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;visibility:hidden}.ifx-select-container .choices__single-button:focus{outline:none}.ifx-select-container .choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:0.875rem;line-height:1.25rem;margin-bottom:5px;border:0;border-radius:0;max-width:100%}.ifx-select-container .choices__input--cloned{background-color:transparent}.ifx-select-container .choices__input::-ms-clear{display:none;width:0;height:0}.ifx-select-container .choices__input::-ms-reveal{display:none;width:0;height:0}.ifx-select-container .choices__input::-webkit-search-decoration,.ifx-select-container .choices__input::-webkit-search-cancel-button,.ifx-select-container .choices__input::-webkit-search-results-button,.ifx-select-container .choices__input::-webkit-search-results-decoration{display:none}.ifx-select-container .choices__input:focus{outline:0}.ifx-select-container [dir=rtl] .choices__input{padding-right:2px;padding-left:0}.ifx-select-container .choices__placeholder{opacity:0.5}";
 const IfxSelectStyle0 = selectCss;
 
 const Choices = class {
@@ -6892,6 +6892,7 @@ const Choices = class {
         this.options = undefined;
         this.size = 'medium (40px)';
         this.selectedOption = null;
+        this.optionIsSelected = false;
     }
     watchDisabled(newValue) {
         if (newValue) {
@@ -6907,6 +6908,7 @@ const Choices = class {
         this.setPreSelected(null);
         this.closeDropdown();
         this.ifxSelect.emit(null);
+        this.optionIsSelected = false;
     }
     async handleChange() {
         this.ifxSelect.emit(this.choice.getValue());
@@ -7003,15 +7005,68 @@ const Choices = class {
         this.choice.ajax(fn);
         return this;
     }
+    async handleDeleteIcon() {
+        const width = this.root.offsetWidth;
+        const deleteIconWrapper = this.root.querySelector('.ifx-choices__icon-wrapper-delete');
+        if (deleteIconWrapper) {
+            if (width <= 180) {
+                deleteIconWrapper.classList.add('hide');
+            }
+            else {
+                deleteIconWrapper.classList.remove('hide');
+            }
+        }
+    }
+    handleCloseButton() {
+        if (typeof this.options === 'string') {
+            const optionsToArray = JSON.parse(this.options);
+            const optionIsSelected = optionsToArray.find(option => option.selected === true);
+            if (optionIsSelected) {
+                this.optionIsSelected = true;
+            }
+            else {
+                this.optionIsSelected = false;
+            }
+        }
+        else if (this.options && Array.isArray(this.options)) {
+            const optionIsSelected = this.options.find(option => option.selected === true);
+            if (optionIsSelected) {
+                this.optionIsSelected = true;
+            }
+            else {
+                this.optionIsSelected = false;
+            }
+        }
+    }
+    componentWillLoad() {
+        this.handleCloseButton();
+    }
+    componentWillUpdate() {
+        this.handleCloseButton();
+    }
+    addResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.handleDeleteIcon();
+        });
+        const componentWrapper = this.root.querySelector('.ifx-choices__wrapper');
+        this.resizeObserver.observe(componentWrapper);
+    }
     componentDidLoad() {
         this.init();
         this.addEventListenersToHandleCustomFocusAndActiveState();
+        this.handleDeleteIcon();
+        this.addResizeObserver();
     }
     componentDidUpdate() {
         this.init();
+        this.handleDeleteIcon();
     }
     disconnectedCallback() {
         this.destroy();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
     render() {
         const attributes = {
@@ -7023,9 +7078,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: '8bf90f2bb33565fa51c4343b39041b80a53c57f2', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '3cad8bb3794b0b7e46298ee4fe1af4f27282afa9', class: `${choicesWrapperClass} 
+        return (index.h("div", { key: 'c41ec36261a1133b438648bc6a564107267c5b1a', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: 'dae048e7ad4c6a40bf5c900fb5c2c2e01ea58a4e', 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: '0ff8d2f12c7c295589f845f2d53b643f12008cd8', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), this.selectedOption && (index.h("div", { key: '9f17c962186b82512e77e21d13aefb62abeadb52', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '4ecbf2a8c7e3128fc6db64cba6394dbaa2b17e46', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: 'c6cbcf2ebfdcef2858349905f8b79251e285f325', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: '20845297c5e70183c90887f95c039288151ac90d', 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 : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: 'c2ae87cc9b9a9401b9a414acaf9cabd02a8c1a3a', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), this.optionIsSelected && (index.h("div", { key: '19ef95cd95e990f2d8707428e5b5138db7a97a93', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '4457e333e2c96f26a48eb32978f8146be973c94d', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: '0c30abd8c4446d05e05b1d4aa33c264b0b810a6f', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: '16472c10d36e48a4545d91d5a3431bb8bedeefb7', 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');