jsl-ui 9.28.3 → 9.28.4

package/lib/components/input/InputComponent.js

@@ -1,126 +1,126 @@
-import { EventHandler } from "../../interaction/eventhandler";
-// tslint:disable-next-line: max-classes-per-file
-export class InputComponent {
-    constructor(options) {
-        var _a;
-        this.options = { ...{ type: "text", enabled: true, 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.options.onInput = EventHandler.Create(this.options.onInput);
-        if (this.options.type === "input") {
-            this.options.type = "text";
-        }
-    }
-    get onChange() {
-        return this.options.onChange;
-    }
-    get onInput() {
-        return this.options.onInput;
-    }
-    // public isEqual(node: IJSLComponent): boolean {
-    //     return (this as any).__proto__ === (node as any).__proto__;
-    // }
-    render() {
-        var _a;
-        let val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            if (this.onInput.count() > 0) {
-                this.options.bindOnInput = true;
-            }
-            // 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]);
-            // if (newVal !== current)
-            {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.value = val !== null && val !== void 0 ? val : "";
-                }
-            }
-        }
-        return {
-            tag: this.options.type !== "textarea" ? "input" : "textarea",
-            attr: {
-                type: this.options.type !== "textarea" ? this.options.type : undefined,
-                disabled: !this.options.enabled ? "disabled" : undefined,
-                class: this.options.class,
-                style: this.options.style,
-                change: this.raiseChangeEvent,
-                input: this.raiseInputEvent,
-                value: this.options.type !== "textarea" ? val : undefined,
-                placeholder: this.options.placeholder,
-                id: typeof this.options.id === "string" ? this.options.id : undefined,
-                maxLength: this.options.maxLength
-            },
-            content: this.options.type === "textarea" ? val : undefined
-        };
-    }
-    getValue() {
-        if (this.currentDom == null) {
-            return this.options.value || "";
-            // return "";
-        }
-        return this.currentDom.value;
-    }
-    setValue(value) {
-        var _a;
-        this.options.value = value;
-        if (this.currentDom != null) {
-            this.currentDom.value = value;
-        }
-        if (this.options.bindMode !== "fromModel" && 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;
-    }
-    // public onUpdate(node: IJSLVNode) {
-    //     this.currentDom = node.dom as HTMLInputElement;
-    //     if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-    //         if (this.onInput.count() > 0) {
-    //             this.options.bindOnInput = true;
-    //         }
-    //         const current = this.getValue();
-    //         const newVal = (this.options.converter?.toUI ?
-    //             this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-    //             this.options.bindTo[this.options.property]) as string;
-    //         if (newVal !== current) {
-    //             if (this.currentDom != null) {
-    //                 this.currentDom.value = newVal ?? "";
-    //             }
-    //         }
-    //     }
-    // }
-    raiseChangeEvent(e, node) {
-        var _a;
-        if (this.options.enabled) {
-            const value = node.dom.value;
-            if (this.options.bindMode !== "fromModel" && 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);
-        }
-    }
-    raiseInputEvent(e, node) {
-        var _a;
-        if (this.onInput.count() === 0) {
-            return false;
-        }
-        if (this.options.enabled) {
-            const value = node.dom.value;
-            if (this.options.bindOnInput && this.options.bindMode !== "fromModel" && 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.onInput.notify(value);
-        }
-    }
-}
+import { EventHandler } from "../../interaction/eventhandler";
+// tslint:disable-next-line: max-classes-per-file
+export class InputComponent {
+    get onChange() {
+        return this.options.onChange;
+    }
+    get onInput() {
+        return this.options.onInput;
+    }
+    constructor(options) {
+        var _a;
+        this.options = { ...{ type: "text", enabled: true, 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.options.onInput = EventHandler.Create(this.options.onInput);
+        if (this.options.type === "input") {
+            this.options.type = "text";
+        }
+    }
+    // public isEqual(node: IJSLComponent): boolean {
+    //     return (this as any).__proto__ === (node as any).__proto__;
+    // }
+    render() {
+        var _a;
+        let val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            if (this.onInput.count() > 0) {
+                this.options.bindOnInput = true;
+            }
+            // 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]);
+            // if (newVal !== current)
+            {
+                val = newVal;
+                if (this.currentDom != null) {
+                    this.currentDom.value = val !== null && val !== void 0 ? val : "";
+                }
+            }
+        }
+        return {
+            tag: this.options.type !== "textarea" ? "input" : "textarea",
+            attr: {
+                type: this.options.type !== "textarea" ? this.options.type : undefined,
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                class: this.options.class,
+                style: this.options.style,
+                change: this.raiseChangeEvent,
+                input: this.raiseInputEvent,
+                value: this.options.type !== "textarea" ? val : undefined,
+                placeholder: this.options.placeholder,
+                id: typeof this.options.id === "string" ? this.options.id : undefined,
+                maxLength: this.options.maxLength
+            },
+            content: this.options.type === "textarea" ? val : undefined
+        };
+    }
+    getValue() {
+        if (this.currentDom == null) {
+            return this.options.value || "";
+            // return "";
+        }
+        return this.currentDom.value;
+    }
+    setValue(value) {
+        var _a;
+        this.options.value = value;
+        if (this.currentDom != null) {
+            this.currentDom.value = value;
+        }
+        if (this.options.bindMode !== "fromModel" && 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;
+    }
+    // public onUpdate(node: IJSLVNode) {
+    //     this.currentDom = node.dom as HTMLInputElement;
+    //     if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+    //         if (this.onInput.count() > 0) {
+    //             this.options.bindOnInput = true;
+    //         }
+    //         const current = this.getValue();
+    //         const newVal = (this.options.converter?.toUI ?
+    //             this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+    //             this.options.bindTo[this.options.property]) as string;
+    //         if (newVal !== current) {
+    //             if (this.currentDom != null) {
+    //                 this.currentDom.value = newVal ?? "";
+    //             }
+    //         }
+    //     }
+    // }
+    raiseChangeEvent(e, node) {
+        var _a;
+        if (this.options.enabled) {
+            const value = node.dom.value;
+            if (this.options.bindMode !== "fromModel" && 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);
+        }
+    }
+    raiseInputEvent(e, node) {
+        var _a;
+        if (this.onInput.count() === 0) {
+            return false;
+        }
+        if (this.options.enabled) {
+            const value = node.dom.value;
+            if (this.options.bindOnInput && this.options.bindMode !== "fromModel" && 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.onInput.notify(value);
+        }
+    }
+}

package/lib/components/loading/LoadingComponent.d.ts

@@ -1,8 +1,8 @@
-import "./LoadingStyle.css";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export declare class LoadingComponent implements IJSLComponent {
-    private sizeInRem?;
-    constructor(sizeInRem?: number);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-}
+import "./LoadingStyle.css";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export declare class LoadingComponent implements IJSLComponent {
+    private sizeInRem?;
+    constructor(sizeInRem?: number);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+}

package/lib/components/loading/LoadingComponent.js

@@ -1,20 +1,20 @@
-import "./LoadingStyle.css";
-export class LoadingComponent {
-    constructor(sizeInRem) {
-        this.sizeInRem = sizeInRem;
-        if (sizeInRem == null) {
-            this.sizeInRem = 6;
-        }
-    }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
-    }
-    render() {
-        return {
-            tag: "div",
-            attr: { style: "font-size:" + this.sizeInRem + "rem" },
-            content: "<div class='lds-dual-ring'></div>",
-            raw: true
-        };
-    }
-}
+import "./LoadingStyle.css";
+export class LoadingComponent {
+    constructor(sizeInRem) {
+        this.sizeInRem = sizeInRem;
+        if (sizeInRem == null) {
+            this.sizeInRem = 6;
+        }
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        return {
+            tag: "div",
+            attr: { style: "font-size:" + this.sizeInRem + "rem" },
+            content: "<div class='lds-dual-ring'></div>",
+            raw: true
+        };
+    }
+}

package/lib/components/navigation/NavigationComponent.d.ts

@@ -1,34 +1,34 @@
-import "./NavigationStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface INavItemChild {
-    content: string | IJSLVNode;
-    link?: string;
-    target?: string;
-    click?: (e: MouseEvent) => void;
-}
-export interface INavItem {
-    content: string | IJSLVNode;
-    link?: string;
-    target?: string;
-    children?: INavItemChild[];
-    click?: (e: MouseEvent) => void;
-}
-export interface INavigationOptions {
-    title: string | IJSLVNode;
-    titleLink?: string;
-    data: INavItem[];
-    style?: string;
-    class?: string;
-    position?: "default" | "static" | "fixed" | "fixed-bottom";
-    alignment?: "right" | "left";
-    id?: string;
-}
-export declare class NavigationComponent implements IJSLComponent {
-    private options;
-    constructor(options: INavigationOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    private itemToNode;
-    private isActive;
-    private toNode;
-}
+import "./NavigationStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface INavItemChild {
+    content: string | IJSLVNode;
+    link?: string;
+    target?: string;
+    click?: (e: MouseEvent) => void;
+}
+export interface INavItem {
+    content: string | IJSLVNode;
+    link?: string;
+    target?: string;
+    children?: INavItemChild[];
+    click?: (e: MouseEvent) => void;
+}
+export interface INavigationOptions {
+    title: string | IJSLVNode;
+    titleLink?: string;
+    data: INavItem[];
+    style?: string;
+    class?: string;
+    position?: "default" | "static" | "fixed" | "fixed-bottom";
+    alignment?: "right" | "left";
+    id?: string;
+}
+export declare class NavigationComponent implements IJSLComponent {
+    private options;
+    constructor(options: INavigationOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private itemToNode;
+    private isActive;
+    private toNode;
+}

package/lib/components/navigation/NavigationComponent.js

@@ -1,45 +1,47 @@
-import "./NavigationStyle.scss";
-export class NavigationComponent {
-    constructor(options) {
-        this.options = { position: "fixed", id: "luxbar-checkbox", alignment: "left", ...options };
-    }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
-    }
-    render() {
-        var _a, _b;
-        return {
-            tag: "header",
-            attr: { style: this.options.style, class: "nav-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
-            children: [
-                { tag: "div", attr: { class: "luxbar luxbar-" + this.options.position }, children: [
-                        { tag: "input", attr: { type: "checkbox", class: "luxbar-checkbox", id: this.options.id } },
-                        { tag: "div", attr: { class: "luxbar-menu luxbar-menu-" + this.options.alignment + " luxbar-menu-light" }, children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: [
-                                        { tag: "li", attr: { class: "luxbar-header" }, children: [
-                                                { tag: "a", attr: { href: (_b = this.options.titleLink) !== null && _b !== void 0 ? _b : "#", class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
-                                                { tag: "label", attr: { class: "luxbar-hamburger luxbar-hamburger-spin", for: this.options.id },
-                                                    children: [{ tag: "span" }] },
-                                            ] },
-                                        ...this.options.data.map((x) => this.itemToNode(x))
-                                    ] }] }
-                    ] }
-            ]
-        };
-    }
-    itemToNode(x) {
-        var _a, _b, _c;
-        return { tag: "li", attr: { class: "luxbar-item" + (((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? " dropdown" : "") + (this.isActive(x.link) ? " active" : "") }, children: [
-                { tag: "a", attr: { href: (_b = x.link) !== null && _b !== void 0 ? _b : "#", target: x.target, click: x.click }, children: [this.toNode(x.content)] },
-                (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map((c) => this.itemToNode(c)) } : undefined)
-            ] };
-    }
-    isActive(link) {
-        return location.hash.startsWith(link);
-    }
-    toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "span", content };
-        }
-        return content;
-    }
-}
+import "./NavigationStyle.scss";
+export class NavigationComponent {
+    constructor(options) {
+        this.options = { position: "fixed", id: "luxbar-checkbox", alignment: "left", ...options };
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        var _a, _b;
+        return {
+            tag: "header",
+            attr: { style: this.options.style, class: "nav-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
+            children: [
+                { tag: "div", attr: { class: "luxbar luxbar-" + this.options.position },
+                    children: [
+                        { tag: "input", attr: { type: "checkbox", class: "luxbar-checkbox", id: this.options.id } },
+                        { tag: "div", attr: { class: "luxbar-menu luxbar-menu-" + this.options.alignment + " luxbar-menu-light" },
+                            children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: [
+                                        { tag: "li", attr: { class: "luxbar-header" }, children: [
+                                                { tag: "a", attr: { href: (_b = this.options.titleLink) !== null && _b !== void 0 ? _b : "#", class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
+                                                { tag: "label", attr: { class: "luxbar-hamburger luxbar-hamburger-spin", for: this.options.id },
+                                                    children: [{ tag: "span" }] },
+                                            ] },
+                                        ...this.options.data.map((x) => this.itemToNode(x))
+                                    ] }] }
+                    ] }
+            ]
+        };
+    }
+    itemToNode(x) {
+        var _a, _b, _c;
+        return { tag: "li", attr: { class: "luxbar-item" + (((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? " dropdown" : "") + (this.isActive(x.link) ? " active" : "") }, children: [
+                { tag: "a", attr: { href: (_b = x.link) !== null && _b !== void 0 ? _b : "#", target: x.target, click: x.click }, children: [this.toNode(x.content)] },
+                (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map((c) => this.itemToNode(c)) } : undefined)
+            ] };
+    }
+    isActive(link) {
+        return location.hash.startsWith(link);
+    }
+    toNode(content) {
+        if (typeof content === "string") {
+            return { tag: "span", content };
+        }
+        return content;
+    }
+}

package/lib/components/notification/Notification.d.ts

@@ -1,19 +1,19 @@
-import "./Notification.scss";
-import { IJSLVNode, IJSLComponent } from "jsl-render";
-export interface INotificationOptions {
-    content: string | IJSLVNode | IJSLComponent;
-    closeOnClick?: boolean;
-    timeOut?: number;
-    class?: string;
-    style?: string;
-    onClick?: () => void;
-}
-export declare class Notification {
-    static show(options: INotificationOptions): string;
-    static clearNotification(id: string): void;
-    static clearAll(): void;
-    private static container;
-    private static containerVNode;
-    private static renderer;
-    private static createContainer;
-}
+import "./Notification.scss";
+import { IJSLVNode, IJSLComponent } from "jsl-render";
+export interface INotificationOptions {
+    content: string | IJSLVNode | IJSLComponent;
+    closeOnClick?: boolean;
+    timeOut?: number;
+    class?: string;
+    style?: string;
+    onClick?: () => void;
+}
+export declare class Notification {
+    static show(options: INotificationOptions): string;
+    static clearNotification(id: string): void;
+    static clearAll(): void;
+    private static container;
+    private static containerVNode;
+    private static renderer;
+    private static createContainer;
+}

package/lib/components/notification/Notification.js

@@ -1,65 +1,65 @@
-import "./Notification.scss";
-import { JSLRender } from "jsl-render";
-import { helper } from "../../core/helper";
-export class Notification {
-    static show(options) {
-        if (Notification.container == null) {
-            Notification.createContainer();
-        }
-        const id = helper.newDomGuid();
-        // add
-        const notification = {
-            tag: "div",
-            attr: { id, style: options.style, class: "jsl-notification " + (options.class || "") },
-            animation: { attr: "opacity", from: 0, to: 1, duration: 600 },
-            children: [
-                typeof options.content === "string" ? { tag: "div", content: options.content } : options.content
-            ]
-        };
-        Notification.containerVNode.children.push(notification);
-        Notification.renderer.refresh();
-        // remove
-        if (options.timeOut) {
-            setTimeout(() => {
-                const idx = Notification.containerVNode.children.indexOf(notification);
-                if (idx >= 0) {
-                    Notification.containerVNode.children.splice(idx, 1);
-                }
-                Notification.renderer.refresh();
-            }, options.timeOut);
-        }
-        notification.attr.click = () => {
-            var _a;
-            if (options.onClick != null) {
-                options.onClick();
-            }
-            if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
-                const idx = Notification.containerVNode.children.indexOf(notification);
-                if (idx >= 0) {
-                    Notification.containerVNode.children.splice(idx, 1);
-                }
-            }
-        };
-        return id;
-    }
-    static clearNotification(id) {
-        Notification.containerVNode.children = Notification.containerVNode.children.filter((x) => { var _a; return ((_a = x.attr) === null || _a === void 0 ? void 0 : _a.id) !== id; });
-        Notification.renderer.refresh();
-    }
-    static clearAll() {
-        if (Notification.containerVNode != null) {
-            Notification.containerVNode.children = [];
-        }
-        if (Notification.renderer != null) {
-            Notification.renderer.refresh();
-        }
-    }
-    static createContainer() {
-        Notification.container = document.createElement("div");
-        document.body.appendChild(Notification.container);
-        Notification.container.className = "jsl-notification-container";
-        Notification.containerVNode = { tag: "div", children: [] };
-        Notification.renderer = new JSLRender(Notification.container, false);
-        Notification.renderer.render(Notification.containerVNode);
-    }
-}
+import "./Notification.scss";
+import { JSLRender } from "jsl-render";
+import { helper } from "../../core/helper";
+export class Notification {
+    static show(options) {
+        if (Notification.container == null) {
+            Notification.createContainer();
+        }
+        const id = helper.newDomGuid();
+        // add
+        const notification = {
+            tag: "div",
+            attr: { id, style: options.style, class: "jsl-notification " + (options.class || "") },
+            animation: { attr: "opacity", from: 0, to: 1, duration: 600 },
+            children: [
+                typeof options.content === "string" ? { tag: "div", content: options.content } : options.content
+            ]
+        };
+        Notification.containerVNode.children.push(notification);
+        Notification.renderer.refresh();
+        // remove
+        if (options.timeOut) {
+            setTimeout(() => {
+                const idx = Notification.containerVNode.children.indexOf(notification);
+                if (idx >= 0) {
+                    Notification.containerVNode.children.splice(idx, 1);
+                }
+                Notification.renderer.refresh();
+            }, options.timeOut);
+        }
+        notification.attr.click = () => {
+            var _a;
+            if (options.onClick != null) {
+                options.onClick();
+            }
+            if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
+                const idx = Notification.containerVNode.children.indexOf(notification);
+                if (idx >= 0) {
+                    Notification.containerVNode.children.splice(idx, 1);
+                }
+            }
+        };
+        return id;
+    }
+    static clearNotification(id) {
+        Notification.containerVNode.children = Notification.containerVNode.children.filter((x) => { var _a; return ((_a = x.attr) === null || _a === void 0 ? void 0 : _a.id) !== id; });
+        Notification.renderer.refresh();
+    }
+    static clearAll() {
+        if (Notification.containerVNode != null) {
+            Notification.containerVNode.children = [];
+        }
+        if (Notification.renderer != null) {
+            Notification.renderer.refresh();
+        }
+    }
+    static createContainer() {
+        Notification.container = document.createElement("div");
+        document.body.appendChild(Notification.container);
+        Notification.container.className = "jsl-notification-container";
+        Notification.containerVNode = { tag: "div", children: [] };
+        Notification.renderer = new JSLRender(Notification.container, false);
+        Notification.renderer.render(Notification.containerVNode);
+    }
+}