@statistikzh/leu 0.26.0 → 0.27.0

package/dist/{Placeholder-BJybFwSg.js → Placeholder-DHMexMhK.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { css, html } from "lit";
 //#region src/components/placeholder/placeholder.css?inline
 var placeholder_default = css`:host {

package/dist/Placeholder.js

@@ -1,3 +1,3 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuPlaceholder } from "./Placeholder-BJybFwSg.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuPlaceholder } from "./Placeholder-DHMexMhK.js";
 export { LeuPlaceholder };

package/dist/{Popup-DNlm_9AA.js → Popup-8jhVy8gB.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";

package/dist/Popup.js

@@ -1,3 +1,3 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
 export { LeuPopup };

package/dist/{ProgressBar-B0wYj1KF.js → ProgressBar-CG0_lHfS.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";

package/dist/ProgressBar.js

@@ -1,3 +1,3 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuProgressBar } from "./ProgressBar-B0wYj1KF.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuProgressBar } from "./ProgressBar-CG0_lHfS.js";
 export { LeuProgressBar };

package/dist/{Radio-DMCL8c4D.js → Radio-DG3xqP3s.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";

package/dist/Radio.js

@@ -1,3 +1,3 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuRadio } from "./Radio-DMCL8c4D.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
 export { LeuRadio };

package/dist/{RadioGroup-CM6IyBlq.js → RadioGroup-BKCp9ICX.js}

@@ -1,6 +1,6 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuRadio } from "./Radio-DMCL8c4D.js";
+import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Radio-DMCL8c4D.js";
-import { t as LeuRadioGroup } from "./RadioGroup-CM6IyBlq.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Radio-DG3xqP3s.js";
+import { t as LeuRadioGroup } from "./RadioGroup-BKCp9ICX.js";
 export { LeuRadioGroup };

package/dist/{Range-B72rtfln.js → Range-7LrESv4K.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { n as isNumber, t as clamp } from "./utils-hfk5Nwy8.js";
 import { css, html, nothing } from "lit";

package/dist/Range.js

@@ -1,3 +1,3 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuRange } from "./Range-B72rtfln.js";
+import "./LeuElement-k4RjIeoG.js";
+import { t as LeuRange } from "./Range-7LrESv4K.js";
 export { LeuRange };

package/dist/{ScrollTop-BFAqBVDR.js → ScrollTop-CJJsfniA.js}

@@ -1,7 +1,7 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuIcon } from "./Icon-C_yYuynf.js";
-import { t as LeuButton } from "./Button-BkhqVjug.js";
+import { t as LeuIcon } from "./Icon-CbZXpyHU.js";
+import { t as LeuButton } from "./Button-BSyDL_cV.js";
 import { r as throttle } from "./utils-hfk5Nwy8.js";
 import { css, html } from "lit";
 import { state } from "lit/decorators.js";
@@ -63,24 +63,24 @@ var scroll_top_default = css`.scroll-top {
 /**
 * @tagname leu-scroll-top
 */
-var LeuScrollTop = class LeuScrollTop extends LeuElement {
+var LeuScrollTop = class extends LeuElement {
 	constructor(..._args) {
 		super(..._args);
-		this._showButton = false;
-		this._prevYPos = 0;
-		this._scrollDown = false;
+		this.showButton = false;
+		this.prevYPos = 0;
+		this.hasScrolledDown = false;
 		this.scroll = () => {
-			const delta = window.scrollY - this._prevYPos;
-			if (this._scrollDown) {
-				if (delta < 0) this._scrollDown = false;
-			} else if (delta > 0) this._scrollDown = true;
+			const delta = window.scrollY - this.prevYPos;
+			if (this.hasScrolledDown) {
+				if (delta < 0) this.hasScrolledDown = false;
+			} else if (delta > 0) this.hasScrolledDown = true;
 			/**
 			* Only show the button when
 			* ... the current scroll position is greater than the window height (below-the-fold) and when
 			* ... scrolling up
 			*/
-			this._showButton = window.scrollY > window.innerHeight && !this._scrollDown;
-			this._prevYPos = window.scrollY;
+			this.showButton = window.scrollY > window.innerHeight && !this.hasScrolledDown;
+			this.prevYPos = window.scrollY;
 		};
 	}
 	static {
@@ -94,14 +94,14 @@ var LeuScrollTop = class LeuScrollTop extends LeuElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._scrollListener = throttle(this.scroll, 100);
-		document.addEventListener("scroll", this._scrollListener, true);
+		this.scrollListener = throttle(this.scroll, 100);
+		document.addEventListener("scroll", this.scrollListener, true);
 	}
 	disconnectedCallback() {
-		document.removeEventListener("scroll", this._scrollListener, true);
+		document.removeEventListener("scroll", this.scrollListener, true);
 		super.disconnectedCallback();
 	}
-	static scrollToTop() {
+	scrollToTop() {
 		window.scrollTo({
 			top: 0,
 			left: 0,
@@ -112,12 +112,12 @@ var LeuScrollTop = class LeuScrollTop extends LeuElement {
 		return html`
       <div class=${classMap({
 			"scroll-top": true,
-			hide: !this._showButton
+			hide: !this.showButton
 		})}>
         <leu-button
           label="Zum Seitenanfang"
           round
-          @click="${() => LeuScrollTop.scrollToTop()}"
+          @click="${() => this.scrollToTop()}"
         >
           <leu-icon name="arrowUp"></leu-icon>
         </leu-button>
@@ -125,6 +125,6 @@ var LeuScrollTop = class LeuScrollTop extends LeuElement {
     `;
 	}
 };
-__decorate([state()], LeuScrollTop.prototype, "_showButton", void 0);
+__decorate([state()], LeuScrollTop.prototype, "showButton", void 0);
 //#endregion
 export { LeuScrollTop as t };

package/dist/ScrollTop.d.ts

@@ -13,14 +13,14 @@ declare class LeuScrollTop extends LeuElement {
     "leu-icon": typeof LeuIcon;
   };
   static styles: any[];
-  protected _showButton: boolean;
-  protected _prevYPos: number;
-  protected _scrollDown: boolean;
-  protected _scrollListener: EventListener;
+  protected showButton: boolean;
+  protected prevYPos: number;
+  protected hasScrolledDown: boolean;
+  protected scrollListener: EventListener;
   scroll: () => void;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  static scrollToTop(): void;
+  scrollToTop(): void;
   render(): lit_html0.TemplateResult<1>;
 }
 //#endregion

package/dist/ScrollTop.js

@@ -1,7 +1,7 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Icon-C_yYuynf.js";
-import "./Spinner-DDTqijTO.js";
-import "./Button-BkhqVjug.js";
+import "./LeuElement-k4RjIeoG.js";
+import "./Icon-CbZXpyHU.js";
+import "./Spinner-VhKfzI3Q.js";
+import "./Button-BSyDL_cV.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuScrollTop } from "./ScrollTop-BFAqBVDR.js";
+import { t as LeuScrollTop } from "./ScrollTop-CJJsfniA.js";
 export { LeuScrollTop };

package/dist/{Select-vxl3BvD4.js → Select-CxEDXIBn.js}

@@ -1,12 +1,15 @@
-import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
-import { t as LeuIcon } from "./Icon-C_yYuynf.js";
+import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-CbZXpyHU.js";
 import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
-import { t as LeuButton } from "./Button-BkhqVjug.js";
-import { t as LeuMenuItem } from "./MenuItem-DVg8-1Bq.js";
-import { t as LeuMenu } from "./Menu-BeqqtCw6.js";
-import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
-import { t as LeuInput } from "./Input-DEOVocTa.js";
+import { t as LeuButton } from "./Button-BSyDL_cV.js";
+import { t as FormAssociatedMixin } from "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuMenuItem } from "./MenuItem-Cs3KFhJm.js";
+import { t as LeuMenu } from "./Menu-Cu8eIF1T.js";
+import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
+import { t as LeuInput } from "./Input-DBXX7ev8.js";
 import { css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -107,6 +110,10 @@ var select_default = css`:host {
   font-family: var(--select-font-regular);
 }
 
+:host([required]) .label::after {
+  content: "*";
+}
+
 .clear-button {
   --_length: 1.5rem;
 
@@ -248,17 +255,33 @@ var select_default = css`:host {
 * @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 {
+var LeuSelect = class extends FormAssociatedMixin(LeuElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.defaultValue = [];
+		this.clearable = false;
+		this.filterable = false;
+		this.multiple = false;
+		this.required = false;
+		this.open = false;
+		this._optionFilter = "";
+		this._hasFilterResults = true;
+		this._displayValue = "";
+		this._deferedChangeEvent = false;
+		this._optionFilterRef = createRef();
+		this._toggleButtonRef = createRef();
+		this._menuRef = createRef();
+		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();
+		};
+	}
 	static {
 		this.dependencies = {
 			"leu-button": LeuButton,
@@ -272,90 +295,49 @@ var LeuSelect = class extends LeuElement {
 	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 {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
 		};
 	}
+	/**
+	* List of selected values. If they're set from outside the component, the select element
+	* finds all the options that match the given values and selects them.
+	*/
+	set value(value) {
+		/**
+		* @todo Check if all of the value items are actually present in the options
+		*/
+		this._value = value;
+	}
+	get value() {
+		return this._value ?? this.defaultValue;
+	}
 	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 */
+	setFormValue() {
+		const isEmpty = this.value.length === 0 || !this.value.some((v) => v !== "");
+		if (isEmpty || this.disabled) this.internals.setFormValue(null);
+		else if (this.multiple) {
+			const formData = new FormData();
+			this.value.forEach((v) => formData.append(this.name ?? "", v));
+			this.internals.setFormValue(formData);
+		} else this.internals.setFormValue(this.value[0]);
+		if (this.required && isEmpty) this.internals.setValidity({ valueMissing: true }, "Bitte wählen Sie eine Option aus.");
+		else this.internals.setValidity({});
+	}
+	formResetCallback() {
+		super.formResetCallback();
+		this.value = this.defaultValue;
 		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();
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("defaultValue") && !changedProperties.has("value") && !this.hasInteracted) this.value = this.defaultValue;
+		if (changedProperties.has("value") || changedProperties.has("defaultValue") || changedProperties.has("name") || changedProperties.has("disabled") || changedProperties.has("required")) this.setFormValue();
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -375,13 +357,15 @@ var LeuSelect = class extends LeuElement {
 			multiple: changedProperties.has("multiple")
 		});
 	}
+	click() {
+		this._toggleButtonRef.value?.click();
+	}
 	/**
 	* 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();
@@ -418,7 +402,6 @@ var LeuSelect = class extends LeuElement {
 	}
 	/**
 	* @internal
-	* @param {KeyboardEvent} event
 	*/
 	async _handleToggleKeyDown(event) {
 		if ([
@@ -437,7 +420,6 @@ var LeuSelect = class extends LeuElement {
 	}
 	/**
 	* @internal
-	* @param {KeyboardEvent} event
 	*/
 	_handleFilterInputKeyDown(event) {
 		if (event.key === "ArrowDown") this._menuRef.value.focusItem(0);
@@ -445,7 +427,6 @@ var LeuSelect = class extends LeuElement {
 	}
 	/**
 	* 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`;
@@ -468,6 +449,7 @@ var LeuSelect = class extends LeuElement {
 	_clearValue(event) {
 		if (!this.disabled) {
 			event.stopPropagation();
+			this.hasInteracted = true;
 			this.value = [];
 		}
 		this._emitInputEvent();
@@ -488,18 +470,16 @@ var LeuSelect = class extends LeuElement {
 	}
 	/**
 	* 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);
+		this.hasInteracted = true;
 		if (this.multiple) {
 			this.value = isSelected ? this.value.filter((v) => v !== value) : this.value.concat(value);
 			this._deferedChangeEvent = true;
@@ -574,45 +554,85 @@ var LeuSelect = class extends LeuElement {
 	}
 	render() {
 		return html`<div
-        class=${classMap({
+      class=${classMap({
 			select: true,
 			"select--has-before": this.hasSlotController.test("before"),
 			"select--has-after": this.hasSlotController.test("after")
 		})}
-        @keydown=${this._handleKeyDown}
+      @keydown=${this._handleKeyDown}
+    >
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <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(",")} />`;
+        ${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>`;
 	}
 };
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuSelect.prototype, "label", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "value",
+	converter: {
+		fromAttribute(value) {
+			if (value) return value.split(",").map((v) => v.trim());
+			return [];
+		},
+		toAttribute(value) {
+			return value.length > 0 ? value.join(",") : null;
+		}
+	}
+})], LeuSelect.prototype, "defaultValue", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], LeuSelect.prototype, "value", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuSelect.prototype, "clearable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuSelect.prototype, "filterable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuSelect.prototype, "multiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuSelect.prototype, "required", void 0);
+__decorate([state()], LeuSelect.prototype, "open", void 0);
+__decorate([state()], LeuSelect.prototype, "_optionFilter", void 0);
+__decorate([state()], LeuSelect.prototype, "_hasFilterResults", void 0);
+__decorate([state()], LeuSelect.prototype, "_displayValue", void 0);
 //#endregion
 export { LeuSelect as t };