@statistikzh/leu 0.14.2 → 0.14.4

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty } from './LeuElement-BI1CxItv.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
+import './LeuElement-x8UlIDDl.js';
 
 /**
  * @slot - The content of the chip
@@ -10,44 +10,40 @@ import { LeuIcon } from './Icon.js';
  * @prop {string} value - The value of the chip.
  */
 class LeuChipRemovable extends LeuChipBase {
-  constructor() {
-    super();
-    this.value = "";
-  }
-
-  /**
-   * Returns the value of the chip. If `value` is not set, it will return the text content
-   * @returns {string}
-   */
-  getValue() {
-    return this.value || this.textContent.trim();
-  }
-  handleClick() {
-    const customEvent = new CustomEvent("leu:remove", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: this.getValue()
-      }
-    });
-    this.dispatchEvent(customEvent);
-  }
-  render() {
-    return html`<button @click=${e => this.handleClick(e)} class="button">
+    constructor() {
+        super();
+        this.value = "";
+    }
+    /**
+     * Returns the value of the chip. If `value` is not set, it will return the text content
+     * @returns {string}
+     */
+    getValue() {
+        return this.value || this.textContent.trim();
+    }
+    handleClick() {
+        const customEvent = new CustomEvent("leu:remove", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.getValue(),
+            },
+        });
+        this.dispatchEvent(customEvent);
+    }
+    render() {
+        return html `<button @click=${(e) => this.handleClick(e)} class="button">
       <span class="label"><slot></slot></span>
       <leu-icon name="close" class="icon"></leu-icon>
     </button>`;
-  }
+    }
 }
-_defineProperty(LeuChipRemovable, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuChipRemovable, "properties", {
-  ...LeuChipBase.properties,
-  value: {
-    type: String,
-    reflect: true
-  }
-});
+LeuChipRemovable.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuChipRemovable.properties = {
+    ...LeuChipBase.properties,
+    value: { type: String, reflect: true },
+};
 
 export { LeuChipRemovable };

package/dist/ChipSelectable.d.ts

@@ -1,3 +1,16 @@
+import * as lit_html from 'lit-html';
+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
@@ -7,32 +20,37 @@
  * @prop {boolean} checked - Whether the chip is selected.
  * @prop {string} value - The value of the chip.
  */
-export class LeuChipSelectable extends LeuChipBase {
-    size: string;
-    /**
-     * 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.
-     * @default "toggle"
-     */
-    variant: string;
-    checked: boolean;
-    value: string;
+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;
+        };
+    };
+    constructor();
     handleClick(): void;
     /**
      * Returns the value of the chip. If `value` is not set, it will return the text content
      * @returns {string}
      */
-    getValue(): string;
-    render(): import("lit-html").TemplateResult<1>;
+    getValue(): any;
+    render(): lit_html.TemplateResult<1>;
 }
-export namespace SIZES {
-    let small: string;
-    let regular: string;
-}
-export namespace VARIANTS {
-    let toggle: string;
-    let radio: string;
-}
-import { LeuChipBase } from './Chip.js';
-//# sourceMappingURL=ChipSelectable.d.ts.map
+
+export { LeuChipSelectable, SIZES, VARIANTS };

package/dist/ChipSelectable.js

@@ -1,16 +1,15 @@
-import { _ as _defineProperty } from './LeuElement-BI1CxItv.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
+import './LeuElement-x8UlIDDl.js';
 
 const SIZES = {
-  small: "small",
-  regular: "regular"
+    small: "small",
+    regular: "regular",
 };
 const VARIANTS = {
-  toggle: "toggle",
-  radio: "radio"
+    toggle: "toggle",
+    radio: "radio",
 };
-
 /**
  * A chip component that can be selected.
  * @tagname leu-chip-selectable
@@ -21,78 +20,65 @@ const VARIANTS = {
  * @prop {string} value - The value of the chip.
  */
 class LeuChipSelectable extends LeuChipBase {
-  constructor() {
-    super();
-    this.size = SIZES.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.
-     * @default "toggle"
-     */
-    this.variant = VARIANTS.toggle;
-    this.checked = false;
-    this.value = "";
-    if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
-      console.warn("Small size has no effect on radio variant");
+    constructor() {
+        super();
+        this.size = SIZES.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.
+         * @default "toggle"
+         */
+        this.variant = VARIANTS.toggle;
+        this.checked = false;
+        this.value = "";
+        if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
+            console.warn("Small size has no effect on radio variant");
+        }
     }
-  }
-  handleClick() {
-    let nextcheckedState = this.checked;
-    if (this.variant === VARIANTS.radio) {
-      nextcheckedState = true;
-    } else {
-      nextcheckedState = !this.checked;
+    handleClick() {
+        let nextcheckedState = this.checked;
+        if (this.variant === VARIANTS.radio) {
+            nextcheckedState = true;
+        }
+        else {
+            nextcheckedState = !this.checked;
+        }
+        if (nextcheckedState !== this.checked) {
+            this.checked = nextcheckedState;
+            this.dispatchEvent(new CustomEvent("input", {
+                detail: {
+                    checked: this.checked,
+                    value: this.getValue(),
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
     }
-    if (nextcheckedState !== this.checked) {
-      this.checked = nextcheckedState;
-      this.dispatchEvent(new CustomEvent("input", {
-        detail: {
-          checked: this.checked,
-          value: this.getValue()
-        },
-        bubbles: true,
-        composed: true
-      }));
+    /**
+     * Returns the value of the chip. If `value` is not set, it will return the text content
+     * @returns {string}
+     */
+    getValue() {
+        return this.value || this.textContent.trim();
     }
-  }
-
-  /**
-   * Returns the value of the chip. If `value` is not set, it will return the text content
-   * @returns {string}
-   */
-  getValue() {
-    return this.value || this.textContent.trim();
-  }
-  render() {
-    return html`<button
+    render() {
+        return html `<button
       @click=${() => this.handleClick()}
       class="button"
       aria-pressed=${this.checked ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
     </button>`;
-  }
+    }
 }
