jsl-ui 9.28.3 → 9.28.4

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

@@ -1,26 +1,26 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { INumberInputOptions } from "../../ui/number.input";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface INumberComponentOptions<T = any> extends INumberInputOptions {
-    id?: string;
-    class?: string;
-    style?: string;
-    placeholder?: string;
-    bindTo?: T;
-    bindMode?: "toModel" | "fromModel" | "both";
-    property?: keyof T;
-    converter?: IDataConverter<any, number>;
-}
-export declare class NumberComponent<T = any> implements IJSLComponent {
-    private currentDom;
-    private id;
-    private options;
-    constructor(options: INumberComponentOptions<T>);
-    get onChange(): EventHandler<number>;
-    render(): IJSLVNode;
-    getValue(): string;
-    getValueAsNumber(): number;
-    setValue(value: number): void;
-    onCreate(node: IJSLVNode): void;
-}
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { INumberInputOptions } from "../../ui/number.input";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface INumberComponentOptions<T = any> extends INumberInputOptions {
+    id?: string;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+    bindTo?: T;
+    bindMode?: "toModel" | "fromModel" | "both";
+    property?: keyof T;
+    converter?: IDataConverter<any, number>;
+}
+export declare class NumberComponent<T = any> implements IJSLComponent {
+    private currentDom;
+    private id;
+    private options;
+    constructor(options: INumberComponentOptions<T>);
+    get onChange(): EventHandler<number>;
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsNumber(): number;
+    setValue(value: number): void;
+    onCreate(node: IJSLVNode): void;
+}

package/lib/components/number/NumberComponent.js

@@ -1,80 +1,80 @@
-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.onChange = EventHandler.Create(this.options.onChange);
-        this.id = options.id || helper.newDomGuid();
-    }
-    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;
-                }
-            }
-        }
-        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
-            }
-        };
-    }
-    getValue() {
-        if (this.currentDom == null) {
-            return null;
-        }
-        return this.currentDom.value;
-    }
-    getValueAsNumber() {
-        return numeric.parse(this.getValue());
-    }
-    setValue(value) {
-        var _a;
-        this.options.value = value;
-        if (this.currentDom != null) {
-            this.currentDom.value = numeric.format(value, this.options.format);
-        }
-        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;
-        }
-    }
-    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 });
-    }
-}
+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.onChange = EventHandler.Create(this.options.onChange);
+        this.id = options.id || helper.newDomGuid();
+    }
+    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;
+                }
+            }
+        }
+        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
+            }
+        };
+    }
+    getValue() {
+        if (this.currentDom == null) {
+            return null;
+        }
+        return this.currentDom.value;
+    }
+    getValueAsNumber() {
+        return numeric.parse(this.getValue());
+    }
+    setValue(value) {
+        var _a;
+        this.options.value = value;
+        if (this.currentDom != null) {
+            this.currentDom.value = numeric.format(value, this.options.format);
+        }
+        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;
+        }
+    }
+    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 });
+    }
+}

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

@@ -1,27 +1,27 @@
-import "./overlay.css";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IOverlayComponentOptions {
-    content: IJSLVNode | string | IJSLComponent;
-    showCloseButton?: boolean;
-    closeOnEscape?: boolean;
-    closeOnOverlayClick?: boolean;
-    onClose?: () => void | boolean;
-    onOpen?: () => void;
-    animate?: boolean;
-    direction?: "left" | "top";
-    size?: string;
-    class?: string;
-    style?: string;
-}
-export declare class OverlayComponent implements IJSLComponent {
-    static show(options: IOverlayComponentOptions): OverlayComponent;
-    private static lastRenderedDlg;
-    private closeIcon;
-    private onKeydownEvent;
-    close(): void;
-    private options;
-    constructor(options: IOverlayComponentOptions);
-    onCreate(node: IJSLVNode): void;
-    render(): IJSLVNode;
-    private toNode;
-}
+import "./overlay.css";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IOverlayComponentOptions {
+    content: IJSLVNode | string | IJSLComponent;
+    showCloseButton?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOverlayClick?: boolean;
+    onClose?: () => void | boolean;
+    onOpen?: () => void;
+    animate?: boolean;
+    direction?: "left" | "top";
+    size?: string;
+    class?: string;
+    style?: string;
+}
+export declare class OverlayComponent implements IJSLComponent {
+    static show(options: IOverlayComponentOptions): OverlayComponent;
+    private static lastRenderedDlg;
+    private closeIcon;
+    private onKeydownEvent;
+    close(): void;
+    private options;
+    constructor(options: IOverlayComponentOptions);
+    onCreate(node: IJSLVNode): void;
+    render(): IJSLVNode;
+    private toNode;
+}

package/lib/components/overlay/OverlayComponent.js

@@ -1,137 +1,134 @@
-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;
-    }
-}
+import "./overlay.css";
+import { JSLRender } from "jsl-render";
+export class OverlayComponent {
+    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);
+        }
+    }
+    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();
+                }
+            });
+        }
+    }
+    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;
+}