jsl-ui 9.28.2 → 9.28.3

package/lib/components/overlay/OverlayComponent.js

@@ -1,149 +1,137 @@
-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);
-};
-import "./overlay.css";
-import { JSLRender } from "jsl-render";
-var OverlayComponent = /** @class */ (function () {
-    function OverlayComponent(options) {
-        var _this = this;
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "overl-close-btn", click: function () {
-                    _this.close();
-                }
-            }
-        };
-        this.options = __assign({ closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true }, options);
-        if (this.options.closeOnEscape) {
-            this.onKeydownEvent = document.addEventListener("keydown", function (args) {
-                if (args.keyCode === 27) { // escape
-                    _this.close();
-                }
-            });
-        }
-    }
-    OverlayComponent.show = function (options) {
-        var container = document.createElement("div");
-        document.body.appendChild(container);
-        var oldRenderer = JSLRender.lastCreatedRenderer;
-        var oldLastDlg = OverlayComponent.lastRenderedDlg;
-        var renderer = new JSLRender(container, oldRenderer != null);
-        if (oldRenderer != null) {
-            JSLRender.lastCreatedRenderer = renderer;
-        }
-        var o = __assign({}, options);
-        o.onClose = function () {
-            if (options.onClose) {
-                if (options.onClose() === false) {
-                    return;
-                }
-            }
-            document.body.removeChild(container);
-            JSLRender.lastCreatedRenderer = oldRenderer;
-            if (oldRenderer != null) {
-                oldRenderer.refresh();
-            }
-            OverlayComponent.lastRenderedDlg = oldLastDlg;
-        };
-        var dlg = new OverlayComponent(o);
-        OverlayComponent.lastRenderedDlg = dlg;
-        renderer.render(dlg);
-        return dlg;
-    };
-    OverlayComponent.prototype.close = function () {
-        if (this.options.onClose) {
-            if (this.options.onClose() === false) {
-                return;
-            }
-        }
-        // this.overlay.style.display = "none";
-        if (this.onKeydownEvent != null) {
-            document.removeEventListener("keydown", this.onKeydownEvent);
-        }
-    };
-    OverlayComponent.prototype.onCreate = function (node) {
-        var bodyDom = node.dom.querySelector(".overl-body");
-        if (bodyDom != null) {
-            if (this.options.direction === "left") {
-                node.dom.style.width = this.options.size;
-                if (this.options.animate) {
-                    var realWidth = bodyDom.getBoundingClientRect().width;
-                    node.dom.style.left = -realWidth + "px";
-                    JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
-            else {
-                node.dom.style.height = this.options.size;
-                if (this.options.animate) {
-                    var realHeight = bodyDom.getBoundingClientRect().height;
-                    node.dom.style.top = -realHeight + "px";
-                    JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
-        }
-        else {
-            console.error("overl-body class not found");
-        }
-    };
-    OverlayComponent.prototype.render = function () {
-        var _this = this;
-        var body = this.toNode(this.options.content);
-        // 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-overlay-overlay", click: function (e) {
-                    if (_this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
-                        _this.close();
-                    }
-                }, wheel: function (e) {
-                    e.stopImmediatePropagation();
-                    e.stopPropagation();
-                }
-            }, children: [
-                {
-                    tag: "div", attr: { class: ("overl-body-" + this.options.direction) + " overl-body " + (this.options.class || ""), style: this.options.style }, children: [{
-                            tag: "div", attr: { class: "overl-header" },
-                            children: this.options.showCloseButton ? [this.closeIcon] : []
-                        }, body]
-                }
-            ]
-            // }]
-        };
-    };
-    OverlayComponent.prototype.toNode = function (content) {
-        if (typeof content === "string") {
-            return { tag: "div", content: content };
-        }
-        return content;
-    };
-    return OverlayComponent;
-}());
-export { OverlayComponent };
+import "./overlay.css";
+import { JSLRender } from "jsl-render";
+export class OverlayComponent {
+    constructor(options) {
+        this.closeIcon = {
+            tag: "div", content: "✖" /*"🗙"*/, attr: {
+                class: "overl-close-btn", click: () => {
+                    this.close();
+                }
+            }
+        };
+        this.options = { closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true, ...options };
+        if (this.options.closeOnEscape) {
+            this.onKeydownEvent = document.addEventListener("keydown", (args) => {
+                if (args.keyCode === 27) { // escape
+                    this.close();
+                }
+            });
+        }
+    }
+    static show(options) {
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const oldRenderer = JSLRender.lastCreatedRenderer;
+        const oldLastDlg = OverlayComponent.lastRenderedDlg;
+        const renderer = new JSLRender(container, oldRenderer != null);
+        if (oldRenderer != null) {
+            JSLRender.lastCreatedRenderer = renderer;
+        }
+        const o = { ...options };
+        o.onClose = () => {
+            if (options.onClose) {
+                if (options.onClose() === false) {
+                    return;
+                }
+            }
+            document.body.removeChild(container);
+            JSLRender.lastCreatedRenderer = oldRenderer;
+            if (oldRenderer != null) {
+                oldRenderer.refresh();
+            }
+            OverlayComponent.lastRenderedDlg = oldLastDlg;
+        };
+        const dlg = new OverlayComponent(o);
+        OverlayComponent.lastRenderedDlg = dlg;
+        renderer.render(dlg);
+        return dlg;
+    }
+    close() {
+        if (this.options.onClose) {
+            if (this.options.onClose() === false) {
+                return;
+            }
+        }
+        // this.overlay.style.display = "none";
+        if (this.onKeydownEvent != null) {
+            document.removeEventListener("keydown", this.onKeydownEvent);
+        }
+    }
+    onCreate(node) {
+        const bodyDom = node.dom.querySelector(".overl-body");
+        if (bodyDom != null) {
+            if (this.options.direction === "left") {
+                node.dom.style.width = this.options.size;
+                if (this.options.animate) {
+                    const realWidth = bodyDom.getBoundingClientRect().width;
+                    node.dom.style.left = -realWidth + "px";
+                    JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
+                }
+            }
+            else {
+                node.dom.style.height = this.options.size;
+                if (this.options.animate) {
+                    const realHeight = bodyDom.getBoundingClientRect().height;
+                    node.dom.style.top = -realHeight + "px";
+                    JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
+                }
+            }
+        }
+        else {
+            console.error("overl-body class not found");
+        }
+    }
+    render() {
+        const body = this.toNode(this.options.content);
+        // 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-overlay-overlay",
+                click: (e) => {
+                    if (this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
+                        this.close();
+                    }
+                }, wheel: (e) => {
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
+                }
+            },
+            children: [
+                {
+                    tag: "div", attr: { class: ("overl-body-" + this.options.direction) + " overl-body " + (this.options.class || ""), style: this.options.style }, children: [{
+                            tag: "div", attr: { class: "overl-header" },
+                            children: this.options.showCloseButton ? [this.closeIcon] : []
+                        }, body]
+                }
+            ]
+            // }]
+        };
+    }
+    toNode(content) {
+        if (typeof content === "string") {
+            return { tag: "div", content };
+        }
+        return content;
+    }
+}

