@statistikzh/leu 0.0.2

package/dist/Select.js

@@ -0,0 +1,859 @@
+import { css, LitElement, html, 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 { a as ICON_NAMES, I as Icon } from './icon-b68c7e1e.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { d as defineButtonElements } from './Button-83c6df93.js';
+import { defineInputElements } from './Input.js';
+
+/**
+ * Thanks Shoelace!
+ * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
+ */
+
+/**
+ * A reactive controller that determines when slots exist.
+ * @implements { import("lit").ReactiveController }
+ */
+class HasSlotController {
+  constructor(host, slotNames) {
+    this.host = host;
+    host.addController(this);
+
+    this.slotNames = slotNames;
+  }
+
+  /**
+   * @private
+   * @returns {Boolean}
+   */
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true
+      }
+
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+
+        // If it doesn't have a slot attribute, it's part of the default slot
+        if (!el.hasAttribute("slot")) {
+          return true
+        }
+      }
+
+      return false
+    })
+  }
+
+  /**
+   * @private
+   * @param {String} name
+   * @returns {Boolean}
+   */
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null
+  }
+
+  /**
+   * @param {String} slotName
+   * @returns {Boolean}
+   */
+  test(slotName) {
+    return slotName === "[default]"
+      ? this.hasDefaultSlot()
+      : this.hasNamedSlot(slotName)
+  }
+
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+
+  /**
+   * @private
+   * @param {Event} event
+   */
+  handleSlotChange = (event) => {
+    const slot = event.target;
+
+    if (
+      (this.slotNames.includes("[default]") && !slot.name) ||
+      (slot.name && this.slotNames.includes(slot.name))
+    ) {
+      this.host.requestUpdate();
+    }
+  }
+}
+
+var css_248z$2 = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --menu-divider-color: var(--leu-color-black-transp-20);
+}
+
+:host ::slotted(hr) {
+  border: 0;
+  border-top: 1px solid var(--menu-divider-color);
+  margin: 0.5rem 0;
+}
+`;
+
+/**
+ * @tagname leu-menu
+ */
+class LeuMenu extends LitElement {
+  static styles = css_248z$2
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+function defineMenuElements() {
+  defineElement("menu", LeuMenu);
+}
+
+var css_248z$1 = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --background: var(--leu-color-black-0);
+  --background-hover: var(--leu-color-black-10);
+  --background-active: var(--leu-color-func-cyan);
+  --background-disabled: var(--leu-color-black-0);
+  --color: var(--leu-color-black-transp-60);
+  --font-regular: var(--leu-font-regular);
+  --font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}
+
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+
+  padding: 0.75rem;
+
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: left;
+
+  background: var(--background);
+  color: var(--color);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.button:hover,
+:host([highlighted]) .button {
+  --background: var(--background-hover);
+}
+
+:host([active]) .button {
+  --background: var(--background-active);
+}
+
+:host([disabled]) .button {
+  --background: var(--background-disabled);
+  cursor: default;
+}
+
+.before svg, .after svg {
+  display: block;
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-placeholder {
+  display: block;
+  width: 1.5rem;
+  aspect-ratio: 1;
+}
+`;
+
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+class LeuMenuItem extends LitElement {
+  static styles = css_248z$1
+
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    /**
+     * Can be either an icon name or a text
+     * If no icon with this value is found, it will be displayed as text.
+     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+     */
+    before: { type: String },
+    /**
+     * Can be either an icon name or a text
+     * If no icon with this value is found, it will be displayed as text
+     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+     */
+    after: { type: String },
+    active: { type: Boolean, reflect: true },
+    highlighted: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  }
+
+  constructor() {
+    super();
+
+    this.active = false;
+    this.disabled = false;
+    this.before = "";
+    this.after = "";
+
+    /**
+     * A programmatic way to highlight the menu item like it is hovered.
+     * This is just a visual effect and does not change the active state.
+     */
+    this.highlighted = false;
+  }
+
+  static getIconOrText(name) {
+    if (ICON_NAMES.includes(name)) {
+      return Icon(name)
+    }
+
+    if (name === "EMPTY") {
+      return html`<div class="icon-placeholder"></div>`
+    }
+
+    return name
+  }
+
+  renderBefore() {
+    if (this.before !== "") {
+      const content = LeuMenuItem.getIconOrText(this.before);
+      return html`<span class="before">${content}</span>`
+    }
+
+    return nothing
+  }
+
+  renderAfter() {
+    if (this.after !== "") {
+      const content = LeuMenuItem.getIconOrText(this.after);
+      return html`<span class="after">${content}</span>`
+    }
+
+    return nothing
+  }
+
+  render() {
+    return html`<button class="button" ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label"><slot></slot></span
+      >${this.renderAfter()}
+    </button>`
+  }
+}
+
+function defineMenuItemElements() {
+  defineElement("menu-item", LeuMenuItem);
+}
+
+var css_248z = css`: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(--leu-font-regular);
+
+  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%;
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          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: 1.5rem;
+
+  width: var(--_length);
+  height: 1.5rem;
+  height: var(--_length);
+  padding: 0;
+
+  position: absolute;
+  top: calc(50% - 1.5rem / 2);
+  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: inherit;
+}
+
+.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: 1.5rem;
+
+  width: var(--_length);
+  height: 1.5rem;
+  height: var(--_length);
+  padding: 0;
+
+  position: absolute;
+  top: calc(50% - 1.5rem / 2);
+  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;
+}
+`;
+
+/**
+ * @tagname leu-select
+ * @slot before - Optional content the appears before the option list
+ * @slot after - Optional content the appears after the option list
+ */
+class LeuSelect extends LitElement {
+  static styles = css_248z
+
+  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> `
+  }
+}
+
+function defineSelectElements() {
+  defineButtonElements();
+  defineMenuElements();
+  defineMenuItemElements();
+  defineInputElements();
+  defineElement("select", LeuSelect);
+}
+
+export { LeuSelect, defineSelectElements };