@odx/foundation 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/components.js

@@ -3487,7 +3487,7 @@ let OdxSelect = class extends ListboxFormControl {
       this.clear();
     });
     if (!isServer) {
-      this.addEventListener("change", () => {
+      this.addEventListener("select", () => {
         if (this.multiple || this.autoSelect) return;
         this.dropdown.hidePopover();
       });
@@ -3507,13 +3507,13 @@ let OdxSelect = class extends ListboxFormControl {
       <div id="select-trigger" class="base" tabindex="0">
         <div class="value" odxPreventTextOverflow>
           ${when(
-      Array.from(this.selectedOptions).length,
+      this.selectedOptions.length,
       () => this.renderSelectedOptions(),
       () => html`<slot name="placeholder">Select options</slot>`
     )}
         </div>
         ${when(
-      !this.multiple && __privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this),
+      __privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this),
       () => html`<odx-icon-button icon="core::close" size="sm" tabindex="-1"  variant="ghost" @click=${__privateGet$6(this, _handleClear)}></odx-icon-button>`
     )}
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
@@ -3524,20 +3524,19 @@ let OdxSelect = class extends ListboxFormControl {
     `;
   }
   renderSelectedOptions() {
-    const selectedOptions = Array.from(this.selectedOptions);
     if (!this.multiple) {
-      return html`${selectedOptions[0]?.label}`;
+      return html`${this.selectedOptions[0]?.label}`;
     }
     const renderChip = (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _handleChipRemove).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`;
     return html`
-      ${repeat(selectedOptions.slice(0, this.maxVisibleSelectedOptions), renderChip)}
-      ${when(selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip>+${selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
+      ${repeat(this.selectedOptions.slice(0, this.maxVisibleSelectedOptions), renderChip)}
+      ${when(this.selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip>+${this.selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
     `;
   }
 };
 _OdxSelect_instances = new WeakSet();
 isClearable_fn = function() {
-  return !this.disabled && !this.readonly && !this.required && !!this.value;
+  return !this.multiple && !this.disabled && !this.readonly && !this.required && this.selectedOptions.length > 0;
 };
 _handleSlotChange$2 = new WeakMap();
 _handleChipRemove = new WeakMap();

package/dist/lib/control/listbox-form-control.d.ts

@@ -8,7 +8,7 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
     autoSelect: boolean;
     multiple: boolean;
     value: string[] | string;
-    get selectedOptions(): MapIterator<Option>;
+    get selectedOptions(): Option[];
     constructor();
     canAutoSelect(option: Option): boolean;
     canSelect(option: Option): boolean;

package/dist/lib/control/option-control.d.ts

@@ -18,7 +18,6 @@ export declare abstract class OptionControl extends OptionControl_base implement
     selected: boolean;
     type?: 'checkbox' | null;
     getTextLabel(): string;
-    toggle(force?: boolean): void;
     connectedCallback(): void;
     protected willUpdate(props: PropertyValueMap<this>): void;
 }

package/dist/main.js

@@ -623,9 +623,6 @@ class OptionControl extends CanBeHighlighted(CanBeDisabled(CustomElement)) {
   getTextLabel() {
     return this.textContent?.trim() ?? "";
   }
-  toggle(force) {
-    this.toggleAttribute("odx-active", force ?? !this.hasAttribute("odx-active"));
-  }
   connectedCallback() {
     super.connectedCallback();
     this.role ||= "option";
@@ -710,7 +707,7 @@ class ListboxFormControl extends FormControl(CustomElement) {
   #activeDecendants;
   #selectedOptions;
   get selectedOptions() {
-    return this.#selectedOptions.values();
+    return Array.from(this.#selectedOptions.values());
   }
   canAutoSelect(option) {
     return this.autoSelect && !option.disabled && !this.multiple;
@@ -721,7 +718,7 @@ class ListboxFormControl extends FormControl(CustomElement) {
   toggleOption(option, state) {
     if (!this.canSelect(option)) return;
     const newState = state ?? (this.required && !this.multiple || !option.selected);
-    if (this.disabled || newState === option.selected) return;
+    if (this.disabled) return;
     option.selected = newState;
     this.updateValue(option);
     if (newState) {
@@ -734,6 +731,7 @@ class ListboxFormControl extends FormControl(CustomElement) {
     this.id ||= getUniqueId(this.localName);
   }
   updateValue(option) {
+    const oldValue = this.value;
     if (this.multiple) {
       const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
       this.value = option?.selected ? [...value, option.value] : value.filter((value2) => value2 !== option?.value);
@@ -743,11 +741,15 @@ class ListboxFormControl extends FormControl(CustomElement) {
     if (option) {
       this.#activeDecendants.select(option);
     }
-    this.updateSelection();
+    this.emit("select", { composed: false });
+    if (oldValue === this.value) return;
     this.emit("change");
   }
   willUpdate(props) {
     super.willUpdate(props);
+    if (props.has("value")) {
+      this.updateSelection();
+    }
     if (props.has("multiple")) {
       this.#handleMultipleChange();
     }
@@ -768,6 +770,7 @@ class ListboxFormControl extends FormControl(CustomElement) {
         this.#selectedOptions.delete(option.value);
       }
     }
+    this.requestUpdate();
   }
   #handleBlur;
   #handleClick;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.31",
+  "version": "1.0.0-beta.32",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",