jsl-ui 9.28.7 → 10.0.0

package/lib/components/dialog/DialogComponent.d.ts

@@ -1,4 +1,4 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { IDialogOptions, JSLDialog } from "../../ui/dialog";
 import { IMoveableOptions } from "../../interaction/moveable";
 import { IResizeOptions } from "../../interaction/resizable";
@@ -18,6 +18,9 @@ export interface IDialogComponentOptions extends IDialogOptions {
     resizeOptions?: IResizeOptions;
     moveOptions?: IMoveableOptions;
     class?: string;
+    /** Accessible name when the header does not provide a suitable title. */
+    ariaLabel?: string;
+    closeButtonLabel?: string;
 }
 export interface IDialogButtonOptions {
     content?: string;
@@ -26,11 +29,13 @@ export interface IDialogButtonOptions {
     raw?: boolean;
 }
 export declare class DialogComponent implements IJSLComponent {
+    private static renderedDialogs;
     static Button(options: IDialogButtonOptions): {
         tag: string;
         attr: {
+            type: string;
             class: string;
-            click: () => Promise<void>;
+            click: (event: MouseEvent) => Promise<void>;
         };
         content: string;
         raw: boolean;
@@ -38,8 +43,9 @@ export declare class DialogComponent implements IJSLComponent {
     static Ok(onClick?: () => void | boolean | Promise<any>): {
         tag: string;
         attr: {
+            type: string;
             class: string;
-            click: () => Promise<void>;
+            click: (event: MouseEvent) => Promise<void>;
         };
         content: string;
         raw: boolean;
@@ -47,21 +53,29 @@ export declare class DialogComponent implements IJSLComponent {
     static Cancel(): {
         tag: string;
         attr: {
+            type: string;
             class: string;
-            click: () => Promise<void>;
+            click: (event: MouseEvent) => Promise<void>;
         };
         content: string;
         raw: boolean;
     };
     static show(options: IDialogComponentOptions): DialogComponent;
-    private static lastRenderedDlg;
-    private closeIcon;
-    private resizeHandle;
+    private static get lastRenderedDlg();
     private ref;
+    private renderer;
     private options;
+    private titleId;
+    private moveable;
+    private resizable;
+    private onDispose;
     constructor(options: IDialogComponentOptions);
     render(): IJSLVNode;
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
+    onRemove(): void;
     getRef(): JSLDialog;
+    private normalizePosition;
+    private keepInViewport;
     private toNode;
 }

package/lib/components/dialog/DialogComponent.js

@@ -4,30 +4,49 @@ import { Moveable } from "../../interaction/moveable";
 import { EventHandler } from "../../interaction/eventhandler";
 import { Resizable } from "../../interaction/resizable";
 import { UILang } from "../../core/lang";
+import { helper } from "../../core/helper";
 export class DialogComponent {
     static Button(options) {
         var _a, _b, _c;
-        const res = {
+        return {
             tag: "button", attr: {
+                type: "button",
                 class: "jsl-button " + ((_a = options.class) !== null && _a !== void 0 ? _a : ""),
-                click: async () => {
-                    if (options.onClick != null) {
-                        let clickRes = options.onClick();
-                        const isPromise = clickRes && typeof clickRes.then === "function" && typeof clickRes.catch === "function";
-                        if (isPromise) {
-                            clickRes = await clickRes;
+                click: async (event) => {
+                    var _a, _b, _c;
+                    const button = event === null || event === void 0 ? void 0 : event.currentTarget;
+                    if (button === null || button === void 0 ? void 0 : button.disabled) {
+                        return;
+                    }
+                    const overlay = button === null || button === void 0 ? void 0 : button.closest(".jsl-dialog-overlay");
+                    const owner = overlay === null || overlay === void 0 ? void 0 : overlay._component;
+                    // Capture the owner before a callback opens another dialog or awaits.
+                    const reference = (_a = (owner || DialogComponent.lastRenderedDlg)) === null || _a === void 0 ? void 0 : _a.getRef();
+                    let pending = false;
+                    try {
+                        let result = (_b = options.onClick) === null || _b === void 0 ? void 0 : _b.call(options);
+                        if (result && typeof result.then === "function") {
+                            pending = true;
+                            if (button) {
+                                button.disabled = true;
+                                button.setAttribute("aria-busy", "true");
+                            }
+                            result = await result;
                         }
-                        if (clickRes === false) {
-                            return;
+                        if (result !== false) {
+                            reference === null || reference === void 0 ? void 0 : reference.close();
                         }
                     }
-                    if (DialogComponent.lastRenderedDlg != null) {
-                        DialogComponent.lastRenderedDlg.getRef().close();
+                    finally {
+                        if (pending && button) {
+                            button.disabled = false;
+                            button.removeAttribute("aria-busy");
+                        }
+                        (_c = owner === null || owner === void 0 ? void 0 : owner.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
                     }
                 }
             }, content: (_b = options.content) !== null && _b !== void 0 ? _b : "OK", raw: (_c = options.raw) !== null && _c !== void 0 ? _c : false
         };
-        return res;
     }
     static Ok(onClick) {
         return DialogComponent.Button({ content: UILang.core.Ok, onClick, class: "dlg-ok-btn" });
@@ -35,58 +54,77 @@ export class DialogComponent {
     static Cancel() {
         return DialogComponent.Button({ content: UILang.core.Cancel, class: "dlg-cancel-btn jsl-button-outline" });
     }
-    // does not work -> dialog still exists in background and wrong renderer is active
-    // public static closeAll() {
-    //     document.querySelectorAll(".jsl-dialog-overlay").forEach((x) => {
-    //         if (x.parentNode != null) {
-    //             x.parentNode.removeChild(x);
-    //         }
-    //     });
-    // }
     static show(options) {
+        var _a;
         const container = document.createElement("div");
         document.body.appendChild(container);
-        const oldRenderer = JSLRender.lastCreatedRenderer;
-        const oldLastDlg = DialogComponent.lastRenderedDlg;
-        const renderer = new JSLRender(container, oldRenderer != null);
-        if (oldRenderer != null) {
-            JSLRender.lastCreatedRenderer = renderer;
-        }
-        const o = { ...options };
-        if (o.autoOpen == null) {
-            o.autoOpen = true;
-        }
-        o.onClose = () => {
-            if (options.onClose) {
-                if (options.onClose() === false) {
-                    return;
+        const renderer = new JSLRender(container, false);
+        const entry = {
+            dialog: undefined,
+            renderer,
+            previousRenderer: JSLRender.lastCreatedRenderer
+        };
+        let disposed = false;
+        const cleanup = (renderContent = true) => {
+            var _a;
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            const index = DialogComponent.renderedDialogs.indexOf(entry);
+            if (index >= 0) {
+                DialogComponent.renderedDialogs.splice(index, 1);
+            }
+            // A parent can close while a nested or asynchronous dialog is still open.
+            for (const other of DialogComponent.renderedDialogs) {
+                if (other.previousRenderer === renderer) {
+                    other.previousRenderer = entry.previousRenderer;
                 }
             }
-            renderer.render({ tag: "div" }); // necessary to call all onRemove functions in rendered content
-            document.body.removeChild(container);
-            JSLRender.lastCreatedRenderer = oldRenderer;
-            if (oldRenderer != null) {
-                oldRenderer.refresh();
+            if (JSLRender.lastCreatedRenderer === renderer) {
+                JSLRender.lastCreatedRenderer = entry.previousRenderer;
+            }
+            if (renderContent) {
+                renderer.render({ tag: "div" }); // Run onRemove for all dialog content.
             }
-            DialogComponent.lastRenderedDlg = oldLastDlg;
+            container.remove();
+            (_a = JSLRender.lastCreatedRenderer) === null || _a === void 0 ? void 0 : _a.refresh();
         };
-        const dlg = new DialogComponent(o);
-        DialogComponent.lastRenderedDlg = dlg;
+        const dlg = entry.dialog = new DialogComponent({
+            ...options,
+            autoOpen: (_a = options.autoOpen) !== null && _a !== void 0 ? _a : true,
+            onClose: () => {
+                var _a;
+                if (((_a = options.onClose) === null || _a === void 0 ? void 0 : _a.call(options)) === false) {
+                    renderer.refresh();
+                    return false;
+                }
+                cleanup();
+            }
+        });
+        dlg.onDispose = () => cleanup(false);
+        DialogComponent.renderedDialogs.push(entry);
+        JSLRender.lastCreatedRenderer = renderer;
         renderer.render(dlg);
         return dlg;
     }
+    static get lastRenderedDlg() {
+        var _a;
+        const entries = DialogComponent.renderedDialogs;
+        return (_a = entries[entries.length - 1]) === null || _a === void 0 ? void 0 : _a.dialog;
+    }
     constructor(options) {
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "dlg-close-btn", click: () => {
-                    this.ref.close();
-                }
+        this.titleId = helper.newDomGuid();
+        this.keepInViewport = () => {
+            const overlay = this.ref.getOverlay();
+            const element = overlay.querySelector(".jsl-dialog");
+            if (element.style.transform !== "none" || !element.getClientRects().length) {
+                return;
             }
+            element.style.left = Math.max(0, Math.min(element.offsetLeft, overlay.clientWidth - element.offsetWidth)) + "px";
+            element.style.top = Math.max(0, Math.min(element.offsetTop, overlay.clientHeight - element.offsetHeight)) + "px";
         };
-        this.resizeHandle = {
-            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
-        };
-        this.options = { maxHeight: "calc(100vh - 7.5rem)", width: "50vw", ...options };
+        this.options = { maxHeight: "calc(100vh - 7.5rem)", width: "32rem", ...options };
     }
     render() {
         const header = this.toNode(this.options.header);
@@ -94,99 +132,118 @@ export class DialogComponent {
         const footer = this.toNode(this.options.footer);
         let styleW = "";
         let styleH = "";
-        if (this.options.width != null) {
-            styleW += "width:" + this.options.width + ";";
-        }
-        if (this.options.minWidth != null) {
-            styleW += "min-width:" + this.options.minWidth + ";";
-        }
-        if (this.options.maxWidth != null) {
-            styleW += "max-width:" + this.options.maxWidth + ";";
-        }
-        if (this.options.height != null) {
-            styleH += "height:" + this.options.height + ";";
-        }
-        if (this.options.minHeight != null) {
-            styleH += "min-height:" + this.options.minHeight + ";";
+        for (const property of ["width", "minWidth", "maxWidth"]) {
+            if (this.options[property] != null) {
+                styleW += property.replace(/[A-Z]/g, letter => "-" + letter.toLowerCase()) + ":" + this.options[property] + ";";
+            }
         }
-        if (this.options.maxHeight != null) {
-            styleH += "max-height:" + this.options.maxHeight + ";";
+        // Preserve the existing API: height options describe the content area.
+        for (const property of ["height", "minHeight", "maxHeight"]) {
+            if (this.options[property] != null) {
+                styleH += property.replace(/[A-Z]/g, letter => "-" + letter.toLowerCase()) + ":" + this.options[property] + ";";
+            }
         }
-        const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
+        const hasHeader = this.options.header != null && this.options.header !== "";
+        const hasFooter = this.options.footer != null && this.options.footer !== "";
         return {
-            tag: "div", attr: {
-                class: "jsl-dialog-overlay", wheel: (e) => {
-                    e.preventDefault();
-                }
-            }, children: [
-                {
+            tag: "div", attr: { class: "jsl-dialog-overlay" }, children: [{
                     tag: "div", attr: {
-                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: (e) => {
-                            e.stopImmediatePropagation();
-                            e.stopPropagation();
-                        }
+                        class: "jsl-dialog " + (this.options.allowMove ? "jsl-dialog-moveable " : "") + (this.options.class || ""),
+                        style: styleW,
+                        role: "dialog",
+                        tabindex: "-1",
+                        "aria-label": this.options.ariaLabel,
+                        "aria-labelledby": !this.options.ariaLabel && hasHeader ? this.titleId : undefined
                     }, children: [
                         {
-                            tag: "div", attr: { class: "dlg-header", style: headerStyle },
-                            children: this.options.showCloseButton ? [header, this.closeIcon] : [header]
+                            tag: "div", attr: {
+                                class: "dlg-header",
+                                hidden: !hasHeader && !this.options.showCloseButton ? "hidden" : undefined
+                            }, children: [
+                                { tag: "div", attr: { class: "dlg-title", id: this.titleId }, children: [header] },
+                                this.options.showCloseButton ? {
+                                    tag: "button", attr: {
+                                        type: "button", class: "dlg-close-btn",
+                                        "aria-label": this.options.closeButtonLabel || "Close dialog",
+                                        title: this.options.closeButtonLabel || "Close dialog",
+                                        click: () => this.ref.close()
+                                    }
+                                } : undefined
+                            ]
                         },
                         { tag: "div", attr: { class: "dlg-body", style: styleH }, children: [body] },
-                        {
-                            tag: "div", attr: { class: "dlg-footer" },
-                            children: [footer]
-                        },
-                        this.options.allowResize ? this.resizeHandle : undefined
+                        { tag: "div", attr: { class: "dlg-footer", hidden: !hasFooter ? "hidden" : undefined }, children: [footer] },
+                        this.options.allowResize ? {
+                            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r", "aria-hidden": "true" }
+                        } : undefined
                     ]
-                }
-            ]
+                }]
         };
     }
+    onInit(renderer) {
+        this.renderer = renderer;
+    }
     onCreate(node) {
-        this.ref = Dialog(node.dom, this.options);
+        const overlay = node.dom;
+        const element = overlay.querySelector(".jsl-dialog");
+        // Initialize first so onOpen can safely access getRef(), even on first render.
+        this.ref = Dialog(overlay, { ...this.options, autoOpen: false });
         if (this.options.allowMove) {
-            Moveable(this.ref.getOverlay(), {
-                onStart: new EventHandler((e) => {
-                    let headerWasClicked = false;
-                    let parent = e.evt.target;
-                    while (parent != null && !parent.classList.contains("jsl-dialog-overlay")) {
-                        if (parent.classList.contains("dlg-header")) {
-                            headerWasClicked = true;
-                            break;
-                        }
-                        parent = parent.parentElement;
-                    }
-                    if (headerWasClicked) {
-                        const rect = e.target.getBoundingClientRect();
-                        e.target.style.transform = "translate(0, 0)";
-                        e.target.style.left = rect.left + "px";
-                        e.target.style.top = rect.top + "px";
+            this.moveable = Moveable(overlay, {
+                ...this.options.moveOptions,
+                selector: ".jsl-dialog",
+                onStart: new EventHandler(event => {
+                    var _a, _b;
+                    const target = event.evt.target;
+                    if (!target.closest(".dlg-header") ||
+                        target.closest("button,input,select,textarea,a,[contenteditable]")) {
+                        event.cancelEvent();
+                        return;
                     }
-                    else {
-                        e.cancelEvent();
-                    }
-                }),
-                ...this.options.moveOptions
+                    this.normalizePosition(element);
+                    event.x = element.offsetLeft;
+                    event.y = element.offsetTop;
+                    (_b = (_a = this.options.moveOptions) === null || _a === void 0 ? void 0 : _a.onStart) === null || _b === void 0 ? void 0 : _b.notify(event);
+                })
             });
         }
         if (this.options.allowResize) {
-            const dlgEl = this.ref.getOverlay().querySelector(".jsl-dialog");
-            Resizable(dlgEl, this.options.resizeOptions);
-            const rect = dlgEl.getBoundingClientRect();
-            dlgEl.style.transform = "translate(0, 0)";
-            dlgEl.style.left = rect.left + "px";
-            dlgEl.style.top = rect.top + "px";
-            const bodyEl = dlgEl.querySelector(".dlg-body");
-            const bodyRect = bodyEl.getBoundingClientRect();
-            bodyEl.style.height = "calc(100% - " + (rect.height - bodyRect.height) + "px)";
+            this.resizable = Resizable(element, {
+                minWidth: 240, minHeight: 160,
+                ...this.options.resizeOptions,
+                onStart: new EventHandler(event => {
+                    var _a, _b;
+                    this.normalizePosition(element);
+                    element.style.height = element.getBoundingClientRect().height + "px";
+                    (_b = (_a = this.options.resizeOptions) === null || _a === void 0 ? void 0 : _a.onStart) === null || _b === void 0 ? void 0 : _b.notify(event);
+                })
+            });
         }
+        window.addEventListener("resize", this.keepInViewport);
+        if (this.options.autoOpen) {
+            this.ref.open();
+        }
+    }
+    onRemove() {
+        var _a, _b, _c, _d;
+        window.removeEventListener("resize", this.keepInViewport);
+        (_a = this.moveable) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.resizable) === null || _b === void 0 ? void 0 : _b.destroy();
+        (_c = this.ref) === null || _c === void 0 ? void 0 : _c.destroy();
+        (_d = this.onDispose) === null || _d === void 0 ? void 0 : _d.call(this);
     }
     getRef() {
         return this.ref;
     }
+    normalizePosition(element) {
+        const rect = element.getBoundingClientRect();
+        const overlayRect = this.ref.getOverlay().getBoundingClientRect();
+        element.style.transform = "none";
+        element.style.left = rect.left - overlayRect.left + "px";
+        element.style.top = rect.top - overlayRect.top + "px";
+    }
     toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "div", content };
-        }
-        return content;
+        return typeof content === "string" ? { tag: "div", content } : content;
     }
 }
+DialogComponent.renderedDialogs = [];

package/lib/components/expander/ExpanderComponent.d.ts

@@ -1,5 +1,5 @@
 import "./ExpanderStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 export interface IExpanderOptions {
     header: IJSLVNode | string | IJSLComponent;
     body: IJSLVNode | string | IJSLComponent;
@@ -11,17 +11,31 @@ export interface IExpanderOptions {
     class?: string;
     style?: string;
     iconSize?: string;
+    id?: string;
+    ariaLabel?: string;
+    enabled?: boolean;
 }
 export declare class ExpanderComponent implements IJSLComponent {
     State: {
         expanded: boolean;
         waitingForAnimation: boolean;
+        id?: string;
+        dom?: HTMLElement;
+        renderer?: JSLRender;
     };
     private options;
     constructor(optionsOrHeader: IExpanderOptions | IJSLVNode | string | IJSLComponent, body?: IJSLVNode | string | IJSLComponent, expanded?: boolean);
     getIcon(expanded: boolean): IJSLVNode;
     isEqual(node: IJSLComponent): boolean;
     render(): IJSLVNode;
+    onInit(renderer: JSLRender): void;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    isExpanded(): boolean;
+    /** Updates expansion silently. User activation and toggle() consult onToggle. */
+    setExpanded(expanded: boolean): void;
+    toggle(): void;
     private toggleExpand;
+    private restoreFocusFromBody;
     private toNode;
 }