package/lib/components/progress/ProgressComponent.d.ts

@@ -1,18 +1,18 @@
-import "./ProgressStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IProgressComponentOptions {
-    color?: string;
-    showPercent?: boolean;
-    percentFormat?: string;
-    class?: string;
-    style?: string;
-}
-export declare class ProgressComponent implements IJSLComponent {
-    private progress;
-    private options?;
-    constructor(progress: number, options?: IProgressComponentOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    setProgress(progress: number): void;
-    getProgress(): number;
-}
+import "./ProgressStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IProgressComponentOptions {
+    color?: string;
+    showPercent?: boolean;
+    percentFormat?: string;
+    class?: string;
+    style?: string;
+}
+export declare class ProgressComponent implements IJSLComponent {
+    private progress;
+    private options?;
+    constructor(progress: number, options?: IProgressComponentOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    setProgress(progress: number): void;
+    getProgress(): number;
+}

package/lib/components/progress/ProgressComponent.js

@@ -1,42 +1,40 @@
-import "./ProgressStyle.scss";
-import { numeric } from "../../core/numeric";
-var ProgressComponent = /** @class */ (function () {
-    function ProgressComponent(progress, options) {
-        this.progress = progress;
-        this.options = options;
-    }
-    ProgressComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    ProgressComponent.prototype.render = function () {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var style = "width: " + this.progress + "%";
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.color) {
-            style += ";background:" + this.options.color;
-        }
-        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.style) {
-            style += ";" + this.options.style;
-        }
-        var content = "";
-        if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
-            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
-        }
-        return {
-            tag: "div",
-            attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
-            children: [{
-                    tag: "div",
-                    attr: { class: "bar", style: style },
-                    content: content
-                }]
-        };
-    };
-    ProgressComponent.prototype.setProgress = function (progress) {
-        this.progress = progress;
-    };
-    ProgressComponent.prototype.getProgress = function () {
-        return this.progress;
-    };
-    return ProgressComponent;
-}());
-export { ProgressComponent };
+import "./ProgressStyle.scss";
+import { numeric } from "../../core/numeric";
+export class ProgressComponent {
+    constructor(progress, options) {
+        this.progress = progress;
+        this.options = options;
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let style = "width: " + this.progress + "%";
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.color) {
+            style += ";background:" + this.options.color;
+        }
+        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.style) {
+            style += ";" + this.options.style;
+        }
+        let content = "";
+        if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
+            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
+        }
+        return {
+            tag: "div",
+            attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
+            children: [{
+                    tag: "div",
+                    attr: { class: "bar", style },
+                    content
+                }]
+        };
+    }
+    setProgress(progress) {
+        this.progress = progress;
+    }
+    getProgress() {
+        return this.progress;
+    }
+}

