@statistikzh/leu 0.14.3 → 0.15.0

package/dist/ChartWrapper.js

@@ -0,0 +1,153 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
+import { css, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
+import { LeuSpinner } from './Spinner.js';
+
+var css_248z = css`.title::slotted(h2) {
+  font: var(--leu-t-curve-large-black-font);
+  margin: 0 0 0.75rem;
+}
+@media (min-width: 840px) {
+.title::slotted(h2) {
+    margin: 0 0 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.title::slotted(h2) {
+    margin: 0 0 1.5rem;
+}
+  }
+.title::slotted(h3) {
+  font: var(--leu-t-curve-medium-black-font);
+  margin: 0 0 0.5rem;
+}
+.title::slotted(h4) {
+  font: var(--leu-t-curve-regular-black-font);
+  margin: 0 0 0.5rem;
+}
+.description,
+.chart {
+  display: block;
+  margin-bottom: 0.75rem;
+}
+@media (min-width: 840px) {
+.description,
+.chart {
+    margin-bottom: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.description,
+.chart {
+    margin-bottom: 1.5rem;
+}
+  }
+.description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+}
+.caption {
+  font: var(--leu-t-curve-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+.ruler {
+  display: block;
+  border: none;
+  border-top: 1px solid var(--leu-color-black-transp-20);
+  margin: 0.75rem 0;
+}
+@media (min-width: 1280px) {
+.ruler {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+  }
+.download {
+  display: block;
+  margin-left: -0.5rem;
+}
+.chart-container {
+  position: relative;
+}
+.spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  place-content: center;
+}
+`;
+
+/**
+ * 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.
+ */
+class LeuChartWrapper extends LeuElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the chart is currently loading or not.
+         * When set to `true`, a spinner will be shown in the chart container.
+         */
+        this.pending = false;
+        this.hasSlotController = new HasSlotController(this, [
+            "description",
+            "caption",
+            "download",
+        ]);
+    }
+    render() {
+        const hasDescription = this.hasSlotController.test("description");
+        const hasCaption = this.hasSlotController.test("caption");
+        const hasDownload = this.hasSlotController.test("download");
+        return html `
+      <figure>
+        <slot name="title" class="title"></slot>
+        ${hasDescription
+            ? html `<slot name="description" class="description"></slot>`
+            : nothing}
+        <div class="chart-container">
+          <slot name="chart" class="chart"></slot>
+          ${this.pending
+            ? html `<div class="spinner-container">
+                <leu-spinner class="spinner"></leu-spinner>
+              </div>`
+            : nothing}
+        </div>
+        ${hasCaption
+            ? html `<figcaption>
+              <slot name="caption" class="caption"></slot>
+            </figcaption>`
+            : nothing}
+        <hr class="ruler" />
+        ${hasDownload
+            ? html `<slot name="download" class="download"></slot>`
+            : nothing}
+      </figure>
+    `;
+    }
+}
+LeuChartWrapper.styles = [LeuElement.styles, css_248z];
+LeuChartWrapper.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuChartWrapper.dependencies = {
+    "leu-spinner": LeuSpinner,
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuChartWrapper.prototype, "pending", void 0);
+
+export { LeuChartWrapper };

package/dist/Checkbox.d.ts

@@ -1,14 +1,32 @@
+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 {
+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;
+    };
     checked: boolean;
     disabled: boolean;
-    name: string;
     value: string;
