@statistikzh/leu 0.22.0 → 0.23.0

package/dist/Input.js

@@ -1,12 +1,12 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { property, state } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuIcon } from './Icon.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
 
 var css_248z = css`:host {
   --input-color: var(--leu-color-black-100);
@@ -303,57 +303,45 @@ const VALIDATION_MESSAGES = {
 /**
  * A text input element.
  *
- * @prop {boolean} disabled - Disables the input element.
- * @prop {boolean} required - Marks the input element as required.
- * @prop {boolean} clearable - Adds a button to clear the input element.
- * @prop {string} value - The value of the input element.
- * @prop {string} name - The name of the input element.
- * @prop {string} label - The label of the input element.
- * @prop {string} error - A custom error that is completely independent of the validity state. Useful for displaying server side errors.
- * @prop {string} size - The size of the input element.
- * @prop {string} icon - The icon that is displayed at the end of the input element.
- * @prop {string} prefix - A prefix that relates to the value of the input (e.g. CHF).
- * @prop {string} suffix - A suffix that relates to the value of the input (e.g. mm).
- * @prop {string} pattern - A regular expression that the value is checked against.
- * @prop {string} type - The type of the input element.
- * @prop {string} min - The minimum value of the input element.
- * @prop {string} max - The maximum value of the input element.
- * @prop {string} minlength - The minimum length of the input element.
- * @prop {string} maxlength - The maximum length of the input element.
- * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
- * @prop {boolean} novalidate - Disables the browser's validation.
- * @prop {string} step - The step value of the input element.
- *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
  *
  * @tagname leu-input
  */
 class LeuInput extends LeuElement {
-    static resolveErrorMessage(message, refernceValue) {
-        if (typeof message === "function") {
-            return message(refernceValue);
-        }
-        return message;
-    }
     constructor() {
-        super();
+        super(...arguments);
+        /** Disables the input element. */
         this.disabled = false;
+        /** Marks the input element as required */
         this.required = false;
+        /** Adds a button to clear the input element */
         this.clearable = false;
-        /** @type {"small" | "regular"} */
-        this.size = SIZES.REGULAR;
+        /** The value of the input element. */
+        this.value = "";
+        /** The name of the input element. */
+        this.name = "";
+        /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
+        this.error = "";
+        /** The label of the input element */
+        this.label = "";
+        /** The size of the input element */
+        this.size = "regular";
+        /** The type of the input element. */
         this.type = "text";
-        this._validity = null;
+        /** Custom validation messages. The key is the name of the validity state and the value is the message. */
         this.validationMessages = {};
+        /** Disables the browser's validation. */
         this.novalidate = false;
-        this.value = "";
-        /**
-         * @internal
-         * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
-         */
+        this._validity = null;
         this._inputRef = createRef();
     }
+    static resolveErrorMessage(message, refernceValue) {
+        if (typeof message === "function") {
+            return message(refernceValue);
+        }
+        return message;
+    }
     get valueAsNumber() {
         if (this.value === "") {
             return NaN;
@@ -367,9 +355,6 @@ class LeuInput extends LeuElement {
      * looks like the input element. But the actual input field does not
      * completely fill the wrapper element. Keyboard events don't need to be
      * handled because the actual input element is focusable.
-     * @private
-     * @param {MouseEvent|PointerEvent} event
-     * @returns {void}
      */
     handleWrapperClick(event) {
         if (event.target === event.currentTarget) {
@@ -379,9 +364,6 @@ class LeuInput extends LeuElement {
     /**
      * Method for handling the blur event of the input element.
      * Checks validity of the input element and sets the validity state.
-     * @private
-     * @param {FocusEvent & {target: HTMLInputElement}} event
-     * @returns {void}
      */
     handleBlur(event) {
         this._validity = null;
@@ -392,9 +374,6 @@ class LeuInput extends LeuElement {
     /**
      * Method for handling the invalid event of the input element.
      * Sets the validity state.
-     * @private
-     * @param {Event} event
-     * @returns {void}
      */
     handleInvalid(event) {
         this._validity = event.target.validity;
@@ -403,10 +382,7 @@ class LeuInput extends LeuElement {
      * Method for handling the change event of the input element.
      * Sets the value property and dispatches a change event so that
      * the event can be handled outside the shadow DOM.
-     * @private
-     * @param {Event} event
      * @fires {CustomEvent} change
-     * @returns {void}
      */
     handleChange(event) {
         if (event.target.validity.valid) {
@@ -419,9 +395,6 @@ class LeuInput extends LeuElement {
      * Method for handling the input event of the input element.
      * Sets the value property and dispatches an input event so that
      * the event can be handled outside the shadow DOM.
-     * @private
-     * @param {Event} event
-     * @returns {void}
      */
     handleInput(event) {
         this.value = event.target.value;
@@ -435,8 +408,6 @@ class LeuInput extends LeuElement {
      * Method for clearing the input element.
      * Sets the value property to an empty string and dispatches
      * an input and a change event.
-     * @private
-     * @returns {void}
      * @fires {CustomEvent} input
      * @fires {CustomEvent} change
      */
@@ -454,8 +425,6 @@ class LeuInput extends LeuElement {
      * e.g.
      * `tooLong(this.maxlength)`
      * This way the framework user can create reasonable validation messages
-     *
-     * @returns {Object} validationMessages
      */
     getValidationMessages() {
         const validationMessages = {
@@ -479,14 +448,12 @@ class LeuInput extends LeuElement {
     }
     /**
      * Check input validation
-     * @returns {boolean} if valid or not
      */
     checkValidity() {
         return this._inputRef.value?.checkValidity() ?? false;
     }
     /**
      * Creates an error list with an item for the given validity state.
-     * @returns {import("lit").TemplateResult | nothing}
      */
     renderErrorMessages() {
         if (!this.isInvalid()) {
@@ -495,7 +462,7 @@ class LeuInput extends LeuElement {
         const validationMessages = this.getValidationMessages();
         let errorMessages = this._validity
             ? Object.entries(validationMessages)
-                .filter(([property]) => this._validity[property])
+                .filter(([prop]) => this._validity[prop])
                 .map(([_, message]) => message)
             : [];
         if (this.error !== "") {
@@ -510,9 +477,6 @@ class LeuInput extends LeuElement {
     /**
      * Determines the content that is displayed after the input element.
      * This can be either an icon, a clear button or an error indicator icon.
-     *
-     * @private
-     * @returns {import("lit").TemplateResult | nothing}
      */
     renderAfterContent() {
         if (this.isInvalid()) {
@@ -596,29 +560,68 @@ LeuInput.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuInput.properties = {
-    disabled: { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    clearable: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-    name: { type: String, reflect: true },
-    error: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-    prefix: { type: String, reflect: true },
-    suffix: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    icon: { type: String, reflect: true },
-    /* Validation attributes */
-    pattern: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    min: { type: String, reflect: true },
-    max: { type: String, reflect: true },
-    maxlength: { type: String, reflect: true },
-    minlength: { type: String, reflect: true },
-    validationMessages: { type: Object },
-    novalidate: { type: Boolean, reflect: true },
-    step: { type: String, reflect: true },
-    _validity: { state: true },
-};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuInput.prototype, "clearable", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "error", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "prefix", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "suffix", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuInput.prototype, "type", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuInput.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuInput.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Object })
+], LeuInput.prototype, "validationMessages", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuInput.prototype, "novalidate", void 0);
+__decorate([
+    state()
+], LeuInput.prototype, "_validity", void 0);
 
 export { LeuInput, SIZES };

package/dist/{LeuElement-BooZrClI.js → LeuElement-CWseJvWv.js}

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.22.0";
+LeuElement.version = "0.23.0";
 LeuElement.dependencies = {};
 LeuElement.styles = css_248z;
 

package/dist/Menu.d.ts

@@ -3,7 +3,7 @@ import * as lit from 'lit';
 import { PropertyValues } from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { LeuMenuItem } from './MenuItem.js';
-import './Icon.js';
+import './Icon.d-itcQ94ym.js';
 
 /**
  * @typedef {'single' | 'multiple' | 'none'} SelectsType
@@ -22,13 +22,7 @@ declare class LeuMenu extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
-    static properties: {
-        selects: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    selects: "single" | "multiple" | "none";
     connectedCallback(): void;
     disconnectedCallback(): void;
     _handleSlotChange(): void;

package/dist/Menu.js

@@ -1,10 +1,10 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
 
 var css_248z = css`:host {
   --menu-divider-color: var(--leu-color-black-transp-20);
@@ -37,10 +37,8 @@ var css_248z = css`:host {
  */
 class LeuMenu extends LeuElement {
     constructor() {
-        super();
-        /** @type {SelectsType} */
+        super(...arguments);
         this.selects = "none";
-        this.value = undefined;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -153,8 +151,8 @@ LeuMenu.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuMenu.properties = {
-    selects: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMenu.prototype, "selects", void 0);
 
 export { LeuMenu };

package/dist/MenuItem.d.ts

@@ -1,22 +1,13 @@
-import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { nothing } from 'lit';
+import { TemplateResult, nothing } from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
+import 'lit-html';
 
-/**
- * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
- */
+type MenuItemRole = "menuitem" | "menuitemcheckbox" | "menuitemradio" | "option" | "none";
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
- * @property {boolean} active - Defines if the item is selected or checked
- * @property {boolean} multipleSelection - If the item is part of a multiple selection. Renders a checkmark before the label when active
- * @property {boolean} disabled - Disables the underlying button or link
- * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
- * @property {string} href - The href of the underlying link
- * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
- * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
 declare class LeuMenuItem extends LeuElement {
     static dependencies: {
@@ -34,59 +25,40 @@ declare class LeuMenuItem extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
-    static properties: {
-        active: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        multipleSelection: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attr: string;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        tabbable: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        href: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        componentRole: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
+    /** Defines if the item is selected or checked */
+    active: boolean;
+    /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+    multipleSelection: boolean;
+    /** Disables the underlying button or link */
+    disabled: boolean;
+    /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
+    tabbable: boolean;
+    /** The href of the underlying link */
+    href: string;
+    /** The value of the item. It must not contain commas. See `getValue()` */
+    value: string;
+    /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
+    componentRole: MenuItemRole;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    _handleClick(event: any): void;
+    protected _handleClick(event: MouseEvent): void;
     /**
      * Returns the value of the item. If `value` is not set, it will return the inner text
-     * @returns {string}
      */
-    getValue(): any;
-    _getAria(): {
-        disabled: any;
+    getValue(): string;
+    protected _getAria(): {
+        disabled: boolean;
     } | {
-        checked: any;
-        selected: any;
-        role: any;
-        disabled: any;
+        checked: boolean;
+        selected: boolean;
+        role: "option" | "menuitem" | "menuitemcheckbox" | "menuitemradio";
+        disabled: boolean;
     };
-    _getTabIndex(): 0 | -1;
-    _renderLink(content: any): lit_html.TemplateResult<1>;
-    _renderButton(content: any): lit_html.TemplateResult<1>;
-    _renderBeforeSlotDefault(): typeof nothing | lit_html.TemplateResult<1>;
-    render(): lit_html.TemplateResult<1>;
+    protected _getTabIndex(): 0 | -1;
+    protected _renderLink(content: TemplateResult): TemplateResult<1>;
+    protected _renderButton(content: TemplateResult): TemplateResult<1>;
+    _renderBeforeSlotDefault(): typeof nothing | TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 
 export { LeuMenuItem };

package/dist/MenuItem.js

@@ -1,9 +1,9 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuIcon } from './Icon.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
 
 var css_248z = css`:host {
   --background: var(--leu-color-black-0);
@@ -88,30 +88,20 @@ var css_248z = css`:host {
 }
 `;
 
-/**
- * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
- */
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
- * @property {boolean} active - Defines if the item is selected or checked
- * @property {boolean} multipleSelection - If the item is part of a multiple selection. Renders a checkmark before the label when active
- * @property {boolean} disabled - Disables the underlying button or link
- * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
- * @property {string} href - The href of the underlying link
- * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
- * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
 class LeuMenuItem extends LeuElement {
     constructor() {
-        super();
+        super(...arguments);
+        /** Defines if the item is selected or checked */
         this.active = false;
-        this.disabled = false;
+        /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
         this.multipleSelection = false;
-        this.value = undefined;
-        this.href = undefined;
-        this.tabbable = undefined;
-        /** @type {MenuItemRole} */
+        /** Disables the underlying button or link */
+        this.disabled = false;
+        /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
         this.componentRole = "menuitem";
     }
     connectedCallback() {
@@ -130,7 +120,6 @@ class LeuMenuItem extends LeuElement {
     }
     /**
      * Returns the value of the item. If `value` is not set, it will return the inner text
-     * @returns {string}
      */
     getValue() {
         return this.value || this.textContent.trim();
@@ -214,18 +203,26 @@ LeuMenuItem.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuMenuItem.properties = {
-    active: { type: Boolean, reflect: true },
-    multipleSelection: {
-        type: Boolean,
-        reflect: true,
-        attr: "multiple-selection",
-    },
-    disabled: { type: Boolean, reflect: true },
-    tabbable: { type: Boolean, reflect: true },
-    href: { type: String, reflect: true },
-    value: { type: String, reflect: true },
-    componentRole: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMenuItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMenuItem.prototype, "multipleSelection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMenuItem.prototype, "tabbable", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMenuItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMenuItem.prototype, "componentRole", void 0);
 
 export { LeuMenuItem };

package/dist/Message.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 
 /**
  * @tagname leu-message

package/dist/Message.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuIcon } from './Icon.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 

package/dist/Pagination.d.ts

@@ -3,7 +3,7 @@ import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 
 /**
  * @tagname leu-pagination

package/dist/Pagination.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
 import { property, state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';

package/dist/Placeholder.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BooZrClI.js';
+import { L as LeuElement } from './LeuElement-CWseJvWv.js';
 
 var css_248z = css`:host {
   --placeholder-font-regular: var(--leu-font-family-regular);

package/dist/Popup.d.ts

@@ -28,6 +28,22 @@ declare class LeuPopup extends LeuElement {
     shift: boolean;
     shiftPadding: number;
     matchSize?: "width" | "height" | "both";
+    /**
+     * Offsets the popup along the main axis.
+     * @link https://floating-ui.com/docs/offset#mainaxis
+     */
+    offsetMainAxis?: number;
+    /**
+     * Offsets the popup along the cross axis.
+     * @link https://floating-ui.com/docs/offset#crossaxis
+     */
+    offsetCrossAxis?: number;
+    /**
+     * Offsets the popup along the alignment axis.
+     * Overrides the `offsetCrossAxis` value.
+     * @link https://floating-ui.com/docs/offset#alignmentaxis
+     */
+    offsetAlignmentAxis?: number;
     autoSize?: "width" | "height" | "both";
     autoSizePadding: number;
     private anchorEl;