@statistikzh/leu 0.14.2 → 0.14.4

package/dist/Select.js

@@ -1,9 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BI1CxItv.js';
 import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { H as HasSlotController } from './hasSlotController-CCPfIEw1.js';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
@@ -260,306 +260,291 @@ var css_248z = css`:host {
  * @attribute {string} value - The selected values separated by commas.
  */
 class LeuSelect extends LeuElement {
-  static get properties() {
-    return {
-      name: {
-        type: String,
-        reflect: true
-      },
-      open: {
-        type: Boolean,
-        reflect: true
-      },
-      label: {
-        type: String,
-        reflect: true
-      },
-      value: {
-        type: Array,
-        converter: {
-          fromAttribute(value) {
-            if (value) {
-              return value.split(",").map(v => v.trim());
+    static get properties() {
+        return {
+            name: { type: String, reflect: true },
+            open: { type: Boolean, reflect: true },
+            label: { type: String, reflect: true },
+            value: {
+                type: Array,
+                converter: {
+                    fromAttribute(value) {
+                        if (value) {
+                            return value.split(",").map((v) => v.trim());
+                        }
+                        return value;
+                    },
+                },
+            },
+            clearable: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            filterable: { type: Boolean, reflect: true },
+            multiple: { type: Boolean, reflect: true },
+            _optionFilter: { state: true },
+            _hasFilterResults: { state: true },
+            _displayValue: { state: true },
+        };
+    }
+    static getOptionLabel(option) {
+        if (typeof option === "object" && option !== null) {
+            return option.label;
+        }
+        return option;
+    }
+    constructor() {
+        super();
+        /**
+         * @internal
+         */
+        this.hasSlotController = new HasSlotController(this, ["before", "after"]);
+        /**
+         * Handles clicks outside of the component to close the dropdown.
+         * @internal
+         * @param {MouseEvent} event
+         */
+        this._handleDocumentClick = (event) => {
+            if (!event.composedPath().includes(this) && this.open) {
+                this._closeDropdown();
+            }
+        };
+        /**
+         * @internal
+         * @param {KeyboardEvent} event
+         */
+        this._handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                this._closeDropdown();
+            }
+        };
+        this.open = false;
+        this.disabled = false;
+        this.open = false;
+        this.multiple = false;
+        this.clearable = false;
+        this.filterable = false;
+        this.value = [];
+        this.label = "";
+        this.name = "";
+        /** @internal */
+        this._optionFilter = "";
+        /** @internal */
+        this._hasFilterResults = true;
+        /** @internal */
+        this._deferedChangeEvent = false;
+        /** @internal */
+        this._displayValue = "";
+        /**
+         * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+         */
+        this._optionFilterRef = createRef();
+        /**
+         * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+         */
+        this._toggleButtonRef = createRef();
+        /**
+         * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+         */
+        this._menuRef = createRef();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("click", this._handleDocumentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this._handleDocumentClick);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("open") && this.open) {
+            if (this.filterable) {
+                this._optionFilterRef.value.focus();
+            }
+            else {
+                this._menuRef.value.focusItem(0);
             }
-            return value;
-          }
         }
-      },
-      clearable: {
-        type: Boolean,
-        reflect: true
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      filterable: {
-        type: Boolean,
-        reflect: true
-      },
-      multiple: {
-        type: Boolean,
-        reflect: true
-      },
-      _optionFilter: {
-        state: true
-      },
-      _hasFilterResults: {
-        state: true
-      },
-      _displayValue: {
-        state: true
-      }
-    };
-  }
-  static getOptionLabel(option) {
-    if (typeof option === "object" && option !== null) {
-      return option.label;
+        else if (changedProperties.has("open") && !this.open) {
+            // TODO: Check if the ref is guaranteed to be set
+            // in the updated method.
+            // According to the lit documentation, a ref callback
+            // CAN be called with undefined.
+            this._toggleButtonRef.value?.focus();
+        }
+        if (changedProperties.has("value") ||
+            changedProperties.has("_optionFilter") ||
+            changedProperties.has("multiple")) {
+            this._updateMenuItems({
+                value: changedProperties.has("value"),
+                optionFilter: changedProperties.has("_optionFilter"),
+                multiple: changedProperties.has("multiple"),
+            });
+        }
     }
-    return option;
-  }
-
-  /**
-   * @internal
-   */
-
-  constructor() {
-    super();
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after"]));
     /**
-     * Handles clicks outside of the component to close the dropdown.
-     * @internal
-     * @param {MouseEvent} event
+     * Apply the current state to the menu items.
+     * - Set the active property when the value property has changed.
+     * - Hide menu items that do not match the filter.
      */
-    _defineProperty(this, "_handleDocumentClick", event => {
-      if (!event.composedPath().includes(this) && this.open) {
-        this._closeDropdown();
-      }
-    });
+    async _updateMenuItems(changed) {
+        /** @type {LeuMenu} */
+        const menu = this._menuRef.value;
+        await menu.updateComplete;
+        const menuItems = menu.getMenuItems();
+        let hasFilterResults = false;
+        if (changed.value && this.value.length === 0) {
+            this._displayValue = "";
+        }
+        /* eslint-disable no-param-reassign */
+        menuItems.forEach((menuItem) => {
+            if (changed.multiple) {
+                menuItem.multipleSelection = this.multiple;
+            }
+            if (changed.optionFilter) {
+                menuItem.hidden =
+                    this._optionFilter !== "" &&
+                        !menuItem.textContent
+                            .toLowerCase()
+                            .includes(this._optionFilter.toLowerCase());
+                hasFilterResults = hasFilterResults || !menuItem.hidden;
+            }
+            if (changed.value) {
+                menuItem.active = this._isSelected(menuItem.getValue());
+                if (!this.multiple && menuItem.active) {
+                    this._displayValue = menuItem.textContent;
+                }
+            }
+        });
+        /* eslint-enable no-param-reassign */
+        if (changed.optionFilter) {
+            this._hasFilterResults = hasFilterResults;
+            menu.setCurrentItem(0);
+        }
+    }
     /**
+     * Update all the menu items when the slot changes
+     * to make sure that the menu items are in sync
+     * with the state of the component.
      * @internal
-     * @param {KeyboardEvent} event
      */
-    _defineProperty(this, "_handleKeyDown", event => {
-      if (event.key === "Escape") {
-        this._closeDropdown();
-      }
-    });
-    this.open = false;
-    this.disabled = false;
-    this.open = false;
-    this.multiple = false;
-    this.clearable = false;
-    this.filterable = false;
-    this.value = [];
-    this.label = "";
-    this.name = "";
-
-    /** @internal */
-    this._optionFilter = "";
-
-    /** @internal */
-    this._hasFilterResults = true;
-
-    /** @internal */
-    this._deferedChangeEvent = false;
-
-    /** @internal */
-    this._displayValue = "";
-
+    _handleItemSlotChange() {
+        this._updateMenuItems({
+            value: true,
+            optionFilter: true,
+            multiple: true,
+        });
+    }
     /**
-     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+     * @internal
+     * @param {KeyboardEvent} event
      */
-    this._optionFilterRef = createRef();
+    async _handleToggleKeyDown(event) {
+        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const menu = this._menuRef.value;
+            this.open = true;
+            await this.updateComplete;
+            if (event.key === "ArrowDown" || event.key === "Home") {
+                menu.focusItem(0);
+            }
+            else if (event.key === "ArrowUp" || event.key === "End") {
+                menu.focusItem(-1);
+            }
+        }
+    }
     /**
-     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+     * @internal
+     * @param {KeyboardEvent} event
      */
-    this._toggleButtonRef = createRef();
-
+    _handleFilterInputKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            this._menuRef.value.focusItem(0);
+        }
+        else if (event.key === "ArrowUp") {
+            this._menuRef.value.focusItem(-1);
+        }
+    }
     /**
-     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     * Determines the value or label that should be displayed inside the toggle button.
+     * @returns {String | nothing}
      */
-    this._menuRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this._handleDocumentClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this._handleDocumentClick);
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("open") && this.open) {
-      if (this.filterable) {
-        this._optionFilterRef.value.focus();
-      } else {
-        this._menuRef.value.focusItem(0);
-      }
-    } else if (changedProperties.has("open") && !this.open) {
-      // TODO: Check if the ref is guaranteed to be set
-      // in the updated method.
-      // According to the lit documentation, a ref callback
-      // CAN be called with undefined.
-      this._toggleButtonRef.value?.focus();
-    }
-    if (changedProperties.has("value") || changedProperties.has("_optionFilter") || changedProperties.has("multiple")) {
-      this._updateMenuItems({
-        value: changedProperties.has("value"),
-        optionFilter: changedProperties.has("_optionFilter"),
-        multiple: changedProperties.has("multiple")
-      });
-    }
-  }
-
-  /**
-   * Apply the current state to the menu items.
-   * - Set the active property when the value property has changed.
-   * - Hide menu items that do not match the filter.
-   */
-  async _updateMenuItems(changed) {
-    /** @type {LeuMenu} */
-    const menu = this._menuRef.value;
-    await menu.updateComplete;
-    const menuItems = menu.getMenuItems();
-    let hasFilterResults = false;
-    if (changed.value && this.value.length === 0) {
-      this._displayValue = "";
-    }
-
-    /* eslint-disable no-param-reassign */
-    menuItems.forEach(menuItem => {
-      if (changed.multiple) {
-        menuItem.multipleSelection = this.multiple;
-      }
-      if (changed.optionFilter) {
-        menuItem.hidden = this._optionFilter !== "" && !menuItem.textContent.toLowerCase().includes(this._optionFilter.toLowerCase());
-        hasFilterResults = hasFilterResults || !menuItem.hidden;
-      }
-      if (changed.value) {
-        menuItem.active = this._isSelected(menuItem.getValue());
-        if (!this.multiple && menuItem.active) {
-          this._displayValue = menuItem.textContent;
+    _getDisplayValue() {
+        if (this.multiple) {
+            return this.value.length === 0 ? `` : `${this.value.length} gewählt`;
         }
-      }
-    });
-    /* eslint-enable no-param-reassign */
-
-    if (changed.optionFilter) {
-      this._hasFilterResults = hasFilterResults;
-      menu.setCurrentItem(0);
-    }
-  }
-  /**
-   * @internal
-   * @param {KeyboardEvent} event
-   */
-  async _handleToggleKeyDown(event) {
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault();
-      const menu = this._menuRef.value;
-      this.open = true;
-      await this.updateComplete;
-      if (event.key === "ArrowDown" || event.key === "Home") {
-        menu.focusItem(0);
-      } else if (event.key === "ArrowUp" || event.key === "End") {
-        menu.focusItem(-1);
-      }
+        return this._displayValue ?? nothing;
     }
-  }
-
-  /**
-   * @internal
-   * @param {KeyboardEvent} event
-   */
-  _handleFilterInputKeyDown(event) {
-    if (event.key === "ArrowDown") {
-      this._menuRef.value.focusItem(0);
-    } else if (event.key === "ArrowUp") {
-      this._menuRef.value.focusItem(-1);
+    _emitInputEvent() {
+        const inputevent = new CustomEvent("input", {
+            composed: true,
+            bubbles: true,
+        });
+        this.dispatchEvent(inputevent);
     }
-  }
-
-  /**
-   * Determines the value or label that should be displayed inside the toggle button.
-   * @returns {String | nothing}
-   */
-  _getDisplayValue() {
-    if (this.multiple) {
-      return this.value.length === 0 ? `` : `${this.value.length} gewählt`;
+    _emitChangeEvent() {
+        const changeevent = new CustomEvent("change", {
+            composed: true,
+            bubbles: true,
+        });
+        this.dispatchEvent(changeevent);
     }
-    return this._displayValue ?? nothing;
-  }
-  _emitInputEvent() {
-    const inputevent = new CustomEvent("input", {
-      composed: true,
-      bubbles: true
-    });
-    this.dispatchEvent(inputevent);
-  }
-  _emitChangeEvent() {
-    const changeevent = new CustomEvent("change", {
-      composed: true,
-      bubbles: true
-    });
-    this.dispatchEvent(changeevent);
-  }
-  _clearValue(event) {
-    if (!this.disabled) {
-      event.stopPropagation();
-      this.value = [];
+    _clearValue(event) {
+        if (!this.disabled) {
+            event.stopPropagation();
+            this.value = [];
+        }
+        this._emitInputEvent();
+        this._emitChangeEvent();
     }
-    this._emitInputEvent();
-    this._emitChangeEvent();
-  }
-  _toggleDropdown() {
-    if (!this.disabled) {
-      this.open = !this.open;
+    _toggleDropdown() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
     }
-  }
-  _closeDropdown() {
-    this.open = false;
-    if (this._deferedChangeEvent) {
-      this._emitChangeEvent();
-      this._deferedChangeEvent = false;
+    _closeDropdown() {
+        this.open = false;
+        if (this._deferedChangeEvent) {
+            this._emitChangeEvent();
+            this._deferedChangeEvent = false;
+        }
     }
-  }
-  _handleFilterInput(event) {
-    this._optionFilter = event.target.value;
-  }
-
-  /**
-   * Checks if the given value is selected.
-   * @param {String} menuItemValue
-   * @returns {Boolean}
-   */
-  _isSelected(menuItemValue) {
-    return this.value.includes(menuItemValue);
-  }
-  _handleMenuItemClick(event) {
-    if (!(event.target instanceof LeuMenuItem) || event.target.disabled) {
-      return;
+    _handleFilterInput(event) {
+        this._optionFilter = event.target.value;
     }
-
-    /** @type {LeuMenuItem} */
-    const menuItem = event.target;
-    const value = menuItem.getValue();
-    const isSelected = this._isSelected(value);
-    if (this.multiple) {
-      this.value = isSelected ? this.value.filter(v => v !== value) : this.value.concat(value);
-      this._deferedChangeEvent = true;
-    } else {
-      this.value = isSelected ? [] : [value];
-      this._displayValue = isSelected ? "" : menuItem.textContent;
+    /**
+     * Checks if the given value is selected.
+     * @param {String} menuItemValue
+     * @returns {Boolean}
+     */
+    _isSelected(menuItemValue) {
+        return this.value.includes(menuItemValue);
     }
-    this._emitInputEvent();
-    if (!this.multiple) {
-      this._closeDropdown();
+    _handleMenuItemClick(event) {
+        if (!(event.target instanceof LeuMenuItem) || event.target.disabled) {
+            return;
+        }
+        /** @type {LeuMenuItem} */
+        const menuItem = event.target;
+        const value = menuItem.getValue();
+        const isSelected = this._isSelected(value);
+        if (this.multiple) {
+            this.value = isSelected
+                ? this.value.filter((v) => v !== value)
+                : this.value.concat(value);
+            this._deferedChangeEvent = true;
+        }
+        else if (this.clearable || !isSelected) {
+            // Only clear if clearable is true or if the value is not selected.
+            this.value = isSelected ? [] : [value];
+            this._displayValue = isSelected ? "" : menuItem.textContent;
+        }
+        this._emitInputEvent();
+        if (!this.multiple) {
+            this._closeDropdown();
+        }
     }
-  }
-  _renderFilterInput() {
-    if (this.filterable) {
-      return html` <leu-input
+    _renderFilterInput() {
+        if (this.filterable) {
+            return html ` <leu-input
         class="select-search"
         size="small"
         @input=${this._handleFilterInput}
@@ -568,12 +553,12 @@ class LeuSelect extends LeuElement {
         ref=${ref(this._optionFilterRef)}
         label="Nach Stichwort filtern"
       ></leu-input>`;
+        }
+        return nothing;
     }
