@statistikzh/leu 0.0.2

package/src/components/select/Select.js

@@ -0,0 +1,350 @@
+import { html, LitElement, nothing } 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 { Icon } from "../icon/icon.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+import { defineButtonElements } from "../button/Button.js"
+import { defineMenuElements } from "../menu/Menu.js"
+import { defineMenuItemElements } from "../menu/MenuItem.js"
+import { defineInputElements } from "../input/Input.js"
+
+import styles from "./select.css"
+
+/**
+ * @tagname leu-select
+ * @slot before - Optional content the appears before the option list
+ * @slot after - Optional content the appears after the option list
+ */
+export class LeuSelect extends LitElement {
+  static styles = styles
+
+  static get properties() {
+    return {
+      open: { type: Boolean, attribute: "open" },
+
+      label: { type: String },
+      options: { type: Array },
+      value: { type: Array },
+      clearable: { type: Boolean, reflect: true },
+      disabled: { type: Boolean, reflect: true },
+      filterable: { type: Boolean, reflect: true },
+      multiple: { type: Boolean, reflect: true },
+      optionFilter: { type: String, state: true },
+    }
+  }
+
+  static getOptionLabel(option) {
+    if (typeof option === "object" && option !== null) {
+      return option.label
+    }
+    return option
+  }
+
+  /**
+   * @internal
+   */
+  hasSlotController = new HasSlotController(this, ["before", "after"])
+
+  constructor() {
+    super()
+    this.open = false
+    this.clearable = false
+    this.value = []
+    this.options = []
+
+    /** @internal */
+    this._arrowIcon = Icon("angleDropDown")
+
+    /** @internal */
+    this._clearIcon = Icon("clear")
+
+    /** @internal */
+    this.optionFilter = ""
+
+    /** @internal */
+    this.deferedChangeEvent = false
+
+    this.menuRef = createRef()
+    this.optionFilterRef = createRef()
+    this.toggleButtonRef = createRef()
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("open") && this.open) {
+      if (this.multiple) {
+        this.optionFilterRef.value.focus()
+      } else {
+        this.menuRef.value.focus()
+      }
+    } else if (changedProperties.has("open") && !this.open) {
+      this.toggleButtonRef.value.focus()
+    }
+  }
+
+  /**
+   * @internal
+   * @param {KeyboardEvent} e
+   */
+  handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      this.closeDropdown()
+    }
+  }
+
+  getDisplayValue(value) {
+    if (this.multiple) {
+      return value.length === 0 ? `` : `${value.length} gewählt`
+    }
+
+    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
+  }
+
+  emitUpdateEvents() {
+    this.emitInputEvent()
+    this.emitChangeEvent()
+  }
+
+  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 = []
+    }
+
+    this.emitUpdateEvents()
+  }
+
+  clearOptionFilter() {
+    // refocus before removing the button, otherwise closeDropdown is triggered
+    this.optionFilterRef.value.focus()
+    this.optionFilter = ""
+  }
+
+  toggleDropdown() {
+    if (!this.disabled) {
+      this.open = !this.open
+    }
+  }
+
+  openDropdown() {
+    this.open = true
+  }
+
+  closeDropdown() {
+    this.open = false
+
+    if (this.deferedChangeEvent) {
+      this.emitChangeEvent()
+      this.deferedChangeEvent = false
+    }
+  }
+
+  /**
+   * Adds or replaces the given option in the options array.
+   *
+   * @param {*} option
+   */
+  selectOption(option) {
+    const isSelected = this.isSelected(option)
+
+    if (this.multiple) {
+      this.value = isSelected
+        ? this.value.filter((v) => v !== option)
+        : this.value.concat(option)
+
+      this.deferedChangeEvent = true
+    } else {
+      this.value = isSelected ? [] : [option]
+    }
+
+    this.emitInputEvent()
+
+    if (!this.multiple) {
+      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"
+                ?active=${isSelected}
+                aria-selected=${isSelected}
+              >
+                ${LeuSelect.getOptionLabel(option)}
+              </leu-menu-item>`
+            })
+          : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+      </leu-menu>
+    `
+  }
+
+  renderFilterInput() {
+    if (this.filterable) {
+      return html` <leu-input
+        class="select-search"
+        size="small"
+        @input=${this.handleFilterInput}
+        clearable
+        >Nach Stichwort filtern</leu-input
+      >`
+    }
+
+    return nothing
+  }
+
+  renderApplyButton() {
+    if (this.multiple) {
+      return html`
+        <leu-button
+          type="button"
+          class="apply-button"
+          @click=${this.handleApplyClick}
+          label="Anwenden"
+          fluid
+        ></leu-button>
+      `
+    }
+
+    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
+      type="button"
+      class=${classMap(toggleClasses)}
+      @click=${this.toggleDropdown}
+      aria-controls="select-dialog"
+      aria-haspopup="dialog"
+      aria-expanded="${this.open}"
+      role="combobox"
+      ref=${ref(this.toggleButtonRef)}
+    >
+      <span class="label" id="select-label">${this.label}</span>
+      <span class="value"> ${this.getDisplayValue(this.value)} </span>
+      <span class="arrow-icon"> ${this._arrowIcon} </span>
+      ${this.clearable && this.value !== "" && this.value.length !== 0
+        ? html`<button
+            type="button"
+            class="clear-button"
+            @click=${this.clearValue}
+            aria-label=${`${this.label} zurücksetzen`}
+            ?disabled=${this.disabled}
+          >
+            ${this._clearIcon}
+          </button>`
+        : nothing}
+    </button>`
+  }
+
+  render() {
+    const selectClasses = {
+      select: true,
+      "select--has-before": this.hasSlotController.test("before"),
+      "select--has-after": this.hasSlotController.test("after"),
+    }
+
+    return html`<div
+      class=${classMap(selectClasses)}
+      ?disabled=${this.disabled}
+      aria-readonly="${this.disabled}"
+      aria-labelledby="select-label"
+      @keydown=${this.handleKeyDown}
+    >
+      ${this.renderToggleButton()}
+      <dialog
+        id="select-dialog"
+        class="select-menu-container"
+        ?open=${this.open}
+      >
+        <slot name="before" class="before"></slot>
+        ${this.renderFilterInput()} ${this.renderMenu()}
+        ${this.renderApplyButton()}
+        <slot name="after" class="after"></slot>
+      </dialog>
+    </div> `
+  }
+}
+
+export function defineSelectElements() {
+  defineButtonElements()
+  defineMenuElements()
+  defineMenuItemElements()
+  defineInputElements()
+  defineElement("select", LeuSelect)
+}

package/src/components/select/leu-select.js

@@ -0,0 +1,3 @@
+import { defineSelectElements } from "./Select.js"
+
+defineSelectElements()

package/src/components/select/select.css

@@ -0,0 +1,215 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --select-color: var(--leu-color-black-100);
+  --select-color-disabled: var(--leu-color-black-20);
+  --select-color-invalid: var(--leu-color-func-red);
+  --select-color-focus: var(--leu-color-func-cyan);
+  --select-border-width: 2px;
+
+  --select-label-color: var(--leu-color-black-100);
+  --select-label-color-disabled: var(--select-color-disabled);
+  --select-label-color-empty: var(--leu-color-black-60);
+
+  --select-option-color: var(--leu-color-black-60);
+  --select-option-color-focus: var(--select-color);
+
+  --select-border-color: var(--leu-color-black-40);
+  --select-border-color-focus: var(--select-color-focus);
+  --select-border-color-disabled: var(--leu-color-black-20);
+  --select-border-color-invalid: var(--select-color-invalid);
+
+  --select-error-color: var(--leu-color-black-0);
+
+  --select-clear-color: var(--leu-color-black-60);
+
+  --select-font-regular: var(--leu-font-regular);
+  --select-font-black: var(--leu-font-black);
+
+  --select-apply-button-color: var(--leu-color-black-100);
+  --select-apply-button-color-focus: var(--leu-color-black-80);
+  --select-apply-button-font-color: var(--leu-color-black-0);
+
+  --select-box-shadow-short: var(--leu-box-shadow-short);
+  --select-box-shadow-regular: var(--leu-box-shadow-regular);
+
+  position: relative;
+  display: block;
+
+  font-family: var(--select-font-regular);
+}
+
+.select[disabled] {
+  --select-color: var(--select-color-disabled);
+  --select-color-focus: var(--select-color-disabled);
+  --select-border-color: var(--select-border-color-disabled);
+  --select-label-color: var(--select-label-color-disabled);
+  --select-border-color-focus: var(--select-border-color-disabled);
+  --select-clear-color: var(--select-color-disabled);
+}
+
+.select-toggle {
+  min-height: 4.5rem;
+  display: block;
+  width: 100%;
+
+  appearance: none;
+  border: var(--select-border-width) solid var(--select-border-color);
+  border-radius: 2px;
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 1.375rem 3rem 1.375rem 1rem;
+
+  background: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  cursor: pointer;
+  text-align: left;
+}
+
+.select-toggle:hover,
+.select-toggle:focus {
+  border-color: var(--select-border-color-focus);
+}
+
+.select-toggle.filled.labeled {
+  padding-bottom: 0.75rem;
+  padding-top: 2rem;
+  color: var(--select-color);
+}
+
+.select-toggle:focus-visible {
+  outline: var(--select-border-width) solid var(--select-border-color-focus);
+  outline-offset: 2px;
+}
+
+.label {
+  position: absolute;
+  top: 1.5rem;
+  transition: top 0.1s ease;
+  font-family: var(--select-font-regular);
+}
+
+.clear-button {
+  --_length: 1.5rem;
+
+  width: var(--_length);
+  height: var(--_length);
+  padding: 0;
+
+  position: absolute;
+  top: calc(50% - var(--_length) / 2);
+  right: 2.6rem;
+
+  cursor: pointer;
+
+  background: none;
+  color: var(--select-clear-color);
+  border: none;
+
+  /* border-radius is only defined for a nice focus outline */
+  border-radius: 2px;
+}
+
+.clear-button:focus-visible {
+  outline: var(--select-border-width) solid var(--select-border-color-focus);
+  outline-offset: 2px;
+}
+
+.select[disabled] .select-toggle,
+.select[disabled] .clear-button {
+  cursor: unset;
+}
+
+.select[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 {
+  color: var(--select-label-color);
+  font-family: var(--select-font-black);
+  font-size: 0.75rem;
+
+  top: 0.875rem;
+
+  transition: top 0.1s ease;
+}
+
+.arrow-icon {
+  --_length: 1.5rem;
+
+  width: var(--_length);
+  height: var(--_length);
+  padding: 0;
+
+  position: absolute;
+  top: calc(50% - var(--_length) / 2);
+  right: 1rem;
+
+  transform: rotate(0deg);
+  transition: transform 0.25s ease;
+
+  color: var(--select-color);
+}
+
+.select-toggle.open .arrow-icon {
+  transform: rotate(180deg);
+}
+
+.select-menu-container {
+  border-radius: 1px;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border: 0 solid black;
+  padding: 0;
+  margin: 0;
+  top: calc(100% + 2px);
+  z-index: 10;
+  box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
+  overflow: auto;
+}
+
+.select-menu {
+  display: block;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  max-height: 24rem;
+}
+
+.select-menu.multiple {
+  max-height: 21rem;
+}
+
+.before,
+.after {
+  display: block;
+  margin: 0.75rem;
+}
+
+.select:not(.select--has-before) .before {
+  display: none;
+}
+
+.select:not(.select--has-after) .after {
+  display: none;
+}
+
+.apply-button {
+  display: block;
+  margin: 0.75rem;
+}
+
+.select-search {
+  margin: 0.75rem;
+}