jsl-ui 9.28.3 → 9.28.4

package/lib/components/date-time/DateTimeComponent.js

@@ -1,39 +1,39 @@
-import "./DateTimeStyle.scss";
-import { EventHandler } from "../../interaction/eventhandler";
-import { DateComponent } from "../date/DateComponent";
-import { TimeComponent } from "../time/TimeComponent";
-export class DateTimeComponent {
-    constructor(options) {
-        if (options.bindMode && options.bindMode !== "toModel") {
-            throw new Error("Currently DateTimeComponent only supports toModel as bindMode");
-        }
-        this.options = { ...options };
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-        const optionsCopy = { ...options };
-        optionsCopy.bindTo = null;
-        optionsCopy.property = null;
-        optionsCopy.converter = null;
-        optionsCopy.onChange = () => {
-            var _a;
-            const val = this.getValueAsDate();
-            if (this.options.bindTo && options.property) {
-                this.options.bindTo[options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
-        };
-        this.dateComp = new DateComponent(optionsCopy);
-        this.timeComp = new TimeComponent(optionsCopy);
-    }
-    render() {
-        return { tag: "div", attr: { class: "date-time-comp" }, children: [
-                this.dateComp, this.timeComp
-            ] };
-    }
-    getValue() {
-        return this.dateComp.getValue() + " " + this.timeComp.getValue();
-    }
-    getValueAsDate() {
-        return this.timeComp.getValueAsDate(this.dateComp.getValueAsDate());
-    }
-}
+import "./DateTimeStyle.scss";
+import { EventHandler } from "../../interaction/eventhandler";
+import { DateComponent } from "../date/DateComponent";
+import { TimeComponent } from "../time/TimeComponent";
+export class DateTimeComponent {
+    constructor(options) {
+        if (options.bindMode && options.bindMode !== "toModel") {
+            throw new Error("Currently DateTimeComponent only supports toModel as bindMode");
+        }
+        this.options = { ...options };
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        const optionsCopy = { ...options };
+        optionsCopy.bindTo = null;
+        optionsCopy.property = null;
+        optionsCopy.converter = null;
+        optionsCopy.onChange = () => {
+            var _a;
+            const val = this.getValueAsDate();
+            if (this.options.bindTo && options.property) {
+                this.options.bindTo[options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
+            }
+            this.options.onChange.notify(val);
+        };
+        this.dateComp = new DateComponent(optionsCopy);
+        this.timeComp = new TimeComponent(optionsCopy);
+    }
+    render() {
+        return { tag: "div", attr: { class: "date-time-comp" }, children: [
+                this.dateComp, this.timeComp
+            ] };
+    }
+    getValue() {
+        return this.dateComp.getValue() + " " + this.timeComp.getValue();
+    }
+    getValueAsDate() {
+        return this.timeComp.getValueAsDate(this.dateComp.getValueAsDate());
+    }
+}

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

@@ -1,67 +1,67 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDialogOptions, JSLDialog } from "../../ui/dialog";
-import { IMoveableOptions } from "../../interaction/moveable";
-import { IResizeOptions } from "../../interaction/resizable";
-export interface IDialogComponentOptions extends IDialogOptions {
-    width?: string;
-    minWidth?: string;
-    minHeight?: string;
-    height?: string;
-    maxWidth?: string;
-    maxHeight?: string;
-    header: IJSLVNode | string | IJSLComponent;
-    content: IJSLVNode | string | IJSLComponent;
-    footer: IJSLVNode | string | IJSLComponent;
-    showCloseButton?: boolean;
-    allowMove?: boolean;
-    allowResize?: boolean;
-    resizeOptions?: IResizeOptions;
-    moveOptions?: IMoveableOptions;
-    class?: string;
-}
-export interface IDialogButtonOptions {
-    content?: string;
-    class?: string;
-    onClick?: () => void | boolean | Promise<any>;
-    raw?: boolean;
-}
-export declare class DialogComponent implements IJSLComponent {
-    static Button(options: IDialogButtonOptions): {
-        tag: string;
-        attr: {
-            class: string;
-            click: () => Promise<void>;
-        };
-        content: string;
-        raw: boolean;
-    };
-    static Ok(onClick?: () => void | boolean | Promise<any>): {
-        tag: string;
-        attr: {
-            class: string;
-            click: () => Promise<void>;
-        };
-        content: string;
-        raw: boolean;
-    };
-    static Cancel(): {
-        tag: string;
-        attr: {
-            class: string;
-            click: () => Promise<void>;
-        };
-        content: string;
-        raw: boolean;
-    };
-    static show(options: IDialogComponentOptions): DialogComponent;
-    private static lastRenderedDlg;
-    private closeIcon;
-    private resizeHandle;
-    private ref;
-    private options;
-    constructor(options: IDialogComponentOptions);
-    render(): IJSLVNode;
-    onCreate(node: IJSLVNode): void;
-    getRef(): JSLDialog;
-    private toNode;
-}
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDialogOptions, JSLDialog } from "../../ui/dialog";
+import { IMoveableOptions } from "../../interaction/moveable";
+import { IResizeOptions } from "../../interaction/resizable";
+export interface IDialogComponentOptions extends IDialogOptions {
+    width?: string;
+    minWidth?: string;
+    minHeight?: string;
+    height?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    header: IJSLVNode | string | IJSLComponent;
+    content: IJSLVNode | string | IJSLComponent;
+    footer: IJSLVNode | string | IJSLComponent;
+    showCloseButton?: boolean;
+    allowMove?: boolean;
+    allowResize?: boolean;
+    resizeOptions?: IResizeOptions;
+    moveOptions?: IMoveableOptions;
+    class?: string;
+}
+export interface IDialogButtonOptions {
+    content?: string;
+    class?: string;
+    onClick?: () => void | boolean | Promise<any>;
+    raw?: boolean;
+}
+export declare class DialogComponent implements IJSLComponent {
+    static Button(options: IDialogButtonOptions): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static Ok(onClick?: () => void | boolean | Promise<any>): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static Cancel(): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static show(options: IDialogComponentOptions): DialogComponent;
+    private static lastRenderedDlg;
+    private closeIcon;
+    private resizeHandle;
+    private ref;
+    private options;
+    constructor(options: IDialogComponentOptions);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    getRef(): JSLDialog;
+    private toNode;
+}

package/lib/components/dialog/DialogComponent.js

@@ -1,198 +1,192 @@
-import { JSLRender } from "jsl-render";
-import { Dialog } from "../../ui/dialog";
-import { Moveable } from "../../interaction/moveable";
-import { EventHandler } from "../../interaction/eventhandler";
-import { Resizable } from "../../interaction/resizable";
-import { UILang } from "../../core/lang";
-export class DialogComponent {
-    constructor(options) {
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "dlg-close-btn", click: () => {
-                    this.ref.close();
-                }
-            }
-        };
-        this.resizeHandle = {
-            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
-        };
-        this.options = { maxHeight: "calc(100vh - 7.5rem)", width: "50vw", ...options };
-    }
-    static Button(options) {
-        var _a, _b, _c;
-        const res = {
-            tag: "button",
-            attr: {
-                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;
-                        }
-                        if (clickRes === false) {
-                            return;
-                        }
-                    }
-                    if (DialogComponent.lastRenderedDlg != null) {
-                        DialogComponent.lastRenderedDlg.getRef().close();
-                    }
-                }
-            }, 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" });
-    }
-    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) {
-        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;
-                }
-            }
-            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();
-            }
-            DialogComponent.lastRenderedDlg = oldLastDlg;
-        };
-        const dlg = new DialogComponent(o);
-        DialogComponent.lastRenderedDlg = dlg;
-        renderer.render(dlg);
-        return dlg;
-    }
-    render() {
-        const header = this.toNode(this.options.header);
-        const body = this.toNode(this.options.content);
-        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 + ";";
-        }
-        if (this.options.maxHeight != null) {
-            styleH += "max-height:" + this.options.maxHeight + ";";
-        }
-        const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
-        return {
-            tag: "div",
-            attr: {
-                class: "jsl-dialog-overlay",
-                wheel: (e) => {
-                    e.preventDefault();
-                }
-            }, children: [
-                {
-                    tag: "div",
-                    attr: {
-                        class: "jsl-dialog " + (this.options.class || ""), style: styleW,
-                        wheel: (e) => {
-                            e.stopImmediatePropagation();
-                            e.stopPropagation();
-                        }
-                    },
-                    children: [
-                        {
-                            tag: "div", attr: { class: "dlg-header", style: headerStyle },
-                            children: this.options.showCloseButton ? [header, this.closeIcon] : [header]
-                        },
-                        { tag: "div", attr: { class: "dlg-body", style: styleH }, children: [body] },
-                        {
-                            tag: "div", attr: { class: "dlg-footer" },
-                            children: [footer]
-                        },
-                        this.options.allowResize ? this.resizeHandle : undefined
-                    ]
-                }
-            ]
-        };
-    }
-    onCreate(node) {
-        this.ref = Dialog(node.dom, this.options);
-        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";
-                    }
-                    else {
-                        e.cancelEvent();
-                    }
-                }),
-                ...this.options.moveOptions
-            });
-        }
-        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)";
-        }
-    }
-    getRef() {
-        return this.ref;
-    }
-    toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "div", content };
-        }
-        return content;
-    }
-}
+import { JSLRender } from "jsl-render";
+import { Dialog } from "../../ui/dialog";
+import { Moveable } from "../../interaction/moveable";
+import { EventHandler } from "../../interaction/eventhandler";
+import { Resizable } from "../../interaction/resizable";
+import { UILang } from "../../core/lang";
+export class DialogComponent {
+    static Button(options) {
+        var _a, _b, _c;
+        const res = {
+            tag: "button", attr: {
+                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;
+                        }
+                        if (clickRes === false) {
+                            return;
+                        }
+                    }
+                    if (DialogComponent.lastRenderedDlg != null) {
+                        DialogComponent.lastRenderedDlg.getRef().close();
+                    }
+                }
+            }, 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" });
+    }
+    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) {
+        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;
+                }
+            }
+            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();
+            }
+            DialogComponent.lastRenderedDlg = oldLastDlg;
+        };
+        const dlg = new DialogComponent(o);
+        DialogComponent.lastRenderedDlg = dlg;
+        renderer.render(dlg);
+        return dlg;
+    }
+    constructor(options) {
+        this.closeIcon = {
+            tag: "div", content: "✖" /*"🗙"*/, attr: {
+                class: "dlg-close-btn", click: () => {
+                    this.ref.close();
+                }
+            }
+        };
+        this.resizeHandle = {
+            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
+        };
+        this.options = { maxHeight: "calc(100vh - 7.5rem)", width: "50vw", ...options };
+    }
+    render() {
+        const header = this.toNode(this.options.header);
+        const body = this.toNode(this.options.content);
+        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 + ";";
+        }
+        if (this.options.maxHeight != null) {
+            styleH += "max-height:" + this.options.maxHeight + ";";
+        }
+        const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
+        return {
+            tag: "div", attr: {
+                class: "jsl-dialog-overlay", wheel: (e) => {
+                    e.preventDefault();
+                }
+            }, children: [
+                {
+                    tag: "div", attr: {
+                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: (e) => {
+                            e.stopImmediatePropagation();
+                            e.stopPropagation();
+                        }
+                    }, children: [
+                        {
+                            tag: "div", attr: { class: "dlg-header", style: headerStyle },
+                            children: this.options.showCloseButton ? [header, this.closeIcon] : [header]
+                        },
+                        { tag: "div", attr: { class: "dlg-body", style: styleH }, children: [body] },
+                        {
+                            tag: "div", attr: { class: "dlg-footer" },
+                            children: [footer]
+                        },
+                        this.options.allowResize ? this.resizeHandle : undefined
+                    ]
+                }
+            ]
+        };
+    }
+    onCreate(node) {
+        this.ref = Dialog(node.dom, this.options);
+        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";
+                    }
+                    else {
+                        e.cancelEvent();
+                    }
+                }),
+                ...this.options.moveOptions
+            });
+        }
+        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)";
+        }
+    }
+    getRef() {
+        return this.ref;
+    }
+    toNode(content) {
+        if (typeof content === "string") {
+            return { tag: "div", content };
+        }
+        return content;
+    }
+}