@statistikzh/leu 0.24.2 → 0.25.0

package/dist/Chip.js

@@ -1,167 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { css } from 'lit';
-
-var css_248z = css`:host *::before,
-:host *::after {
-  box-sizing: border-box;
-}
-
-:host {
-  --chip-background-color-default: var(--leu-color-black-transp-10);
-  --chip-background-color-hover: var(--leu-color-black-transp-20);
-  --chip-background-color-checked: var(--leu-color-black-100);
-  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
-
-  --chip-color-default: var(--leu-color-black-transp-60);
-  --chip-color-hover: var(--leu-color-black-100);
-  --chip-color-checked: var(--leu-color-black-0);
-
-  --chip-radio-border-default: var(--leu-color-black-transp-40);
-  --chip-radio-border-checked: var(--leu-color-black-0);
-  --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-checked: var(--leu-color-func-cyan);
-
-  --chip-font-regular: var(--leu-font-family-regular);
-  --chip-font-black: var(--leu-font-family-black);
-
-  --chip-background-color: var(--chip-background-color-default);
-  --chip-color: var(--chip-color-default);
-  --chip-radio-border: var(--chip-radio-border-default);
-  --chip-radio-background: var(--chip-radio-background-default);
-
-  --leu-icon-size: 1rem;
-
-  font-family: var(--chip-font-regular);
-
-  /* Allow shrinking to achieve text truncation (ellipsis) */
-  min-width: 0;
-}
-
-:host([inverted]) {
-  --chip-background-color: var(--leu-color-black-transp-20);
-  --chip-background-color-hover: var(--leu-color-black-transp-40);
-
-  --chip-color-default: var(--leu-color-black-0);
-  --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-checked: var(--leu-color-black-0);
-}
-
-:host([checked]) {
-  --chip-background-color: var(--chip-background-color-checked);
-  --chip-color: var(--chip-color-checked);
-  --chip-radio-border: var(--chip-radio-border-checked);
-  --chip-radio-background: var(--chip-radio-background-checked);
-}
-
-.button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  border-radius: 1rem;
-  background-color: var(--chip-background-color);
-  padding: 8px 1rem;
-
-  color: var(--chip-color);
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  cursor: pointer;
-
-  display: inline-flex;
-  gap: 0.5rem;
-  align-items: center;
-
-  /* Allow shrinking to achieve text truncation (ellipsis) */
-  min-width: 0;
-  max-width: 100%;
-}
-
-.button:hover,
-.button:focus-visible {
-  --chip-background-color: var(--chip-background-color-hover);
-  --chip-color: var(--chip-color-hover);
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-:host([href]) .button {
-  border-radius: 1.25rem;
-  padding: 0.5rem 1rem;
-
-  font-family: var(--chip-font-black);
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-:host([checked]) .button:hover,
-:host([checked]) .button:focus-visible {
-  --chip-background-color: var(--chip-background-color-checked-hover);
-  --chip-color: var(--chip-color-checked);
-}
-
-:host([href][size="large"]) .button {
-  border-radius: 1.5rem;
-  padding: 0.3125rem 1.5rem;
-
-  font-size: 2rem;
-  line-height: 2.375rem;
-}
-
-:host([size="small"]:not([variant="radio"])) .button {
-  padding: 0.3125rem 0.75rem;
-
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-:host([variant="radio"]) .button::before {
-  content: "";
-  flex: 0 0 1rem;
-  width: 1rem;
-  height: 1rem;
-  background-color: var(--chip-radio-background);
-  border: 2px solid var(--chip-radio-border);
-  border-radius: 50%;
-}
-
-:host([variant="radio"][checked]) .button::before {
-  border-width: 3px;
-}
-
-.label {
-  position: relative;
-  top: -0.0625rem;
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-`;
-
-/* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
-class LeuChipBase extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.inverted = false;
-    }
-}
-LeuChipBase.styles = [LeuElement.styles, css_248z];
-/** @internal */
-LeuChipBase.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuChipBase.prototype, "inverted", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuChipBase } from "./Chip-Ch09jjYi.js";
 export { LeuChipBase };

package/dist/ChipGroup-PvqVW-tm.js

