@statistikzh/leu 0.0.2 → 0.2.0

package/dist/Select.js

@@ -1,11 +1,13 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 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 { I as Icon } from './icon-03e86700.js';
+import { defineButtonElements } from './Button.js';
+import { defineMenuElements } from './Menu.js';
+import { defineMenuItemElements } from './MenuItem.js';
 import { defineInputElements } from './Input.js';
 
 /**
@@ -19,9 +21,18 @@ import { defineInputElements } from './Input.js';
  */
 class HasSlotController {
   constructor(host, slotNames) {
+    /**
+     * @private
+     * @param {Event} event
+     */
+    _defineProperty(this, "handleSlotChange", event => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    });
     this.host = host;
     host.addController(this);
-
     this.slotNames = slotNames;
   }
 
@@ -30,22 +41,20 @@ class HasSlotController {
    * @returns {Boolean}
    */
   hasDefaultSlot() {
-    return [...this.host.childNodes].some((node) => {
+    return [...this.host.childNodes].some(node => {
       if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
-        return true
+        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 true;
         }
       }
-
-      return false
-    })
+      return false;
+    });
   }
 
   /**
@@ -54,7 +63,7 @@ class HasSlotController {
    * @returns {Boolean}
    */
   hasNamedSlot(name) {
-    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
   }
 
   /**
@@ -62,235 +71,16 @@ class HasSlotController {
    * @returns {Boolean}
    */
   test(slotName) {
-    return slotName === "[default]"
-      ? this.hasDefaultSlot()
-      : this.hasNamedSlot(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>`
+    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
   }
 }
 
-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;
@@ -528,37 +318,76 @@ var css_248z = css`:host,
  * @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 },
-    }
+      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.label;
     }
-    return option
+    return option;
   }
 
   /**
    * @internal
    */
-  hasSlotController = new HasSlotController(this, ["before", "after"])
 
   constructor() {
     super();
+    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after"]));
+    /**
+     * Handles clicks outside of the component to close the dropdown.
+     * @internal
+     * @param {MouseEvent} event
+     */
+    _defineProperty(this, "handleDocumentClick", event => {
+      if (!this.contains(event.target) && this.open) {
+        this.closeDropdown();
+      }
+    });
+    /**
+     * @internal
+     * @param {KeyboardEvent} e
+     */
+    _defineProperty(this, "handleKeyDown", event => {
+      if (event.key === "Escape") {
+        this.closeDropdown();
+      }
+    });
     this.open = false;
     this.clearable = false;
     this.value = [];
@@ -575,15 +404,21 @@ class LeuSelect extends LitElement {
 
     /** @internal */
     this.deferedChangeEvent = false;
-
     this.menuRef = createRef();
     this.optionFilterRef = createRef();
     this.toggleButtonRef = 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.multiple) {
+      if (this.filterable) {
         this.optionFilterRef.value.focus();
       } else {
         this.menuRef.value.focus();
@@ -592,83 +427,53 @@ class LeuSelect extends LitElement {
       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 value.length === 0 ? `` : `${value.length} gewählt`;
     }
-
-    return LeuSelect.getOptionLabel(value[0])
+    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
+    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,
+      bubbles: true
     });
     this.dispatchEvent(inputevent);
   }
-
   emitChangeEvent() {
     const changeevent = new CustomEvent("change", {
       composed: true,
-      bubbles: 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;
@@ -682,44 +487,32 @@ class LeuSelect extends LitElement {
    */
   selectOption(option) {
     const isSelected = this.isSelected(option);
-
     if (this.multiple) {
-      this.value = isSelected
-        ? this.value.filter((v) => v !== option)
-        : this.value.concat(option);
-
+      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)
+    return this.value.includes(option);
   }
-
   renderMenu() {
     const menuClasses = {
       "select-menu": true,
-      multiple: this.multiple,
+      multiple: this.multiple
     };
-
     const filteredOptions = this.getFilteredOptions();
-
     return html`
       <leu-menu
         role="listbox"
@@ -728,18 +521,15 @@ class LeuSelect extends LitElement {
         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
+        ${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"
@@ -747,13 +537,13 @@ class LeuSelect extends LitElement {
                 aria-selected=${isSelected}
               >
                 ${LeuSelect.getOptionLabel(option)}
-              </leu-menu-item>`
-            })
-          : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+              </leu-menu-item>`;
+    }) : html`<leu-menu-item disabled
+              >${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}</leu-menu-item
+            >`}
       </leu-menu>
-    `
+    `;
   }
-
   renderFilterInput() {
     if (this.filterable) {
       return html` <leu-input
@@ -761,13 +551,12 @@ class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
-      >`
+      >`;
     }
-
-    return nothing
+    return nothing;
   }
-
   renderApplyButton() {
     if (this.multiple) {
       return html`
@@ -778,20 +567,17 @@ class LeuSelect extends LitElement {
           label="Anwenden"
           fluid
         ></leu-button>
-      `
+      `;
     }
-
-    return nothing
+    return nothing;
   }
-
   renderToggleButton() {
     const toggleClasses = {
       "select-toggle": true,
       open: this.open,
       filled: this.value.length !== 0 && this.value !== null,
-      labeled: this.label !== "",
+      labeled: this.label !== ""
     };
-
     return html`<button
       type="button"
       class=${classMap(toggleClasses)}
@@ -805,8 +591,7 @@ class LeuSelect extends LitElement {
       <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
+      ${this.clearable && this.value !== "" && this.value.length !== 0 ? html`<button
             type="button"
             class="clear-button"
             @click=${this.clearValue}
@@ -814,18 +599,15 @@ class LeuSelect extends LitElement {
             ?disabled=${this.disabled}
           >
             ${this._clearIcon}
-          </button>`
-        : nothing}
-    </button>`
+          </button>` : nothing}
+    </button>`;
   }
-
   render() {
     const selectClasses = {
       select: true,
       "select--has-before": this.hasSlotController.test("before"),
-      "select--has-after": this.hasSlotController.test("after"),
+      "select--has-after": this.hasSlotController.test("after")
     };
-
     return html`<div
       class=${classMap(selectClasses)}
       ?disabled=${this.disabled}
@@ -844,10 +626,10 @@ class LeuSelect extends LitElement {
         ${this.renderApplyButton()}
         <slot name="after" class="after"></slot>
       </dialog>
-    </div> `
+    </div> `;
   }
 }
-
+_defineProperty(LeuSelect, "styles", css_248z);
 function defineSelectElements() {
   defineButtonElements();
   defineMenuElements();