@statistikzh/leu 0.14.3 → 0.14.4

package/dist/Button.js

@@ -1,21 +1,35 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LeuIcon } from './Icon.js';
-import { H as HasSlotController } from './hasSlotController-dQsSUUpb.js';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 
 /**
  * All roles that are associated with a aria-checked attribute
  * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
  */
-const ARIA_CHECKED_ROLES = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
-
+const ARIA_CHECKED_ROLES = [
+    "checkbox",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "radio",
+    "switch",
+];
 /**
  * All roles that are associated with a aria-selected attribute
  * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
  */
-const ARIA_SELECTED_ROLES = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
+const ARIA_SELECTED_ROLES = [
+    "gridcell",
+    "option",
+    "row",
+    "tab",
+    "columnheader",
+    "rowheader",
+    "treeitem",
+];
 
 var css_248z = css`:host {
   display: inline-block;
@@ -324,7 +338,6 @@ button.ghost.inverted:disabled {
 Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
 Live Demo: zh.ch
 */
-
 const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
 Object.freeze(BUTTON_VARIANTS);
 const BUTTON_SIZES = ["regular", "small"];
@@ -333,7 +346,6 @@ const BUTTON_TYPES = ["button", "submit", "reset"];
 Object.freeze(BUTTON_TYPES);
 const BUTTON_EXPANDED_OPTIONS = ["true", "false"];
 Object.freeze(BUTTON_EXPANDED_OPTIONS);
-
 /**
  * @tagname leu-button
  * @slot before - The icon to display before the label
@@ -341,84 +353,85 @@ Object.freeze(BUTTON_EXPANDED_OPTIONS);
  * @slot - The label of the button or the icon if no label is set
  */
 class LeuButton extends LeuElement {
-  constructor() {
-    super();
-    /** @type {string} */
-    /**
-     * @internal
-     */
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after", "[default]"]));
-    this.label = null;
-    /** @type {string} */
-    this.size = "regular";
-    /** @type {string} */
-    this.variant = "primary";
-    /** @type {"button" | "submit" | "reset"} */
-    this.type = "button";
-
-    /** @type {string} */
-    this.componentRole = undefined;
-
-    /** @type {boolean} */
-    this.disabled = false;
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    this.round = false;
-    /** @type {boolean} */
-    this.active = false;
-    /** @type {boolean} - will be used on dark Background */
-    this.inverted = false;
-
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    this.fluid = false;
-
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
-     */
-    this.expanded = undefined;
-  }
-  renderExpandingIcon() {
-    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
-      return html`<div class="icon-expanded">
+    constructor() {
+        super();
+        /**
+         * @internal
+         */
+        this.hasSlotController = new HasSlotController(this, [
+            "before",
+            "after",
+            "[default]",
+        ]);
+        /** @type {string} */
+        this.label = null;
+        /** @type {string} */
+        this.size = "regular";
+        /** @type {string} */
+        this.variant = "primary";
+        /** @type {"button" | "submit" | "reset"} */
+        this.type = "button";
+        /** @type {string} */
+        this.componentRole = undefined;
+        /** @type {boolean} */
+        this.disabled = false;
+        /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+        this.round = false;
+        /** @type {boolean} */
+        this.active = false;
+        /** @type {boolean} - will be used on dark Background */
+        this.inverted = false;
+        /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+        this.fluid = false;
+        /**
+         * Only taken into account if variant is "ghost"
+         * @type {("true" | "false" | undefined)}
+         */
+        this.expanded = undefined;
+    }
+    renderExpandingIcon() {
+        if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
+            return html `<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
       </div>`;
+        }
+        return nothing;
+    }
+    getAriaAttributes() {
+        const attributes = {
+            role: this.componentRole,
+            label: this.label,
+        };
+        if (this.componentRole) {
+            if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
+                attributes.checked = this.active ? "true" : "false";
+            }
+            else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
+                attributes.selected = this.active ? "true" : "false";
+            }
+        }
+        return attributes;
     }
