@statistikzh/leu 0.14.3 → 0.15.0

package/dist/RadioGroup.d.ts

@@ -1,20 +1,43 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
+ * @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
  */
-export class LeuRadioGroup extends LeuElement {
-    _currentIndex: number;
-    orientation: string;
-    items: any[];
-    get value(): any;
-    addEventListeners(): void;
-    removeEventListeners(): void;
-    handleSlotChange(): void;
-    selectItem(selectingItem: any): void;
-    selectNextItem(startingIndex: any, direction: any): void;
-    setTabIndex(): void;
-    handleItems(): void;
-    initializeIndex(): void;
-    render(): import("lit-html").TemplateResult<1>;
+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>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=RadioGroup.d.ts.map
+
+export { LeuRadioGroup };

package/dist/RadioGroup.js

@@ -1,6 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+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-BhAmogDy.js';
+import { LeuRadio } from './Radio.js';
 
 var css_248z = css`:host {
   --group-font-regular: var(--leu-font-family-regular);
@@ -34,142 +37,147 @@ var css_248z = css`:host {
 `;
 
 /**
+ * @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();
-    /** @type {"horizontal" | "vertical"} */
-    _defineProperty(this, "handleFocusIn", e => {
-      this._currentIndex = this.items.indexOf(e.target);
-    });
-    _defineProperty(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();
-    });
-    _defineProperty(this, "handleInput", e => {
-      this.items.forEach(item => {
-        item.checked = item === e.target; // eslint-disable-line no-param-reassign
-      });
-    });
-    this.orientation = "horizontal";
-    this._currentIndex = 0;
-    this.items = [];
-  }
-  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;
-      }
+    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
+            });
+        };
     }
-  }
-  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])"));
-    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`
+    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>
     `;
-  }
+    }
 }
-_defineProperty(LeuRadioGroup, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuRadioGroup, "properties", {
-  orientation: {
-    type: String,
-    reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
-  }
-});
+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);
 
 export { LeuRadioGroup };

package/dist/Range.d.ts

@@ -1,60 +1,99 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @tagname leu-range
  */
-export class LeuRange extends LeuElement {
-    defaultValue: number[];
-    min: number;
-    max: number;
-    step: number;
-    name: string;
-    label: string;
-    disabled: boolean;
-    multiple: boolean;
+declare class LeuRange extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static properties: {
+        defaultValue: {
+            converter: {
+                fromAttribute(value: any): any;
+                toAttribute(value: any): any;
+            };
+            attribute: string;
+        };
+        min: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        step: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
     updated(): void;
     _updateStyles(): void;
+    get value(): string;
     /**
      * Sets the value of the underlying input element(s).
      * The value has to be an array if "multiple" range is used.
      * Otherwise it has to be a string.
      * @param {string | Array} value
      */
-    set value(value: string | any[]);
-    get value(): string | any[];
+    set value(value: string);
     get valueAsArray(): number[];
     get valueLow(): string | number;
     get valueHigh(): string | number;
     /**
      * @returns {HTMLInputElement | null}
      */
-    _getBaseInput(): HTMLInputElement | null;
+    _getBaseInput(): Element;
     /**
      * @returns {HTMLInputElement | null}
      */
-    _getGhostInput(): HTMLInputElement | null;
+    _getGhostInput(): Element;
     /**
      *
      * @param {number} _index
      * @param {InputEvent & {target: HTMLInputElement}} _e
      */
-    _handleInput(_index: number, _e: InputEvent & {
-        target: HTMLInputElement;
-    }): void;
+    _handleInput(_index: any, _e: any): void;
     /**
      *
      * @param {number} value
      * @returns {number}
      */
-    _getNormalizedValue(value: number): number;
+    _getNormalizedValue(value: any): number;
     _getNormalizedRange(): number[];
     /**
      * Determine if the "click" (pointer event) is closer the
      * the value of the other input element. Swap the values if this is the case.
      * @param {PointerEvent & {target: HTMLInputElement}} e
      */
-    _handlePointerDown(e: PointerEvent & {
-        target: HTMLInputElement;
-    }): void;
-    render(): import("lit-html").TemplateResult<1>;
+    _handlePointerDown(e: any): void;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Range.d.ts.map
+
+export { LeuRange };