-_defineProperty(LeuChipSelectable, "properties", {
-  ...LeuChipBase.properties,
-  size: {
-    type: String,
-    reflect: true
-  },
-  variant: {
-    type: String,
-    reflect: true
-  },
-  checked: {
-    type: Boolean,
-    reflect: true
-  },
-  value: {
-    type: String,
-    reflect: true
-  }
-});
+LeuChipSelectable.properties = {
+    ...LeuChipBase.properties,
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    checked: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true },
+};
 
 export { LeuChipSelectable, SIZES, VARIANTS };

package/dist/Dialog.d.ts

@@ -1,17 +1,45 @@
+import * as lit_html from 'lit-html';
+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';
+
 /**
  * @tagname leu-dialog
  */
-export class LeuDialog extends LeuElement {
-    _dialogRef: import("lit-html/directives/ref.js").Ref<Element>;
-    /** @type {string} */
-    label: string;
-    /** @type {string} */
-    sublabel: string;
-    /** @type {boolean} */
-    open: boolean;
+declare class LeuDialog extends LeuElement {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    /**
+     * @internal
+     */
+    hasSlotController: HasSlotController;
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        sublabel: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            open: boolean;
+        };
+    };
+    constructor();
     show(): void;
     close(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-//# sourceMappingURL=Dialog.d.ts.map
+
+export { LeuDialog };

package/dist/Dialog.js

@@ -1,8 +1,8 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BI1CxItv.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { H as HasSlotController } from './hasSlotController-CCPfIEw1.js';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
@@ -167,42 +167,42 @@ var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmb
  * @tagname leu-dialog
  */
 class LeuDialog extends LeuElement {
-  constructor() {
-    super();
-
-    /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
-    /**
-     * @internal
-     */
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["toolbar"]));
-    this._dialogRef = createRef();
-
-    /** @type {string} */
-    this.label = "";
-    /** @type {string} */
-    this.sublabel = "";
-    /** @type {boolean} */
-    this.open = false;
-  }
-  show() {
-    this._dialogRef.value.showModal();
-  }
-  close() {
-    this._dialogRef.value.close();
-  }
-  render() {
-    const hasActionbar = this.hasSlotController.test("actionbar");
-    const closeButtonLabelClasses = {
-      "close-button__label": true,
-      "close-button__label--hidden": hasActionbar
-    };
-    return html`
+    constructor() {
+        super();
+        /**
+         * @internal
+         */
+        this.hasSlotController = new HasSlotController(this, ["toolbar"]);
+        /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
+        this._dialogRef = createRef();
+        /** @type {string} */
+        this.label = "";
+        /** @type {string} */
+        this.sublabel = "";
+        /** @type {boolean} */
+        this.open = false;
+    }
+    show() {
+        this._dialogRef.value.showModal();
+    }
+    close() {
+        this._dialogRef.value.close();
+    }
+    render() {
+        const hasActionbar = this.hasSlotController.test("actionbar");
+        const closeButtonLabelClasses = {
+            "close-button__label": true,
+            "close-button__label--hidden": hasActionbar,
+        };
+        return html `
       <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
         <div class="content">
           <div class="header">
             <div class="title-wrapper">
               <h1 class="title">${this.label}</h1>
-              ${this.sublabel ? html`<p class="subtitle">${this.sublabel}</p>` : nothing}
+              ${this.sublabel
+            ? html `<p class="subtitle">${this.sublabel}</p>`
+            : nothing}
             </div>
             <button
               class="close-button"
@@ -223,27 +223,20 @@ class LeuDialog extends LeuElement {
         </div>
       </dialog>
     `;
-  }
-}
-_defineProperty(LeuDialog, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuDialog, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuDialog, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuDialog, "properties", {
-  label: {
-    type: String
-  },
-  sublabel: {
-    type: String
-  },
-  open: {
-    type: Boolean,
-    open: true
-  }
-});
+    }
+}
+LeuDialog.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuDialog.styles = [LeuElement.styles, css_248z];
+LeuDialog.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuDialog.properties = {
+    label: { type: String },
+    sublabel: { type: String },
+    open: { type: Boolean, open: true },
+};
 
 export { LeuDialog };

package/dist/Dropdown.d.ts

@@ -1,19 +1,54 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
+import { LeuButton } from './Button.js';
+import { LeuMenu } from './Menu.js';
+import { LeuMenuItem } from './MenuItem.js';
+import { LeuPopup } from './Popup.js';
+import './Icon.js';
+
 /**
  * @tagname leu-dropdown
  */
-export class LeuDropdown extends LeuElement {
-    expanded: boolean;
-    label: string;
-    /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
-    _toggleRef: import("lit/directives/ref").Ref<HTMLButtonElement>;
+declare class LeuDropdown extends LeuElement {
+    static dependencies: {
+        "leu-button": typeof LeuButton;
+        "leu-menu": typeof LeuMenu;
+        "leu-menu-item": typeof LeuMenuItem;
+        "leu-popup": typeof LeuPopup;
+    };
+    static styles: lit.CSSResultGroup[];
+    static properties: {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        expanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    hasSlotController: HasSlotController;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    _documentClickHandler: (event: any) => void;
     _keyUpHandler(event: any): void;
     _keyDownToggleHandler(event: any): Promise<void>;
+    _menuItemClickHandler: (e: any) => 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(): any;
-    render(): import("lit-html").TemplateResult<1>;
+    _getMenu(): LeuMenu;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-//# sourceMappingURL=Dropdown.d.ts.map
+
+export { LeuDropdown };