@statistikzh/leu 0.14.3 → 0.15.0

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { unsafeStatic, html } from 'lit/static-html.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {
@@ -21,137 +21,111 @@ var css_248z = css`.label {
 `;
 
 /* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
-
 const SELECTION_MODES = Object.freeze({
-  single: "single",
-  multiple: "multiple",
-  none: "none"
+    single: "single",
+    multiple: "multiple",
+    none: "none",
 });
-
 /**
  * @slot - Place leu-chip-* elements inside this slot
  * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
 class LeuChipGroup extends LeuElement {
-  constructor() {
-    super();
-    /** @internal */
-    _defineProperty(this, "handleInput", e => {
-      if (this.selectionMode === SELECTION_MODES.single) {
-        this.items.forEach(item => {
-          item.checked = item === e.target; // eslint-disable-line no-param-reassign
-        });
-      }
-    });
-    /** @internal */
-    _defineProperty(this, "handleSlotChange", e => {
-      const slot = e.target;
-      const items = slot.assignedElements({
-        flatten: true
-      });
-      this.items = items;
-    });
-    this.inverted = false;
-    this.headingLevel = 2;
-    this.label = "";
-
-    /** @internal */
-    this.items = [];
-
-    /** @type {"single" | "multiple" | "none"} */
-    this.selectionMode = SELECTION_MODES.none;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-
+    constructor() {
+        super();
+        /** @internal */
+        this.handleInput = (e) => {
+            if (this.selectionMode === SELECTION_MODES.single) {
+                this.items.forEach((item) => {
+                    item.checked = item === e.target; // eslint-disable-line no-param-reassign
+                });
+            }
+        };
+        /** @internal */
+        this.handleSlotChange = (e) => {
+            const slot = e.target;
+            const items = slot.assignedElements({ flatten: true });
+            this.items = items;
+        };
+        this.inverted = false;
+        this.headingLevel = 2;
+        this.label = "";
+        /** @internal */
+        this.items = [];
+        /** @type {"single" | "multiple" | "none"} */
+        this.selectionMode = SELECTION_MODES.none;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        /**
+         * It is technically possible to add an event listener to the host element
+         * before it is connected to the dom. In that case the outside event listener would
+         * be called before the following event listener. But at this point multiple
+         * radio chips could be selected at the same time because `handleInput` hasn't been
+         * called yet. That's why we use the capture phase.
+         */
+        this.addEventListener("input", this.handleInput, { capture: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("input", this.handleInput, { capture: true });
+    }
+    get value() {
+        return this.items.filter((i) => i.checked).map((i) => i.getValue());
+    }
     /**
-     * It is technically possible to add an event listener to the host element
-     * before it is connected to the dom. In that case the outside event listener would
-     * be called before the following event listener. But at this point multiple
-     * radio chips could be selected at the same time because `handleInput` hasn't been
-     * called yet. That's why we use the capture phase.
+     * Checks the items with the given values.
+     * If the selectionMode is single, only the first item with the given value is checked.
+     * @param {string[]} valueList
      */
-    this.addEventListener("input", this.handleInput, {
-      capture: true
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("input", this.handleInput, {
-      capture: true
-    });
-  }
-  get value() {
-    return this.items.filter(i => i.checked).map(i => i.getValue());
-  }
-
-  /**
-   * Checks the items with the given values.
-   * If the selectionMode is single, only the first item with the given value is checked.
-   * @param {string[]} valueList
-   */
-  set value(valueList) {
-    let hasChanged = false;
-    for (const item of this.items) {
-      item.checked = hasChanged ? false : valueList.includes(item.value);
-      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
-        hasChanged = true;
-      }
+    set value(valueList) {
+        let hasChanged = false;
+        for (const item of this.items) {
+            item.checked = hasChanged ? false : valueList.includes(item.value);
+            if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+                hasChanged = true;
+            }
+        }
     }
-  }
-
-  /**
-   * Determines the heading tag of the accordion toggle.
-   * The headingLevel shouldn't be used directly to render the heading tag
-   * in order to avoid XSS issues.
-   * @returns {String} The heading tag of the accordion toggle.
-   * @internal
-   */
-  _getHeadingTag() {
-    let level = 2;
-    if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = this.headingLevel;
+    /**
+     * Determines the heading tag of the accordion toggle.
+     * The headingLevel shouldn't be used directly to render the heading tag
+     * in order to avoid XSS issues.
+     * @returns {String} The heading tag of the accordion toggle.
+     * @internal
+     */
+    _getHeadingTag() {
+        let level = 2;
+        if (this.headingLevel > 0 && this.headingLevel < 7) {
+            level = this.headingLevel;
+        }
+        return `h${level}`;
     }
-    return `h${level}`;
-  }
-  render() {
-    const hTag = this._getHeadingTag();
-
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`
-      ${this.label ? html`<${unsafeStatic(hTag)} class="label">
+    render() {
+        const hTag = this._getHeadingTag();
+        /* The eslint rules don't recognize html import from lit/static-html.js */
+        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+        return html `
+      ${this.label
+            ? html `<${unsafeStatic(hTag)} class="label">
             <span class="label">${this.label}</span>
-          </${unsafeStatic(hTag)}>` : ""}
+          </${unsafeStatic(hTag)}>`
+            : ""}
       <slot
         class="group"
         part="group"
         @slotchange=${this.handleSlotChange}
       ></slot>
     `;
-  }
+    }
 }
-_defineProperty(LeuChipGroup, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuChipGroup, "properties", {
-  inverted: {
-    type: Boolean,
-    reflect: true
-  },
-  selectionMode: {
-    type: String,
-    attribute: "selection-mode",
-    reflect: true
-  },
-  headingLevel: {
-    type: Number,
-    attribute: "heading-level",
-    reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
-  }
-});
+LeuChipGroup.styles = [LeuElement.styles, css_248z];
+LeuChipGroup.properties = {
+    inverted: { type: Boolean, reflect: true },
+    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
+    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
+    label: { type: String, reflect: true },
+};
 
 export { LeuChipGroup, SELECTION_MODES };

package/dist/ChipLink.d.ts

@@ -1,16 +1,34 @@
+import * as lit_html from 'lit-html';
+import { LeuChipBase } from './Chip.js';
+import 'lit';
+import './LeuElement.d-BevHqLUu.js';
+
+declare const SIZES: {
+    regular: string;
+    large: string;
+};
 /**
  * @tagname leu-chip-link
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip
  */
-export class LeuChipLink extends LeuChipBase {
-    size: string;
-    href: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export namespace SIZES {
-    let regular: string;
-    let large: string;
+declare class LeuChipLink extends LeuChipBase {
+    static properties: {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        href: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
+    render(): lit_html.TemplateResult<1>;
 }
-import { LeuChipBase } from './Chip.js';
-//# sourceMappingURL=ChipLink.d.ts.map
+
+export { LeuChipLink, SIZES };

package/dist/ChipLink.js

@@ -1,40 +1,33 @@
-import { _ as _defineProperty } from './LeuElement-Dd6zm9XF.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
+import './LeuElement-BhAmogDy.js';
 
 const SIZES = {
-  regular: "regular",
-  large: "large"
+    regular: "regular",
+    large: "large",
 };
-
 /**
  * @tagname leu-chip-link
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip
  */
 class LeuChipLink extends LeuChipBase {
-  constructor() {
-    super();
-    this.inverted = false;
-    this.size = SIZES.regular;
-    this.href = "";
-  }
-  render() {
-    return html`<a href=${this.href} class="button">
+    constructor() {
+        super();
+        this.inverted = false;
+        this.size = SIZES.regular;
+        this.href = "";
+    }
+    render() {
+        return html `<a href=${this.href} class="button">
       <span class="label"><slot></slot></span>
     </a>`;
-  }
+    }
 }
-_defineProperty(LeuChipLink, "properties", {
-  ...LeuChipBase.properties,
-  size: {
-    type: String,
-    reflect: true
-  },
-  href: {
-    type: String,
-    reflect: true
-  }
-});
+LeuChipLink.properties = {
+    ...LeuChipBase.properties,
+    size: { type: String, reflect: true },
+    href: { type: String, reflect: true },
+};
 
 export { LeuChipLink, SIZES };

package/dist/ChipRemovable.d.ts

@@ -1,18 +1,37 @@
+import * as lit_html from 'lit-html';
+import { LeuChipBase } from './Chip.js';
+import { LeuIcon } from './Icon.js';
+import 'lit';
+import './LeuElement.d-BevHqLUu.js';
+
 /**
  * @slot - The content of the chip
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
  * @prop {string} value - The value of the chip.
  */
-export class LeuChipRemovable extends LeuChipBase {
-    value: string;
+declare class LeuChipRemovable extends LeuChipBase {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    static properties: {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
     /**
      * Returns the value of the chip. If `value` is not set, it will return the text content
      * @returns {string}
      */
-    getValue(): string;
+    getValue(): any;
     handleClick(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { LeuChipBase } from './Chip.js';
-//# sourceMappingURL=ChipRemovable.d.ts.map
+
+export { LeuChipRemovable };

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty } from './LeuElement-Dd6zm9XF.js';
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
+import './LeuElement-BhAmogDy.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 };