jsl-ui 9.28.2 → 9.28.4

package/lib/components/date-time/DateTimeComponent.js

@@ -1,53 +1,39 @@
-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 "./DateTimeStyle.scss";
 import { EventHandler } from "../../interaction/eventhandler";
 import { DateComponent } from "../date/DateComponent";
 import { TimeComponent } from "../time/TimeComponent";
-var DateTimeComponent = /** @class */ (function () {
-    function DateTimeComponent(options) {
-        var _this = this;
+export class DateTimeComponent {
+    constructor(options) {
         if (options.bindMode && options.bindMode !== "toModel") {
             throw new Error("Currently DateTimeComponent only supports toModel as bindMode");
         }
-        this.options = __assign({}, options);
+        this.options = { ...options };
         this.options.onChange = EventHandler.Create(this.options.onChange);
-        var optionsCopy = __assign({}, options);
+        const optionsCopy = { ...options };
         optionsCopy.bindTo = null;
         optionsCopy.property = null;
         optionsCopy.converter = null;
-        optionsCopy.onChange = function () {
+        optionsCopy.onChange = () => {
             var _a;
-            var val = _this.getValueAsDate();
-            if (_this.options.bindTo && options.property) {
-                _this.options.bindTo[options.property] =
-                    ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(val) : val;
+            const val = this.getValueAsDate();
+            if (this.options.bindTo && options.property) {
+                this.options.bindTo[options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
             }
-            _this.options.onChange.notify(val);
+            this.options.onChange.notify(val);
         };
         this.dateComp = new DateComponent(optionsCopy);
         this.timeComp = new TimeComponent(optionsCopy);
     }
-    DateTimeComponent.prototype.render = function () {
+    render() {
         return { tag: "div", attr: { class: "date-time-comp" }, children: [
                 this.dateComp, this.timeComp
             ] };
-    };
-    DateTimeComponent.prototype.getValue = function () {
+    }
+    getValue() {
         return this.dateComp.getValue() + " " + this.timeComp.getValue();
-    };
-    DateTimeComponent.prototype.getValueAsDate = function () {
+    }
+    getValueAsDate() {
         return this.timeComp.getValueAsDate(this.dateComp.getValueAsDate());
-    };
-    return DateTimeComponent;
-}());
-export { DateTimeComponent };
+    }
+}

package/lib/components/dialog/DialogComponent.js

@@ -1,113 +1,40 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { JSLRender } from "jsl-render";
 import { Dialog } from "../../ui/dialog";
 import { Moveable } from "../../interaction/moveable";
 import { EventHandler } from "../../interaction/eventhandler";
 import { Resizable } from "../../interaction/resizable";
 import { UILang } from "../../core/lang";
-var DialogComponent = /** @class */ (function () {
-    function DialogComponent(options) {
-        var _this = this;
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "dlg-close-btn", click: function () {
-                    _this.ref.close();
-                }
-            }
-        };
-        this.resizeHandle = {
-            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
-        };
-        this.options = __assign({ maxHeight: "calc(100vh - 7.5rem)", width: "50vw" }, options);
-    }
-    DialogComponent.Button = function (options) {
-        var _this = this;
+export class DialogComponent {
+    static Button(options) {
         var _a, _b, _c;
-        var res = {
+        const res = {
             tag: "button", attr: {
                 class: "jsl-button " + ((_a = options.class) !== null && _a !== void 0 ? _a : ""),
-                click: function () { return __awaiter(_this, void 0, void 0, function () {
-                    var clickRes, isPromise;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                if (!(options.onClick != null)) return [3 /*break*/, 3];
-                                clickRes = options.onClick();
-                                isPromise = clickRes && typeof clickRes.then === "function" && typeof clickRes.catch === "function";
-                                if (!isPromise) return [3 /*break*/, 2];
-                                return [4 /*yield*/, clickRes];
-                            case 1:
-                                clickRes = _a.sent();
-                                _a.label = 2;
-                            case 2:
-                                if (clickRes === false) {
-                                    return [2 /*return*/];
-                                }
-                                _a.label = 3;
-                            case 3:
-                                if (DialogComponent.lastRenderedDlg != null) {
-                                    DialogComponent.lastRenderedDlg.getRef().close();
-                                }
-                                return [2 /*return*/];
+                click: async () => {
+                    if (options.onClick != null) {
+                        let clickRes = options.onClick();
+                        const isPromise = clickRes && typeof clickRes.then === "function" && typeof clickRes.catch === "function";
+                        if (isPromise) {
+                            clickRes = await clickRes;
+                        }
+                        if (clickRes === false) {
+                            return;
                         }
-                    });
-                }); }
+                    }
+                    if (DialogComponent.lastRenderedDlg != null) {
+                        DialogComponent.lastRenderedDlg.getRef().close();
+                    }
+                }
             }, content: (_b = options.content) !== null && _b !== void 0 ? _b : "OK", raw: (_c = options.raw) !== null && _c !== void 0 ? _c : false
         };
         return res;
-    };
-    DialogComponent.Ok = function (onClick) {
-        return DialogComponent.Button({ content: UILang.core.Ok, onClick: onClick, class: "dlg-ok-btn" });
-    };
-    DialogComponent.Cancel = function () {
+    }
+    static Ok(onClick) {
+        return DialogComponent.Button({ content: UILang.core.Ok, onClick, class: "dlg-ok-btn" });
+    }
+    static Cancel() {
         return DialogComponent.Button({ content: UILang.core.Cancel, class: "dlg-cancel-btn jsl-button-outline" });
-    };
+    }
     // does not work -> dialog still exists in background and wrong renderer is active
     // public static closeAll() {
     //     document.querySelectorAll(".jsl-dialog-overlay").forEach((x) => {
@@ -116,20 +43,20 @@ var DialogComponent = /** @class */ (function () {
     //         }
     //     });
     // }
-    DialogComponent.show = function (options) {
-        var container = document.createElement("div");
+    static show(options) {
+        const container = document.createElement("div");
         document.body.appendChild(container);
-        var oldRenderer = JSLRender.lastCreatedRenderer;
-        var oldLastDlg = DialogComponent.lastRenderedDlg;
-        var renderer = new JSLRender(container, oldRenderer != null);
+        const oldRenderer = JSLRender.lastCreatedRenderer;
+        const oldLastDlg = DialogComponent.lastRenderedDlg;
+        const renderer = new JSLRender(container, oldRenderer != null);
         if (oldRenderer != null) {
             JSLRender.lastCreatedRenderer = renderer;
         }
-        var o = __assign({}, options);
+        const o = { ...options };
         if (o.autoOpen == null) {
             o.autoOpen = true;
         }
-        o.onClose = function () {
+        o.onClose = () => {
             if (options.onClose) {
                 if (options.onClose() === false) {
                     return;
@@ -143,17 +70,30 @@ var DialogComponent = /** @class */ (function () {
             }
             DialogComponent.lastRenderedDlg = oldLastDlg;
         };
-        var dlg = new DialogComponent(o);
+        const dlg = new DialogComponent(o);
         DialogComponent.lastRenderedDlg = dlg;
         renderer.render(dlg);
         return dlg;
-    };
-    DialogComponent.prototype.render = function () {
-        var header = this.toNode(this.options.header);
-        var body = this.toNode(this.options.content);
-        var footer = this.toNode(this.options.footer);
-        var styleW = "";
-        var styleH = "";
+    }
+    constructor(options) {
+        this.closeIcon = {
+            tag: "div", content: "✖" /*"🗙"*/, attr: {
+                class: "dlg-close-btn", click: () => {
+                    this.ref.close();
+                }
+            }
+        };
+        this.resizeHandle = {
+            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
+        };
+        this.options = { maxHeight: "calc(100vh - 7.5rem)", width: "50vw", ...options };
+    }
+    render() {
+        const header = this.toNode(this.options.header);
+        const body = this.toNode(this.options.content);
+        const footer = this.toNode(this.options.footer);
+        let styleW = "";
+        let styleH = "";
         if (this.options.width != null) {
             styleW += "width:" + this.options.width + ";";
         }
@@ -172,16 +112,16 @@ var DialogComponent = /** @class */ (function () {
         if (this.options.maxHeight != null) {
             styleH += "max-height:" + this.options.maxHeight + ";";
         }
-        var headerStyle = this.options.allowMove ? "cursor:move" : undefined;
+        const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
         return {
             tag: "div", attr: {
-                class: "jsl-dialog-overlay", wheel: function (e) {
+                class: "jsl-dialog-overlay", wheel: (e) => {
                     e.preventDefault();
                 }
             }, children: [
                 {
                     tag: "div", attr: {
-                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: function (e) {
+                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: (e) => {
                             e.stopImmediatePropagation();
                             e.stopPropagation();
                         }
@@ -200,13 +140,14 @@ var DialogComponent = /** @class */ (function () {
                 }
             ]
         };
-    };
-    DialogComponent.prototype.onCreate = function (node) {
+    }
+    onCreate(node) {
         this.ref = Dialog(node.dom, this.options);
         if (this.options.allowMove) {
-            Moveable(this.ref.getOverlay(), __assign({ onStart: new EventHandler(function (e) {
-                    var headerWasClicked = false;
-                    var parent = e.evt.target;
+            Moveable(this.ref.getOverlay(), {
+                onStart: new EventHandler((e) => {
+                    let headerWasClicked = false;
+                    let parent = e.evt.target;
                     while (parent != null && !parent.classList.contains("jsl-dialog-overlay")) {
                         if (parent.classList.contains("dlg-header")) {
                             headerWasClicked = true;
@@ -215,7 +156,7 @@ var DialogComponent = /** @class */ (function () {
                         parent = parent.parentElement;
                     }
                     if (headerWasClicked) {
-                        var rect = e.target.getBoundingClientRect();
+                        const rect = e.target.getBoundingClientRect();
                         e.target.style.transform = "translate(0, 0)";
                         e.target.style.left = rect.left + "px";
                         e.target.style.top = rect.top + "px";
@@ -223,29 +164,29 @@ var DialogComponent = /** @class */ (function () {
                     else {
                         e.cancelEvent();
                     }
-                }) }, this.options.moveOptions));
+                }),
+                ...this.options.moveOptions
+            });
         }
         if (this.options.allowResize) {
-            var dlgEl = this.ref.getOverlay().querySelector(".jsl-dialog");
+            const dlgEl = this.ref.getOverlay().querySelector(".jsl-dialog");
             Resizable(dlgEl, this.options.resizeOptions);
-            var rect = dlgEl.getBoundingClientRect();
+            const rect = dlgEl.getBoundingClientRect();
             dlgEl.style.transform = "translate(0, 0)";
             dlgEl.style.left = rect.left + "px";
             dlgEl.style.top = rect.top + "px";
-            var bodyEl = dlgEl.querySelector(".dlg-body");
-            var bodyRect = bodyEl.getBoundingClientRect();
+            const bodyEl = dlgEl.querySelector(".dlg-body");
+            const bodyRect = bodyEl.getBoundingClientRect();
             bodyEl.style.height = "calc(100% - " + (rect.height - bodyRect.height) + "px)";
         }
-    };
-    DialogComponent.prototype.getRef = function () {
+    }
+    getRef() {
         return this.ref;
-    };
-    DialogComponent.prototype.toNode = function (content) {
+    }
+    toNode(content) {
         if (typeof content === "string") {
-            return { tag: "div", content: content };
+            return { tag: "div", content };
         }
         return content;
-    };
-    return DialogComponent;
-}());
-export { DialogComponent };
+    }
+}

package/lib/components/drop-down/DropDownComponent.js

@@ -1,20 +1,9 @@
-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 { DropDown } from "../../ui/drop.down";
 import { EventHandler } from "../../interaction/eventhandler";
-var DropDownComponent = /** @class */ (function () {
-    function DropDownComponent(options) {
+export class DropDownComponent {
+    constructor(options) {
         var _a;
-        this.options = __assign({ enabled: true }, options);
+        this.options = { ...{ enabled: true }, ...options };
         this.options.onChange = EventHandler.Create(this.options.onChange);
         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) ?
@@ -22,16 +11,15 @@ var DropDownComponent = /** @class */ (function () {
                 this.options.bindTo[this.options.property]);
         }
     }
-    DropDownComponent.prototype.render = function () {
+    render() {
         return {
             tag: "select"
         };
-    };
-    DropDownComponent.prototype.getRef = function () {
+    }
+    getRef() {
         return this.ref;
-    };
-    DropDownComponent.prototype.onCreate = function (node) {
-        var _this = this;
+    }
+    onCreate(node) {
         this.ref = DropDown(node.dom, this.options);
         if (!this.options.enabled) {
             this.ref.disable();
@@ -40,35 +28,33 @@ var DropDownComponent = /** @class */ (function () {
         if (this.options.width) {
             node.dom.parentElement.style.display = "inline-block";
         }
-        node.dom.addEventListener("change", function (evt) {
+        node.dom.addEventListener("change", (evt) => {
             var _a;
-            var value;
-            if (_this.options.multiple) {
-                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map(function (v) { return v.value; });
+            let value;
+            if (this.options.multiple) {
+                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map((v) => v.value);
             }
             else {
                 value = node.dom.value;
             }
-            if (_this.options.bindTo != null && _this.options.property != null) {
-                _this.options.bindTo[_this.options.property] =
-                    ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(value) : value;
+            if (this.options.bindTo != null && this.options.property != null) {
+                this.options.bindTo[this.options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
             }
-            if (_this.options.onSelect != null) {
-                _this.options.onSelect(value);
+            if (this.options.onSelect != null) {
+                this.options.onSelect(value);
             }
-            if (_this.options.onChange != null) {
-                _this.options.onChange.notify(value);
+            if (this.options.onChange != null) {
+                this.options.onChange.notify(value);
             }
         });
         if (this.options.value != null) {
             this.ref.setValue(this.options.value);
         }
-    };
-    DropDownComponent.prototype.onRemove = function () {
+    }
+    onRemove() {
         if (this.ref != null) {
             this.ref.destroy();
         }
-    };
-    return DropDownComponent;
-}());
-export { DropDownComponent };
+    }
+}

package/lib/components/expander/ExpanderComponent.js

@@ -1,11 +1,11 @@
 import "./ExpanderStyle.scss";
-var ExpanderComponent = /** @class */ (function () {
-    function ExpanderComponent(optionsOrHeader, body, expanded) {
+export class ExpanderComponent {
+    constructor(optionsOrHeader, body, expanded) {
         var _a;
         this.State = { expanded: false, waitingForAnimation: false };
         if (body != null) {
             // old syntax
-            this.options = { header: optionsOrHeader, body: body, expanded: expanded !== null && expanded !== void 0 ? expanded : true };
+            this.options = { header: optionsOrHeader, body, expanded: expanded !== null && expanded !== void 0 ? expanded : true };
         }
         else {
             this.options = optionsOrHeader;
@@ -13,7 +13,7 @@ var ExpanderComponent = /** @class */ (function () {
         }
         this.State.expanded = this.options.expanded;
     }
-    ExpanderComponent.prototype.getIcon = function (expanded) {
+    getIcon(expanded) {
         var _a, _b, _c, _d;
         return {
             tag: "span", attr: {
@@ -29,28 +29,27 @@ var ExpanderComponent = /** @class */ (function () {
                     : "<path id='curve0' fill='#FFFFFF' d='M3989 1273l3620 3621c125,124 125,328 0,452l-3620 3621c-125,124 -328,124 -453,0l-905 -905c-125,-125 -125,-328 0,-453l2489 -2489 -2489 -2489c-125,-125 -125,-328 0,-453l905 -905c125,-124 328,-124 453,0z'/>") +
                 "</svg>"
         };
-    };
-    ExpanderComponent.prototype.isEqual = function (node) {
+    }
+    isEqual(node) {
         return this.__proto__ === node.__proto__;
-    };
-    ExpanderComponent.prototype.render = function () {
-        var _this = this;
+    }
+    render() {
         var _a, _b, _c;
-        var animate = this.State.waitingForAnimation;
+        const animate = this.State.waitingForAnimation;
         this.State.waitingForAnimation = false;
         return {
             tag: "div", attr: { class: "expander-comp " + (this.options.class || ""), style: (_a = this.options.style) !== null && _a !== void 0 ? _a : "" }, children: [
                 {
                     tag: "div", attr: {
                         class: "header",
-                        click: function (evt) { var _a; if ((_a = _this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true) {
+                        click: (evt) => { var _a; if ((_a = this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true) {
                             evt.stopPropagation();
-                            _this.toggleExpand();
+                            this.toggleExpand();
                         } },
                     },
                     children: [
                         {
-                            tag: "span", attr: { class: "toggler", click: function (evt) { evt.stopPropagation(); _this.toggleExpand(); } },
+                            tag: "span", attr: { class: "toggler", click: (evt) => { evt.stopPropagation(); this.toggleExpand(); } },
                             children: [this.State.expanded
                                     ? ((_b = this.options.expandedIcon) !== null && _b !== void 0 ? _b : this.getIcon(true))
                                     : ((_c = this.options.collapsedIcon) !== null && _c !== void 0 ? _c : this.getIcon(false))
@@ -66,9 +65,9 @@ var ExpanderComponent = /** @class */ (function () {
                 }
             ]
         };
-    };
-    ExpanderComponent.prototype.toggleExpand = function () {
-        var newVal = !this.State.expanded;
+    }
+    toggleExpand() {
+        const newVal = !this.State.expanded;
         if (this.options.onToggle != null) {
             if (this.options.onToggle(newVal) === false) {
                 return;
@@ -78,13 +77,11 @@ var ExpanderComponent = /** @class */ (function () {
             this.State.waitingForAnimation = true;
         }
         this.State.expanded = newVal;
-    };
-    ExpanderComponent.prototype.toNode = function (content) {
+    }
+    toNode(content) {
         if (typeof content === "string") {
-            return { tag: "div", content: content };
+            return { tag: "div", content };
         }
         return content;
-    };
-    return ExpanderComponent;
-}());
-export { ExpanderComponent };
+    }
+}

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

@@ -1,26 +1,23 @@
-var FormComponent = /** @class */ (function () {
-    function FormComponent(children, options) {
+export class FormComponent {
+    constructor(children, options) {
         this.children = children;
         this.options = options;
     }
-    FormComponent.prototype.render = function () {
+    render() {
         var _a, _b;
         return {
             tag: "form",
             attr: { class: (_a = this.options) === null || _a === void 0 ? void 0 : _a.class, style: (_b = this.options) === null || _b === void 0 ? void 0 : _b.style },
             children: this.children
         };
-    };
-    FormComponent.prototype.validate = function () {
-        var valid = true;
-        for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
-            var c = _a[_i];
+    }
+    validate() {
+        let valid = true;
+        for (const c of this.children) {
             if (c.validate && !c.validate()) {
                 valid = false;
             }
         }
         return valid;
-    };
-    return FormComponent;
-}());
-export { FormComponent };
+    }
+}