@statistikzh/leu 0.14.4 → 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

@@ -20,27 +20,12 @@ declare class LeuCheckbox extends LeuElement {
         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;
+    checked: boolean;
+    disabled: boolean;
+    value: string;
+    name: string;
+    private handleChange;
+    private handleInput;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/Checkbox.js

@@ -1,5 +1,7 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {
@@ -99,11 +101,11 @@ var css_248z = css`:host {
  */
 class LeuCheckbox extends LeuElement {
     constructor() {
-        super();
+        super(...arguments);
         this.checked = false;
         this.disabled = false;
-        this.name = "";
         this.value = "";
+        this.name = "";
     }
     handleChange(event) {
         this.checked = event.target.checked;
@@ -140,11 +142,17 @@ 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 },
-};
+__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

@@ -3,24 +3,23 @@ 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
  */
 declare class LeuCheckboxGroup extends LeuElement {
     static styles: lit.CSSResultGroup[];
-    static properties: {
-        orientation: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    constructor();
-    get value(): any;
-    handleSlotChange(): void;
-    handleItems(): void;
+    /**
+     * Defines how the checkboxes should be aligned.
+     */
+    orientation: "horizontal" | "vertical";
+    /**
+     * The label of the checkbox group
+     */
+    label?: string;
+    private items;
+    get value(): string[];
+    private handleSlotChange;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/CheckboxGroup.js

@@ -1,6 +1,10 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.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,12 +38,16 @@ 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"} */
+        super(...arguments);
+        /**
+         * Defines how the checkboxes should be aligned.
+         */
         this.orientation = "horizontal";
         this.items = [];
     }
@@ -47,10 +55,7 @@ class LeuCheckboxGroup extends LeuElement {
         return this.items.filter((i) => i.checked).map((i) => i.value);
     }
     handleSlotChange() {
-        this.handleItems();
-    }
-    handleItems() {
-        this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"));
+        this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])")).filter((el) => el instanceof LeuCheckbox);
     }
     render() {
         const fieldsetClasses = {
@@ -68,9 +73,11 @@ class LeuCheckboxGroup extends LeuElement {
     }
 }
 LeuCheckboxGroup.styles = [LeuElement.styles, css_248z];
-LeuCheckboxGroup.properties = {
-    orientation: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-};
+__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.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-x8UlIDDl.js';
+import './LeuElement-BhAmogDy.js';
 
 const SIZES = {
     regular: "regular",

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-x8UlIDDl.js';
+import './LeuElement-BhAmogDy.js';
 
 /**
  * @slot - The content of the chip

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-x8UlIDDl.js';
+import './LeuElement-BhAmogDy.js';
 
 const SIZES = {
     small: "small",

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 

package/dist/Dropdown.js

@@ -1,13 +1,15 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
 import { LeuPopup } from './Popup.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 '@floating-ui/dom';
 

package/dist/Icon.js

@@ -1,5 +1,5 @@
 import { css, html, svg } from 'lit';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 
 var css_248z = css`:host {
   display: contents;

package/dist/Input.js

@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/{LeuElement-x8UlIDDl.js → LeuElement-BhAmogDy.js}

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.14.4";
+LeuElement.version = "0.15.0";
 LeuElement.dependencies = {};
 LeuElement.styles = css_248z;
 

package/dist/Menu.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/Pagination.d.ts

@@ -4,7 +4,6 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';
-import './hasSlotController.d-emXwVXWF.js';
 
 /**
  * @tagname leu-pagination
@@ -27,37 +26,50 @@ declare class LeuPagination extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
-    static properties: {
-        defaultPage: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        itemsPerPage: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        numOfItems: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        _page: {
-            state: boolean;
-        };
-    };
-    constructor();
+    defaultPage?: number;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage: number;
+    /**
+     * Total number of items to paginate.
+     */
+    numOfItems: number;
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @internal
+     */
+    private _page;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    get page(): any;
-    set page(page: any);
+    /**
+     * The current page number. This is a 1-based index.
+     * When setting this value, it will be clamped
+     * to the range of valid pages.
+     */
+    get page(): number;
+    set page(page: number);
+    /**
+     * The index of the first item on the current page.
+     */
     get startIndex(): number;
+    /**
+     * The index of the last item on the current page.
+     * This is exclusive, meaning it is one past the last item.
+     *
+     * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
+     */
     get endIndex(): number;
     get _maxPage(): number;
-    _isFirstPage(): boolean;
-    _isLastPage(): boolean;
-    _clampPage(page: any): number;
-    _updatePage(page: any): void;
-    _handleChange(event: any): void;
-    _handleInput(event: any): void;
-    _handleKeyDown(event: any): void;
+    private _isFirstPage;
+    private _isLastPage;
+    private _clampPage;
+    private _updatePage;
+    private _handleChange;
+    private _handleInput;
+    private _handleKeyDown;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/Pagination.js

@@ -1,6 +1,8 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { property, state } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';
@@ -75,17 +77,20 @@ const MIN_PAGE = 1;
  */
 class LeuPagination extends LeuElement {
     constructor() {
-        super();
-        /** @type {Number} */
-        this.numOfItems = 1;
-        /** @type {Number} */
+        super(...arguments);
+        /**
+         * Number of items per page.
+         */
         this.itemsPerPage = 1;
+        /**
+         * Total number of items to paginate.
+         */
+        this.numOfItems = 1;
         /**
          * Internal page state that contains an
          * already clamped page number. Should only
          * be accessed through the `page` getter and
          * setter.
-         * @type {Number}
          * @internal
          */
         this._page = 1;
@@ -96,15 +101,29 @@ class LeuPagination extends LeuElement {
             this.page = parseInt(newVal, 10);
         }
     }
+    /**
+     * The current page number. This is a 1-based index.
+     * When setting this value, it will be clamped
+     * to the range of valid pages.
+     */
     get page() {
         return this._page;
     }
     set page(page) {
         this._page = this._clampPage(page);
     }
+    /**
+     * The index of the first item on the current page.
+     */
     get startIndex() {
         return (this.page - 1) * this.itemsPerPage;
     }
+    /**
+     * The index of the last item on the current page.
+     * This is exclusive, meaning it is one past the last item.
+     *
+     * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
+     */
     get endIndex() {
         return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems);
     }
@@ -174,7 +193,7 @@ class LeuPagination extends LeuElement {
         <leu-button
           variant="secondary"
           label="Vorherige Seite"
-          @click=${(_) => {
+          @click=${() => {
             this._updatePage(this.page - 1);
         }}
           ?disabled=${this._isFirstPage()}
@@ -183,7 +202,7 @@ class LeuPagination extends LeuElement {
         <leu-button
           variant="secondary"
           label="Nächste Seite"
-          @click=${(_) => {
+          @click=${() => {
             this._updatePage(this.page + 1);
         }}
           ?disabled=${this._isLastPage()}
@@ -206,11 +225,17 @@ LeuPagination.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuPagination.properties = {
-    defaultPage: { type: Number, reflect: true },
-    itemsPerPage: { type: Number, reflect: true },
-    numOfItems: { type: Number, reflect: true },
-    _page: { state: true },
-};
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "defaultPage", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "numOfItems", void 0);
+__decorate([
+    state()
+], LeuPagination.prototype, "_page", void 0);
 
 export { LeuPagination };

package/dist/Placeholder.d.ts

@@ -0,0 +1,27 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
+/**
+ * @summary * A placeholder to display when no content is available.
+ * @tagname leu-placeholder
+ * @slot title - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
+ * @slot description - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
+ * @slot cta - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
+ *
+ * @todo Add pending state with a skeleton.
+ */
+declare class LeuPlaceholder extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuPlaceholder };