jsl-ui 9.28.2 → 9.28.3

package/lib/components/dialog/DialogComponent.js

@@ -1,251 +1,198 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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";
-var DialogComponent = /** @class */ (function () {
-    function DialogComponent(options) {
-        var _this = this;
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "dlg-close-btn", click: function () {
-                    _this.ref.close();
-                }
-            }
-        };
-        this.resizeHandle = {
-            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
-        };
-        this.options = __assign({ maxHeight: "calc(100vh - 7.5rem)", width: "50vw" }, options);
-    }
-    DialogComponent.Button = function (options) {
-        var _this = this;
-        var _a, _b, _c;
-        var res = {
-            tag: "button", attr: {
-                class: "jsl-button " + ((_a = options.class) !== null && _a !== void 0 ? _a : ""),
-                click: function () { return __awaiter(_this, void 0, void 0, function () {
-                    var clickRes, isPromise;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                if (!(options.onClick != null)) return [3 /*break*/, 3];
-                                clickRes = options.onClick();
-                                isPromise = clickRes && typeof clickRes.then === "function" && typeof clickRes.catch === "function";
-                                if (!isPromise) return [3 /*break*/, 2];
-                                return [4 /*yield*/, clickRes];
-                            case 1:
-                                clickRes = _a.sent();
-                                _a.label = 2;
-                            case 2:
-                                if (clickRes === false) {
-                                    return [2 /*return*/];
-                                }
-                                _a.label = 3;
-                            case 3:
-                                if (DialogComponent.lastRenderedDlg != null) {
-                                    DialogComponent.lastRenderedDlg.getRef().close();
-                                }
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }
-            }, content: (_b = options.content) !== null && _b !== void 0 ? _b : "OK", raw: (_c = options.raw) !== null && _c !== void 0 ? _c : false
-        };
-        return res;
-    };
-    DialogComponent.Ok = function (onClick) {
-        return DialogComponent.Button({ content: UILang.core.Ok, onClick: onClick, class: "dlg-ok-btn" });
-    };
-    DialogComponent.Cancel = function () {
-        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);
-    //         }
-    //     });
-    // }
-    DialogComponent.show = function (options) {
-        var container = document.createElement("div");
-        document.body.appendChild(container);
-        var oldRenderer = JSLRender.lastCreatedRenderer;
-        var oldLastDlg = DialogComponent.lastRenderedDlg;
-        var renderer = new JSLRender(container, oldRenderer != null);
-        if (oldRenderer != null) {
-            JSLRender.lastCreatedRenderer = renderer;
-        }
-        var o = __assign({}, options);
-        if (o.autoOpen == null) {
-            o.autoOpen = true;
-        }
-        o.onClose = function () {
-            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;
-        };
-        var dlg = new DialogComponent(o);
-        DialogComponent.lastRenderedDlg = dlg;
-        renderer.render(dlg);
-        return dlg;
-    };
-    DialogComponent.prototype.render = function () {
-        var header = this.toNode(this.options.header);
-        var body = this.toNode(this.options.content);
-        var footer = this.toNode(this.options.footer);
-        var styleW = "";
-        var 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 + ";";
-        }
-        var headerStyle = this.options.allowMove ? "cursor:move" : undefined;
-        return {
-            tag: "div", attr: {
-                class: "jsl-dialog-overlay", wheel: function (e) {
-                    e.preventDefault();
-                }
-            }, children: [
-                {
-                    tag: "div", attr: {
-                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: function (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
-                    ]
-                }
-            ]
-        };
-    };
-    DialogComponent.prototype.onCreate = function (node) {
-        this.ref = Dialog(node.dom, this.options);
-        if (this.options.allowMove) {
-            Moveable(this.ref.getOverlay(), __assign({ onStart: new EventHandler(function (e) {
-                    var headerWasClicked = false;
-                    var 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) {
-                        var 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) {
-            var dlgEl = this.ref.getOverlay().querySelector(".jsl-dialog");
-            Resizable(dlgEl, this.options.resizeOptions);
-            var rect = dlgEl.getBoundingClientRect();
-            dlgEl.style.transform = "translate(0, 0)";
-            dlgEl.style.left = rect.left + "px";
-            dlgEl.style.top = rect.top + "px";
-            var bodyEl = dlgEl.querySelector(".dlg-body");
-            var bodyRect = bodyEl.getBoundingClientRect();
-            bodyEl.style.height = "calc(100% - " + (rect.height - bodyRect.height) + "px)";
-        }
-    };
-    DialogComponent.prototype.getRef = function () {
-        return this.ref;
-    };
-    DialogComponent.prototype.toNode = function (content) {
-        if (typeof content === "string") {
-            return { tag: "div", content: content };
-        }
-        return content;
-    };
-    return DialogComponent;
-}());
-export { DialogComponent };
+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;
+    }
+}

package/lib/components/drop-down/DropDownComponent.d.ts

@@ -1,27 +1,27 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDropDownOptions, IDropDown } from "../../ui/drop.down";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface IDropDownComponentOptions<T = any> extends IDropDownOptions {
-    class?: string;
-    placeholder?: string;
-    /**
-     * @deprecated
-     */
-    onSelect?: (value: string | string[]) => void;
-    onChange?: EventHandler<string | string[]> | ((value?: string | string[]) => void);
-    value?: string | string[];
-    bindTo?: T;
-    property?: keyof T;
-    converter?: IDataConverter<any, string | string[]>;
-    enabled?: boolean;
-}
-export declare class DropDownComponent<T = any> implements IJSLComponent {
-    private ref;
-    private options;
-    constructor(options: IDropDownComponentOptions<T>);
-    render(): IJSLVNode;
-    getRef(): IDropDown;
-    onCreate(node: IJSLVNode): void;
-    onRemove(): void;
-}
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDropDownOptions, IDropDown } from "../../ui/drop.down";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface IDropDownComponentOptions<T = any> extends IDropDownOptions {
+    class?: string;
+    placeholder?: string;
+    /**
+     * @deprecated
+     */
+    onSelect?: (value: string | string[]) => void;
+    onChange?: EventHandler<string | string[]> | ((value?: string | string[]) => void);
+    value?: string | string[];
+    bindTo?: T;
+    property?: keyof T;
+    converter?: IDataConverter<any, string | string[]>;
+    enabled?: boolean;
+}
+export declare class DropDownComponent<T = any> implements IJSLComponent {
+    private ref;
+    private options;
+    constructor(options: IDropDownComponentOptions<T>);
+    render(): IJSLVNode;
+    getRef(): IDropDown;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+}