package/lib/components/ribbon-menu/RibbonMenuComponent.d.ts

@@ -1,12 +1,12 @@
-import "./RibbonMenuStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IRibbonGroup {
-    title?: string;
-    children: Array<IJSLVNode | IJSLComponent>;
-}
-export declare class RibbonMenuComponent implements IJSLComponent {
-    private groups;
-    constructor(groups: IRibbonGroup[]);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-}
+import "./RibbonMenuStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IRibbonGroup {
+    title?: string;
+    children: Array<IJSLVNode | IJSLComponent>;
+}
+export declare class RibbonMenuComponent implements IJSLComponent {
+    private groups;
+    constructor(groups: IRibbonGroup[]);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+}

package/lib/components/ribbon-menu/RibbonMenuComponent.js

@@ -1,34 +1,23 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import "./RibbonMenuStyle.scss";
-var RibbonMenuComponent = /** @class */ (function () {
-    // private options: IStackPanelOptions;
-    function RibbonMenuComponent(groups) {
-        this.groups = groups;
-        // this.options = {...{orientation: "horizontal", verticalAlign: "stretch"}, ...options};
-    }
-    RibbonMenuComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    RibbonMenuComponent.prototype.render = function () {
-        return {
-            tag: "div", attr: { class: "ribbon-menu-comp" },
-            children: this.groups.map(function (g) {
-                var _a;
-                return {
-                    tag: "div", attr: { class: "ribbon-group" },
-                    children: __spreadArray([{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }], g.children, true)
-                };
-            })
-        };
-    };
-    return RibbonMenuComponent;
-}());
-export { RibbonMenuComponent };
+import "./RibbonMenuStyle.scss";
+export class RibbonMenuComponent {
+    // private options: IStackPanelOptions;
+    constructor(groups) {
+        this.groups = groups;
+        // this.options = {...{orientation: "horizontal", verticalAlign: "stretch"}, ...options};
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        return {
+            tag: "div", attr: { class: "ribbon-menu-comp" },
+            children: this.groups.map((g) => {
+                var _a;
+                return {
+                    tag: "div", attr: { class: "ribbon-group" },
+                    children: [{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }, ...g.children]
+                };
+            })
+        };
+    }
+}