jsl-ui 9.28.2 → 9.28.4

package/lib/components/form-field/FormFieldComponent.js

@@ -3,13 +3,13 @@ import { DatePicker } from "../../ui/date.picker";
 import { NumberInput } from "../../ui/number.input";
 import { helper } from "../../core/helper";
 import { AutoSuggest } from "../../ui/auto.suggest";
-var FormFieldComponent = /** @class */ (function () {
-    function FormFieldComponent(options) {
+export class FormFieldComponent {
+    constructor(options) {
         this.options = options;
         this.id = options.id || helper.newDomGuid();
         this.type = this.options.type === "password" ? "password" : "text";
     }
-    FormFieldComponent.prototype.render = function () {
+    render() {
         var _a, _b;
         return {
             tag: "div",
@@ -42,9 +42,9 @@ var FormFieldComponent = /** @class */ (function () {
                     ]
                 }]
         };
-    };
-    FormFieldComponent.prototype.onCreate = function (node) {
-        var InputDom = node.dom.firstElementChild.children[1];
+    }
+    onCreate(node) {
+        const InputDom = node.dom.firstElementChild.children[1];
         if (this.options.type === "number") {
             NumberInput(InputDom, this.options.numberOptions);
         }
@@ -54,20 +54,20 @@ var FormFieldComponent = /** @class */ (function () {
         else if (this.options.type === "autosuggest") {
             AutoSuggest(InputDom, this.options.autoSuggestOptions);
         }
-    };
-    FormFieldComponent.prototype.onRemove = function (node) {
+    }
+    onRemove(node) {
         if (this.datepickerRef != null) {
             this.datepickerRef.destroy();
         }
-    };
-    FormFieldComponent.prototype.validate = function () {
-        var value = this.getValue();
+    }
+    validate() {
+        const value = this.getValue();
         if (this.options.required && !value) {
             this.validationMessage = " ";
             return false;
         }
         if (this.options.onValidate) {
-            var validationResult = this.options.onValidate(value);
+            const validationResult = this.options.onValidate(value);
             if (validationResult === false) {
                 this.validationMessage = " ";
                 return false;
@@ -79,13 +79,13 @@ var FormFieldComponent = /** @class */ (function () {
         }
         this.validationMessage = null;
         return true;
-    };
-    FormFieldComponent.prototype.getValue = function () {
+    }
+    getValue() {
         var _a;
         return (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.value;
-    };
-    FormFieldComponent.prototype.setValue = function (value) {
-        var el = document.getElementById(this.id);
+    }
+    setValue(value) {
+        const el = document.getElementById(this.id);
         if (el == null) {
             return;
         }
@@ -96,13 +96,13 @@ var FormFieldComponent = /** @class */ (function () {
         else {
             el.parentElement.classList.remove("form-field--is-filled");
         }
-    };
-    FormFieldComponent.prototype.setInActive = function (evt, node) {
-        var formField = node.dom.parentElement.parentElement;
+    }
+    setInActive(evt, node) {
+        const formField = node.dom.parentElement.parentElement;
         if (formField == null) {
             return;
         }
-        setTimeout(function () {
+        setTimeout(() => {
             formField.classList.remove("form-field--is-active");
             if (node.dom.value === "") {
                 formField.classList.remove("form-field--is-filled");
@@ -116,9 +116,9 @@ var FormFieldComponent = /** @class */ (function () {
             return;
         }
         return false;
-    };
-    FormFieldComponent.prototype.setActive = function (evt, node) {
-        var formField = node.dom.parentElement.parentElement;
+    }
+    setActive(evt, node) {
+        const formField = node.dom.parentElement.parentElement;
         if (formField == null) {
             return;
         }
@@ -128,13 +128,11 @@ var FormFieldComponent = /** @class */ (function () {
             return;
         }
         return false;
-    };
-    FormFieldComponent.prototype.onInput = function (evt, node) {
+    }
+    onInput(evt, node) {
         if (this.options.onInput) {
             this.options.onInput(evt, node);
             return;
         }
-    };
-    return FormFieldComponent;
-}());
-export { FormFieldComponent };
+    }
+}

package/lib/components/grid/GridComponent.js

@@ -1,91 +1,87 @@
 import { Slick } from "../../grid/slick.core";
 import { createJSLGrid } from "../../grid/slick.creator";
-var GridComponent = /** @class */ (function () {
-    function GridComponent(data, columns, options, height) {
-        var _this = this;
+export class GridComponent {
+    constructor(data, columns, options, height) {
         this.data = data;
         this.columns = columns;
         this.options = options;
         this.currentlyVisible = true;
         this.checkVisibleTimeout = 0;
         this.initEventsFnc = [];
-        this.resizeEventListener = function () {
-            _this.ref.then(function (g) {
-                if (_this.isVisible(g) && !_this.anyInputIsFocused()) {
+        this.resizeEventListener = () => {
+            this.ref.then((g) => {
+                if (this.isVisible(g) && !this.anyInputIsFocused()) {
                     g.resizeCanvas();
                 }
             });
         };
-        var style = "";
+        let style = "";
         if (!options.autoHeight) {
             style = "height:" + (height !== null && height !== void 0 ? height : "400px");
         }
         this.rootTag = {
             tag: "div",
             attr: {
-                style: style
+                style
             }
         };
-        this.ref = new Promise(function (resolve, reject) {
-            _this.refResolver = resolve;
+        this.ref = new Promise((resolve, reject) => {
+            this.refResolver = resolve;
         });
     }
-    GridComponent.prototype.getRootTag = function () {
+    getRootTag() {
         return this.rootTag;
-    };
-    GridComponent.prototype.getRef = function () {
+    }
+    getRef() {
         return this.ref;
-    };
-    GridComponent.prototype.initEvents = function (fnc) {
+    }
+    initEvents(fnc) {
         this.initEventsFnc.push(fnc);
-    };
-    GridComponent.prototype.onCreate = function (vnode) {
-        var _this = this;
+    }
+    onCreate(vnode) {
         // let grid;
-        setTimeout(function () {
-            if (Array.isArray(_this.data)) {
-                _this.gridRef = createJSLGrid(vnode.dom, _this.data, _this.columns, _this.options);
+        setTimeout(() => {
+            if (Array.isArray(this.data)) {
+                this.gridRef = createJSLGrid(vnode.dom, this.data, this.columns, this.options);
             }
             else {
-                var rawData_1 = [];
-                _this.gridRef = createJSLGrid(vnode.dom, rawData_1, _this.columns, _this.options);
-                _this.data.then(function (result) {
-                    for (var i = 0; i < result.length; i++) {
-                        rawData_1.push(result[i]);
+                const rawData = [];
+                this.gridRef = createJSLGrid(vnode.dom, rawData, this.columns, this.options);
+                this.data.then((result) => {
+                    for (let i = 0; i < result.length; i++) {
+                        rawData.push(result[i]);
                     }
-                    _this.gridRef.refreshData();
+                    this.gridRef.refreshData();
                 });
             }
-            _this.refResolver(_this.gridRef);
-            for (var idx = 0; idx < _this.initEventsFnc.length; idx++) {
-                _this.initEventsFnc[idx](_this.gridRef);
+            this.refResolver(this.gridRef);
+            for (let idx = 0; idx < this.initEventsFnc.length; idx++) {
+                this.initEventsFnc[idx](this.gridRef);
             }
-            window.addEventListener("resize", _this.resizeEventListener);
-            _this.checkVisibility(_this.gridRef);
+            window.addEventListener("resize", this.resizeEventListener);
+            this.checkVisibility(this.gridRef);
         }, 1);
-    };
-    GridComponent.prototype.onRemove = function (vnode) {
-        var _this = this;
+    }
+    onRemove(vnode) {
         if (this.gridRef != null) {
             this.gridRef.destroy();
             this.gridRef = null;
         }
-        this.ref = new Promise(function (resolve, reject) {
-            _this.refResolver = resolve;
+        this.ref = new Promise((resolve, reject) => {
+            this.refResolver = resolve;
         });
         if (this.checkVisibleTimeout !== 0) {
             clearTimeout(this.checkVisibleTimeout);
         }
         window.removeEventListener("resize", this.resizeEventListener);
-    };
-    GridComponent.prototype.render = function () {
+    }
+    render() {
         return this.rootTag;
-    };
-    GridComponent.prototype.checkVisibility = function (g) {
-        var _this = this;
+    }
+    checkVisibility(g) {
         if (!this.isVisible(g)) {
             this.currentlyVisible = false;
-            this.checkVisibleTimeout = setTimeout(function () { _this.checkVisibility(g); }, 1000);
+            this.checkVisibleTimeout = setTimeout(() => { this.checkVisibility(g); }, 1000);
         }
         else {
             if (!this.currentlyVisible) {
@@ -95,14 +91,14 @@ var GridComponent = /** @class */ (function () {
             }
             this.checkVisibleTimeout = 0;
         }
-    };
-    GridComponent.prototype.anyInputIsFocused = function () {
+    }
+    anyInputIsFocused() {
         // this check is necessary because of mobile virtual keyboard
         // -> virtual keyboard triggers window resize event -> which would reset any editors
         return Slick.GlobalEditorLock.isActive() && document.querySelector("input:focus") != null;
-    };
-    GridComponent.prototype.isVisible = function (g) {
-        var el = g.getViewportNode().parentElement;
+    }
+    isVisible(g) {
+        let el = g.getViewportNode().parentElement;
         while (el != null && el !== document.body) {
             if (getComputedStyle(el, null).display === "none") {
                 return false;
@@ -110,7 +106,5 @@ var GridComponent = /** @class */ (function () {
             el = el.parentElement;
         }
         return el != null;
-    };
-    return GridComponent;
-}());
-export { GridComponent };
+    }
+}

package/lib/components/input/InputComponent.js

@@ -1,20 +1,15 @@
-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) {
+export class InputComponent {
+    get onChange() {
+        return this.options.onChange;
+    }
+    get onInput() {
+        return this.options.onInput;
+    }
+    constructor(options) {
         var _a;
-        this.options = __assign({ type: "text", enabled: true, bindMode: "toModel" }, options);
+        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]) :
@@ -26,32 +21,18 @@ var InputComponent = /** @class */ (function () {
             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 () {
+    render() {
         var _a;
-        var val = this.options.value;
+        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();
-            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+            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)
@@ -78,15 +59,15 @@ var InputComponent = /** @class */ (function () {
             },
             content: this.options.type === "textarea" ? val : undefined
         };
-    };
-    InputComponent.prototype.getValue = function () {
+    }
+    getValue() {
         if (this.currentDom == null) {
             return this.options.value || "";
             // return "";
         }
         return this.currentDom.value;
-    };
-    InputComponent.prototype.setValue = function (value) {
+    }
+    setValue(value) {
         var _a;
         this.options.value = value;
         if (this.currentDom != null) {
@@ -96,10 +77,10 @@ var InputComponent = /** @class */ (function () {
             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) {
+    }
+    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) {
@@ -117,31 +98,29 @@ var InputComponent = /** @class */ (function () {
     //         }
     //     }
     // }
-    InputComponent.prototype.raiseChangeEvent = function (e, node) {
+    raiseChangeEvent(e, node) {
         var _a;
         if (this.options.enabled) {
-            var value = node.dom.value;
+            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);
         }
-    };
-    InputComponent.prototype.raiseInputEvent = function (e, node) {
+    }
+    raiseInputEvent(e, node) {
         var _a;
         if (this.onInput.count() === 0) {
             return false;
         }
         if (this.options.enabled) {
-            var value = node.dom.value;
+            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);
         }
-    };
-    return InputComponent;
-}());
-export { InputComponent };
+    }
+}

package/lib/components/loading/LoadingComponent.js

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

package/lib/components/navigation/NavigationComponent.js

@@ -1,33 +1,12 @@
-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);
+export class NavigationComponent {
+    constructor(options) {
+        this.options = { position: "fixed", id: "luxbar-checkbox", alignment: "left", ...options };
     }
-    NavigationComponent.prototype.isEqual = function (node) {
+    isEqual(node) {
         return this.__proto__ === node.__proto__;
-    };
-    NavigationComponent.prototype.render = function () {
-        var _this = this;
+    }
+    render() {
         var _a, _b;
         return {
             tag: "header",
@@ -37,34 +16,32 @@ var NavigationComponent = /** @class */ (function () {
                     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([
+                            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(function (x) { return _this.itemToNode(x); }), true) }] }
+                                            ] },
+                                        ...this.options.data.map((x) => this.itemToNode(x))
+                                    ] }] }
                     ] }
             ]
         };
-    };
-    NavigationComponent.prototype.itemToNode = function (x) {
-        var _this = this;
+    }
+    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(function (c) { return _this.itemToNode(c); }) } : undefined)
+                (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map((c) => this.itemToNode(c)) } : undefined)
             ] };
-    };
-    NavigationComponent.prototype.isActive = function (link) {
+    }
+    isActive(link) {
         return location.hash.startsWith(link);
-    };
-    NavigationComponent.prototype.toNode = function (content) {
+    }
+    toNode(content) {
         if (typeof content === "string") {
-            return { tag: "span", content: content };
+            return { tag: "span", content };
         }
         return content;
-    };
-    return NavigationComponent;
-}());
-export { NavigationComponent };
+    }
+}

package/lib/components/notification/Notification.js

@@ -1,18 +1,16 @@
 import "./Notification.scss";
 import { JSLRender } from "jsl-render";
 import { helper } from "../../core/helper";
-var Notification = /** @class */ (function () {
-    function Notification() {
-    }
-    Notification.show = function (options) {
+export class Notification {
+    static show(options) {
         if (Notification.container == null) {
             Notification.createContainer();
         }
-        var id = helper.newDomGuid();
+        const id = helper.newDomGuid();
         // add
-        var notification = {
+        const notification = {
             tag: "div",
-            attr: { id: id, style: options.style, class: "jsl-notification " + (options.class || "") },
+            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
@@ -22,48 +20,46 @@ var Notification = /** @class */ (function () {
         Notification.renderer.refresh();
         // remove
         if (options.timeOut) {
-            setTimeout(function () {
-                var idx = Notification.containerVNode.children.indexOf(notification);
+            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 = function () {
+        notification.attr.click = () => {
             var _a;
             if (options.onClick != null) {
                 options.onClick();
             }
             if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
-                var idx = Notification.containerVNode.children.indexOf(notification);
+                const idx = Notification.containerVNode.children.indexOf(notification);
                 if (idx >= 0) {
                     Notification.containerVNode.children.splice(idx, 1);
                 }
             }
         };
         return id;
-    };
-    Notification.clearNotification = function (id) {
-        Notification.containerVNode.children = Notification.containerVNode.children.filter(function (x) { var _a; return ((_a = x.attr) === null || _a === void 0 ? void 0 : _a.id) !== 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();
-    };
-    Notification.clearAll = function () {
+    }
+    static clearAll() {
         if (Notification.containerVNode != null) {
             Notification.containerVNode.children = [];
         }
         if (Notification.renderer != null) {
             Notification.renderer.refresh();
         }
-    };
-    Notification.createContainer = function () {
+    }
+    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);
-    };
-    return Notification;
-}());
-export { Notification };
+    }
+}