@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Popup-DNlm_9AA.js

@@ -0,0 +1,195 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+//#region src/components/popup/popup.css?inline
+var popup_default = css`:host {
+  --popup-font-regular: var(--leu-font-family-regular);
+  --popup-font-black: var(--leu-font-family-black);
+
+  font-family: var(--popup-font-regular);
+  display: contents;
+}
+
+.popup {
+  display: none;
+
+  max-width: none;
+
+  max-width: var(--auto-size-available-width, none);
+  max-height: none;
+  max-height: var(--auto-size-available-height, none);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--leu-z-index-popup);
+}
+
+/* TODO: Should visibility be a matter of the popup component? */
+
+:host([active]) .popup {
+  display: block;
+}
+`;
+//#endregion
+//#region src/components/popup/Popup.ts
+function isVirtualElement(el) {
+	return el !== null && typeof el === "object" && "getBoundingClientRect" in el && ("contextElement" in el ? el instanceof Element : true);
+}
+/**
+* @tagname leu-popup
+*/
+var LeuPopup = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = false;
+		this.flip = false;
+		this.shift = false;
+		this.shiftPadding = 0;
+		this.autoSizePadding = 0;
+	}
+	static {
+		this.styles = [LeuElement.styles, popup_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stop();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("active")) if (this.active) this.start();
+		else this.stop();
+		if (changedProperties.has("anchor")) this.handleAnchorChange();
+		if (this.active) this.reposition();
+	}
+	get popupEl() {
+		return this.renderRoot?.querySelector(".popup") ?? null;
+	}
+	start() {
+		if (!this.anchorEl || !this.active) return;
+		this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+			this.reposition();
+		});
+	}
+	stop() {
+		this.cleanup?.();
+		this.style.removeProperty("--auto-size-available-width");
+		this.style.removeProperty("--auto-size-available-height");
+	}
+	reposition() {
+		if (!this.anchorEl || !this.popupEl || !this.active) return;
+		const middleware = [];
+		if (this.offsetAlignmentAxis || this.offsetMainAxis || this.offsetCrossAxis) middleware.push(offset({
+			mainAxis: this.offsetMainAxis,
+			crossAxis: this.offsetCrossAxis,
+			alignmentAxis: this.offsetAlignmentAxis
+		}));
+		if (this.matchSize) middleware.push(size({ apply: ({ rects }) => {
+			const matchWidth = this.matchSize === "width" || this.matchSize === "both";
+			const matchHeight = this.matchSize === "height" || this.matchSize === "both";
+			this.popupEl.style.width = matchWidth ? `${rects.reference.width}px` : "";
+			this.popupEl.style.height = matchHeight ? `${rects.reference.height}px` : "";
+		} }));
+		else {
+			this.popupEl.style.width = "";
+			this.popupEl.style.height = "";
+		}
+		if (this.flip) middleware.push(flip());
+		if (this.shift) middleware.push(shift({ padding: this.shiftPadding }));
+		if (this.autoSize) middleware.push(size({
+			padding: this.autoSizePadding,
+			apply: ({ availableWidth, availableHeight }) => {
+				const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
+				if (this.autoSize === "height" || this.autoSize === "both") this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+				else this.style.removeProperty("--auto-size-available-height");
+				if (setMaxWidth) this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+				else this.style.removeProperty("--auto-size-available-width");
+			}
+		}));
+		else {
+			this.style.removeProperty("--auto-size-available-width");
+			this.style.removeProperty("--auto-size-available-height");
+		}
+		computePosition(this.anchorEl, this.popupEl, {
+			placement: this.placement,
+			middleware
+		}).then(({ x, y }) => {
+			Object.assign(this.popupEl.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	handleAnchorChange() {
+		if (this.anchor && typeof this.anchor === "string") this.anchorEl = this.getRootNode().getElementById(this.anchor);
+		else if (this.anchor instanceof HTMLElement || isVirtualElement(this.anchor)) this.anchorEl = this.anchor;
+		else this.anchorEl = this.querySelector("[slot=anchor]");
+		if (this.anchorEl instanceof HTMLSlotElement) [this.anchorEl] = this.anchorEl.assignedElements({ flatten: true });
+		if (this.anchorEl) this.start();
+	}
+	render() {
+		return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <div class="popup">
+        <slot> </slot>
+      </div>
+    `;
+	}
+};
+__decorate([property()], LeuPopup.prototype, "anchor", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuPopup.prototype, "active", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuPopup.prototype, "placement", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuPopup.prototype, "flip", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuPopup.prototype, "shift", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuPopup.prototype, "shiftPadding", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuPopup.prototype, "matchSize", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: "offset-main-axis"
+})], LeuPopup.prototype, "offsetMainAxis", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: "offset-cross-axis"
+})], LeuPopup.prototype, "offsetCrossAxis", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: "offset-alignment-axis"
+})], LeuPopup.prototype, "offsetAlignmentAxis", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuPopup.prototype, "autoSize", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuPopup.prototype, "autoSizePadding", void 0);
+//#endregion
+export { LeuPopup as t };

package/dist/Popup.d.ts

@@ -1,62 +1,2 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { PropertyValues } from 'lit';
-import { Placement } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-
-interface VirtualElement {
-    getBoundingClientRect: () => DOMRect;
-    contextElement?: Element;
-}
-/**
- * @tagname leu-popup
- */
-declare class LeuPopup extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    anchor: Element | string | VirtualElement;
-    active: boolean;
-    placement?: Placement;
-    flip: boolean;
-    shift: boolean;
-    shiftPadding: number;
-    matchSize?: "width" | "height" | "both";
-    /**
-     * Offsets the popup along the main axis.
-     * @link https://floating-ui.com/docs/offset#mainaxis
-     */
-    offsetMainAxis?: number;
-    /**
-     * Offsets the popup along the cross axis.
-     * @link https://floating-ui.com/docs/offset#crossaxis
-     */
-    offsetCrossAxis?: number;
-    /**
-     * Offsets the popup along the alignment axis.
-     * Overrides the `offsetCrossAxis` value.
-     * @link https://floating-ui.com/docs/offset#alignmentaxis
-     */
-    offsetAlignmentAxis?: number;
-    autoSize?: "width" | "height" | "both";
-    autoSizePadding: number;
-    private anchorEl;
-    private cleanup;
-    disconnectedCallback(): void;
-    updated(changedProperties: PropertyValues<this>): void;
-    protected get popupEl(): HTMLDivElement;
-    protected start(): void;
-    protected stop(): void;
-    reposition(): void;
-    handleAnchorChange(): void;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuPopup };
-export type { VirtualElement };
+import { n as VirtualElement, t as LeuPopup } from "./Popup-Btgm2a3D.js";
+export { LeuPopup, VirtualElement };

package/dist/Popup.js

@@ -1,234 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { autoUpdate, offset, size, flip, shift, computePosition } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-
-var css_248z = css`:host {
-  --popup-font-regular: var(--leu-font-family-regular);
-  --popup-font-black: var(--leu-font-family-black);
-
-  font-family: var(--popup-font-regular);
-  display: contents;
-}
-
-.popup {
-  display: none;
-
-  max-width: none;
-
-  max-width: var(--auto-size-available-width, none);
-  max-height: none;
-  max-height: var(--auto-size-available-height, none);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--leu-z-index-popup);
-}
-
-/* TODO: Should visibility be a matter of the popup component? */
-
-:host([active]) .popup {
-  display: block;
-}
-`;
-
-function isVirtualElement(el) {
-    return (el !== null &&
-        typeof el === "object" &&
-        "getBoundingClientRect" in el &&
-        ("contextElement" in el ? el instanceof Element : true));
-}
-/**
- * @tagname leu-popup
- */
-class LeuPopup extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.active = false;
-        this.flip = false;
-        this.shift = false;
-        this.shiftPadding = 0;
-        this.autoSizePadding = 0;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.stop();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has("active")) {
-            if (this.active) {
-                this.start();
-            }
-            else {
-                this.stop();
-            }
-        }
-        if (changedProperties.has("anchor")) {
-            this.handleAnchorChange();
-        }
-        if (this.active) {
-            this.reposition();
-        }
-    }
-    get popupEl() {
-        return this.renderRoot?.querySelector(".popup") ?? null;
-    }
-    start() {
-        if (!this.anchorEl || !this.active)
-            return;
-        this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
-            this.reposition();
-        });
-    }
-    stop() {
-        this.cleanup?.();
-        this.style.removeProperty("--auto-size-available-width");
-        this.style.removeProperty("--auto-size-available-height");
-    }
-    reposition() {
-        if (!this.anchorEl || !this.popupEl || !this.active)
-            return;
-        const middleware = [];
-        if (this.offsetAlignmentAxis ||
-            this.offsetMainAxis ||
-            this.offsetCrossAxis) {
-            middleware.push(offset({
-                mainAxis: this.offsetMainAxis,
-                crossAxis: this.offsetCrossAxis,
-                alignmentAxis: this.offsetAlignmentAxis,
-            }));
-        }
-        if (this.matchSize) {
-            middleware.push(size({
-                apply: ({ rects }) => {
-                    const matchWidth = this.matchSize === "width" || this.matchSize === "both";
-                    const matchHeight = this.matchSize === "height" || this.matchSize === "both";
-                    this.popupEl.style.width = matchWidth
-                        ? `${rects.reference.width}px`
-                        : "";
-                    this.popupEl.style.height = matchHeight
-                        ? `${rects.reference.height}px`
-                        : "";
-                },
-            }));
-        }
-        else {
-            // Cleanup styles if we're not matching width/height
-            this.popupEl.style.width = "";
-            this.popupEl.style.height = "";
-        }
-        if (this.flip) {
-            middleware.push(flip());
-        }
-        if (this.shift) {
-            middleware.push(shift({ padding: this.shiftPadding }));
-        }
-        if (this.autoSize) {
-            middleware.push(size({
-                padding: this.autoSizePadding,
-                apply: ({ availableWidth, availableHeight }) => {
-                    const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
-                    const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
-                    if (setMaxHeight) {
-                        this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
-                    }
-                    else {
-                        this.style.removeProperty("--auto-size-available-height");
-                    }
-                    if (setMaxWidth) {
-                        this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
-                    }
-                    else {
-                        this.style.removeProperty("--auto-size-available-width");
-                    }
-                },
-            }));
-        }
-        else {
-            // Cleanup styles if we're not auto-sizing
-            this.style.removeProperty("--auto-size-available-width");
-            this.style.removeProperty("--auto-size-available-height");
-        }
-        computePosition(this.anchorEl, this.popupEl, {
-            placement: this.placement,
-            middleware,
-        }).then(({ x, y }) => {
-            Object.assign(this.popupEl.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-        });
-    }
-    handleAnchorChange() {
-        if (this.anchor && typeof this.anchor === "string") {
-            const root = this.getRootNode();
-            this.anchorEl = root.getElementById(this.anchor);
-        }
-        else if (this.anchor instanceof HTMLElement ||
-            isVirtualElement(this.anchor)) {
-            this.anchorEl = this.anchor;
-        }
-        else {
-            this.anchorEl = this.querySelector("[slot=anchor]");
-        }
-        if (this.anchorEl instanceof HTMLSlotElement) {
-            [this.anchorEl] = this.anchorEl.assignedElements({ flatten: true });
-        }
-        if (this.anchorEl) {
-            this.start();
-        }
-    }
-    render() {
-        return html `
-      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
-      <div class="popup">
-        <slot> </slot>
-      </div>
-    `;
-    }
-}
-LeuPopup.styles = [LeuElement.styles, css_248z];
-LeuPopup.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property()
-], LeuPopup.prototype, "anchor", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuPopup.prototype, "active", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuPopup.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuPopup.prototype, "flip", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuPopup.prototype, "shift", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuPopup.prototype, "shiftPadding", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuPopup.prototype, "matchSize", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: "offset-main-axis" })
-], LeuPopup.prototype, "offsetMainAxis", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: "offset-cross-axis" })
-], LeuPopup.prototype, "offsetCrossAxis", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: "offset-alignment-axis" })
-], LeuPopup.prototype, "offsetAlignmentAxis", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuPopup.prototype, "autoSize", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], LeuPopup.prototype, "autoSizePadding", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
 export { LeuPopup };

package/dist/ProgressBar-B0wYj1KF.js

@@ -0,0 +1,167 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/progress-bar/progress-bar.css?inline
+var progress_bar_default = css`/* :host {
+  --progress-bar-font-regular: var(--leu-font-family-regular);
+  --progress-bar-font-black: var(--leu-font-family-black);
+
+  font-family: var(--progress-bar-font-regular);
+} */
+
+.progress {
+  --_height: 0.5rem;
+  --_border-radius: 0.25rem;
+  --_progress-color: var(--leu-color-func-cyan);
+  --_indeterminate-animation: indeterminate 2s ease infinite;
+  --_indeterminate-width: 25%;
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  height: var(--_height);
+
+  background-color: var(--leu-color-black-transp-10);
+  border: none;
+  border-radius: 0.25rem;
+  border-radius: var(--_border-radius);
+  margin-bottom: 0.5rem;
+}
+
+.progress::-webkit-progress-bar {
+  background: transparent;
+  border-radius: var(--_border-radius);
+}
+
+/* Progress bar */
+
+.progress::-moz-progress-bar {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+.progress::-webkit-progress-value {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+/* Indeterminate state */
+
+.progress:indeterminate::-moz-progress-bar {
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Safari */
+
+.progress:indeterminate::-webkit-progress-value {
+  display: block;
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Chrome */
+
+.progress:indeterminate::before {
+  content: "";
+  display: block;
+  width: var(--_indeterminate-width);
+  height: var(--_height);
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+  animation: var(--_indeterminate-animation);
+}
+
+@keyframes indeterminate {
+  0% {
+    margin-left: 0%;
+  }
+
+  50% {
+    margin-left: 75%;
+  }
+
+  100% {
+    margin-left: 0%;
+  }
+}
+
+/* Info section (text label and value) */
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.label,
+.value {
+  font: var(--leu-t-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.value {
+  /* margin-left: auto; */
+}
+`;
+//#endregion
+//#region src/components/progress-bar/ProgressBar.ts
+/**
+* An indicator showing the completion progress of a task
+*
+* @tagname leu-progress-bar
+*/
+var LeuProgressBar = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.label = "";
+		this.indeterminate = false;
+	}
+	static {
+		this.styles = [LeuElement.styles, progress_bar_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	render() {
+		return html`
+      <progress
+        class="progress"
+        max=${ifDefined(!this.indeterminate ? 100 : void 0)}
+        value=${ifDefined(!this.indeterminate ? this.value : void 0)}
+        id="progress"
+      ></progress>
+      <div class="info">
+        ${this.label ? html`<label class="label" for="progress">${this.label}</label>` : html`<div class="label label--placeholder"></div>`}
+        ${this.indeterminate ? nothing : html`<span class="value">${Math.round(this.value)}&#8239;%</span>`}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuProgressBar.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuProgressBar.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuProgressBar.prototype, "indeterminate", void 0);
+//#endregion
+export { LeuProgressBar as t };