@infineon/infineon-design-system-stencil 30.6.2--canary.1658.4e0299382cc78146674b539e7aec5baa0c8f1d1c.0 → 30.7.0--canary.1659.0e44124c828725a583b383fc9417f61d1ad0d432.0

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

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

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

@@ -60,10 +60,10 @@ const RadioButton = class {
         }
     }
     render() {
-        return (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) }, h("div", { key: '62e50981447a6e61b2f5d04ff5800cb726350aa5', class: `radioButton__wrapper 
+        return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "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) }, h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper 
           ${this.internalChecked ? 'checked' : ''} 
           ${this.disabled ? 'disabled' : ''} 
-          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '52ba94878760826c60d77860788732dbb854285b', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'ea499531c8a51124d46146edf1e6c05cc06095ef', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '84db2093fc6adf5f7f583fee18cabbe6cf078373' }))), 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() })));
+          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     get el() { return getElement(this); }
 };

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

@@ -39,7 +39,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '06b4122a9df300f357050cd6b70cace1d2cfc4bd', "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: '80312faf68e6b0af2260c977d53f23b42067813f', "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 getElement(this); }
     static get watchers() { return {

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

@@ -51,7 +51,7 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '18c2ea8d58a2b4ad32ead8b20d6e49ffe4b7ce4a', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '1c3fe7676ae2cb0298d0cf62765c1629b47d4f60', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '47456570d79f9ec6d07c0eb0c73dfe0964d577a2', icon: "search-16", class: "search-icon" }), 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 ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: '0eda7329a6ec9ee7f24d5c7765f7611698a1dbae', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'c1d6f47b987bfb7f0505210fbd64e95db58b688e', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '7fc1c3cd5ba67ebfe032b0a9bbab6ae7b262d7a2', icon: "search-16", class: "search-icon" }), h("input", { key: '461edc1ee971753ce0ed4fb18db7115b3b74c6b9', 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"

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

@@ -27,7 +27,7 @@ const Segment = class {
         }
     }
     render() {
-        return (h("div", { key: '0a115fe376c6484b9c301689ffdf81bc9645d5e3', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '565df7e4a349afca13c80ee467f7199c18756e67', icon: this.icon }), " ", h("slot", { key: '3389c7d009e67542d3c4ba4ccbc32774cbd9b997' })));
+        return (h("div", { key: '49c56df2adf407d13685ae7c99b512afa532c6de', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c576b2bb7b09ae6ed1946759df7303df36b430dc', icon: this.icon }), " ", h("slot", { key: '61d467f2cda3552d5c90e9995ceccdca76c6825c' })));
     }
 };
 Segment.style = IfxSegmentStyle0;

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

@@ -68,8 +68,8 @@ const SegmentedControl = class {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '5ca0ee9243e0823492e12fe8b2630985f694fd69', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'b3675371fb2e67ceed8ace372b127b9e9113f939', class: 'group__label' }, this.label.trim()), h("div", { key: '917662be651673665491b329aa0b50b0cb40a2cd', class: 'group__controls' }, h("slot", { key: 'd4ce45676acc1fda36e03129756cf74b3bb1c939' })), this.caption.trim() &&
-            h("div", { key: '0881e270ba2a728c5800658f9f2a1eea0ffc2ae8', class: 'group__caption' }, h("ifx-icon", { key: '3279f97de64a7d2ae369c934c4f3ea9efecdbb5b', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '2a980fa0fd18e469c2d92c57c80c62b7dfee30e9', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'bf202bd9f2a4967c5a5c0cd24013242ad4752a80', class: 'group__label' }, this.label.trim()), h("div", { key: '89e974d972a4ad903193459e9a65b47c89114ab8', class: 'group__controls' }, h("slot", { key: '10a57ab800389b4a7ae482c152817486a28ae96f' })), this.caption.trim() &&
+            h("div", { key: 'f63a61eabf58e03cc0c4b5bae031965b82cb4f2c', class: 'group__caption' }, h("ifx-icon", { key: 'b758bb66d96d48e795565dbd662f1a2fc3648bfe', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -6838,7 +6838,6 @@ const Choices = class {
         registerInstance(this, hostRef);
         this.ifxSelect = createEvent(this, "ifxSelect", 7);
         this.ifxInput = createEvent(this, "ifxInput", 7);
-        this.previousOptions = [];
         this.value = undefined;
         this.name = undefined;
         this.items = undefined;
@@ -7043,14 +7042,7 @@ const Choices = class {
     }
     componentWillUpdate() {
         this.handleCloseButton();
-        this.previousOptions = [...this.options];
-        const optionsAreEqual = this.isEqual(this.options, this.previousOptions);
-        if (this.options && !optionsAreEqual) {
-            this.clearSelectField();
-        }
-    }
-    isEqual(a, b) {
-        return JSON.stringify(a) === JSON.stringify(b);
+        this.clearSelectField();
     }
     addResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
@@ -7086,9 +7078,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'c56d2b70ff9f812bcbb40021321a40903a14b5a5', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'a0812c653fdc3da7d81148750f628351a9cf080d', class: `${choicesWrapperClass} 
+        return (h("div", { key: '72f15f4e15a30c77d2f70df9a2b32097c1b4dae8', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '8f50efd814a2c07d49725530b375744314607187', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '8e96c14d91b774990a6d026aaa8b529026132a4c', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'e52d7c8f81cb119380500ff292c650f3e6306d2d', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'f9b82119789bd12895ca3699a52d8a58e75a4d33', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '6cf31bdd364f622301e12f2b7f925ab6a5a4a498', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '0b209301e4ec81c00cc391009eaf60b3b5277210', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'e0a59a35741d947717d523a0b48a01d712d13049', 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 : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '18f7c89114e8a9f4ea04b81c8f9c243f999862a8', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '4706ad15eb43573d44cdfcf1148807d2d6bb3577', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'd87c304e3a4ff597bd9a0f752525dcd2c69dd3c6', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '0076711ac0c627fc1a38e26f145596e0075f0f67', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '48ddea158aacd931b20c2246fbc152f48cdcafc5', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'b40040a50be1f0a0564d364bc1a3d5997794c06b', 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');