@statistikzh/leu 0.14.3 → 0.15.0

package/dist/ChipSelectable.js

@@ -1,16 +1,15 @@
-import { _ as _defineProperty } from './LeuElement-Dd6zm9XF.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
+import './LeuElement-BhAmogDy.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-Dd6zm9XF.js';
-//# sourceMappingURL=Dialog.d.ts.map
+
+export { LeuDialog };

package/dist/Dialog.js

@@ -1,8 +1,8 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.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-dQsSUUpb.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.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-Dd6zm9XF.js';
-//# sourceMappingURL=Dropdown.d.ts.map
+
+export { LeuDropdown };

package/dist/Dropdown.js

@@ -1,13 +1,15 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { H as HasSlotController } from './hasSlotController-dQsSUUpb.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.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';
 
@@ -33,85 +35,84 @@ var css_248z = css`:host {
  * @tagname leu-dropdown
  */
 class LeuDropdown extends LeuElement {
-  constructor() {
-    super();
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["icon"]));
-    _defineProperty(this, "_documentClickHandler", event => {
-      if (!event.composedPath().includes(this)) {
+    constructor() {
+        super();
+        this.hasSlotController = new HasSlotController(this, ["icon"]);
+        this._documentClickHandler = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this.expanded = false;
+            }
+        };
+        this._menuItemClickHandler = (e) => {
+            if (e.target.tagName.toLowerCase() === "leu-menu-item") {
+                this.expanded = false;
+                this._toggleRef.value.focus();
+            }
+        };
+        /**
+         * 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") {
+                e.preventDefault();
+                this.expanded = false;
+                this._toggleRef.value.focus();
+            }
+        };
+        this.label = "";
         this.expanded = false;
-      }
-    });
-    _defineProperty(this, "_menuItemClickHandler", e => {
-      if (e.target.tagName.toLowerCase() === "leu-menu-item") {
-        this.expanded = false;
-        this._toggleRef.value.focus();
-      }
-    });
+        /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
+        this._toggleRef = createRef();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keyup", this._keyUpHandler);
+        document.addEventListener("click", this._documentClickHandler);
+        const menu = this._getMenu();
+        menu.addEventListener("keydown", this._keyDownMenuHandler);
+        menu.addEventListener("click", this._menuItemClickHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("keyup", this._keyUpHandler);
+        document.removeEventListener("click", this._documentClickHandler);
+        const menu = this._getMenu();
+        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();
+            const menu = this._getMenu();
+            this.expanded = true;
+            await this.updateComplete;
+            if (event.key === "ArrowDown" || event.key === "Home") {
+                menu.focusItem(0);
+            }
+            else if (event.key === "ArrowUp" || event.key === "End") {
+                menu.focusItem(-1);
+            }
+        }
+    }
+    _handleToggleClick() {
+        this.expanded = !this.expanded;
+    }
     /**
-     * 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
+     * @returns {import("../menu/Menu").LeuMenu}
      */
-    _defineProperty(this, "_keyDownMenuHandler", e => {
-      if (e.key === "Escape" || e.key === "Tab") {
-        e.preventDefault();
-        this.expanded = false;
-        this._toggleRef.value.focus();
-      }
-    });
-    this.label = "";
-    this.expanded = false;
-
-    /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
-    this._toggleRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keyup", this._keyUpHandler);
-    document.addEventListener("click", this._documentClickHandler);
-    const menu = this._getMenu();
-    menu.addEventListener("keydown", this._keyDownMenuHandler);
-    menu.addEventListener("click", this._menuItemClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("keyup", this._keyUpHandler);
-    document.removeEventListener("click", this._documentClickHandler);
-    const menu = this._getMenu();
-    menu.removeEventListener("keydown", this._keyDownMenuHandler);
-    menu.removeEventListener("click", this._menuItemClickHandler);
-  }
-  _keyUpHandler(event) {
-    if (event.key === "Escape") {
-      this.expanded = false;
+    _getMenu() {
+        return this.querySelector("leu-menu");
     }
-  }
-  async _keyDownToggleHandler(event) {
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault();
-      const menu = this._getMenu();
-      this.expanded = true;
-      await this.updateComplete;
-      if (event.key === "ArrowDown" || event.key === "Home") {
-        menu.focusItem(0);
-      } else if (event.key === "ArrowUp" || event.key === "End") {
-        menu.focusItem(-1);
-      }
-    }
-  }
-  _handleToggleClick() {
-    this.expanded = !this.expanded;
-  }
-
-  /**
-   * @returns {import("../menu/Menu").LeuMenu}
-   */
-  _getMenu() {
-    return this.querySelector("leu-menu");
-  }
-  render() {
-    const hasIcon = this.hasSlotController.test("icon");
-    return html`
+    render() {
+        const hasIcon = this.hasSlotController.test("icon");
+        return html `
       <leu-popup
         ?active=${this.expanded}
         placement="bottom-start"
@@ -130,7 +131,7 @@ class LeuDropdown extends LeuElement {
           @click=${this._handleToggleClick}
           @keydown=${this._keyDownToggleHandler}
         >
-          ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
+          ${hasIcon ? html `<slot name="icon" slot="before"></slot>` : nothing}
           ${this.label}</leu-button
         >
         <div id="content" class="content" ?hidden=${!this.expanded}>
@@ -138,24 +139,18 @@ class LeuDropdown extends LeuElement {
         </div>
       </leu-popup>
     `;
-  }
+    }
 }
