@statistikzh/leu 0.24.1 → 0.25.0

package/dist/RadioGroup-CgEWQnC4.js

@@ -0,0 +1,171 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuRadio } from "./Radio-CX8aCsff.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/components/radio/radio-group.css?inline
+var radio_group_default = css`:host {
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-black);
+
+  font-family: var(--group-font-regular);
+}
+
+.fieldset {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+
+  border: none;
+  padding: 0;
+}
+
+.fieldset--vertical {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.legend {
+  font-family: var(--group-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  margin-bottom: 0.5rem;
+}
+`;
+//#endregion
+//#region src/components/radio/RadioGroup.ts
+/**
+* @summary Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
+* @slot - Place the radio buttons inside the default slot.
+* @tagname leu-radio-group
+*/
+var LeuRadioGroup = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "horizontal";
+		this.currentIndex = 0;
+		this.items = [];
+		this.handleFocusIn = (e) => {
+			this.currentIndex = this.items.indexOf(e.target);
+		};
+		this.handleKeyDown = (e) => {
+			const currentIndex = this.items.indexOf(e.target);
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowLeft":
+					this.selectNextItem(currentIndex, -1);
+					break;
+				case "ArrowDown":
+				case "ArrowRight":
+					this.selectNextItem(currentIndex, 1);
+					break;
+				case "Home":
+					this.selectItem(this.items.find((item) => !item.disabled));
+					break;
+				case "End":
+					this.selectItem(this.items.findLast((item) => !item.disabled));
+					break;
+				default:
+			}
+			this.setTabIndex();
+		};
+		this.handleInput = (e) => {
+			this.items.forEach((item) => {
+				item.checked = item === e.target;
+			});
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, radio_group_default];
+	}
+	get value() {
+		const checkedValues = this.items.filter((i) => i.checked).map((i) => i.value);
+		return checkedValues.length > 0 ? checkedValues[0] : "";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.handleItems();
+		this.addEventListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListeners();
+	}
+	addEventListeners() {
+		/**
+		* It is technically possible to add an event listener to the host element
+		* before it is connected to the dom. In that case the outside event listener would
+		* be called before the following event listener. But at this point multiple
+		* radio buttons could be selected at the same time because `handleInput` hasn't been
+		* called yet. That's why we use the capture phase.
+		*/
+		this.addEventListener("input", this.handleInput, { capture: true });
+		this.addEventListener("focusin", this.handleFocusIn);
+		this.addEventListener("keydown", this.handleKeyDown);
+	}
+	removeEventListeners() {
+		this.removeEventListener("input", this.handleInput, { capture: true });
+		this.removeEventListener("focusin", this.handleFocusIn);
+		this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	handleSlotChange() {
+		this.handleItems();
+	}
+	selectItem(selectingItem) {
+		this.items.forEach((item) => {
+			item.checked = item === selectingItem;
+		});
+	}
+	selectNextItem(startingIndex, direction) {
+		let selected = false;
+		for (let index = 0; index < this.items.length; index += 1) {
+			const currentIndex = (this.items.length + index * direction + startingIndex + direction) % this.items.length;
+			const currentItem = this.items[currentIndex];
+			if (!selected && !currentItem.disabled) {
+				currentItem.checked = true;
+				currentItem.focus();
+				selected = true;
+			} else if (selected) currentItem.checked = false;
+		}
+	}
+	setTabIndex() {
+		this.items.forEach((item, index) => {
+			if (index === this.currentIndex) item.tabIndex = 0;
+			else item.tabIndex = -1;
+		});
+	}
+	handleItems() {
+		this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuRadio);
+		this.initializeIndex();
+		this.setTabIndex();
+	}
+	initializeIndex() {
+		const index = this.items.findIndex((item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"));
+		const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute("disabled"));
+		this.currentIndex = index >= 0 ? index : nextEnabledIndex;
+	}
+	render() {
+		return html`
+      <fieldset class=${classMap({
+			fieldset: "true",
+			"fieldset--vertical": this.orientation === "vertical"
+		})}>
+        <legend class="legend">${this.label}</legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRadioGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRadioGroup.prototype, "label", void 0);
+//#endregion
+export { LeuRadioGroup as t };

package/dist/RadioGroup.d.ts

@@ -1,43 +1,43 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/radio/RadioGroup.d.ts
 /**
  * @summary Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
  * @slot - Place the radio buttons inside the default slot.
  * @tagname leu-radio-group
  */
 declare class LeuRadioGroup extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /**
-     * Defines how the radio buttons should be aligned.
-     */
-    orientation: "horizontal" | "vertical";
-    /**
-     * The label of the radio group
-     */
-    label?: string;
-    /**
-     * Index of the radio button that would be focused
-     * when the focus moves into the group.
-     */
-    private currentIndex;
-    private items;
-    get value(): string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private addEventListeners;
-    private removeEventListeners;
-    private handleSlotChange;
-    private handleFocusIn;
-    private handleKeyDown;
-    private handleInput;
-    private selectItem;
-    private selectNextItem;
-    private setTabIndex;
-    private handleItems;
-    private initializeIndex;
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  /**
+   * Defines how the radio buttons should be aligned.
+   */
+  orientation: "horizontal" | "vertical";
+  /**
+   * The label of the radio group
+   */
+  label?: string;
+  /**
+   * Index of the radio button that would be focused
+   * when the focus moves into the group.
+   */
+  private currentIndex;
+  private items;
+  get value(): string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private addEventListeners;
+  private removeEventListeners;
+  private handleSlotChange;
+  private handleFocusIn;
+  private handleKeyDown;
+  private handleInput;
+  private selectItem;
+  private selectNextItem;
+  private setTabIndex;
+  private handleItems;
+  private initializeIndex;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuRadioGroup };
+//#endregion
+export { LeuRadioGroup };

package/dist/RadioGroup.js

@@ -1,183 +1,4 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-import { LeuRadio } from './Radio.js';
-
-var css_248z = css`:host {
-  --group-font-regular: var(--leu-font-family-regular);
-  --group-font-black: var(--leu-font-family-black);
-
-  font-family: var(--group-font-regular);
-}
-
-.fieldset {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-
-  border: none;
-  padding: 0;
-}
-
-.fieldset--vertical {
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.legend {
-  font-family: var(--group-font-black);
-  font-size: 1.125rem;
-  line-height: 1.5;
-
-  margin-bottom: 0.5rem;
-}
-`;
-
-/**
- * @summary Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
- * @slot - Place the radio buttons inside the default slot.
- * @tagname leu-radio-group
- */
-class LeuRadioGroup extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines how the radio buttons should be aligned.
-         */
-        this.orientation = "horizontal";
-        /**
-         * Index of the radio button that would be focused
-         * when the focus moves into the group.
-         */
-        this.currentIndex = 0;
-        this.items = [];
-        this.handleFocusIn = (e) => {
-            this.currentIndex = this.items.indexOf(e.target);
-        };
-        this.handleKeyDown = (e) => {
-            const currentIndex = this.items.indexOf(e.target);
-            switch (e.key) {
-                case "ArrowUp":
-                case "ArrowLeft":
-                    this.selectNextItem(currentIndex, -1);
-                    break;
-                case "ArrowDown":
-                case "ArrowRight":
-                    this.selectNextItem(currentIndex, 1);
-                    break;
-                case "Home":
-                    this.selectItem(this.items.find((item) => !item.disabled));
-                    break;
-                case "End":
-                    this.selectItem(this.items.findLast((item) => !item.disabled));
-                    break;
-            }
-            this.setTabIndex();
-        };
-        this.handleInput = (e) => {
-            this.items.forEach((item) => {
-                item.checked = item === e.target; // eslint-disable-line no-param-reassign
-            });
-        };
-    }
-    get value() {
-        const checkedValues = this.items
-            .filter((i) => i.checked)
-            .map((i) => i.value);
-        return checkedValues.length > 0 ? checkedValues[0] : "";
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleItems();
-        this.addEventListeners();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListeners();
-    }
-    addEventListeners() {
-        /**
-         * It is technically possible to add an event listener to the host element
-         * before it is connected to the dom. In that case the outside event listener would
-         * be called before the following event listener. But at this point multiple
-         * radio buttons could be selected at the same time because `handleInput` hasn't been
-         * called yet. That's why we use the capture phase.
-         */
-        this.addEventListener("input", this.handleInput, { capture: true });
-        this.addEventListener("focusin", this.handleFocusIn);
-        this.addEventListener("keydown", this.handleKeyDown);
-    }
-    removeEventListeners() {
-        this.removeEventListener("input", this.handleInput, { capture: true });
-        this.removeEventListener("focusin", this.handleFocusIn);
-        this.removeEventListener("keydown", this.handleKeyDown);
-    }
-    handleSlotChange() {
-        this.handleItems();
-    }
-    selectItem(selectingItem) {
-        this.items.forEach((item) => {
-            item.checked = item === selectingItem; // eslint-disable-line no-param-reassign
-        });
-    }
-    selectNextItem(startingIndex, direction) {
-        let selected = false;
-        for (let index = 0; index < this.items.length; index += 1) {
-            const currentIndex = (this.items.length + index * direction + startingIndex + direction) %
-                this.items.length;
-            const currentItem = this.items[currentIndex];
-            if (!selected && !currentItem.disabled) {
-                currentItem.checked = true;
-                currentItem.focus();
-                selected = true;
-            }
-            else if (selected) {
-                currentItem.checked = false;
-            }
-        }
-    }
-    setTabIndex() {
-        this.items.forEach((item, index) => {
-            if (index === this.currentIndex) {
-                item.tabIndex = 0; // eslint-disable-line no-param-reassign
-            }
-            else {
-                item.tabIndex = -1; // eslint-disable-line no-param-reassign
-            }
-        });
-    }
-    handleItems() {
-        this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuRadio);
-        this.initializeIndex();
-        this.setTabIndex();
-    }
-    initializeIndex() {
-        const index = this.items.findIndex((item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"));
-        const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute("disabled"));
-        this.currentIndex = index >= 0 ? index : nextEnabledIndex;
-    }
-    render() {
-        const fieldsetClasses = {
-            fieldset: "true",
-            "fieldset--vertical": this.orientation === "vertical",
-        };
-        return html `
-      <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend">${this.label}</legend>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </fieldset>
-    `;
-    }
-}
-LeuRadioGroup.styles = [LeuElement.styles, css_248z];
-__decorate([
-    property({ type: String, reflect: true })
-], LeuRadioGroup.prototype, "orientation", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuRadioGroup.prototype, "label", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Radio-CX8aCsff.js";
+import { t as LeuRadioGroup } from "./RadioGroup-CgEWQnC4.js";
 export { LeuRadioGroup };