jsl-ui 9.28.7 → 10.0.0

package/lib/components/notification/Notification.js

@@ -1,65 +1,184 @@
 import "./Notification.scss";
 import { JSLRender } from "jsl-render";
 import { helper } from "../../core/helper";
-export class Notification {
-    static show(options) {
-        if (Notification.container == null) {
-            Notification.createContainer();
+/** The same surface can be rendered inline or hosted by Notification.show(). */
+export class NotificationComponent {
+    constructor(options) {
+        this.options = options;
+        this.State = { closed: false };
+        this.id = helper.newDomGuid();
+        this.interactions = new Set();
+    }
+    onInit(renderer) { this.renderer = renderer; }
+    onCreate(node) { this.dom = node.dom; this.updateProgress(); }
+    onRemove() { var _a; (_a = this.progressAnimation) === null || _a === void 0 ? void 0 : _a.cancel(); this.dom = undefined; }
+    /** The notification host keeps the visual countdown synchronized with dismissal. */
+    setCountdown(remaining, paused) {
+        this.countdown = { remaining, paused, updatedAt: Date.now() };
+        this.updateProgress();
+    }
+    updateProgress() {
+        var _a, _b;
+        (_a = this.progressAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
+        const bar = (_b = this.dom) === null || _b === void 0 ? void 0 : _b.querySelector(".jsl-notification-progress-fill");
+        if (!bar || !this.countdown) {
+            return;
+        }
+        const remaining = Math.max(0, this.countdown.remaining - (this.countdown.paused ? 0 : Date.now() - this.countdown.updatedAt));
+        const fraction = remaining / this.options.timeOut;
+        bar.style.transform = "scaleX(" + fraction + ")";
+        if (!this.countdown.paused && remaining > 0) {
+            this.progressAnimation = bar.animate([
+                { transform: "scaleX(" + fraction + ")" }, { transform: "scaleX(0)" }
+            ], { duration: remaining, fill: "forwards", easing: "linear" });
         }
-        const id = helper.newDomGuid();
-        // add
-        const notification = {
-            tag: "div",
-            attr: { id, style: options.style, class: "jsl-notification " + (options.class || "") },
-            animation: { attr: "opacity", from: 0, to: 1, duration: 600 },
-            children: [
-                typeof options.content === "string" ? { tag: "div", content: options.content } : options.content
+    }
+    render() {
+        var _a, _b, _c;
+        const variant = (_a = this.options.variant) !== null && _a !== void 0 ? _a : "default";
+        const symbols = { default: "i", info: "i", success: "✓", warning: "!", error: "!" };
+        return {
+            tag: "div", attr: {
+                id: this.id, hidden: this.State.closed ? "hidden" : undefined,
+                class: "jsl-notification jsl-notification--" + variant + " " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                style: this.options.style, role: variant === "error" || variant === "warning" ? "alert" : "status",
+                "aria-atomic": "true",
+                tabindex: this.options.onClick ? "0" : undefined,
+                click: () => { this.activate(); return false; },
+                keydown: (event) => {
+                    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.activate();
+                    }
+                    return false;
+                },
+                mouseenter: () => { this.pause("pointer", true); return false; },
+                mouseleave: () => { this.pause("pointer", false); return false; },
+                focusin: () => { this.pause("focus", true); return false; },
+                focusout: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                        this.pause("focus", false);
+                    }
+                    return false;
+                }
+            }, children: [
+                { tag: "span", content: symbols[variant], attr: { class: "jsl-notification-icon", "aria-hidden": "true" } },
+                { tag: "div", attr: { class: "jsl-notification-copy" }, children: [
+                        { tag: "div", content: this.options.title, attr: { class: "jsl-notification-title", hidden: this.options.title ? undefined : "hidden" } },
+                        typeof this.options.content === "string" ? { tag: "div", content: this.options.content } : this.options.content
+                    ] },
+                { tag: "button", attr: {
+                        type: "button", class: "jsl-notification-close",
+                        hidden: this.options.showCloseButton === false ? "hidden" : undefined,
+                        "aria-label": (_c = this.options.closeButtonLabel) !== null && _c !== void 0 ? _c : "Dismiss notification",
+                        click: (event) => { event.stopPropagation(); this.dismiss(); return false; }
+                    }, children: [{ tag: "span", content: "×", attr: { "aria-hidden": "true" } }] },
+                ...(this.countdown ? [{ tag: "div", attr: { class: "jsl-notification-progress", "aria-hidden": "true" }, children: [
+                            { tag: "span", attr: { class: "jsl-notification-progress-fill" } }
+                        ] }] : [])
             ]
         };
-        Notification.containerVNode.children.push(notification);
-        Notification.renderer.refresh();
-        // remove
-        if (options.timeOut) {
-            setTimeout(() => {
-                const idx = Notification.containerVNode.children.indexOf(notification);
-                if (idx >= 0) {
-                    Notification.containerVNode.children.splice(idx, 1);
-                }
-                Notification.renderer.refresh();
-            }, options.timeOut);
+    }
+    dismiss() {
+        var _a, _b, _c;
+        if (this.State.closed) {
+            return;
+        }
+        this.State.closed = true;
+        (_b = (_a = this.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+    }
+    activate() {
+        var _a, _b, _c, _d;
+        (_b = (_a = this.options).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if ((_c = this.options.closeOnClick) !== null && _c !== void 0 ? _c : true) {
+            this.dismiss();
+        }
+        else {
+            (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.refresh();
+        }
+    }
+    pause(reason, paused) {
+        var _a;
+        const wasPaused = this.interactions.size > 0;
+        if (paused) {
+            this.interactions.add(reason);
         }
-        notification.attr.click = () => {
-            var _a;
-            if (options.onClick != null) {
-                options.onClick();
+        else {
+            this.interactions.delete(reason);
+        }
+        if (wasPaused !== (this.interactions.size > 0)) {
+            (_a = this.onInteractionChange) === null || _a === void 0 ? void 0 : _a.call(this, this.interactions.size > 0);
+        }
+    }
+}
+export class Notification {
+    static show(options) {
+        var _a, _b;
+        if (!((_a = Notification.container) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+            Notification.createContainer();
+        }
+        const component = new NotificationComponent({
+            ...options, onClose: () => {
+                var _a;
+                Notification.remove(component.id);
+                (_a = options.onClose) === null || _a === void 0 ? void 0 : _a.call(options);
             }
-            if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
-                const idx = Notification.containerVNode.children.indexOf(notification);
-                if (idx >= 0) {
-                    Notification.containerVNode.children.splice(idx, 1);
+        });
+        const entry = { component, remaining: Math.max(0, (_b = options.timeOut) !== null && _b !== void 0 ? _b : 0), started: 0 };
+        Notification.entries.set(component.id, entry);
+        component.onInteractionChange = paused => {
+            if (!Notification.entries.has(component.id) || !entry.remaining) {
+                return;
+            }
+            if (paused) {
+                if (entry.timer != null) {
+                    clearTimeout(entry.timer);
+                    entry.timer = undefined;
+                    entry.remaining = Math.max(1, entry.remaining - (Date.now() - entry.started));
+                    component.setCountdown(entry.remaining, true);
                 }
             }
+            else {
+                Notification.schedule(entry);
+            }
         };
-        return id;
-    }
-    static clearNotification(id) {
-        Notification.containerVNode.children = Notification.containerVNode.children.filter((x) => { var _a; return ((_a = x.attr) === null || _a === void 0 ? void 0 : _a.id) !== id; });
+        Notification.containerVNode.children.push(component);
         Notification.renderer.refresh();
+        Notification.schedule(entry);
+        return component.id;
     }
-    static clearAll() {
-        if (Notification.containerVNode != null) {
-            Notification.containerVNode.children = [];
+    static clearNotification(id) { var _a; (_a = Notification.entries.get(id)) === null || _a === void 0 ? void 0 : _a.component.dismiss(); }
+    static clearAll() { [...Notification.entries.values()].forEach(entry => entry.component.dismiss()); }
+    static schedule(entry) {
+        if (entry.timer != null || entry.remaining <= 0) {
+            return;
         }
-        if (Notification.renderer != null) {
-            Notification.renderer.refresh();
+        entry.started = Date.now();
+        entry.component.setCountdown(entry.remaining, false);
+        entry.timer = setTimeout(() => { entry.timer = undefined; entry.component.dismiss(); }, entry.remaining);
+    }
+    static remove(id) {
+        const entry = Notification.entries.get(id);
+        if (!entry) {
+            return;
         }
+        clearTimeout(entry.timer);
+        Notification.entries.delete(id);
+        Notification.containerVNode.children = Notification.containerVNode.children.filter(child => child !== entry.component);
+        Notification.renderer.refresh();
     }
     static createContainer() {
+        // An application may replace its body while notifications exist.
+        [...Notification.entries.values()].forEach(entry => clearTimeout(entry.timer));
+        Notification.entries.clear();
         Notification.container = document.createElement("div");
-        document.body.appendChild(Notification.container);
         Notification.container.className = "jsl-notification-container";
+        document.body.appendChild(Notification.container);
         Notification.containerVNode = { tag: "div", children: [] };
         Notification.renderer = new JSLRender(Notification.container, false);
         Notification.renderer.render(Notification.containerVNode);
     }
 }
+Notification.entries = new Map();

package/lib/components/notification/Notification.scss

@@ -1,19 +1,103 @@
-.jsl-notification-container {
-    position: fixed;
-    top: 1px;
-    right: 1px;
-    overflow: visible;
-    z-index: 3020;
-
-    .jsl-notification {
-        box-sizing: border-box;
-        padding: 0.5rem;
-        min-width: 12rem;
-        border-radius: 0.3rem;
-        // border: 1px solid silver;
-        color: white;
-        background: #3B99FF;
-        margin: 0.2rem;
-        cursor: pointer;
-    }
-}
+@import "../../ui/theme.css";
+
+.jsl-notification-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 25rem;
+    max-width: 100vw;
+    max-height: 100dvh;
+    overflow-y: auto;
+    z-index: 3020;
+    // Leave space for individual shadows so scrolling doesn't crop them into a rectangle.
+    box-sizing: border-box;
+    padding: 1rem;
+    background: transparent;
+    border: 0;
+    border-radius: 1.75rem;
+    box-shadow: none;
+    pointer-events: none;
+    scrollbar-width: thin;
+}
+.jsl-notification-container > div { display: flex; flex-direction: column; gap: .75rem; }
+.jsl-notification {
+    position: relative;
+    --jsl-notification-tone: var(--jsl-color-text-secondary);
+    display: grid;
+    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
+    align-items: start;
+    gap: .75rem;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .75rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .8125rem;
+    line-height: 1.5;
+    box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.04);
+    pointer-events: auto;
+    animation: jsl-notification-appear .16s ease-out;
+}
+.jsl-notification[hidden] { display: none; }
+.jsl-notification--info { --jsl-notification-tone: var(--jsl-color-info); }
+.jsl-notification--success { --jsl-notification-tone: var(--jsl-color-success); }
+.jsl-notification--warning { --jsl-notification-tone: var(--jsl-color-warning); }
+.jsl-notification--error { --jsl-notification-tone: var(--jsl-color-danger); }
+.jsl-notification-icon {
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: .125rem;
+    border: 1.5px solid currentColor;
+    border-radius: 50%;
+    color: var(--jsl-notification-tone);
+    font-size: .6875rem;
+    font-weight: 700;
+    line-height: 1;
+}
+.jsl-notification--success .jsl-notification-icon { font-size: .75rem; }
+.jsl-notification-copy { min-width: 0; overflow-wrap: anywhere; }
+.jsl-notification-title { margin-bottom: .25rem; font-weight: 600; color: var(--jsl-color-text); }
+.jsl-notification-title[hidden] { display: none; }
+.jsl-notification-close {
+    appearance: none;
+    display: grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: -.125rem -.25rem 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: .25rem;
+    background: transparent;
+    color: var(--jsl-color-text-muted);
+    font: inherit;
+    font-size: 1.125rem;
+    line-height: 1;
+    cursor: pointer;
+}
+.jsl-notification-close[hidden] { display: none; }
+.jsl-notification-progress {
+    position: absolute;
+    inset: auto 1rem .375rem;
+    height: 3px;
+    border-radius: 999px;
+    overflow: hidden;
+    background: var(--jsl-color-border-subtle);
+    pointer-events: none;
+}
+.jsl-notification-progress-fill {
+    display: block;
+    height: 100%;
+    background: var(--jsl-color-accent);
+    transform-origin: left;
+}
+.jsl-notification-close:hover { background: var(--jsl-color-surface-hover); color: var(--jsl-color-text); }
+.jsl-notification-close:focus-visible, .jsl-notification:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 2px; }
+@keyframes jsl-notification-appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+@media (prefers-reduced-motion: reduce) { .jsl-notification { animation: none; } }

package/lib/components/number/NumberComponent.d.ts

@@ -1,4 +1,5 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import "../../ui/input.css";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { INumberInputOptions } from "../../ui/number.input";
 import { EventHandler } from "../../interaction/eventhandler";
 import { IDataConverter } from "../../interaction/dataconverter";
@@ -6,21 +7,34 @@ export interface INumberComponentOptions<T = any> extends INumberInputOptions {
     id?: string;
     class?: string;
     style?: string;
-    placeholder?: string;
+    placeholder?: boolean | string;
     bindTo?: T;
     bindMode?: "toModel" | "fromModel" | "both";
     property?: keyof T;
     converter?: IDataConverter<any, number>;
+    unstyled?: boolean;
+    ariaLabel?: string;
+    readOnly?: boolean;
 }
 export declare class NumberComponent<T = any> implements IJSLComponent {
     private currentDom;
     private id;
     private options;
+    private modelValue;
+    private renderer;
     constructor(options: INumberComponentOptions<T>);
     get onChange(): EventHandler<number>;
     render(): IJSLVNode;
     getValue(): string;
     getValueAsNumber(): number;
+    isValid(): boolean;
+    /** Updates the input and writable binding without raising onChange. */
     setValue(value: number): void;
+    focus(): void;
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    private hasBinding;
+    private readModel;
+    private writeModel;
 }

package/lib/components/number/NumberComponent.js

@@ -1,80 +1,81 @@
+import "../../ui/input.css";
 import { NumberInput } from "../../ui/number.input";
 import { numeric } from "../../core/numeric";
 import { helper } from "../../core/helper";
 import { EventHandler } from "../../interaction/eventhandler";
 export class NumberComponent {
     constructor(options) {
-        var _a;
-        this.options = { ...{ onChange: new EventHandler(), bindMode: "toModel" }, ...options };
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
+        this.options = { enabled: true, format: "0.###", bindMode: "toModel", ...options };
+        if (this.hasBinding() && this.options.value == null) {
+            this.options.value = this.readModel();
         }
+        this.modelValue = this.options.value;
         this.options.onChange = EventHandler.Create(this.options.onChange);
         this.id = options.id || helper.newDomGuid();
     }
-    get onChange() {
-        return this.options.onChange;
-    }
+    get onChange() { return this.options.onChange; }
     render() {
-        var _a;
-        let val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            const current = this.getValue();
-            const newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            const newValStr = numeric.format(newVal, this.options.format);
-            val = newVal;
-            if (newValStr !== current) {
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
+        var _a, _b;
+        if (this.options.bindMode !== "toModel" && this.hasBinding()) {
+            const value = this.readModel();
+            if (!Object.is(value, this.modelValue)) {
+                this.options.value = value;
+                this.modelValue = value;
+                if (this.currentDom) {
+                    this.currentDom.value = numeric.format(value, this.options.format);
                 }
             }
         }
         return {
-            tag: "input",
-            attr: {
-                id: this.id,
-                class: this.options.class,
-                style: this.options.style,
-                value: numeric.format(val, this.options.format),
-                placeholder: this.options.placeholder
+            tag: "input", attr: {
+                id: this.id, type: "text", inputmode: (_a = this.options.inputmode) !== null && _a !== void 0 ? _a : "decimal",
+                class: (this.options.unstyled ? "" : "jsl-input ") + "jsl-number " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                style: this.options.style, value: numeric.format(this.options.value, this.options.format),
+                placeholder: typeof this.options.placeholder === "string" ? this.options.placeholder :
+                    this.options.placeholder === true ? numeric.format(0, this.options.format) : undefined,
+                disabled: this.options.enabled ? undefined : "disabled",
+                readonly: this.options.readOnly ? "readonly" : undefined,
+                "aria-label": this.options.ariaLabel
             }
         };
     }
-    getValue() {
-        if (this.currentDom == null) {
-            return null;
-        }
-        return this.currentDom.value;
-    }
-    getValueAsNumber() {
-        return numeric.parse(this.getValue());
-    }
+    getValue() { var _a, _b; return (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : numeric.format(this.options.value, this.options.format); }
+    getValueAsNumber() { return numeric.parse(this.getValue()); }
+    isValid() { return !this.getValue().trim() || Number.isFinite(this.getValueAsNumber()); }
+    /** Updates the input and writable binding without raising onChange. */
     setValue(value) {
-        var _a;
         this.options.value = value;
-        if (this.currentDom != null) {
+        if (this.currentDom) {
             this.currentDom.value = numeric.format(value, this.options.format);
+            this.currentDom.setCustomValidity("");
+            this.currentDom.removeAttribute("aria-invalid");
         }
-        if (this.options.bindMode !== "fromModel" && this.options.bindTo && this.options.property) {
-            this.options.bindTo[this.options.property] =
-                this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-        }
+        this.writeModel(value);
     }
+    focus() { var _a; (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.focus(); }
+    onInit(renderer) { this.renderer = renderer; }
     onCreate(node) {
         this.currentDom = node.dom;
-        const handler = new EventHandler((value) => {
-            var _a;
-            if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && this.options.property != null) {
-                if (this.options.bindTo && this.options.property) {
-                    this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-                }
-            }
-            this.options.onChange.notify(value);
-        });
-        NumberInput(this.currentDom, { ...this.options, onChange: handler });
+        NumberInput(this.currentDom, { ...this.options, onChange: value => {
+                var _a;
+                this.options.value = value;
+                this.writeModel(value);
+                this.onChange.notify(value);
+                (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.refresh();
+            } });
+    }
+    onRemove() { this.currentDom = null; }
+    hasBinding() { return this.options.bindTo != null && this.options.property != null; }
+    readModel() {
+        var _a;
+        const value = this.options.bindTo[this.options.property];
+        return ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ? this.options.converter.toUI(value) : value;
+    }
+    writeModel(value) {
+        var _a;
+        if (this.hasBinding() && this.options.bindMode !== "fromModel") {
+            this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            this.modelValue = value;
+        }
     }
 }

package/lib/components/overlay/OverlayComponent.d.ts

@@ -1,5 +1,5 @@
 import "./overlay.css";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 export interface IOverlayComponentOptions {
     content: IJSLVNode | string | IJSLComponent;
     showCloseButton?: boolean;
@@ -12,16 +12,22 @@ export interface IOverlayComponentOptions {
     size?: string;
     class?: string;
     style?: string;
+    ariaLabel?: string;
+    closeButtonLabel?: string;
 }
 export declare class OverlayComponent implements IJSLComponent {
-    static show(options: IOverlayComponentOptions): OverlayComponent;
-    private static lastRenderedDlg;
-    private closeIcon;
-    private onKeydownEvent;
-    close(): void;
+    State: {
+        closed: boolean;
+    };
+    private dom;
+    private renderer;
+    private disposeHost?;
     private options;
+    static show(options: IOverlayComponentOptions): OverlayComponent;
     constructor(options: IOverlayComponentOptions);
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    close(): void;
     render(): IJSLVNode;
-    private toNode;
 }