@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Select.js

@@ -1,676 +1,10 @@
-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 { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-import { LeuButton } from './Button.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 './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
-import 'lit/directives/live.js';
-import '@floating-ui/dom';
-
-var css_248z = css`: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-family-regular);
-  --select-font-black: var(--leu-font-family-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);
-}
-
-:host([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: var(--leu-color-black-0);
-  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-toggle[disabled],
-.select-toggle[disabled] .clear-button {
-  cursor: inherit;
-}
-
-.select-toggle[disabled] .label {
-  color: var(--select-label-color);
-}
-
-.select-toggle.open .label,
-.select-toggle.filled .label,
-.select-toggle:focus .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 {
-  position: static;
-  overflow: auto;
-
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  max-height: min(var(--auto-size-available-height), 24rem);
-
-  padding: 0;
-  margin: 0;
-
-  border: none;
-  border-radius: 1px;
-  background-color: white;
-  box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-}
-
-.menu {
-  display: block;
-  overflow: auto;
-}
-
-.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-wrapper {
-  background-color: var(--leu-color-black-10);
-  padding: 0.75rem;
-}
-
-.apply-button {
-  display: block;
-}
-
-.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 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());
-                        }
-                        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);
-            }
-        }
-        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;
-                }
-            }
-        });
-        /* 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
-     */
-    _handleItemSlotChange() {
-        this._updateMenuItems({
-            value: true,
-            optionFilter: true,
-            multiple: true,
-        });
-    }
-    /**
-     * @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);
-            }
-        }
-    }
-    /**
-     * @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);
-        }
-    }
-    /**
-     * 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() {
-        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._emitInputEvent();
-        this._emitChangeEvent();
-    }
-    _toggleDropdown() {
-        if (!this.disabled) {
-            this.open = !this.open;
-        }
-    }
-    _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;
-        }
-        /** @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
-        class="select-search"
-        size="small"
-        @input=${this._handleFilterInput}
-        @keydown=${this._handleFilterInputKeyDown}
-        clearable
-        ref=${ref(this._optionFilterRef)}
-        label="Nach Stichwort filtern"
-      ></leu-input>`;
-        }
-        return nothing;
-    }
-    _renderApplyButton() {
-        if (this.multiple) {
-            return html `
-        <div class="apply-button-wrapper">
-          <leu-button
-            type="button"
-            class="apply-button"
-            @click=${this._closeDropdown}
-            fluid
-            >Anwenden</leu-button
-          >
-        </div>
-      `;
-        }
-        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
-      ${ref(this._toggleButtonRef)}
-      type="button"
-      class=${classMap(toggleClasses)}
-      @click=${this._toggleDropdown}
-      @keydown=${this._handleToggleKeyDown}
-      ?disabled=${this.disabled}
-      aria-controls="select-popup"
-      aria-expanded="${this.open}"
-      aria-labelledby="select-label"
-      role="combobox"
-      slot="anchor"
-    >
-      <span class="label" id="select-label">${this.label}</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}
-            aria-label=${`${this.label} zurücksetzen`}
-            ?disabled=${this.disabled}
-          >
-            <leu-icon name="clear"></leu-icon>
-          </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
-        class=${classMap(selectClasses)}
-        @keydown=${this._handleKeyDown}
-      >
-        <leu-popup
-          ?active=${this.open}
-          placement="bottom-start"
-          flip
-          matchSize="width"
-          autoSize="height"
-          autoSizePadding="8"
-        >
-          ${this._renderToggleButton()}
-          <div id="select-popup" class="select-menu-container">
-            <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}
-              aria-labelledby="select-label"
-            >
-              <slot @slotchange=${this._handleItemSlotChange}> </slot>
-            </leu-menu>
-            ${this._hasFilterResults || this._optionFilter === ""
-            ? 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 */
-    }
-}
-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];
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Icon-DhAvH0XM.js";
+import "./Button-EdS9xr2J.js";
+import "./FormAssociatedMixin-BbFlza53.js";
+import "./MenuItem-CZTqGg5R.js";
+import "./Menu-DpiheIPk.js";
+import "./Popup-JQjuj26v.js";
+import "./Input-CnEz-2dK.js";
+import { t as LeuSelect } from "./Select-BCx79gOH.js";
 export { LeuSelect };

package/dist/Spinner-CMo_o6Fy.d.ts

@@ -0,0 +1,14 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/spinner/Spinner.d.ts
+/**
+ * @tagname leu-spinner
+ * @cssprop --leu-spinner-size - The size of the spinner.
+ */
+declare class LeuSpinner extends LeuElement {
+  static styles: any[];
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuSpinner as t };