@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Select-BCx79gOH.js

@@ -0,0 +1,618 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as HasSlotController } from "./hasSlotController-DjdfnOQp.js";
+import { t as LeuButton } from "./Button-EdS9xr2J.js";
+import { t as LeuMenuItem } from "./MenuItem-CZTqGg5R.js";
+import { t as LeuMenu } from "./Menu-DpiheIPk.js";
+import { t as LeuPopup } from "./Popup-JQjuj26v.js";
+import { t as LeuInput } from "./Input-CnEz-2dK.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+//#region src/components/select/select.css?inline
+var select_default = 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;
+}
+`;
+//#endregion
+//#region src/components/select/Select.ts
+/**
+* @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.
+*/
+var LeuSelect = class extends LeuElement {
+	static {
+		this.dependencies = {
+			"leu-button": LeuButton,
+			"leu-menu": LeuMenu,
+			"leu-menu-item": LeuMenuItem,
+			"leu-icon": LeuIcon,
+			"leu-input": LeuInput,
+			"leu-popup": LeuPopup
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, select_default];
+	}
+	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();
+		this.hasSlotController = new HasSlotController(this, ["before", "after"]);
+		this._handleDocumentClick = (event) => {
+			if (!event.composedPath().includes(this) && this.open) this._closeDropdown();
+		};
+		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) 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 = "";
+		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;
+			}
+		});
+		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) {
+			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() {
+		return html`<div
+        class=${classMap({
+			select: true,
+			"select--has-before": this.hasSlotController.test("before"),
+			"select--has-after": this.hasSlotController.test("after")
+		})}
+        @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" : void 0)}
+              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(",")} />`;
+	}
+};
+//#endregion
+export { LeuSelect as t };