-    return nothing;
-  }
-  _renderApplyButton() {
-    if (this.multiple) {
-      return html`
+    _renderApplyButton() {
+        if (this.multiple) {
+            return html `
         <div class="apply-button-wrapper">
           <leu-button
             type="button"
@@ -584,17 +569,17 @@ class LeuSelect extends LeuElement {
           >
         </div>
       `;
+        }
+        return nothing;
     }
-    return nothing;
-  }
-  _renderToggleButton() {
-    const toggleClasses = {
-      "select-toggle": true,
-      open: this.open,
-      filled: this.value.length !== 0 && this.value !== null,
-      labeled: this.label !== ""
-    };
-    return html`<button
+    _renderToggleButton() {
+        const toggleClasses = {
+            "select-toggle": true,
+            open: this.open,
+            filled: this.value.length !== 0 && this.value !== null,
+            labeled: this.label !== "",
+        };
+        return html `<button
       ${ref(this._toggleButtonRef)}
       type="button"
       class=${classMap(toggleClasses)}
@@ -612,7 +597,8 @@ class LeuSelect extends LeuElement {
       <span class="arrow-icon">
         <leu-icon name="angleDropDown"></leu-icon>
       </span>
-      ${this.clearable && this.value.length !== 0 ? html`<button
+      ${this.clearable && this.value.length !== 0
+            ? html `<button
             type="button"
             class="clear-button"
             @click=${this._clearValue}
@@ -620,22 +606,22 @@ class LeuSelect extends LeuElement {
             ?disabled=${this.disabled}
           >
             <leu-icon name="clear"></leu-icon>
-          </button>` : nothing}
+          </button>`
+            : nothing}
     </button>`;
-  }
-  render() {
-    const selectClasses = {
-      select: true,
-      "select--has-before": this.hasSlotController.test("before"),
-      "select--has-after": this.hasSlotController.test("after")
-    };
-
-    /*
-     * We use the click event listener with the event delegation pattern
-     * so this is not a violation of the rule.
-     */
-    /* eslint-disable lit-a11y/click-events-have-key-events */
-    return html`<div
+    }
+    render() {
+        const selectClasses = {
+            select: true,
+            "select--has-before": this.hasSlotController.test("before"),
+            "select--has-after": this.hasSlotController.test("after"),
+        };
+        /*
+         * We use the click event listener with the event delegation pattern
+         * so this is not a violation of the rule.
+         */
+        /* eslint-disable lit-a11y/click-events-have-key-events */
+        return html `<div
         class=${classMap(selectClasses)}
         @keydown=${this._handleKeyDown}
       >
@@ -659,9 +645,11 @@ class LeuSelect extends LeuElement {
               @click=${this._handleMenuItemClick}
               aria-labelledby="select-label"
             >
-              <slot></slot>
+              <slot @slotchange=${this._handleItemSlotChange}> </slot>
             </leu-menu>
-            ${this._hasFilterResults ? nothing : html` <p class="filter-message-empty" aria-live="polite">
+            ${this._hasFilterResults || this._optionFilter === ""
+            ? nothing
+            : html ` <p class="filter-message-empty" aria-live="polite">
                   Keine Resultate
                 </p>`}
             ${this._renderApplyButton()}
@@ -670,17 +658,17 @@ class LeuSelect extends LeuElement {
         </leu-popup>
       </div>
       <input type="hidden" name=${this.name} .value=${this.value.join(",")} />`;
-    /* eslint-enable lit-a11y/click-events-have-key-events */
-  }
+        /* eslint-enable lit-a11y/click-events-have-key-events */
+    }
 }
-_defineProperty(LeuSelect, "dependencies", {
-  "leu-button": LeuButton,
-  "leu-menu": LeuMenu,
-  "leu-menu-item": LeuMenuItem,
-  "leu-icon": LeuIcon,
-  "leu-input": LeuInput,
-  "leu-popup": LeuPopup
-});
-_defineProperty(LeuSelect, "styles", [LeuElement.styles, css_248z]);
+LeuSelect.dependencies = {
+    "leu-button": LeuButton,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-icon": LeuIcon,
+    "leu-input": LeuInput,
+    "leu-popup": LeuPopup,
+};
+LeuSelect.styles = [LeuElement.styles, css_248z];
 
 export { LeuSelect };