@statistikzh/leu 0.5.0 → 0.6.0

package/dist/Select.js

@@ -1,23 +1,15 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html, nothing } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { map } from 'lit/directives/map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { I as Icon } from './icon-03e86700.js';
-import { H as HasSlotController } from './Button-da11d064.js';
-import './leu-button.js';
-import './leu-menu.js';
-import './leu-menu-item.js';
-import './leu-input.js';
-import './leu-popup.js';
-import './defineElement-40372b4b.js';
-import './Menu.js';
-import './MenuItem.js';
-import 'lit/static-html.js';
-import './Input.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { H as HasSlotController, L as LeuButton } from './Button-9692e403.js';
+import { LeuMenu } from './Menu.js';
+import { LeuMenuItem } from './MenuItem.js';
+import { LeuIcon } from './Icon.js';
+import { LeuInput } from './Input.js';
+import { LeuPopup } from './Popup.js';
 import 'lit/directives/live.js';
-import './Popup.js';
 import '@floating-ui/dom';
 
 var css_248z = css`:host,
@@ -61,12 +53,10 @@ var css_248z = css`:host,
   position: relative;
   display: block;
 
-  font-family: var(--leu-font-family-regular);
-
   font-family: var(--select-font-regular);
 }
 
-.select[disabled] {
+:host([disabled]) {
   --select-color: var(--select-color-disabled);
   --select-color-focus: var(--select-color-disabled);
   --select-border-color: var(--select-border-color-disabled);
@@ -153,19 +143,18 @@ var css_248z = css`:host,
   outline-offset: 2px;
 }
 
-.select[disabled] .select-toggle,
-.select[disabled] .clear-button {
+.select-toggle[disabled],
+.select-toggle[disabled] .clear-button {
   cursor: inherit;
 }
 
-.select[disabled] .label {
+.select-toggle[disabled] .label {
   color: var(--select-label-color);
 }
 
 .select-toggle.open .label,
 .select-toggle.filled .label,
-.select:not([disabled]) .select-toggle:focus .label,
-.select:not([disabled]) .select-toggle:active:not([disabled]) .label {
+.select-toggle:focus .label {
   color: var(--select-label-color);
   font-family: var(--select-font-black);
   font-size: 0.75rem;
@@ -208,7 +197,7 @@ var css_248z = css`:host,
   flex-direction: column;
 
   width: 100%;
-  max-height: var(--auto-size-available-height);
+  max-height: min(var(--auto-size-available-height), 24rem);
 
   padding: 0;
   margin: 0;
@@ -219,12 +208,9 @@ var css_248z = css`:host,
   box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
 }
 
-.select-menu {
+.menu {
   display: block;
-  padding: 0;
-  margin: 0;
   overflow: auto;
-  max-height: 100%;
 }
 
 .before,
@@ -241,24 +227,49 @@ var css_248z = css`:host,
   display: none;
 }
 
+.apply-button-wrapper {
+  background-color: var(--leu-color-black-10);
+  padding: 0.75rem;
+}
+
 .apply-button {
   display: block;
-  margin: 0.75rem;
 }
 
 .select-search {
   margin: 0.75rem;
 }
+
+.filter-message-empty {
+  background: var(--leu-color-black-0);
+  color: var(--leu-color-black-transp-60);
+
+  padding: 0.75rem;
+  margin: 0;
+}
 `;
 
 /**
  * @tagname leu-select
  * @slot before - Optional content the appears before the option list
  * @slot after - Optional content the appears after the option list
+ * @property {string} name - Reflects to the name attribute of the hidden input field that would be used in a form
+ * @property {boolean} open - The expanded state of the popup
+ * @property {string} label - The label of the select
+ * @property {array} value - List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.
+ * @property {boolean} clearable - Show a clearable button to reset the value
+ * @property {boolean} disabled - If the select should be disabled
+ * @property {boolean} filterable - Show an input field to filter the options inside the popup
+ * @property {boolean} multiple - Allow multiple selections
+ * @attribute {string} value - The selected values separated by commas.
  */
-class LeuSelect extends LitElement {
+class LeuSelect extends LeuElement {
   static get properties() {
     return {
+      name: {
+        type: String,
+        reflect: true
+      },
       open: {
         type: Boolean,
         reflect: true
@@ -267,11 +278,16 @@ class LeuSelect extends LitElement {
         type: String,
         reflect: true
       },
-      options: {
-        type: Array
-      },
       value: {
-        type: Array
+        type: Array,
+        converter: {
+          fromAttribute(value) {
+            if (value) {
+              return value.split(",").map(v => v.trim());
+            }
+            return value;
+          }
+        }
       },
       clearable: {
         type: Boolean,
@@ -289,7 +305,13 @@ class LeuSelect extends LitElement {
         type: Boolean,
         reflect: true
       },
-      optionFilter: {
+      _optionFilter: {
+        state: true
+      },
+      _hasFilterResults: {
+        state: true
+      },
+      _displayValue: {
         state: true
       }
     };
@@ -313,18 +335,18 @@ class LeuSelect extends LitElement {
      * @internal
      * @param {MouseEvent} event
      */
-    _defineProperty(this, "handleDocumentClick", event => {
+    _defineProperty(this, "_handleDocumentClick", event => {
       if (event.target instanceof Node && !this.contains(event.target) && this.open) {
-        this.closeDropdown();
+        this._closeDropdown();
       }
     });
     /**
      * @internal
-     * @param {KeyboardEvent} e
+     * @param {KeyboardEvent} event
      */
-    _defineProperty(this, "handleKeyDown", event => {
+    _defineProperty(this, "_handleKeyDown", event => {
       if (event.key === "Escape") {
-        this.closeDropdown();
+        this._closeDropdown();
       }
     });
     this.open = false;
@@ -334,199 +356,244 @@ class LeuSelect extends LitElement {
     this.clearable = false;
     this.filterable = false;
     this.value = [];
-    this.options = [];
     this.label = "";
+    this.name = "";
 
     /** @internal */
-    this._arrowIcon = Icon("angleDropDown");
+    this._optionFilter = "";
 
     /** @internal */
-    this._clearIcon = Icon("clear");
+    this._hasFilterResults = true;
 
     /** @internal */
-    this.optionFilter = "";
+    this._deferedChangeEvent = false;
 
     /** @internal */
-    this.deferedChangeEvent = false;
+    this._displayValue = "";
 
-    /**
-     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
-     */
-    this.menuRef = createRef();
     /**
      * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
      */
-    this.optionFilterRef = createRef();
+    this._optionFilterRef = createRef();
     /**
      * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
      */
-    this.toggleButtonRef = createRef();
+    this._toggleButtonRef = createRef();
+
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
+    this._menuRef = createRef();
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("click", this._handleDocumentClick);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("click", this._handleDocumentClick);
   }
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
       if (this.filterable) {
-        this.optionFilterRef.value.focus();
+        this._optionFilterRef.value.focus();
       } else {
-        this.menuRef.value.focus();
+        this._menuRef.value.focusItem(0);
       }
     } else if (changedProperties.has("open") && !this.open) {
-      this.toggleButtonRef.value.focus();
+      // 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")) {
+      this._updateMenuItems({
+        value: changedProperties.has("value"),
+        optionFilter: changedProperties.has("_optionFilter")
+      });
     }
   }
-  getDisplayValue(value) {
-    if (this.multiple) {
-      return value.length === 0 ? `` : `${value.length} gewählt`;
+
+  /**
+   * 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;
+
+    /* eslint-disable no-param-reassign */
+    menuItems.forEach(menuItem => {
+      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);
+    }
+  }
+  /**
+   * @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 LeuSelect.getOptionLabel(value[0]);
   }
-  getFilteredOptions() {
-    return this.filterable && this.optionFilter.length > 0 ? this.options.filter(option => {
-      const label = LeuSelect.getOptionLabel(option);
-      return label.toLowerCase().includes(this.optionFilter.toLowerCase());
-    }) : this.options;
+
+  /**
+   * @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);
+    }
   }
-  emitUpdateEvents() {
-    this.emitInputEvent();
-    this.emitChangeEvent();
+
+  /**
+   * 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`;
+    }
+    return this._displayValue ?? nothing;
   }
