@lmvz-ds/components 0.25.0 → 0.27.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-tab/lmvz-tab.css

@@ -0,0 +1,148 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+}
+:host {
+  display: inline-block;
+  flex: none;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+button {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-component-component-spacing-0-default, 4px);
+
+  padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+
+  border: none;
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  background: var(--lmvz-tab-background);
+  color: var(--lmvz-tab-color);
+
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+button:focus-visible {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  z-index: 1;
+}
+button:disabled {
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+button:hover {
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000);
+}
+button:active {
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
+}
+:host([has-media]) {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
+}
+:host([has-media]) button {
+  padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
+  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
+}
+:host([has-media]) button:hover {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+}
+:host([has-media]) button:active {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+}
+:host([selected]) button {
+  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
+}
+:host([selected][has-media]) button:hover,
+:host([selected][has-media]) button:active {
+  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+.indicator {
+  /* TODO: replace with a design token if one is introduced for tab indicator border */
+  --lmvz-tab-indicator-size: 4px;
+
+  position: absolute;
+  background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+
+  /* Horizontal: full-width bar at bottom */
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: var(--lmvz-tab-indicator-size);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--lmvz-tab-indicator-size);
+  border-end-end-radius: var(--lmvz-tab-indicator-size);
+}
+:host([selected][has-media]) .indicator {
+  opacity: 1;
+}
+:host([vertical]) button {
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+}
+:host([vertical]) .indicator {
+  /* Vertical: narrow bar at inline-start edge */
+  inset-block: 0;
+  inset-inline: 0 auto;
+  inline-size: var(--lmvz-tab-indicator-size);
+  block-size: auto;
+  border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;
+  background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
+}
+::slotted(*) {
+  --lmvz-component-color: var(--lmvz-tab-color);
+}
+::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+}
+:host([has-media]) ::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+}
+.label {
+  display: contents;
+}