@odx/foundation 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/components/select/select.d.ts

@@ -1,5 +1,5 @@
 import { ListboxFormControl, OptionControl } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { OdxDropdown } from '../dropdown/dropdown.js';
 import { OdxOption } from '../option/option.js';
 declare global {
@@ -13,11 +13,10 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();
-    firstUpdated(): void;
+    firstUpdated(props: PropertyValues<this>): void;
     isDropdownOpen(): boolean;
     showDropdown(): void;
     hideDropdown(): void;
     protected render(): TemplateResult;
-    protected renderSelectedOptions(): TemplateResult;
 }
 //# sourceMappingURL=select.d.ts.map

package/dist/components.js

@@ -5,9 +5,9 @@ import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { p as pick, e, a as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
-import { repeat } from 'lit/directives/repeat.js';
 import { signal, computed } from '@preact/signals-core';
 import 'lit/html.js';
+import { repeat } from 'lit/directives/repeat.js';
 
 const styles$1g = ":host{display:block}";
 
@@ -1279,7 +1279,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
     this.minQueryLength = 1;
     this.searchFn = (option, query2) => {
       if (!query2) return true;
-      return option.getTextLabel().toLowerCase().trim().includes(query2.toLowerCase().trim());
+      return option.label.toLowerCase().includes(query2.toLowerCase().trim());
     };
     this.#handleControlSlotChange = () => {
       if (!this.control) return;
@@ -1325,7 +1325,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
         event.stopImmediatePropagation();
       }
       if (this.activeDescendants.activeItem && key.enter) {
-        this.#handleControlValueChange(this.activeDescendants.activeItem.getTextLabel());
+        this.#handleControlValueChange(this.activeDescendants.activeItem.label);
       }
     };
   }
@@ -3223,23 +3223,26 @@ __decorateClass([
 ], _OdxSearchBar.prototype, "readonly", 2);
 let OdxSearchBar = _OdxSearchBar;
 
-const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-size-175)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
+const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-size-175)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
 
 const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   constructor() {
     super();
     this.maxVisibleSelectedOptions = 2;
     this.#handleSlotChange = () => {
+      super.handleSlotChange();
       for (const option of this.options) {
         option.type = this.multiple ? "checkbox" : null;
       }
     };
-    this.#handleChipRemove = (option) => {
-      this.toggleOption(option, false);
-    };
     this.#handleBlur = () => {
       this.hideDropdown();
     };
+    this.#handleToggleAll = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.value = this.value.length === this.options.length ? [] : this.options.map((option) => option.value);
+    };
     this.#handleClear = (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3258,9 +3261,9 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   static {
     customElement("odx-select", styles$o)(_OdxSelect);
   }
-  firstUpdated() {
-    const referenceElement = this.shadowRoot?.querySelector(".base") ?? null;
-    this.dropdown.mountPopover(referenceElement);
+  firstUpdated(props) {
+    super.firstUpdated(props);
+    this.dropdown.mountPopover(this.shadowRoot?.querySelector(".base") ?? null);
   }
   isDropdownOpen() {
     return this.dropdown.isPopoverOpen();
@@ -3272,12 +3275,13 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
     this.dropdown.hidePopover();
   }
   render() {
+    const allSelected = this.value.length === this.options.length;
     return html`
       <div class="base" tabindex="0">
         <div class="value" odxPreventTextOverflow>
           ${when(
       this.selectedOptions.length,
-      () => this.renderSelectedOptions(),
+      () => html`${this.selectedOptions.map((option) => option.label).join(", ")}`,
       () => html`<slot name="placeholder">Select options</slot>`
     )}
         </div>
@@ -3288,35 +3292,22 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
       </div>
       <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width>
+        ${when(
+      this.multiple,
+      () => html`
+            <odx-option type="checkbox" @click=${this.#handleToggleAll} ?selected=${allSelected}>Toggle all</odx-option>
+          `
+    )}
         <slot @slotchange=${this.#handleSlotChange}></slot>
       </odx-dropdown>
     `;
   }
-  renderSelectedOptions() {
-    if (!this.multiple) {
-      return html`${this.selectedOptions[0]?.label}`;
-    }
-    if (this.disabled || this.readonly) {
-      return html`${this.selectedOptions.length} Selected`;
-    }
-    const renderChip = (option) => {
-      return html`
-        <odx-chip removable tabindex="-1" @remove=${() => this.#handleChipRemove(option)} >
-          ${option.getTextLabel()}
-        </odx-chip>
-      `;
-    };
-    return html`
-      ${repeat(this.selectedOptions.slice(0, this.maxVisibleSelectedOptions), renderChip)}
-      ${when(this.selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip ?disabled=${this.disabled}>+${this.selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
-    `;
-  }
   #isClearable() {
     return !(this.multiple || this.disabled || this.readonly || this.required) && this.selectedOptions.length > 0;
   }
   #handleSlotChange;
-  #handleChipRemove;
   #handleBlur;
+  #handleToggleAll;
   #handleClear;
   #handleSelect;
 };

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

