@statistikzh/leu 0.14.3 → 0.15.0

package/dist/Button.js

@@ -1,21 +1,37 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
 import { LeuIcon } from './Icon.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';
 
 /**
  * All roles that are associated with a aria-checked attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ * @see 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
+ * @see 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;
@@ -320,105 +336,107 @@ 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"];
-Object.freeze(BUTTON_SIZES);
-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
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
 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(...arguments);
+        this.hasSlotController = new HasSlotController(this, [
+            "before",
+            "after",
+            "[default]",
+        ]);
+        /**
+         * `aria-label` of the underlying button elements.
+         * Use it to provide a label when only an icon is visible.
+         */
+        this.label = null;
+        /**
+         * The size of the button.
+         */
+        this.size = "regular";
+        /**
+         * The visual variant of the button.
+         */
+        this.variant = "primary";
+        /**
+         * The `type` of the underlying button element.
+         */
+        this.type = "button";
+        /**
+         * Whether the button is disabled or not.
+         * @type {boolean}
+         */
+        this.disabled = false;
+        /**
+         * Whether the button should be round.
+         * Can only be applied when the button contains an icon without a visible label.
+         * @type {boolean}
+         */
+        this.round = false;
+        /**
+         * Whether the button is active or not.
+         * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+         */
+        this.active = false;
+        /**
+         * Wheter the colors should be inverted. For use on dark backgrounds.
+         */
+        this.inverted = false;
+        /**
+         * Alters the shape of the button to be full width of its parent container
+         */
+        this.fluid = false;
+    }
+    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;
     }
-    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";
-      }
+    getAriaAttributes() {
+        const attributes = {
+            role: this.componentRole,
+            label: this.label,
+        };
+        // TODO: checked and selected roles are not mutually exclusive
+        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 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`
+    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 `
       <button
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
@@ -440,64 +458,48 @@ class LeuButton extends LeuElement {
         ${this.renderExpandingIcon()}
       </button>
     `;
-  }
+    }
 }
-_defineProperty(LeuButton, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(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
-  }
-});
-
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };
+LeuButton.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuButton.styles = [LeuElement.styles, css_248z];
+LeuButton.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "componentRole", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "fluid", void 0);
+
+export { 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';
+
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @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
-     * @returns {string}
+     * Retrieves the value or the text content of a given LeuButton element.
      */
-    static getButtonValue(button: any): string;
-    _items: any[];
-    set value(newValue: string);
-    get value(): string;
-    _handleSlotChange(): void;
+    private static getButtonValue;
     /**
-     * @param {import("../button/Button").LeuButton} button
+     * The value of the currently selected (active) button
      */
-    _handleButtonClick(button: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    get value(): string;
+    set value(newValue: string);
+    private _handleSlotChange;
+    private _handleButtonClick;
+    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,12 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { LeuButton } from './Button.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 './hasSlotController-Bm2tipvG.js';
 
 var css_248z = css`.group {
   display: flex;
@@ -9,91 +16,87 @@ var css_248z = css`.group {
 `;
 
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @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
  */
 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 = [];
+        this._handleButtonClick = (event) => {
+            const button = event.currentTarget;
+            if (!button.active) {
+                this.value = LeuButtonGroup.getButtonValue(button);
+                this.dispatchEvent(new CustomEvent("input", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: LeuButtonGroup.getButtonValue(button) },
+                }));
+            }
+        };
+    }
     /**
-     * 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.
+     * Retrieves the value or the text content of a given LeuButton element.
      */
-    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.textContent.trim();
     }
-  }
-  render() {
-    return html`
+    /**
+     * The value of the currently selected (active) button
+     */
+    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 })
+            .filter((el) => el instanceof LeuButton);
+        let foundActiveButtonBefore = false;
+        this._items.forEach((item) => {
+            /* eslint-disable no-param-reassign */
+            item.addEventListener("click", this._handleButtonClick);
+            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 */
+        });
+    }
+    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/ChartWrapper.d.ts

@@ -0,0 +1,38 @@
+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 { LeuSpinner } from './Spinner.js';
+
+/**
+ * A wrapper element for charts.
+ * @tagname leu-chart-wrapper
+ * @slot title - The title of the chart. Use a heading tag (h2-4) depending on your context.
+ * @slot description - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+ * @slot chart - The actual chart
+ * @slot caption - A caption for the chart, e.g. a source or explanation of the data.
+ * @slot download - A download button or dropdown to export the chart in different formats.
+ */
+declare class LeuChartWrapper extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static dependencies: {
+        "leu-spinner": typeof LeuSpinner;
+    };
+    /**
+     * Whether the chart is currently loading or not.
+     * When set to `true`, a spinner will be shown in the chart container.
+     */
+    pending: boolean;
+    hasSlotController: HasSlotController;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuChartWrapper };