@statistikzh/leu 0.24.2 → 0.25.0

package/dist/ChipRemovable.js

@@ -1,49 +1,48 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LeuChipBase } from './Chip.js';
-import { LeuIcon } from './Icon.js';
-import './LeuElement-BfXSO7MN.js';
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as LeuChipBase } from "./Chip-Ch09jjYi.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/chip/ChipRemovable.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.
- */
-class LeuChipRemovable extends LeuChipBase {
-    constructor() {
-        super(...arguments);
-        this.value = "";
-    }
-    /**
-     * Returns the value of the chip. If `value` is not set, it will return the text content
-     */
-    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">
+* @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.
+*/
+var LeuChipRemovable = class extends LeuChipBase {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	/**
+	* Returns the value of the chip. If `value` is not set, it will return the text content
+	*/
+	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>`;
-    }
-}
-LeuChipRemovable.dependencies = {
-    "leu-icon": LeuIcon,
+	}
 };
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipRemovable.prototype, "value", void 0);
-
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipRemovable.prototype, "value", void 0);
+//#endregion
 export { LeuChipRemovable };

package/dist/ChipSelectable-CMJNcE4U.d.ts

@@ -0,0 +1,32 @@
+import { t as LeuChipBase } from "./Chip-DLKM9P7v.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/chip/ChipSelectable.d.ts
+/**
+ * A chip component that can be selected.
+ * @tagname leu-chip-selectable
+ * @slot - The content of the chip
+ */
+declare class LeuChipSelectable extends LeuChipBase {
+  /** The size of the chip. Has no effect when variant is "radio" */
+  size: "small" | "regular";
+  /**
+   * The variant of the chip. Determines if only one or multiple chips can be selected.
+   * @default "toggle"
+   */
+  variant: "toggle" | "radio";
+  /** Whether the chip is selected */
+  checked: boolean;
+  /** The value of the chip */
+  value: string;
+  constructor();
+  protected handleClick(): void;
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue(): string;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuChipSelectable as t };

package/dist/ChipSelectable.d.ts

@@ -1,33 +1,2 @@
-import * as lit_html from 'lit-html';
-import { LeuChipBase } from './Chip.js';
-import 'lit';
-import './LeuElement.d-BevHqLUu.js';
-
-/**
- * A chip component that can be selected.
- * @tagname leu-chip-selectable
- * @slot - The content of the chip
- */
-declare class LeuChipSelectable extends LeuChipBase {
-    /** The size of the chip. Has no effect when variant is "radio" */
-    size: "small" | "regular";
-    /**
-     * The variant of the chip. Determines if only one or multiple chips can be selected.
-     * @default "toggle"
-     */
-    variant: "toggle" | "radio";
-    /** Whether the chip is selected */
-    checked: boolean;
-    /** The value of the chip */
-    value: string;
-    constructor();
-    protected handleClick(): void;
-    /**
-     * Returns the value of the chip. If `value` is not set, it will return the text content
-     * @returns {string}
-     */
-    getValue(): string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuChipSelectable };
+import { t as LeuChipSelectable } from "./ChipSelectable-CMJNcE4U.js";
+export { LeuChipSelectable };

package/dist/ChipSelectable.js

@@ -1,80 +1,71 @@
-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/ChipSelectable.ts
 /**
- * A chip component that can be selected.
- * @tagname leu-chip-selectable
- * @slot - The content of the chip
- */
-class LeuChipSelectable extends LeuChipBase {
-    constructor() {
-        super();
-        /** The size of the chip. Has no effect when variant is "radio" */
-        this.size = "regular";
-        /**
-         * The variant of the chip. Determines if only one or multiple chips can be selected.
-         * @default "toggle"
-         */
-        this.variant = "toggle";
-        /** Whether the chip is selected */
-        this.checked = false;
-        /** The value of the chip */
-        this.value = "";
-        if (this.variant === "radio" && this.size === "small") {
-            console.warn("Small size has no effect on radio variant");
-        }
-    }
-    handleClick() {
-        let nextcheckedState = this.checked;
-        if (this.variant === "radio") {
-            nextcheckedState = true;
-        }
-        else {
-            nextcheckedState = !this.checked;
-        }
-        if (nextcheckedState !== this.checked) {
-            this.checked = nextcheckedState;
-            this.dispatchEvent(new CustomEvent("input", {
-                detail: {
-                    checked: this.checked,
-                    value: this.getValue(),
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    /**
-     * 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();
-    }
-    render() {
-        return html `<button
+* A chip component that can be selected.
+* @tagname leu-chip-selectable
+* @slot - The content of the chip
+*/
+var LeuChipSelectable = class extends LeuChipBase {
+	constructor() {
+		super();
+		this.size = "regular";
+		this.variant = "toggle";
+		this.checked = false;
+		this.value = "";
+		if (this.variant === "radio" && this.size === "small") console.warn("Small size has no effect on radio variant");
+	}
+	handleClick() {
+		let nextcheckedState = this.checked;
+		if (this.variant === "radio") nextcheckedState = true;
+		else nextcheckedState = !this.checked;
+		if (nextcheckedState !== this.checked) {
+			this.checked = nextcheckedState;
+			this.dispatchEvent(new CustomEvent("input", {
+				detail: {
+					checked: this.checked,
+					value: this.getValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/**
+	* 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();
+	}
+	render() {
+		return html`<button
       @click=${() => this.handleClick()}
       class="button"
       aria-pressed=${this.checked ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
     </button>`;
-    }
-}
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipSelectable.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipSelectable.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuChipSelectable.prototype, "checked", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuChipSelectable.prototype, "value", void 0);
-
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipSelectable.prototype, "size", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipSelectable.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuChipSelectable.prototype, "checked", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuChipSelectable.prototype, "value", void 0);
+//#endregion
 export { LeuChipSelectable };

package/dist/Dialog-CV1JTkCn.js

@@ -0,0 +1,241 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as HasSlotController } from "./hasSlotController-DjdfnOQp.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+//#region src/components/dialog/dialog.css?inline
+var dialog_default = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
+:host {
+  --dialog-font-regular: var(--leu-font-family-regular);
+  --dialog-font-black: var(--leu-font-family-black);
+
+  font-family: var(--dialog-font-regular);
+}
+.dialog {
+  background: #fff;
+  border: 0;
+  padding: 0;
+
+  overflow: hidden;
+  background-color: var(--leu-color-black-0);
+
+  flex-direction: column;
+
+  margin: 0 auto;
+  height: 100vh;
+  width: 100vw;
+  max-height: 100vh;
+  max-width: 100vw;
+}
+@media (min-width: 600px) {
+.dialog {
+    margin: 80px auto;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: min(100% - 4.5rem, 60.5rem);
+    max-height: calc(100vh - 5rem);
+}
+  }
+.dialog[open] {
+  display: flex;
+}
+.dialog::backdrop {
+  background-color: var(--leu-color-black-transp-40);
+}
+.content {
+  --padding: 2rem;
+  padding: 2rem;
+  padding: var(--padding);
+  padding-bottom: 0;
+  margin-bottom: 1.5rem;
+  overflow-y: auto;
+}
+@media (min-width: 600px) {
+.content {
+    --padding: 2.5rem;
+}
+  }
+@media (min-width: 840px) {
+.content {
+    margin-bottom: 2rem;
+}
+  }
+@media (min-width: 1024px) {
+.content {
+    --padding: 3.5rem;
+}
+  }
+@media (min-width: 1280px) {
+.content {
+    margin-bottom: 2.5rem;
+}
+  }
+.title-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.title {
+  font: var(--leu-t-curve-big-black-font);
+  margin: 0 0 0.75rem;
+  order: 2;
+}
+@media (min-width: 600px) {
+.title {
+    margin-bottom: 1rem;
+}
+  }
+@media (min-width: 840px) {
+.title {
+    margin-bottom: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.title {
+    margin-bottom: 1.5rem;
+    font: var(--leu-t-bigger-big-black-font);
+}
+  }
+.subtitle {
+  color: var(--leu-color-black-transp-60);
+  font-size: var(--leu-t-tiny-regular-font-size);
+  line-height: var(--leu-t-tiny-regular-line-height);
+
+  order: 1;
+
+  margin: 0 0 4px;
+}
+.close-button {
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+
+  padding: 0.25rem 0;
+  margin-left: 0.75rem;
+  border: 0;
+  border-radius: 0.125rem;
+
+  color: var(--leu-color-black-transp-60);
+  background: transparent;
+}
+@media (min-width: 600px) {
+.close-button {
+    margin-left: 1rem;
+}
+  }
+@media (min-width: 840px) {
+.close-button {
+    margin-left: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.close-button {
+    margin-left: 1.5rem;
+}
+  }
+.close-button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+.close-button__label {
+  display: none;
+  font: var(--leu-t-regular-regular-font);
+}
+@media (min-width: 840px) {
+.close-button__label {
+    display: inline;
+}
+  }
+.close-button__label--hidden {
+  display: none;
+}
+.actionbar {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 3rem;
+}
+`;
+//#endregion
+//#region src/components/dialog/Dialog.ts
+/**
+* @tagname leu-dialog
+*/
+var LeuDialog = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.sublabel = "";
+		this.open = false;
+		this._dialogRef = createRef();
+		this.hasSlotController = new HasSlotController(this, ["toolbar"]);
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.styles = [LeuElement.styles, dialog_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	show() {
+		this._dialogRef.value.showModal();
+	}
+	close() {
+		this._dialogRef.value.close();
+	}
+	render() {
+		const hasActionbar = this.hasSlotController.test("actionbar");
+		const closeButtonLabelClasses = {
+			"close-button__label": true,
+			"close-button__label--hidden": hasActionbar
+		};
+		return html`
+      <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
+        <div class="content">
+          <div class="header">
+            <div class="title-wrapper">
+              <h1 class="title">${this.label}</h1>
+              ${this.sublabel ? html`<p class="subtitle">${this.sublabel}</p>` : nothing}
+            </div>
+            <button
+              class="close-button"
+              @click=${this.close}
+              aria-label="Schliessen"
+            >
+              <span
+                class=${classMap(closeButtonLabelClasses)}
+                aria-hidden="true"
+                >Schliessen</span
+              ><leu-icon name="close"> </leu-icon>
+            </button>
+          </div>
+          <slot></slot>
+        </div>
+        <div class="actionbar">
+          <slot name="actionbar"></slot>
+        </div>
+      </dialog>
+    `;
+	}
+};
+__decorate([property({ type: String })], LeuDialog.prototype, "label", void 0);
+__decorate([property({ type: String })], LeuDialog.prototype, "sublabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuDialog.prototype, "open", void 0);
+//#endregion
+export { LeuDialog as t };

package/dist/Dialog.d.ts

@@ -1,34 +1,34 @@
-import * as lit_html from 'lit-html';
-import * as lit_html_directives_ref_js from 'lit-html/directives/ref.js';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { t as HasSlotController } from "./hasSlotController-BLtZurRh.js";
+import * as lit_html0 from "lit-html";
+import * as lit_html_directives_ref_js0 from "lit-html/directives/ref.js";
 
+//#region src/components/dialog/Dialog.d.ts
 /**
  * @tagname leu-dialog
  */
 declare class LeuDialog extends LeuElement {
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-    };
-    static styles: lit.CSSResultGroup[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    label: string;
-    sublabel: string;
-    open: boolean;
-    protected _dialogRef: lit_html_directives_ref_js.Ref<HTMLDialogElement>;
-    protected hasSlotController: HasSlotController;
-    show(): void;
-    close(): void;
-    render(): lit_html.TemplateResult<1>;
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  label: string;
+  sublabel: string;
+  open: boolean;
+  protected _dialogRef: lit_html_directives_ref_js0.Ref<HTMLDialogElement>;
+  protected hasSlotController: HasSlotController;
+  show(): void;
+  close(): void;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuDialog };
+//#endregion
+export { LeuDialog };