-    handleChange(event: any): void;
-    handleInput(event: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    name: string;
+    private handleChange;
+    private handleInput;
+    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,7 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {
@@ -98,23 +100,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(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.value = "";
+        this.name = "";
+    }
+    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 +131,28 @@ 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,
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuCheckbox.prototype, "name", void 0);
 
 export { LeuCheckbox };

package/dist/CheckboxGroup.d.ts

@@ -1,14 +1,26 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
+ *
+ * @slot - Place the checkboxes inside the default slot.
  * @tagname leu-checkbox-group
  */
-export class LeuCheckboxGroup extends LeuElement {
-    /** @type {"horizontal" | "vertical"} */
+declare class LeuCheckboxGroup extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /**
+     * Defines how the checkboxes should be aligned.
+     */
     orientation: "horizontal" | "vertical";
-    items: any[];
-    get value(): any[];
-    handleSlotChange(): void;
-    handleItems(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The label of the checkbox group
+     */
+    label?: string;
+    private items;
+    get value(): string[];
+    private handleSlotChange;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=CheckboxGroup.d.ts.map
+
+export { LeuCheckboxGroup };

package/dist/CheckboxGroup.js

@@ -1,6 +1,10 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { LeuCheckbox } from './Checkbox.js';
+import './Icon.js';
 
 var css_248z = css`:host {
   --group-font-regular: var(--leu-font-family-regular);
@@ -34,47 +38,46 @@ var css_248z = css`:host {
 `;
 
 /**
+ *
+ * @slot - Place the checkboxes inside the default slot.
  * @tagname leu-checkbox-group
  */
 class LeuCheckboxGroup extends LeuElement {
-  constructor() {
-    super();
-    /** @type {"horizontal" | "vertical"} */
-    this.orientation = "horizontal";
-    this.items = [];
-  }
-  get value() {
-    return this.items.filter(i => i.checked).map(i => i.value);
-  }
-  handleSlotChange() {
-    this.handleItems();
-  }
-  handleItems() {
-    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"));
-  }
-  render() {
-    const fieldsetClasses = {
-      fieldset: "true",
-      "fieldset--vertical": this.orientation === "vertical"
-    };
-    return html`
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines how the checkboxes should be aligned.
+         */
+        this.orientation = "horizontal";
+        this.items = [];
+    }
+    get value() {
+        return this.items.filter((i) => i.checked).map((i) => i.value);
+    }
+    handleSlotChange() {
+        this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuCheckbox);
+    }
+    render() {
+        const fieldsetClasses = {
+            fieldset: "true",
+            "fieldset--vertical": this.orientation === "vertical",
+        };
+        return html `
       <fieldset class=${classMap(fieldsetClasses)}>
-        ${this.label ? html`<legend class="legend">${this.label}</legend>` : html``}
+        ${this.label
+            ? html `<legend class="legend">${this.label}</legend>`
+            : html ``}
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
     `;
-  }
+    }
 }
-_defineProperty(LeuCheckboxGroup, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuCheckboxGroup, "properties", {
-  orientation: {
-    type: String,
-    reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
-  }
-});
+LeuCheckboxGroup.styles = [LeuElement.styles, css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], LeuCheckboxGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuCheckboxGroup.prototype, "label", void 0);
 
 export { LeuCheckboxGroup };

package/dist/Chip.d.ts

@@ -1,5 +1,24 @@
-export class LeuChipBase extends LeuElement {
-    inverted: boolean;
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
+declare class LeuChipBase extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /** @internal */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static properties: {
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Chip.d.ts.map
+
+export { LeuChipBase };

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,
@@ -146,24 +146,20 @@ var css_248z = css`:host *::before,
 `;
 
 /* 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();
-    this.inverted = false;
-  }
+    constructor() {
+        super();
+        this.inverted = false;
+    }
 }
-_defineProperty(LeuChipBase, "styles", [LeuElement.styles, css_248z]);
+LeuChipBase.styles = [LeuElement.styles, css_248z];
 /** @internal */
-_defineProperty(LeuChipBase, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuChipBase, "properties", {
-  inverted: {
-    type: Boolean,
-    reflect: true
-  }
-});
+LeuChipBase.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuChipBase.properties = {
+    inverted: { type: Boolean, reflect: true },
+};
 
 export { LeuChipBase };

package/dist/ChipGroup.d.ts

@@ -1,22 +1,49 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
+declare const SELECTION_MODES: Readonly<{
+    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
  */
-export class LeuChipGroup extends LeuElement {
-    items: any[];
-    inverted: boolean;
-    headingLevel: number;
-    label: string;
-    /** @type {"single" | "multiple" | "none"} */
-    selectionMode: "single" | "multiple" | "none";
+declare class LeuChipGroup extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static properties: {
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        selectionMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        headingLevel: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): any;
     /**
      * 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: string[]);
-    get value(): string[];
+    set value(valueList: any);
     /**
      * Determines the heading tag of the accordion toggle.
      * The headingLevel shouldn't be used directly to render the heading tag
@@ -25,12 +52,11 @@ export class LeuChipGroup extends LeuElement {
      * @internal
      */
     _getHeadingTag(): string;
-    render(): import("lit-html").TemplateResult;
+    /** @internal */
+    handleInput: (e: any) => void;
+    /** @internal */
+    handleSlotChange: (e: any) => void;
+    render(): lit_html.TemplateResult;
 }
-export const SELECTION_MODES: Readonly<{
-    single: "single";
-    multiple: "multiple";
-    none: "none";
-}>;
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=ChipGroup.d.ts.map
+
+export { LeuChipGroup, SELECTION_MODES };