@@ -16,7 +16,7 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
     protected canSelect(option: Option): boolean;
     toggleOption(option: Option, state?: boolean): void;
     connectedCallback(): void;
-    protected firstUpdated(props: PropertyValues<this>): void;
+    protected handleSlotChange(): void;
     protected updateValue(option?: Option): void;
     protected willUpdate(props: PropertyValues<this>): void;
     protected updateSelection(): void;

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

@@ -11,7 +11,6 @@ export declare abstract class OptionControl extends OptionControl_base implement
     value: string;
     selected: boolean;
     type?: 'checkbox' | null;
-    getTextLabel(): string;
     canActivate(): boolean;
     canSelect(): boolean;
     isActive(): boolean;

package/dist/main.js

@@ -474,10 +474,7 @@ class OptionControl extends CanBeDisabled(CustomElement) {
     this.#label = value;
   }
   get label() {
-    return this.#label || this.getTextLabel();
-  }
-  getTextLabel() {
-    return this.textContent?.trim() ?? "";
+    return (this.#label || this.textContent?.trim()) ?? "";
   }
   canActivate() {
     return !(this.disabled || this.hidden);
@@ -523,7 +520,6 @@ __decorateClass([
 class ListboxFormControl extends FormControl {
   constructor() {
     super();
-    this.#selectedOptions = /* @__PURE__ */ new Map();
     this.activeDescendants = new ActiveDescendantsController(this, {
       getItems: () => this.options,
       onChange: (_, option, firstChange) => {
@@ -567,9 +563,8 @@ class ListboxFormControl extends FormControl {
       this.addEventListener("keydown", this.#handleKeydown);
     }
   }
-  #selectedOptions;
   get selectedOptions() {
-    return Array.from(this.#selectedOptions.values());
+    return this.options.filter((option) => option.selected);
   }
   get selectedIndices() {
     return this.selectedOptions.map((option) => this.options.indexOf(option));
@@ -595,12 +590,9 @@ class ListboxFormControl extends FormControl {
     this.role ||= "listbox";
     this.id ||= getUniqueId(this.localName);
   }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    for (const option of this.options) {
-      if (!option.selected) continue;
-      this.updateValue(option);
-    }
+  handleSlotChange() {
+    this.value ||= this.multiple ? this.selectedOptions.map((option) => option.value) : this.selectedOptions[0]?.value ?? "";
+    this.requestUpdate("value");
   }
   updateValue(option) {
     const oldValue = this.value;
@@ -626,21 +618,15 @@ class ListboxFormControl extends FormControl {
       this.#handleMultipleChange();
     }
     if (props.has("required") || props.has("value")) {
-      const [selectedOption] = this.#selectedOptions.values();
-      if (!selectedOption?.selected) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
+      if (!this.selectedOptions[0]?.selected) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, this.selectedOptions[0]);
     }
   }
   updateSelection() {
-    if (this.disabled) return;
+    if (this.disabled || this.options.length === 0) return;
     for (const option of this.options ?? []) {
       if (option.disabled) continue;
       option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
-      if (option.selected) {
-        this.#selectedOptions.set(option.value, option);
-      } else {
-        this.#selectedOptions.delete(option.value);
-      }
     }
   }
   #handleOptionSelection(option) {
@@ -652,10 +638,8 @@ class ListboxFormControl extends FormControl {
     for (const option of this.options) {
       option.type = optionType;
     }
-    if (this.multiple) return;
-    const [selectedOption] = this.#selectedOptions.values();
-    if (selectedOption) {
-      this.updateValue(selectedOption);
+    if (!this.multiple && this.selectedOptions[0]) {
+      this.updateValue(this.selectedOptions[0]);
     }
   }
   #handleBlur;

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.86",
+  "version": "1.0.0-beta.87",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",