-    return nothing;
-  }
-  getAriaAttributes() {
-    const attributes = {
-      role: this.componentRole,
-      label: this.label
-    };
-    if (this.componentRole) {
-      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
-        attributes.checked = this.active ? "true" : "false";
-      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
-        attributes.selected = this.active ? "true" : "false";
-      }
+    hasTextContent() {
+        return Array.from(this.childNodes).some((node) => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
     }
-    return attributes;
-  }
-  hasTextContent() {
-    return Array.from(this.childNodes).some(node => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
-  }
-  render() {
-    const hasTextContent = this.hasTextContent();
-    const hasIconDefault = Boolean(this.querySelector("leu-icon"));
-    const hasIconBefore = this.hasSlotController.test("before");
-    const hasIconAfter = this.hasSlotController.test("after");
-    const aria = this.getAriaAttributes();
-    const cssClasses = {
-      "icon-only": hasIconDefault && !hasTextContent,
-      "icon-before": hasIconBefore,
-      "icon-after": hasIconAfter,
-      round: this.round,
-      active: this.active,
-      inverted: this.inverted,
-      [this.variant]: true,
-      [this.size]: true
-    };
-    return html`
+    render() {
+        const hasTextContent = this.hasTextContent();
+        const hasIconDefault = Boolean(this.querySelector("leu-icon"));
+        const hasIconBefore = this.hasSlotController.test("before");
+        const hasIconAfter = this.hasSlotController.test("after");
+        const aria = this.getAriaAttributes();
+        const cssClasses = {
+            "icon-only": hasIconDefault && !hasTextContent,
+            "icon-before": hasIconBefore,
+            "icon-after": hasIconAfter,
+            round: this.round,
+            active: this.active,
+            inverted: this.inverted,
+            [this.variant]: true,
+            [this.size]: true,
+        };
+        return html `
       <button
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
@@ -440,64 +453,31 @@ class LeuButton extends LeuElement {
         ${this.renderExpandingIcon()}
       </button>
     `;
-  }
+    }
 }
-_defineProperty(LeuButton, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuButton, "styles", [LeuElement.styles, css_248z]);
+LeuButton.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuButton.styles = [LeuElement.styles, css_248z];
 /**
  * @internal
  */
-_defineProperty(LeuButton, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuButton, "properties", {
-  label: {
-    type: String,
-    reflect: true
-  },
-  size: {
-    type: String,
-    reflect: true
-  },
-  variant: {
-    type: String,
-    reflect: true
-  },
-  type: {
-    type: String,
-    reflect: true
-  },
-  componentRole: {
-    type: String,
-    reflect: true
-  },
-  disabled: {
-    type: Boolean,
-    reflect: true
-  },
-  round: {
-    type: Boolean,
-    reflect: true
-  },
-  active: {
-    type: Boolean,
-    reflect: true
-  },
-  inverted: {
-    type: Boolean,
-    reflect: true
-  },
-  expanded: {
-    type: String,
-    reflect: true
-  },
-  fluid: {
-    type: Boolean,
-    reflect: true
-  }
-});
+LeuButton.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuButton.properties = {
+    label: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    round: { type: Boolean, reflect: true },
+    active: { type: Boolean, reflect: true },
+    inverted: { type: Boolean, reflect: true },
+    expanded: { type: String, reflect: true },
+    fluid: { type: Boolean, reflect: true },
+};
 
 export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };

package/dist/ButtonGroup.d.ts

@@ -1,24 +1,29 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @tagname leu-button-group
  * @slot - Slot for the buttons
  * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
-export class LeuButtonGroup extends LeuElement {
+declare class LeuButtonGroup extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    private _items;
     /**
-     * @param {import("../button/Button").LeuButton} button
+     * @param {import("../button/Button.js").LeuButton} button
      * @returns {string}
      */
-    static getButtonValue(button: any): string;
-    _items: any[];
-    set value(newValue: string);
-    get value(): string;
+    static getButtonValue(button: any): any;
+    get value(): any;
+    set value(newValue: any);
     _handleSlotChange(): void;
     /**
-     * @param {import("../button/Button").LeuButton} button
+     * @param {import("../button/Button.js").LeuButton} button
      */
     _handleButtonClick(button: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=ButtonGroup.d.ts.map
+
+export { LeuButtonGroup };

package/dist/ButtonGroup.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
 
 var css_248z = css`.group {
   display: flex;
@@ -15,85 +15,78 @@ var css_248z = css`.group {
  * @fires input - When the value of the group changes by clicking a button
  */
 class LeuButtonGroup extends LeuElement {
-  constructor() {
-    super();
-    this._items = [];
-  }
-
-  /**
-   * @param {import("../button/Button").LeuButton} button
-   * @returns {string}
-   */
-  static getButtonValue(button) {
-    return button.getAttribute("value") ?? button.innerText.trim();
-  }
-  get value() {
-    const activeButton = this._items.find(item => item.active);
-    return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null;
-  }
-  set value(newValue) {
-    this._items.forEach(item => {
-      /* eslint-disable no-param-reassign */
-      item.active = LeuButtonGroup.getButtonValue(item) === newValue;
-      /* eslint-enable no-param-reassign */
-    });
-  }
-  _handleSlotChange() {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+    }
     /**
-     * Remove all event listeners that were added before.
-     * Just because a slotchange event was fired, it doesn't mean that all of the
-     * children of the slot have changed.
+     * @param {import("../button/Button.js").LeuButton} button
+     * @returns {string}
      */
-    this._items.forEach(item => {
-      item.removeEventListener("click", this._handleButtonClick);
-    });
-    const slot = this.shadowRoot.querySelector("slot");
-    this._items = slot.assignedElements({
-      flatten: true
-    });
-    let foundActiveButtonBefore = false;
-    this._items.forEach(item => {
-      /* eslint-disable no-param-reassign */
-      item.addEventListener("click", () => this._handleButtonClick(item));
-      item.componentRole = "menuitemradio";
-
-      /**
-       * In case there are multiple active buttons
-       * only the first one will be kept active.
-       */
-      if (item.active && foundActiveButtonBefore) {
-        item.active = false;
-      } else if (item.active) {
-        foundActiveButtonBefore = true;
-      }
-
-      /* eslint-enable no-param-reassign */
-    });
-  }
-
-  /**
-   * @param {import("../button/Button").LeuButton} button
-   */
-  _handleButtonClick(button) {
-    if (!button.active) {
-      this.value = LeuButtonGroup.getButtonValue(button);
-      this.dispatchEvent(new CustomEvent("input", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          value: LeuButtonGroup.getButtonValue(button)
+    static getButtonValue(button) {
+        return button.getAttribute("value") ?? button.innerText.trim();
+    }
+    get value() {
+        const activeButton = this._items.find((item) => item.active);
+        return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null;
+    }
+    set value(newValue) {
+        this._items.forEach((item) => {
+            /* eslint-disable no-param-reassign */
+            item.active = LeuButtonGroup.getButtonValue(item) === newValue;
+            /* eslint-enable no-param-reassign */
+        });
+    }
+    _handleSlotChange() {
+        /**
+         * Remove all event listeners that were added before.
+         * Just because a slotchange event was fired, it doesn't mean that all of the
+         * children of the slot have changed.
+         */
+        this._items.forEach((item) => {
+            item.removeEventListener("click", this._handleButtonClick);
+        });
+        const slot = this.shadowRoot.querySelector("slot");
+        this._items = slot.assignedElements({ flatten: true });
+        let foundActiveButtonBefore = false;
+        this._items.forEach((item) => {
+            /* eslint-disable no-param-reassign */
+            item.addEventListener("click", () => this._handleButtonClick(item));
+            item.componentRole = "menuitemradio";
+            /**
+             * In case there are multiple active buttons
+             * only the first one will be kept active.
+             */
+            if (item.active && foundActiveButtonBefore) {
+                item.active = false;
+            }
+            else if (item.active) {
+                foundActiveButtonBefore = true;
+            }
+            /* eslint-enable no-param-reassign */
+        });
+    }
+    /**
+     * @param {import("../button/Button.js").LeuButton} button
+     */
+    _handleButtonClick(button) {
+        if (!button.active) {
+            this.value = LeuButtonGroup.getButtonValue(button);
+            this.dispatchEvent(new CustomEvent("input", {
+                bubbles: true,
+                composed: true,
+                detail: { value: LeuButtonGroup.getButtonValue(button) },
+            }));
         }
-      }));
     }
-  }
-  render() {
-    return html`
+    render() {
+        return html `
       <div role="menubar" class="group">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
-  }
+    }
 }
-_defineProperty(LeuButtonGroup, "styles", [LeuElement.styles, css_248z]);
+LeuButtonGroup.styles = [LeuElement.styles, css_248z];
 
 export { LeuButtonGroup };

package/dist/Checkbox.d.ts

@@ -1,14 +1,47 @@
+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';
+
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LeuElement {
-    checked: boolean;
-    disabled: boolean;
-    name: string;
-    value: string;
+declare class LeuCheckbox extends LeuElement {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    static styles: lit.CSSResultGroup[];
+    /** @internal */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
     handleChange(event: any): void;
     handleInput(event: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Checkbox.d.ts.map
+
+export { LeuCheckbox };

package/dist/Checkbox.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {
@@ -98,23 +98,23 @@ var css_248z = css`:host {
  * @tagname leu-checkbox
  */
 class LeuCheckbox extends LeuElement {
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.name = "";
-    this.value = "";
-  }
-  handleChange(event) {
-    this.checked = event.target.checked;
-    const customEvent = new CustomEvent(event.type, event);
-    this.dispatchEvent(customEvent);
-  }
-  handleInput(event) {
-    this.checked = event.target.checked;
-  }
-  render() {
-    return html`
+    constructor() {
+        super();
+        this.checked = false;
+        this.disabled = false;
+        this.name = "";
+        this.value = "";
+    }
+    handleChange(event) {
+        this.checked = event.target.checked;
+        const customEvent = new CustomEvent(event.type, event);
+        this.dispatchEvent(customEvent);
+    }
+    handleInput(event) {
+        this.checked = event.target.checked;
+    }
+    render() {
+        return html `
       <input
         id=${`checkbox-${this.name}`}
         class="checkbox"
@@ -129,34 +129,22 @@ class LeuCheckbox extends LeuElement {
       <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>
     `;
-  }
+    }
 }
-_defineProperty(LeuCheckbox, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuCheckbox, "styles", [LeuElement.styles, css_248z]);
+LeuCheckbox.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuCheckbox.styles = [LeuElement.styles, css_248z];
 /** @internal */
-_defineProperty(LeuCheckbox, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuCheckbox, "properties", {
-  checked: {
-    type: Boolean,
-    reflect: true
-  },
-  disabled: {
-    type: Boolean,
-    reflect: true
-  },
-  value: {
-    type: String,
-    reflect: true
-  },
-  name: {
-    type: String,
-    reflect: true
-  }
-});
+LeuCheckbox.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuCheckbox.properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+};
 
 export { LeuCheckbox };