jsl-ui 9.28.1 → 9.28.3

package/lib/components/input/InputComponent.js

@@ -1,147 +1,126 @@
-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 { EventHandler } from "../../interaction/eventhandler";
-// tslint:disable-next-line: max-classes-per-file
-var InputComponent = /** @class */ (function () {
-    function InputComponent(options) {
-        var _a;
-        this.options = __assign({ 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";
-        }
-    }
-    Object.defineProperty(InputComponent.prototype, "onChange", {
-        get: function () {
-            return this.options.onChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(InputComponent.prototype, "onInput", {
-        get: function () {
-            return this.options.onInput;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    // public isEqual(node: IJSLComponent): boolean {
-    //     return (this as any).__proto__ === (node as any).__proto__;
-    // }
-    InputComponent.prototype.render = function () {
-        var _a;
-        var 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();
-            var 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
-        };
-    };
-    InputComponent.prototype.getValue = function () {
-        if (this.currentDom == null) {
-            return this.options.value || "";
-            // return "";
-        }
-        return this.currentDom.value;
-    };
-    InputComponent.prototype.setValue = function (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;
-        }
-    };
-    InputComponent.prototype.onCreate = function (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 ?? "";
-    //             }
-    //         }
-    //     }
-    // }
-    InputComponent.prototype.raiseChangeEvent = function (e, node) {
-        var _a;
-        if (this.options.enabled) {
-            var 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);
-        }
-    };
-    InputComponent.prototype.raiseInputEvent = function (e, node) {
-        var _a;
-        if (this.onInput.count() === 0) {
-            return false;
-        }
-        if (this.options.enabled) {
-            var 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);
-        }
-    };
-    return InputComponent;
-}());
-export { InputComponent };
+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);
+        }
+    }
+}

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,22 +1,20 @@
-import "./LoadingStyle.css";
-var LoadingComponent = /** @class */ (function () {
-    function LoadingComponent(sizeInRem) {
-        this.sizeInRem = sizeInRem;
-        if (sizeInRem == null) {
-            this.sizeInRem = 6;
-        }
-    }
-    LoadingComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    LoadingComponent.prototype.render = function () {
-        return {
-            tag: "div",
-            attr: { style: "font-size:" + this.sizeInRem + "rem" },
-            content: "<div class='lds-dual-ring'></div>",
-            raw: true
-        };
-    };
-    return LoadingComponent;
-}());
-export { LoadingComponent };
+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,70 +1,45 @@
-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 __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 "./NavigationStyle.scss";
-var NavigationComponent = /** @class */ (function () {
-    function NavigationComponent(options) {
-        this.options = __assign({ position: "fixed", id: "luxbar-checkbox", alignment: "left" }, options);
-    }
-    NavigationComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    NavigationComponent.prototype.render = function () {
-        var _this = this;
-        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: __spreadArray([
-                                        { 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(function (x) { return _this.itemToNode(x); }), true) }] }
-                    ] }
-            ]
-        };
-    };
-    NavigationComponent.prototype.itemToNode = function (x) {
-        var _this = this;
-        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(function (c) { return _this.itemToNode(c); }) } : undefined)
-            ] };
-    };
-    NavigationComponent.prototype.isActive = function (link) {
-        return location.hash.startsWith(link);
-    };
-    NavigationComponent.prototype.toNode = function (content) {
-        if (typeof content === "string") {
-            return { tag: "span", content: content };
-        }
-        return content;
-    };
-    return NavigationComponent;
-}());
-export { NavigationComponent };
+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;
+}