@@ -0,0 +1,125 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { LeuChipSelectable } from "./ChipSelectable.js";
+import { css } from "lit";
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+import { property } from "lit/decorators.js";
+//#region src/components/chip/chip-group.css?inline
+var chip_group_default = css`.label {
+  margin: 0 0 0.5rem;
+  font: var(--leu-t-curve-tiny-black-font);
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) .label {
+  color: var(--leu-color-black-0);
+}
+
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  gap: var(--leu-chip-group-gap, 0.5rem);
+}
+`;
+//#endregion
+//#region src/components/chip/ChipGroup.ts
+/**
+* @slot - Place leu-chip-* elements inside this slot
+* @cssproperty --leu-chip-group-gap - The gap between the chips
+* @tagname leu-chip-group
+*/
+var LeuChipGroup = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.inverted = false;
+		this.selectionMode = "none";
+		this.headingLevel = 2;
+		this.label = "";
+		this.selectableItems = [];
+		this.handleInput = (e) => {
+			if (this.selectionMode === "single") this.selectableItems.forEach((item) => {
+				item.checked = item === e.target;
+			});
+		};
+		this.handleSlotChange = (e) => {
+			this.selectableItems = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof LeuChipSelectable);
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, chip_group_default];
+	}
+	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.selectableItems.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.
+	*/
+	set value(valueList) {
+		let hasChanged = false;
+		for (const item of this.selectableItems) {
+			item.checked = hasChanged ? false : valueList.includes(item.value);
+			if (this.selectionMode === "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.
+	* @internal
+	*/
+	_getHeadingTag() {
+		let level = 2;
+		if (this.headingLevel > 0 && this.headingLevel < 7) level = this.headingLevel;
+		return `h${level}`;
+	}
+	render() {
+		const hTag = this._getHeadingTag();
+		return html$1`
+      ${this.label ? html$1`<${unsafeStatic(hTag)} class="label">
+            <span class="label">${this.label}</span>
+          </${unsafeStatic(hTag)}>` : ""}
+      <slot
+        class="group"
+        part="group"
+        @slotchange=${this.handleSlotChange}
+      ></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuChipGroup.prototype, "inverted", void 0);
+__decorate([property({
+	type: String,
+	attribute: "selection-mode",
+	reflect: true
+})], LeuChipGroup.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "heading-level",
+	reflect: true
+})], LeuChipGroup.prototype, "headingLevel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipGroup.prototype, "label", void 0);
+//#endregion
+export { LeuChipGroup as t };

package/dist/ChipGroup-Ta8Ht4jc.d.ts

@@ -0,0 +1,42 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuChipSelectable } from "./ChipSelectable-CMJNcE4U.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/chip/ChipGroup.d.ts
+/**
+ * @slot - Place leu-chip-* elements inside this slot
+ * @cssproperty --leu-chip-group-gap - The gap between the chips
+ * @tagname leu-chip-group
+ */
+declare class LeuChipGroup extends LeuElement {
+  static styles: any[];
+  inverted: boolean;
+  selectionMode: "single" | "multiple" | "none";
+  headingLevel: number;
+  label: string;
+  protected selectableItems: Array<LeuChipSelectable>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  get value(): string[];
+  /**
+   * Checks the items with the given values.
+   * If the selectionMode is single, only the first item with the given value is checked.
+   */
+  set value(valueList: string[]);
+  /**
+   * 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.
+   * @internal
+   */
+  protected _getHeadingTag(): string;
+  protected handleInput: (e: Event & {
+    target: LeuChipSelectable;
+  }) => void;
+  protected handleSlotChange: (e: Event & {
+    target: HTMLSlotElement;
+  }) => void;
+  render(): lit_html0.TemplateResult;
+}
+//#endregion
+export { LeuChipGroup as t };

package/dist/ChipGroup.d.ts

@@ -1,43 +1,2 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { LeuChipSelectable } from './ChipSelectable.js';
-import './Chip.js';
-
-/**
- * @slot - Place leu-chip-* elements inside this slot
- * @cssproperty --leu-chip-group-gap - The gap between the chips
- * @tagname leu-chip-group
- */
-declare class LeuChipGroup extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    inverted: boolean;
-    selectionMode: "single" | "multiple" | "none";
-    headingLevel: number;
-    label: string;
-    protected selectableItems: Array<LeuChipSelectable>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get value(): string[];
-    /**
-     * Checks the items with the given values.
-     * If the selectionMode is single, only the first item with the given value is checked.
-     */
-    set value(valueList: string[]);
-    /**
-     * 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.
-     * @internal
-     */
-    protected _getHeadingTag(): string;
-    protected handleInput: (e: Event & {
-        target: LeuChipSelectable;
-    }) => void;
-    protected handleSlotChange: (e: Event & {
-        target: HTMLSlotElement;
-    }) => void;
-    render(): lit_html.TemplateResult;
-}
-
-export { LeuChipGroup };
+import { t as LeuChipGroup } from "./ChipGroup-Ta8Ht4jc.js";
+export { LeuChipGroup };

package/dist/ChipGroup.js

@@ -1,133 +1,4 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { unsafeStatic, html } from 'lit/static-html.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { css } from 'lit';
-import { LeuChipSelectable } from './ChipSelectable.js';
-import './Chip.js';
-
-var css_248z = css`.label {
-  margin: 0 0 0.5rem;
-  font: var(--leu-t-curve-tiny-black-font);
-  color: var(--leu-color-black-100);
-}
-
-:host([inverted]) .label {
-  color: var(--leu-color-black-0);
-}
-
-.group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  gap: var(--leu-chip-group-gap, 0.5rem);
-}
-`;
-
-/**
- * @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(...arguments);
-        this.inverted = false;
-        this.selectionMode = "none";
-        this.headingLevel = 2;
-        this.label = "";
-        this.selectableItems = [];
-        this.handleInput = (e) => {
-            if (this.selectionMode === "single") {
-                this.selectableItems.forEach((item) => {
-                    item.checked = item === e.target; // eslint-disable-line no-param-reassign
-                });
-            }
-        };
-        this.handleSlotChange = (e) => {
-            const slot = e.target;
-            const items = slot
-                .assignedElements({ flatten: true })
-                .filter((el) => el instanceof LeuChipSelectable);
-            this.selectableItems = items;
-        };
-    }
-    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.selectableItems
-            .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.
-     */
-    set value(valueList) {
-        let hasChanged = false;
-        for (const item of this.selectableItems) {
-            item.checked = hasChanged ? false : valueList.includes(item.value);
-            if (this.selectionMode === "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.
-     * @internal
-     */
-    _getHeadingTag() {
-        let level = 2;
-        if (this.headingLevel > 0 && this.headingLevel < 7) {
-            level = this.headingLevel;
-        }
-        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">
-            <span class="label">${this.label}</span>
-          </${unsafeStatic(hTag)}>`
-            : ""}
-      <slot
-        class="group"
-        part="group"
-        @slotchange=${this.handleSlotChange}
-      ></slot>
-    `;
-    }
-}
-LeuChipGroup.styles = [LeuElement.styles, css_248z];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuChipGroup.prototype, "inverted", void 0);
-__decorate([
-    property({ type: String, attribute: "selection-mode", reflect: true })
-], LeuChipGroup.prototype, "selectionMode", void 0);
-__decorate([
-    property({ type: Number, attribute: "heading-level", reflect: true })
-], LeuChipGroup.prototype, "headingLevel", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipGroup.prototype, "label", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuChipGroup } from "./ChipGroup-PvqVW-tm.js";
+import "./Chip-Ch09jjYi.js";
 export { LeuChipGroup };

package/dist/ChipLink-BAxyQO2M.d.ts

@@ -0,0 +1,17 @@
+import { t as LeuChipBase } from "./Chip-DLKM9P7v.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/chip/ChipLink.d.ts
+/**
+ * @tagname leu-chip-link
+ * @slot - The content of the chip
+ */
+declare class LeuChipLink extends LeuChipBase {
+  /** The size of the chip */
+  size: "regular" | "large";
+  /** The URL that the chip links to */
+  href: string;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuChipLink as t };

package/dist/ChipLink.d.ts

@@ -1,18 +1,2 @@
-import * as lit_html from 'lit-html';
-import { LeuChipBase } from './Chip.js';
-import 'lit';
-import './LeuElement.d-BevHqLUu.js';
-
-/**
- * @tagname leu-chip-link
- * @slot - The content of the chip
- */
-declare class LeuChipLink extends LeuChipBase {
-    /** The size of the chip */
-    size: "regular" | "large";
-    /** The URL that the chip links to */
-    href: string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuChipLink };
+import { t as LeuChipLink } from "./ChipLink-BAxyQO2M.js";
+export { LeuChipLink };

package/dist/ChipLink.js

@@ -1,32 +1,32 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LeuChipBase } from './Chip.js';
-import './LeuElement-BfXSO7MN.js';
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuChipBase } from "./Chip-Ch09jjYi.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/chip/ChipLink.ts
 /**
- * @tagname leu-chip-link
- * @slot - The content of the chip
- */
-class LeuChipLink extends LeuChipBase {
-    constructor() {
-        super(...arguments);
-        /** The size of the chip */
-        this.size = "regular";
-        /** The URL that the chip links to */
-        this.href = "";
-    }
-    render() {
-        return html `<a href=${this.href} class="button">
+* @tagname leu-chip-link
+* @slot - The content of the chip
+*/
+var LeuChipLink = class extends LeuChipBase {
+	constructor(..._args) {
+		super(..._args);
+		this.size = "regular";
+		this.href = "";
+	}
+	render() {
+		return html`<a href=${this.href} class="button">
       <span class="label"><slot></slot></span>
     </a>`;
-    }
-}
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipLink.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipLink.prototype, "href", void 0);
-
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipLink.prototype, "size", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipLink.prototype, "href", void 0);
+//#endregion
 export { LeuChipLink };

package/dist/ChipRemovable-DBjwt0CH.d.ts

@@ -0,0 +1,25 @@
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { t as LeuChipBase } from "./Chip-DLKM9P7v.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/chip/ChipRemovable.d.ts
+/**
+ * @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.
+ */
+declare class LeuChipRemovable extends LeuChipBase {
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  value: string;
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   */
+  getValue(): string;
+  protected handleClick(): void;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuChipRemovable as t };

package/dist/ChipRemovable.d.ts

@@ -1,26 +1,2 @@
-import * as lit_html from 'lit-html';
-import { LeuChipBase } from './Chip.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.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.
- */
-declare class LeuChipRemovable extends LeuChipBase {
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-    };
-    value: string;
-    /**
-     * Returns the value of the chip. If `value` is not set, it will return the text content
-     */
-    getValue(): string;
-    protected handleClick(): void;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuChipRemovable };
+import { t as LeuChipRemovable } from "./ChipRemovable-DBjwt0CH.js";
+export { LeuChipRemovable };