@lmvz-ds/components 0.24.0 → 0.26.0

package/collection/components/lmvz-snackbar/lmvz-snackbar.js

@@ -0,0 +1,266 @@
+import { Host, h } from "@stencil/core";
+import errorSvg from "@lmvz-ds/icons/assets/alert.svg";
+import infoSvg from "@lmvz-ds/icons/assets/info.svg";
+import warningSvg from "@lmvz-ds/icons/assets/warning.svg";
+const STATUS_SVG = {
+    success: infoSvg,
+    warning: warningSvg,
+    error: errorSvg,
+};
+export class LmvzSnackbar {
+    el;
+    animationClass = '';
+    status = 'success';
+    onStatusChange() {
+        this.applyAriaLiveAttributes();
+    }
+    message = '';
+    duration;
+    priority = 'normal';
+    actionLabel;
+    lmvzClose;
+    connectedCallback() {
+        if (typeof document !== 'undefined') {
+            this.applyAriaLiveAttributes();
+        }
+    }
+    async show() {
+        this.animationClass = '';
+        requestAnimationFrame(() => {
+            this.animationClass = 'entering';
+        });
+    }
+    async hide() {
+        this.animationClass = 'leaving';
+        await new Promise((resolve) => {
+            const timeout = setTimeout(resolve, 300);
+            const onAnimationEnd = () => {
+                clearTimeout(timeout);
+                this.el.removeEventListener('animationend', onAnimationEnd);
+                resolve();
+            };
+            this.el.addEventListener('animationend', onAnimationEnd);
+        });
+    }
+    applyAriaLiveAttributes() {
+        if (this.status === 'error') {
+            this.el.setAttribute('role', 'alert');
+            this.el.setAttribute('aria-live', 'assertive');
+        }
+        else {
+            this.el.setAttribute('role', 'status');
+            this.el.setAttribute('aria-live', 'polite');
+        }
+        this.el.setAttribute('aria-atomic', 'true');
+    }
+    handleActionClick = () => {
+        this.lmvzClose.emit({ reason: 'action' });
+        this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
+    };
+    render() {
+        return (h(Host, { key: '3cf529e3a1971926546758d2e04c3860fde23961', class: this.animationClass }, h("lmvz-icon", { key: '3bc7fb142b19ca4f01c04d33759bcd52cd46c77e', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'b2d00f1602baefa7f1025d927d66f8867e3e7ce5', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '92966ab42ef1c5fca044adf5b60a02b54ddcd43a', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+    }
+    static get is() { return "lmvz-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-snackbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-snackbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Snackbar.Status",
+                    "resolved": "\"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "Snackbar": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Snackbar",
+                            "referenceLocation": "Snackbar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'success'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration"
+            },
+            "priority": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Snackbar.Priority",
+                    "resolved": "\"high\" | \"low\" | \"normal\" | undefined",
+                    "references": {
+                        "Snackbar": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Snackbar",
+                            "referenceLocation": "Snackbar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "priority",
+                "defaultValue": "'normal'"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "animationClass": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzClose",
+                "name": "lmvzClose",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ reason: Snackbar.DismissReason }",
+                    "resolved": "{ reason: \"timeout\" | \"manual\" | \"action\" | \"overridden\" | \"swallowed\"; }",
+                    "references": {
+                        "Snackbar": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Snackbar",
+                            "referenceLocation": "Snackbar"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "status",
+                "methodName": "onStatusChange"
+            }];
+    }
+}

package/collection/components/lmvz-snackbar/public.js

@@ -0,0 +1 @@
+export { SnackbarController } from './snackbar-controller';

package/collection/components/lmvz-snackbar/snackbar-controller.js

@@ -0,0 +1,194 @@
+const PRIORITY_MAP = {
+    low: 0,
+    normal: 1,
+    high: 2,
+};
+const STATUS_DURATION = {
+    success: 5000,
+    warning: 5000,
+    error: 8000,
+};
+let idCounter = 0;
+function nextId() {
+    idCounter += 1;
+    return `snackbar-${idCounter}`;
+}
+function resolveHostElement() {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const existing = document.querySelector('[data-snackbar-host]');
+    if (existing) {
+        return existing;
+    }
+    const el = document.createElement('lmvz-snackbar');
+    el.setAttribute('data-snackbar-host', '');
+    document.body.appendChild(el);
+    return el;
+}
+export class SnackbarController {
+    hostEl = undefined;
+    active = undefined;
+    getHost() {
+        if (this.hostEl !== undefined && !this.hostEl.isConnected) {
+            this.hostEl = undefined;
+        }
+        if (this.hostEl === undefined) {
+            this.hostEl = resolveHostElement();
+        }
+        return this.hostEl;
+    }
+    clearTimer(entry) {
+        if (entry.timerId !== undefined) {
+            clearTimeout(entry.timerId);
+            entry.timerId = undefined;
+        }
+    }
+    scheduleTimer(entry, delayMs) {
+        if (delayMs <= 0) {
+            return;
+        }
+        entry.timerStartedAt = Date.now();
+        entry.timerId = setTimeout(() => {
+            if (this.active !== undefined && this.active.id === entry.id) {
+                this.dismissActive(entry, 'timeout');
+            }
+        }, delayMs);
+    }
+    dismissActive(entry, reason) {
+        this.clearTimer(entry);
+        const host = entry.hostEl;
+        host.removeEventListener('pointerenter', entry.onPointerEnter);
+        host.removeEventListener('pointerleave', entry.onPointerLeave);
+        host.removeEventListener('focusin', entry.onFocusIn);
+        host.removeEventListener('focusout', entry.onFocusOut);
+        if (entry.onActionListener) {
+            host.removeEventListener('lmvzAction', entry.onActionListener);
+        }
+        host.hide?.();
+        if (this.active?.id === entry.id) {
+            this.active = undefined;
+        }
+        if (reason !== 'action') {
+            host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
+        }
+        entry.resolve({ reason });
+    }
+    pauseTimer(entry) {
+        entry.pauseCount += 1;
+        if (entry.pauseCount > 1 || entry.timerId === undefined) {
+            return;
+        }
+        const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
+        entry.remaining = Math.max(0, entry.remaining - elapsed);
+        entry.timerStartedAt = undefined;
+        this.clearTimer(entry);
+    }
+    resumeTimer(entry) {
+        if (entry.pauseCount > 0) {
+            entry.pauseCount -= 1;
+        }
+        if (entry.pauseCount > 0) {
+            return;
+        }
+        if (entry.remaining > 0) {
+            this.scheduleTimer(entry, entry.remaining);
+        }
+    }
+    applyToHost(host, options) {
+        host.setAttribute('status', options.status ?? 'success');
+        if (options.actionLabel !== undefined) {
+            host.setAttribute('action-label', options.actionLabel);
+        }
+        else {
+            host.removeAttribute('action-label');
+        }
+    }
+    open(options) {
+        const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
+        if (this.active !== undefined && incomingPriority < this.active.priority) {
+            let swallowResolve;
+            const closed = new Promise((resolve) => {
+                swallowResolve = resolve;
+            });
+            swallowResolve({ reason: 'swallowed' });
+            const id = nextId();
+            return {
+                id,
+                closed,
+                dismiss() {
+                },
+            };
+        }
+        if (this.active !== undefined) {
+            this.dismissActive(this.active, 'overridden');
+        }
+        const host = this.getHost();
+        if (host === undefined) {
+            const id = nextId();
+            let ssrResolve;
+            const closed = new Promise((resolve) => {
+                ssrResolve = resolve;
+            });
+            ssrResolve({ reason: 'swallowed' });
+            return { id, closed, dismiss() { } };
+        }
+        const id = nextId();
+        const status = options.status ?? 'success';
+        const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
+        let entryResolve;
+        const closed = new Promise((resolve) => {
+            entryResolve = resolve;
+        });
+        const entry = {
+            id,
+            priority: incomingPriority,
+            resolve: entryResolve,
+            timerId: undefined,
+            remaining: durationMs,
+            timerStartedAt: undefined,
+            pauseCount: 0,
+            hostEl: host,
+            onPointerEnter: () => this.pauseTimer(entry),
+            onPointerLeave: () => this.resumeTimer(entry),
+            onFocusIn: () => this.pauseTimer(entry),
+            onFocusOut: () => this.resumeTimer(entry),
+        };
+        this.active = entry;
+        host.addEventListener('pointerenter', entry.onPointerEnter);
+        host.addEventListener('pointerleave', entry.onPointerLeave);
+        host.addEventListener('focusin', entry.onFocusIn);
+        host.addEventListener('focusout', entry.onFocusOut);
+        this.applyToHost(host, options);
+        const onAction = () => {
+            if (this.active !== undefined && this.active.id === id) {
+                options.onAction?.();
+                this.dismissActive(entry, 'action');
+            }
+        };
+        entry.onActionListener = onAction;
+        host.addEventListener('lmvzAction', onAction, { once: true });
+        host.show?.();
+        queueMicrotask(() => host.setAttribute('message', options.message));
+        if (durationMs > 0) {
+            this.scheduleTimer(entry, durationMs);
+        }
+        return {
+            id,
+            closed,
+            dismiss: () => {
+                if (this.active?.id === id) {
+                    this.dismissActive(entry, 'manual');
+                }
+            },
+        };
+    }
+    dismiss(id) {
+        if (!this.active) {
+            return;
+        }
+        if (!id || this.active.id === id) {
+            this.dismissActive(this.active, 'manual');
+        }
+    }
+}

package/collection/components/lmvz-toggle/lmvz-toggle.css

@@ -54,10 +54,10 @@
   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
 }
 :host([checked]) {
-  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
 }
 :host([disabled][checked]) {
-  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
 }
 :host([disabled]) {
   cursor: not-allowed;
@@ -90,17 +90,12 @@ input {
   margin: 0;
   cursor: inherit;
 }
-:host(:focus-within) {
-  /* TODO[LDHCID-136]: no focus-visible token in DS */
-  outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);
-  outline-offset: 2px;
-}
 .thumb {
   position: absolute;
   width: var(--lmvz-global-s13, 13px);
   height: var(--lmvz-global-s13, 13px);
   border-radius: 50%;
-  background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   top: 50%;
   transform: translateY(-50%);
   left: var(--lmvz-global-s4, 4px);
@@ -115,7 +110,7 @@ input {
   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   cursor: pointer;

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -65,19 +65,19 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, h("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, h("input", { key: '80650720ac6276f7c8996e071d8104e98002e06e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), h("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, h("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, h("input", { key: '8113919f2c474b61a2745a000fd4995f81b58c1e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), h("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["./lmvz-toggle.css"]
+            "$": ["./lmvz-toggle.css", "../../styles/fragments/_focus-within.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["lmvz-toggle.css"]
+            "$": ["lmvz-toggle.css", "../../styles/fragments/_focus-within.css"]
         };
     }
     static get properties() {

package/collection/index.js

@@ -1,3 +1,4 @@
 export * from '@lmvz-ds/aria-validation';
 export { chipSizes, chipTypes, iconSizes, iconWeights, inputTypes, textSizes } from './api/ds.constants';
 export * from './utils/public';
+export * from './components/lmvz-snackbar/public';

package/collection/integration/header-integration/header-integration.js

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: 'b05ae15bbbfab76ce0ace63899049a848cd6eb32' }, h("lmvz-header", { key: 'bfa73e270d5ceefa5ca86af7bcb09b8f342b9dd2', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'b8f5a5b2bfe038c6473f2c8c6c99593b6c20678a', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '16d87cdf2d6a00ac158d691a673fed4c46fe074b', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: 'a52a8108ca53205e5e67902af2ed74c84c5d4c9a', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '0b3f5ebbe9c2b9c666915268ed78263b22801568', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '9fb9cf48b4301473b6c233017afe9d23ab3618e9', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '5a80aa152c4d49af083025574c2453f87435ed8b', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: 'b09687d5ae802a6641c812487f77f4ce751c1ce9', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '9591aa516a86c4a7ce783f5ef2ab5bba6c631d8c', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: 'deca565d53046f5718613f6d859beba55e0cb945', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '0db15758c2b9858472223040cbadfcfe2548b706', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'f4c0eeb31d7999fe9bcfc79c4c0be3f269b920a5', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'a5ad09f10d2832d37a443a058be5fe2c3cecc9a5', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: 'b4095e8c92187525a6b085c6c38dccf241f7d02d', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '5a913204d7b28e5968aa487230d3e5958df206e4', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: 'c7ca0e05f67f09a13ac814b6003855c08fb1b1f0' }, h("lmvz-header", { key: '6f495333a582e0bdba065ea223e631ab22ad6648', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'e4da0b537a42460290f8b0c833e93b311c93bd7e', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '232bcc2c0b5ea1131681e3bbad1e59c57e86f345', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '5ffad2212873c2bed0b2cf9478bf9fb60c64c2d9', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '12f600046c6f3f13c0724752b833bd9591e68ced', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '55c6ddec956960b57d4ddbdbde5b73c45bd3125b', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'cac4736814aae4dc3f8725f09c24ee5a4ba60be0', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: 'f62ef7953883cb4f989e43e1268f9fe9d3324a15', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '01ffb4c65e99644dff9fbeb0dc7af43bb0429d2b', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '1bf7ea0bb514eed4940ba5d0a739c6b56293c2c2', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '5ac636bc4a0939efdf3461b75908335c1e6910ed', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '4ca67b477a656236b353e5333aa183db140beb7d', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '94641076d563ab7d970abeada484d7800906fe30', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '5f5116dae74e1563eaf06fab2fdb1de7061a22fd', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '781e4b379ee2d4f5c6e940e167fd55310efbb65a', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/styles/fragments/_focus-within.css

@@ -0,0 +1,13 @@
+:host(:focus-within) {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+}
+
+/* Forced Colors / Windows High Contrast */
+
+@media (forced-colors: active) {
+  :host(:focus-within) {
+    outline-color: Highlight;
+    box-shadow: none;
+  }
+}