-  emitInputEvent() {
+  _emitInputEvent() {
     const inputevent = new CustomEvent("input", {
       composed: true,
       bubbles: true
     });
     this.dispatchEvent(inputevent);
   }
-  emitChangeEvent() {
+  _emitChangeEvent() {
     const changeevent = new CustomEvent("change", {
       composed: true,
       bubbles: true
     });
     this.dispatchEvent(changeevent);
   }
-  clearValue(event) {
+  _clearValue(event) {
     if (!this.disabled) {
       event.stopPropagation();
       this.value = [];
     }
-    this.emitUpdateEvents();
+    this._emitInputEvent();
+    this._emitChangeEvent();
   }
-  toggleDropdown() {
+  _toggleDropdown() {
     if (!this.disabled) {
       this.open = !this.open;
     }
   }
-  openDropdown() {
-    this.open = true;
-  }
-  closeDropdown() {
+  _closeDropdown() {
     this.open = false;
-    if (this.deferedChangeEvent) {
-      this.emitChangeEvent();
-      this.deferedChangeEvent = false;
+    if (this._deferedChangeEvent) {
+      this._emitChangeEvent();
+      this._deferedChangeEvent = false;
     }
   }
+  _handleFilterInput(event) {
+    this._optionFilter = event.target.value;
+  }
 
   /**
-   * Adds or replaces the given option in the options array.
-   *
-   * @param {*} option
+   * Checks if the given value is selected.
+   * @param {String} menuItemValue
+   * @returns {Boolean}
    */
-  selectOption(option) {
-    const isSelected = this.isSelected(option);
+  _isSelected(menuItemValue) {
+    return this.value.includes(menuItemValue);
+  }
+  _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 !== option) : this.value.concat(option);
-      this.deferedChangeEvent = true;
+      this.value = isSelected ? this.value.filter(v => v !== value) : this.value.concat(value);
+      this._deferedChangeEvent = true;
     } else {
-      this.value = isSelected ? [] : [option];
+      this.value = isSelected ? [] : [value];
+      this._displayValue = isSelected ? "" : menuItem.textContent;
     }
-    this.emitInputEvent();
+    this._emitInputEvent();
     if (!this.multiple) {
-      this.closeDropdown();
+      this._closeDropdown();
     }
   }
-  handleApplyClick() {
-    this.closeDropdown();
-  }
-  handleFilterInput(event) {
-    this.optionFilter = event.target.value;
-  }
-  isSelected(option) {
-    return this.value.includes(option);
-  }
-  renderMenu() {
-    const menuClasses = {
-      "select-menu": true,
-      multiple: this.multiple
-    };
-    const filteredOptions = this.getFilteredOptions();
-    return html`
-      <leu-menu
-        role="listbox"
-        class=${classMap(menuClasses)}
-        aria-multiselectable="${this.multiple}"
-        aria-labelledby="select-label"
-        ref=${ref(this.menuRef)}
-      >
-        ${filteredOptions.length > 0 ? map(this.getFilteredOptions(), option => {
-      const isSelected = this.isSelected(option);
-      let beforeIcon;
-      if (this.multiple && isSelected) {
-        beforeIcon = "check";
-      } else if (this.multiple) {
-        beforeIcon = "EMPTY";
-      }
-      return html`<leu-menu-item
-                before=${ifDefined(beforeIcon)}
-                @click=${() => this.selectOption(option)}
-                role="option"
-                label=${LeuSelect.getOptionLabel(option)}
-                ?active=${isSelected}
-                aria-selected=${isSelected}
-              >
-              </leu-menu-item>`;
-    }) : html`<leu-menu-item
-              label=${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}
-              disabled
-            ></leu-menu-item>`}
-      </leu-menu>
-    `;
+
+  /**
+   * Close the dropdown if the focus moves outside the component.
+   */
+  _handlePopupFocusOut(event) {
+    if (!this.contains(event.relatedTarget) && !this.shadowRoot.contains(event.relatedTarget)) {
+      this._closeDropdown();
+    }
   }
-  renderFilterInput() {
+  _renderFilterInput() {
     if (this.filterable) {
       return html` <leu-input
         class="select-search"
         size="small"
-        @input=${this.handleFilterInput}
+        @input=${this._handleFilterInput}
+        @keydown=${this._handleFilterInputKeyDown}
         clearable
-        ref=${ref(this.optionFilterRef)}
+        ref=${ref(this._optionFilterRef)}
         label="Nach Stichwort filtern"
       ></leu-input>`;
     }
     return nothing;
   }
-  renderApplyButton() {
+  _renderApplyButton() {
     if (this.multiple) {
       return html`
-        <leu-button
-          type="button"
-          class="apply-button"
-          @click=${this.handleApplyClick}
-          fluid
-          >Anwenden</leu-button
-        >
+        <div class="apply-button-wrapper">
+          <leu-button
+            type="button"
+            class="apply-button"
+            @click=${this._closeDropdown}
+            fluid
+            >Anwenden</leu-button
+          >
+        </div>
       `;
     }
     return nothing;
   }
-  renderToggleButton() {
+  _renderToggleButton() {
     const toggleClasses = {
       "select-toggle": true,
       open: this.open,
@@ -534,27 +601,31 @@ class LeuSelect extends LitElement {
       labeled: this.label !== ""
     };
     return html`<button
+      ${ref(this._toggleButtonRef)}
       type="button"
       class=${classMap(toggleClasses)}
-      @click=${this.toggleDropdown}
-      aria-controls="select-dialog"
-      aria-haspopup="dialog"
+      @click=${this._toggleDropdown}
+      @keydown=${this._handleToggleKeyDown}
+      ?disabled=${this.disabled}
+      aria-controls="select-popup"
       aria-expanded="${this.open}"
+      aria-labelledby="select-label"
       role="combobox"
-      ref=${ref(this.toggleButtonRef)}
       slot="anchor"
     >
       <span class="label" id="select-label">${this.label}</span>
-      <span class="value"> ${this.getDisplayValue(this.value)} </span>
-      <span class="arrow-icon"> ${this._arrowIcon} </span>
+      <span class="value"> ${this._getDisplayValue()} </span>
+      <span class="arrow-icon">
+        <leu-icon name="angleDropDown"></leu-icon>
+      </span>
       ${this.clearable && this.value.length !== 0 ? html`<button
             type="button"
             class="clear-button"
-            @click=${this.clearValue}
+            @click=${this._clearValue}
             aria-label=${`${this.label} zurücksetzen`}
             ?disabled=${this.disabled}
           >
-            ${this._clearIcon}
+            <leu-icon name="clear"></leu-icon>
           </button>` : nothing}
     </button>`;
   }
@@ -564,36 +635,61 @@ class LeuSelect extends LitElement {
       "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)}
-      ?disabled=${this.disabled}
-      aria-readonly="${this.disabled}"
-      aria-labelledby="select-label"
-      @keydown=${this.handleKeyDown}
-    >
-      <leu-popup
-        ?active=${this.open}
-        placement="bottom-start"
-        flip
-        matchSize="width"
-        autoSize="height"
-        autoSizePadding="8"
+        class=${classMap(selectClasses)}
+        @keydown=${this._handleKeyDown}
       >
-        ${this.renderToggleButton()}
-        <dialog
-          id="select-dialog"
-          class="select-menu-container"
-          ?open=${this.open}
+        <leu-popup
+          ?active=${this.open}
+          placement="bottom-start"
+          flip
+          matchSize="width"
+          autoSize="height"
+          autoSizePadding="8"
         >
-          <slot name="before" class="before"></slot>
-          ${this.renderFilterInput()} ${this.renderMenu()}
-          ${this.renderApplyButton()}
-          <slot name="after" class="after"></slot>
-        </dialog>
-      </leu-popup>
-    </div> `;
+          ${this._renderToggleButton()}
+          <div
+            id="select-popup"
+            class="select-menu-container"
+            @focusout=${this._handlePopupFocusOut}
+          >
+            <slot name="before" class="before"></slot>
+            ${this._renderFilterInput()}
+            <leu-menu
+              ref=${ref(this._menuRef)}
+              role="listbox"
+              aria-multiselectable=${ifDefined(this.multiple ? "true" : undefined)}
+              class="menu"
+              @click=${this._handleMenuItemClick}
+            >
+              <slot></slot>
+            </leu-menu>
+            ${this._hasFilterResults ? nothing : html` <p class="filter-message-empty" aria-live="polite">
+                  Keine Resultate
+                </p>`}
+            ${this._renderApplyButton()}
+            <slot name="after" class="after"></slot>
+          </div>
+        </leu-popup>
+      </div>
+      <input type="hidden" name=${this.name} .value=${this.value.join(",")} />`;
+    /* 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", css_248z);
 
 export { LeuSelect };