@infineon/infineon-design-system-stencil 30.7.0--canary.1659.03a8f843402df515bf8c98507d939beebe4dad26.0 → 30.8.0--canary.1658.0b51dae92afc81a0703a9603d6672557cc1387af.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6842,6 +6842,7 @@ const Choices = class {
6842
6842
  index.registerInstance(this, hostRef);
6843
6843
  this.ifxSelect = index.createEvent(this, "ifxSelect", 7);
6844
6844
  this.ifxInput = index.createEvent(this, "ifxInput", 7);
6845
+ this.previousOptions = [];
6845
6846
  this.value = undefined;
6846
6847
  this.name = undefined;
6847
6848
  this.items = undefined;
@@ -7046,7 +7047,14 @@ const Choices = class {
7046
7047
  }
7047
7048
  componentWillUpdate() {
7048
7049
  this.handleCloseButton();
7049
- this.clearSelectField();
7050
+ this.previousOptions = [...this.options];
7051
+ const optionsAreEqual = this.isEqual(this.options, this.previousOptions);
7052
+ if (this.options && !optionsAreEqual) {
7053
+ this.clearSelectField();
7054
+ }
7055
+ }
7056
+ isEqual(a, b) {
7057
+ return JSON.stringify(a) === JSON.stringify(b);
7050
7058
  }
7051
7059
  addResizeObserver() {
7052
7060
  this.resizeObserver = new ResizeObserver(() => {
@@ -7082,9 +7090,9 @@ const Choices = class {
7082
7090
  // destroy choices element to restore previous dom structure
7083
7091
  // so vdom can replace the element correctly
7084
7092
  this.destroy();
7085
- return (index.h("div", { key: '72f15f4e15a30c77d2f70df9a2b32097c1b4dae8', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '8f50efd814a2c07d49725530b375744314607187', class: `${choicesWrapperClass}
7093
+ return (index.h("div", { key: 'afb22e61adf2c1bbc5994d1bc2640a1f34997088', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: 'febbedc83bd0420a136c5c4b65ede1703815bbc0', class: `${choicesWrapperClass}
7086
7094
  ${this.disabled ? 'disabled' : ''}
7087
- ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.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)), index.h("div", { key: '4706ad15eb43573d44cdfcf1148807d2d6bb3577', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: 'd87c304e3a4ff597bd9a0f752525dcd2c69dd3c6', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '0076711ac0c627fc1a38e26f145596e0075f0f67', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: '48ddea158aacd931b20c2246fbc152f48cdcafc5', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: 'b40040a50be1f0a0564d364bc1a3d5997794c06b', 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));
7095
+ ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: '339771447d7fbad6d17b75c032028958196d4ae7', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: 'f6e0803771328744a9d48fd196f8bb44886268a8', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: 'eab9c3c429d74eac31c24628d86078cec12e9a43', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '1283caadb33147058593a1fff2e08b4460edce0e', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: '7fbd427273a0e6776395e44a91b495cc0f30b29c', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: 'bf571ef4fa089788f2c1a2ac44c476444cda22a7', 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));
7088
7096
  }
7089
7097
  toggleDropdown() {
7090
7098
  const div = this.root.querySelector('.ifx-choices__wrapper');