@statistikzh/leu 0.24.2 → 0.26.0

package/dist/ButtonGroup.js

@@ -1,102 +1,7 @@
-import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.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;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-`;
-
-/**
- * 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
- * @fires input - When the value of the group changes by clicking a button
- */
-class LeuButtonGroup extends LeuElement {
-    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) },
-                }));
-            }
-        };
-    }
-    /**
-     * Retrieves the value or the text content of a given LeuButton element.
-     */
-    static getButtonValue(button) {
-        return button.getAttribute("value") ?? button.textContent.trim();
-    }
-    /**
-     * 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>
-    `;
-    }
-}
-LeuButtonGroup.styles = [LeuElement.styles, css_248z];
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuButtonGroup } from "./ButtonGroup-B8U9fDvM.js";
 export { LeuButtonGroup };

package/dist/ChartWrapper-CSMFwz9e.js

@@ -0,0 +1,158 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuSpinner } from "./Spinner-DDTqijTO.js";
+import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/chart-wrapper/chart-wrapper.css?inline
+var chart_wrapper_default = css`.chart-wrapper {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+.chart-wrapper__title::slotted(h2) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-large-black-font);
+  margin: 0 0 0.75rem;
+}
+@media (min-width: 840px) {
+.chart-wrapper__title::slotted(h2) {
+    margin: 0 0 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.chart-wrapper__title::slotted(h2) {
+    margin: 0 0 1.5rem;
+}
+  }
+.chart-wrapper__title::slotted(h3) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-medium-black-font);
+  margin: 0 0 0.5rem;
+}
+.chart-wrapper__title::slotted(h4) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-regular-black-font);
+  margin: 0 0 0.5rem;
+}
+.chart-wrapper__description,
+.chart-wrapper__chart {
+  display: block;
+  margin-bottom: 0.75rem;
+}
+@media (min-width: 840px) {
+.chart-wrapper__description,
+.chart-wrapper__chart {
+    margin-bottom: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.chart-wrapper__description,
+.chart-wrapper__chart {
+    margin-bottom: 1.5rem;
+}
+  }
+.chart-wrapper__description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+}
+.chart-wrapper__caption {
+  font: var(--leu-t-curve-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+.chart-wrapper__ruler {
+  display: block;
+  border: none;
+  border-top: 1px solid var(--leu-color-black-transp-20);
+  margin: 0.75rem 0;
+}
+@media (min-width: 1280px) {
+.chart-wrapper__ruler {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+  }
+.chart-wrapper__download {
+  display: block;
+  margin-left: -0.5rem;
+}
+.chart-wrapper__container {
+  position: relative;
+}
+.chart-wrapper__spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  place-content: center;
+}
+`;
+//#endregion
+//#region src/components/chart-wrapper/ChartWrapper.ts
+/**
+* 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.
+*/
+var LeuChartWrapper = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.pending = false;
+		this.hasSlotController = new HasSlotController(this, [
+			"description",
+			"caption",
+			"download"
+		]);
+	}
+	static {
+		this.styles = [LeuElement.styles, chart_wrapper_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.dependencies = { "leu-spinner": LeuSpinner };
+	}
+	render() {
+		const hasDescription = this.hasSlotController.test("description");
+		const hasCaption = this.hasSlotController.test("caption");
+		const hasDownload = this.hasSlotController.test("download");
+		return html`
+      <figure class="chart-wrapper">
+        <slot name="title" class="chart-wrapper__title"></slot>
+        ${hasDescription ? html`<slot
+              name="description"
+              class="chart-wrapper__description"
+            ></slot>` : nothing}
+        <div class="chart-wrapper__container">
+          <slot name="chart" class="chart-wrapper__chart"></slot>
+          ${this.pending ? html`<div class="chart-wrapper__spinner-container">
+                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
+              </div>` : nothing}
+        </div>
+        ${hasCaption ? html`<figcaption>
+              <slot name="caption" class="chart-wrapper__caption"></slot>
+            </figcaption>` : nothing}
+        <hr class="chart-wrapper__ruler" />
+        ${hasDownload ? html`<slot name="download" class="chart-wrapper__download"></slot>` : nothing}
+      </figure>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuChartWrapper.prototype, "pending", void 0);
+//#endregion
+export { LeuChartWrapper as t };

package/dist/ChartWrapper.d.ts

@@ -1,9 +1,9 @@
-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';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
+import { t as HasSlotController } from "./hasSlotController-DWPyZ52b.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/chart-wrapper/ChartWrapper.d.ts
 /**
  * A wrapper element for charts.
  * @tagname leu-chart-wrapper
@@ -14,25 +14,25 @@ import { LeuSpinner } from './Spinner.js';
  * @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>;
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  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_html0.TemplateResult<1>;
 }
-
-export { LeuChartWrapper };
+//#endregion
+export { LeuChartWrapper };

package/dist/ChartWrapper.js

@@ -1,164 +1,4 @@
-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-BfXSO7MN.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-import { LeuSpinner } from './Spinner.js';
-
-var css_248z = css`.chart-wrapper {
-  display: block;
-  width: 100%;
-  margin: 0;
-}
-.chart-wrapper__title::slotted(h2) {
-  color: var(--leu-color-black-100);
-  font: var(--leu-t-curve-large-black-font);
-  margin: 0 0 0.75rem;
-}
-@media (min-width: 840px) {
-.chart-wrapper__title::slotted(h2) {
-    margin: 0 0 1.25rem;
-}
-  }
-@media (min-width: 1280px) {
-.chart-wrapper__title::slotted(h2) {
-    margin: 0 0 1.5rem;
-}
-  }
-.chart-wrapper__title::slotted(h3) {
-  color: var(--leu-color-black-100);
-  font: var(--leu-t-curve-medium-black-font);
-  margin: 0 0 0.5rem;
-}
-.chart-wrapper__title::slotted(h4) {
-  color: var(--leu-color-black-100);
-  font: var(--leu-t-curve-regular-black-font);
-  margin: 0 0 0.5rem;
-}
-.chart-wrapper__description,
-.chart-wrapper__chart {
-  display: block;
-  margin-bottom: 0.75rem;
-}
-@media (min-width: 840px) {
-.chart-wrapper__description,
-.chart-wrapper__chart {
-    margin-bottom: 1.25rem;
-}
-  }
-@media (min-width: 1280px) {
-.chart-wrapper__description,
-.chart-wrapper__chart {
-    margin-bottom: 1.5rem;
-}
-  }
-.chart-wrapper__description {
-  font: var(--leu-t-curve-small-regular-font);
-  color: var(--leu-color-black-60);
-}
-.chart-wrapper__caption {
-  font: var(--leu-t-curve-tiny-regular-font);
-  color: var(--leu-color-black-60);
-}
-.chart-wrapper__ruler {
-  display: block;
-  border: none;
-  border-top: 1px solid var(--leu-color-black-transp-20);
-  margin: 0.75rem 0;
-}
-@media (min-width: 1280px) {
-.chart-wrapper__ruler {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-  }
-.chart-wrapper__download {
-  display: block;
-  margin-left: -0.5rem;
-}
-.chart-wrapper__container {
-  position: relative;
-}
-.chart-wrapper__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 class="chart-wrapper">
-        <slot name="title" class="chart-wrapper__title"></slot>
-        ${hasDescription
-            ? html `<slot
-              name="description"
-              class="chart-wrapper__description"
-            ></slot>`
-            : nothing}
-        <div class="chart-wrapper__container">
-          <slot name="chart" class="chart-wrapper__chart"></slot>
-          ${this.pending
-            ? html `<div class="chart-wrapper__spinner-container">
-                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
-              </div>`
-            : nothing}
-        </div>
-        ${hasCaption
-            ? html `<figcaption>
-              <slot name="caption" class="chart-wrapper__caption"></slot>
-            </figcaption>`
-            : nothing}
-        <hr class="chart-wrapper__ruler" />
-        ${hasDownload
-            ? html `<slot name="download" class="chart-wrapper__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);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Spinner-DDTqijTO.js";
+import { t as LeuChartWrapper } from "./ChartWrapper-CSMFwz9e.js";
 export { LeuChartWrapper };

package/dist/Checkbox-Dd1QLpfn.js

@@ -0,0 +1,198 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-C_yYuynf.js";
+import { t as FormAssociatedMixin } from "./FormAssociatedMixin-DLPvFtbT.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/checkbox/checkbox.css?inline
+var checkbox_default = css`:host {
+  --checkbox-color: var(--leu-color-black-40);
+  --checkbox-color-disabled: var(--leu-color-black-20);
+  --checkbox-color-focus: var(--leu-color-func-cyan);
+
+  --checkbox-label-color: var(--leu-color-black-100);
+  --checkbox-label-color-disabled: var(--checkbox-color-disabled);
+
+  --checkbox-tick-color: var(--leu-color-black-0);
+
+  --checkbox-font-regular: var(--leu-font-family-regular);
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--checkbox-font-regular);
+}
+
+.checkbox {
+  --_length: 1.5rem;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+
+  width: 1.5rem;
+
+  width: var(--_length);
+  height: 1.5rem;
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--checkbox-color);
+  border-radius: 2px;
+
+  flex: 1 0 1.5rem;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+
+.checkbox:checked {
+  background-color: var(--checkbox-color);
+}
+
+.checkbox:checked {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:hover, .checkbox:focus {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid var(--checkbox-color-focus);
+  outline-offset: 2px;
+}
+
+.checkbox:disabled {
+  --checkbox-color: var(--checkbox-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  color: var(--checkbox-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.checkbox:disabled + .label {
+  --checkbox-label-color: var(--checkbox-label-color-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox:required + .label::after {
+  content: "*";
+}
+
+.icon {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  color: var(--checkbox-tick-color);
+  pointer-events: none;
+}
+`;
+//#endregion
+//#region src/components/checkbox/Checkbox.ts
+/**
+* @tagname leu-checkbox
+*/
+var LeuCheckbox = class extends FormAssociatedMixin(LeuElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.required = false;
+		this.defaultChecked = false;
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.styles = [LeuElement.styles, checkbox_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	set checked(isChecked) {
+		this._checked = isChecked;
+	}
+	get checked() {
+		if (typeof this._checked === "boolean") return this._checked;
+		return this.defaultChecked;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		let checkedChanged = false;
+		if (changedProperties.has("defaultChecked") && !changedProperties.has("checked") && !this.hasInteracted) {
+			this.checked = this.defaultChecked;
+			checkedChanged = true;
+		}
+		if (checkedChanged || changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("name") || changedProperties.has("disabled")) this.setFormValue();
+	}
+	handleChange(event) {
+		this.hasInteracted = true;
+		this.checked = event.target.checked;
+		const customEvent = new CustomEvent(event.type, event);
+		this.dispatchEvent(customEvent);
+	}
+	handleInput(event) {
+		this.hasInteracted = true;
+		this.checked = event.target.checked;
+	}
+	formResetCallback() {
+		this.checked = this.defaultChecked;
+		super.formResetCallback();
+	}
+	setFormValue() {
+		this.internals.setFormValue(this.checked && !this.disabled ? this.value ?? "on" : null);
+		if (this.required && !this.checked) this.internals.setValidity({ valueMissing: true }, "Bitte klicken Sie dieses Kästchen an, um fortfahren zu können.");
+		else this.internals.setValidity({});
+	}
+	render() {
+		return html`
+      <input
+        id="checkbox"
+        class="checkbox"
+        type="checkbox"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+        ?required=${this.required}
+      />
+      <label for="checkbox" class="label"><slot></slot></label>
+      <leu-icon class="icon" name="check"></leu-icon>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuCheckbox.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "checked"
+})], LeuCheckbox.prototype, "defaultChecked", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], LeuCheckbox.prototype, "checked", null);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuCheckbox.prototype, "value", void 0);
+//#endregion
+export { LeuCheckbox as t };