@statistikzh/leu 0.21.1 → 0.22.1

package/dist/ChipSelectable.d.ts

@@ -3,54 +3,31 @@ import { LeuChipBase } from './Chip.js';
 import 'lit';
 import './LeuElement.d-BevHqLUu.js';
 
-declare const SIZES: {
-    small: string;
-    regular: string;
-};
-declare const VARIANTS: {
-    toggle: string;
-    radio: string;
-};
 /**
  * A chip component that can be selected.
  * @tagname leu-chip-selectable
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
- * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
- * @prop {boolean} checked - Whether the chip is selected.
- * @prop {string} value - The value of the chip.
  */
 declare class LeuChipSelectable extends LeuChipBase {
-    static properties: {
-        size: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        checked: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        inverted: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
+    /** The size of the chip. Has no effect when variant is "radio" */
+    size: "small" | "regular";
+    /**
+     * The variant of the chip. Determines if only one or multiple chips can be selected.
+     * @default "toggle"
+     */
+    variant: "toggle" | "radio";
+    /** Whether the chip is selected */
+    checked: boolean;
+    /** The value of the chip */
+    value: string;
     constructor();
-    handleClick(): void;
+    protected handleClick(): void;
     /**
      * Returns the value of the chip. If `value` is not set, it will return the text content
      * @returns {string}
      */
-    getValue(): any;
+    getValue(): string;
     render(): lit_html.TemplateResult<1>;
 }
 
-export { LeuChipSelectable, SIZES, VARIANTS };
+export { LeuChipSelectable };

package/dist/ChipSelectable.js

@@ -1,44 +1,35 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-DfsEye-A.js';
 
-const SIZES = {
-    small: "small",
-    regular: "regular",
-};
-const VARIANTS = {
-    toggle: "toggle",
-    radio: "radio",
-};
 /**
  * A chip component that can be selected.
  * @tagname leu-chip-selectable
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
- * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
- * @prop {boolean} checked - Whether the chip is selected.
- * @prop {string} value - The value of the chip.
  */
 class LeuChipSelectable extends LeuChipBase {
     constructor() {
         super();
-        this.size = SIZES.regular;
+        /** The size of the chip. Has no effect when variant is "radio" */
+        this.size = "regular";
         /**
-         * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-         * - `toggle`: The chip behaves like a toggle button.
-         * - `radio`: The chip behaves like a radio button.
+         * The variant of the chip. Determines if only one or multiple chips can be selected.
          * @default "toggle"
          */
-        this.variant = VARIANTS.toggle;
+        this.variant = "toggle";
+        /** Whether the chip is selected */
         this.checked = false;
+        /** The value of the chip */
         this.value = "";
-        if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
+        if (this.variant === "radio" && this.size === "small") {
             console.warn("Small size has no effect on radio variant");
         }
     }
     handleClick() {
         let nextcheckedState = this.checked;
-        if (this.variant === VARIANTS.radio) {
+        if (this.variant === "radio") {
             nextcheckedState = true;
         }
         else {
@@ -73,12 +64,17 @@ class LeuChipSelectable extends LeuChipBase {
     </button>`;
     }
 }
-LeuChipSelectable.properties = {
-    ...LeuChipBase.properties,
-    size: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
-    checked: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipSelectable.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipSelectable.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuChipSelectable.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuChipSelectable.prototype, "value", void 0);
 
-export { LeuChipSelectable, SIZES, VARIANTS };
+export { LeuChipSelectable };

package/dist/Dialog.d.ts

@@ -1,8 +1,9 @@
 import * as lit_html from 'lit-html';
+import * as lit_html_directives_ref_js from 'lit-html/directives/ref.js';
 import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 
 /**
  * @tagname leu-dialog
@@ -20,23 +21,11 @@ declare class LeuDialog extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
-    /**
-     * @internal
-     */
-    hasSlotController: HasSlotController;
-    static properties: {
-        label: {
-            type: StringConstructor;
-        };
-        sublabel: {
-            type: StringConstructor;
-        };
-        open: {
-            type: BooleanConstructor;
-            open: boolean;
-        };
-    };
-    constructor();
+    label: string;
+    sublabel: string;
+    open: boolean;
+    protected _dialogRef: lit_html_directives_ref_js.Ref<HTMLDialogElement>;
+    protected hasSlotController: HasSlotController;
     show(): void;
     close(): void;
     render(): lit_html.TemplateResult<1>;

package/dist/Dialog.js

@@ -1,11 +1,11 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-DfsEye-A.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
 
 var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
 :host {
@@ -170,19 +170,12 @@ var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmb
  */
 class LeuDialog extends LeuElement {
     constructor() {
-        super();
-        /**
-         * @internal
-         */
-        this.hasSlotController = new HasSlotController(this, ["toolbar"]);
-        /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
-        this._dialogRef = createRef();
-        /** @type {string} */
+        super(...arguments);
         this.label = "";
-        /** @type {string} */
         this.sublabel = "";
-        /** @type {boolean} */
         this.open = false;
+        this._dialogRef = createRef();
+        this.hasSlotController = new HasSlotController(this, ["toolbar"]);
     }
     show() {
         this._dialogRef.value.showModal();
@@ -235,10 +228,14 @@ LeuDialog.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuDialog.properties = {
-    label: { type: String },
-    sublabel: { type: String },
-    open: { type: Boolean, open: true },
-};
+__decorate([
+    property({ type: String })
+], LeuDialog.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], LeuDialog.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuDialog.prototype, "open", void 0);
 
 export { LeuDialog };

package/dist/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import * as lit_html from 'lit-html';
+import * as lit_html_directives_ref_js from 'lit-html/directives/ref.js';
 import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
@@ -6,7 +7,7 @@ import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuPopup } from './Popup.js';
-import './Icon.js';
+import './Icon.d-itcQ94ym.js';
 import '@floating-ui/dom';
 
 /**
@@ -20,35 +21,26 @@ declare class LeuDropdown extends LeuElement {
         "leu-popup": typeof LeuPopup;
     };
     static styles: lit.CSSResultGroup[];
-    static properties: {
-        label: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        expanded: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
-    hasSlotController: HasSlotController;
-    constructor();
+    label: string;
+    expanded: boolean;
+    inverted: boolean;
+    protected hasSlotController: HasSlotController;
+    protected _toggleRef: lit_html_directives_ref_js.Ref<HTMLButtonElement>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    _documentClickHandler: (event: any) => void;
-    _keyUpHandler(event: any): void;
-    _keyDownToggleHandler(event: any): Promise<void>;
-    _menuItemClickHandler: (e: any) => void;
+    protected _documentClickHandler: (event: MouseEvent) => void;
+    protected _keyUpHandler: (event: KeyboardEvent) => void;
+    protected _keyDownToggleHandler(event: KeyboardEvent): Promise<void>;
+    protected _menuItemClickHandler: (e: MouseEvent & {
+        target: HTMLElement;
+    }) => void;
     /**
      * Close the dropdown when the user presses the Escape or the Tab key.
      * Navigating the menu with the arrow keys is handled by the menu itself.
-     * @param {KeyboardEvent} e
-     */
-    _keyDownMenuHandler: (e: any) => void;
-    _handleToggleClick(): void;
-    /**
-     * @returns {import("../menu/Menu").LeuMenu}
      */
-    _getMenu(): LeuMenu;
+    protected _keyDownMenuHandler: (e: KeyboardEvent) => void;
+    protected _handleToggleClick(): void;
+    protected _getMenu(): LeuMenu;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/Dropdown.js

@@ -1,15 +1,15 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-DfsEye-A.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuPopup } from './Popup.js';
-import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
-import 'lit/decorators.js';
 import './Icon.js';
 import '@floating-ui/dom';
 
@@ -36,13 +36,22 @@ var css_248z = css`:host {
  */
 class LeuDropdown extends LeuElement {
     constructor() {
-        super();
+        super(...arguments);
+        this.label = "";
+        this.expanded = false;
+        this.inverted = false;
         this.hasSlotController = new HasSlotController(this, ["icon"]);
+        this._toggleRef = createRef();
         this._documentClickHandler = (event) => {
             if (!event.composedPath().includes(this)) {
                 this.expanded = false;
             }
         };
+        this._keyUpHandler = (event) => {
+            if (event.key === "Escape") {
+                this.expanded = false;
+            }
+        };
         this._menuItemClickHandler = (e) => {
             if (e.target.tagName.toLowerCase() === "leu-menu-item") {
                 this.expanded = false;
@@ -52,7 +61,6 @@ class LeuDropdown extends LeuElement {
         /**
          * Close the dropdown when the user presses the Escape or the Tab key.
          * Navigating the menu with the arrow keys is handled by the menu itself.
-         * @param {KeyboardEvent} e
          */
         this._keyDownMenuHandler = (e) => {
             if (e.key === "Escape" || e.key === "Tab") {
@@ -61,10 +69,6 @@ class LeuDropdown extends LeuElement {
                 this._toggleRef.value.focus();
             }
         };
-        this.label = "";
-        this.expanded = false;
-        /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
-        this._toggleRef = createRef();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -82,11 +86,6 @@ class LeuDropdown extends LeuElement {
         menu.removeEventListener("keydown", this._keyDownMenuHandler);
         menu.removeEventListener("click", this._menuItemClickHandler);
     }
-    _keyUpHandler(event) {
-        if (event.key === "Escape") {
-            this.expanded = false;
-        }
-    }
     async _keyDownToggleHandler(event) {
         if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
             event.preventDefault();
@@ -104,9 +103,6 @@ class LeuDropdown extends LeuElement {
     _handleToggleClick() {
         this.expanded = !this.expanded;
     }
-    /**
-     * @returns {import("../menu/Menu").LeuMenu}
-     */
     _getMenu() {
         return this.querySelector("leu-menu");
     }
@@ -128,6 +124,7 @@ class LeuDropdown extends LeuElement {
           variant="ghost"
           expanded=${this.expanded ? "true" : "false"}
           ?active=${this.expanded}
+          ?inverted=${this.inverted}
           @click=${this._handleToggleClick}
           @keydown=${this._keyDownToggleHandler}
         >
@@ -148,9 +145,14 @@ LeuDropdown.dependencies = {
     "leu-popup": LeuPopup,
 };
 LeuDropdown.styles = [LeuElement.styles, css_248z];
-LeuDropdown.properties = {
-    label: { type: String, reflect: true },
-    expanded: { type: Boolean, reflect: true },
-};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuDropdown.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuDropdown.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuDropdown.prototype, "inverted", void 0);
 
 export { LeuDropdown };

package/dist/FileInput.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 { LeuButton } from './Button.js';
-import { LeuIcon } from './Icon.js';
+import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import './leu-icon.js';
 
@@ -54,6 +54,7 @@ declare class LeuFileInput extends LeuElement {
     formResetCallback(): void;
     protected updateFormValue(): void;
     protected removeFile(fileToRemove: File): void;
+    protected dispatchChangeAndInputEvents(): void;
     protected static formatFileSize(size: number): lit_html.TemplateResult<1>;
     protected handleDragEnter: (event: DragEvent) => void;
     protected handleDragOver: (event: DragEvent) => void;

package/dist/FileInput.js

@@ -3,7 +3,7 @@ import { css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-DfsEye-A.js';
 import './Accordion.js';
 import { LeuButton } from './Button.js';
 import './ButtonGroup.js';
@@ -14,22 +14,29 @@ import './ChipGroup.js';
 import './ChipLink.js';
 import './ChipRemovable.js';
 import './ChipSelectable.js';
+import './Dialog.js';
 import './Dropdown.js';
+import { LeuIcon } from './Icon.js';
 import './Input.js';
 import './Menu.js';
 import './MenuItem.js';
+import './Message.js';
 import './Pagination.js';
+import './Placeholder.js';
 import './Popup.js';
+import './ProgressBar.js';
 import './Radio.js';
 import './RadioGroup.js';
+import './Range.js';
+import './ScrollTop.js';
 import './Select.js';
+import './Spinner.js';
 import './Table.js';
-import './leu-icon.js';
+import './Tag.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import { LeuIcon } from './Icon.js';
+import './leu-icon.js';
 import 'lit/static-html.js';
 import './hasSlotController-Bm2tipvG.js';
-import './Spinner.js';
 import './Chip.js';
 import 'lit/directives/ref.js';
 import '@floating-ui/dom';
@@ -202,6 +209,7 @@ class LeuFileInput extends LeuElement {
             this.isDragging = false;
         };
         this.handleDrop = (event) => {
+            this.isDragging = false;
             if (this.disabled)
                 return;
             event.preventDefault();
@@ -209,10 +217,13 @@ class LeuFileInput extends LeuElement {
             const dt = event.dataTransfer;
             const files = dt.files;
             const acceptedFiles = [...files].filter((file) => this.isAcceptedFile(file));
+            if (acceptedFiles.length < 1) {
+                return;
+            }
             this.files = this.multiple
                 ? this.files.concat(acceptedFiles)
                 : acceptedFiles.slice(0, 1);
-            this.isDragging = false;
+            this.dispatchChangeAndInputEvents();
         };
         // Initialize the ElementInternals for form association
         this.internals = this.attachInternals();
@@ -257,6 +268,9 @@ class LeuFileInput extends LeuElement {
     }
     removeFile(fileToRemove) {
         this.files = this.files.filter((file) => file !== fileToRemove);
+        this.dispatchChangeAndInputEvents();
+    }
+    dispatchChangeAndInputEvents() {
         this.dispatchEvent(new CustomEvent("input", {
             composed: true,
             bubbles: true,

package/dist/Icon.d-itcQ94ym.d.ts

@@ -0,0 +1,151 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
+type IconPathName = keyof typeof paths;
+declare const paths: {
+    addNew: string;
+    alert: string;
+    angleDropDown: string;
+    angleDropUp: string;
+    angleLeft: string;
+    angleRight: string;
+    arrowDown: string;
+    arrowLeft: string;
+    arrowRight: string;
+    arrowUp: string;
+    backward: string;
+    block: string;
+    calendar: string;
+    camera: string;
+    caution: string;
+    cc: string;
+    chart: string;
+    chatMessage: string;
+    check: string;
+    clear: string;
+    close: string;
+    comment: string;
+    conference: string;
+    confirm: string;
+    confirmPlain: string;
+    conversation: string;
+    copy: string;
+    delete: string;
+    download: string;
+    earth: string;
+    edit: string;
+    email: string;
+    file: string;
+    fileCsv: string;
+    fileOutline: string;
+    filePdf: string;
+    fileXml: string;
+    files: string;
+    filter: string;
+    floppy: string;
+    folder: string;
+    forward: string;
+    getInformation: string;
+    hide: string;
+    home: string;
+    image: string;
+    income: string;
+    launch: string;
+    levelUp: string;
+    like: string;
+    link: string;
+    list: string;
+    location: string;
+    lock: string;
+    login: string;
+    logout: string;
+    love: string;
+    emailOpen: string;
+    map: string;
+    mapLocateMe: string;
+    mapNavigation: string;
+    mapPin: string;
+    menu: string;
+    menuOverflow: string;
+    minus: string;
+    money: string;
+    moneyIncome: string;
+    organisation: string;
+    overflow: string;
+    paperplane: string;
+    paragraph: string;
+    passport: string;
+    phoneCall: string;
+    piechart: string;
+    pill: string;
+    pin: string;
+    plus: string;
+    print: string;
+    refresh: string;
+    remove: string;
+    repost: string;
+    resizeText: string;
+    ruler: string;
+    search: string;
+    securities: string;
+    setting: string;
+    share: string;
+    show: string;
+    smileyDevastated: string;
+    smileyIndifferent: string;
+    smileySad: string;
+    smileySmile: string;
+    smileyThrilled: string;
+    swissId: string;
+    time: string;
+    upload: string;
+    user: string;
+    userMultiple: string;
+    vote: string;
+    zoom: string;
+    zoomOut: string;
+    fastForward: string;
+    fastRewind: string;
+    fullScreen: string;
+    next: string;
+    pause: string;
+    play: string;
+    playButton: string;
+    previous: string;
+    skipNext: string;
+    skipPrevious: string;
+    stop: string;
+    facebook: string;
+    google: string;
+    instagram: string;
+    kununu: string;
+    linkedin: string;
+    snapchat: string;
+    tiktok: string;
+    twitter: string;
+    xing: string;
+    youtube: string;
+    youtubeLogo: string;
+};
+
+/**
+ * A component to render all defined zhWeb icons.
+ * The `fill` of the icon is set to `currentColor` and
+ * can be overriden by setting the css `color` property.
+ * If the icon name is not found, a placeholder will be displayed.
+ *
+ * @tagname leu-icon
+ * @cssprop --leu-icon-size - The size of the icon.
+ */
+declare class LeuIcon extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /**
+     * The name of the icon to display.
+     */
+    name: IconPathName | "";
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuIcon as L };
+export type { IconPathName as I };