-_defineProperty(LeuDropdown, "dependencies", {
-  "leu-button": LeuButton,
-  "leu-menu": LeuMenu,
-  "leu-menu-item": LeuMenuItem,
-  "leu-popup": LeuPopup
-});
-_defineProperty(LeuDropdown, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuDropdown, "properties", {
-  label: {
-    type: String,
-    reflect: true
-  },
-  expanded: {
-    type: Boolean,
-    reflect: true
-  }
-});
+LeuDropdown.dependencies = {
+    "leu-button": LeuButton,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-popup": LeuPopup,
+};
+LeuDropdown.styles = [LeuElement.styles, css_248z];
+LeuDropdown.properties = {
+    label: { type: String, reflect: true },
+    expanded: { type: Boolean, reflect: true },
+};
 
 export { LeuDropdown };

package/dist/Icon.d.ts

@@ -1,4 +1,7 @@
-export type IconPathName = "map" | "filter" | "link" | "menu" | "search" | "time" | "stop" | "close" | "pause" | "play" | "hide" | "arrowDown" | "arrowUp" | "addNew" | "angleDropDown" | "angleDropup" | "angleLeft" | "angleRight" | "arrowLeft" | "arrowRight" | "calendar" | "caution" | "chatMessage" | "check" | "clear" | "conference" | "confirm" | "confirmPlain" | "delete" | "documents" | "download" | "edit" | "email" | "file" | "fileOutline" | "files" | "floppy" | "forward" | "getInformation" | "home" | "list" | "lock" | "location" | "login" | "logout" | "mapLocateMe" | "mapLocation" | "mapNavigation" | "mapPin" | "menuOverflow" | "minus" | "openMail" | "overflow" | "paperplane" | "paragraph" | "phoneCall" | "pin" | "plus" | "print" | "remove" | "resizeText" | "show" | "upload" | "cc" | "fastForward" | "fastRewind" | "fullScreen" | "next" | "playButton" | "previews" | "skipNext" | "skipPrevious" | "comment" | "facebook" | "google" | "instagram" | "kununu" | "like" | "linkedin" | "love" | "repost" | "share" | "snapchat" | "twitter" | "user" | "users" | "vote" | "xing" | "youtube" | "youtubeLogo" | "smileyThrilled" | "smileySmile" | "smileyIndifferent" | "smileySad" | "smileyDevastated";
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * A component to render all defined zhWeb icons.
  * The `fill` of the icon is set to `currentColor` and
@@ -9,12 +12,16 @@ export type IconPathName = "map" | "filter" | "link" | "menu" | "search" | "time
  * @prop {import("./paths").IconPathName} name - The name of the icon to display.
  * @cssprop --leu-icon-size - The size of the icon.
  */
-export class LeuIcon extends LeuElement {
-    /**
-     * @type {import("./paths").IconPathName | ""}
-     */
-    name: any | "";
-    render(): import("lit-html").TemplateResult<1>;
+declare class LeuIcon extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static properties: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Icon.d.ts.map
+
+export { LeuIcon };