jsl-ui 9.28.2 → 9.28.4

package/lib/components/number/NumberComponent.js

@@ -1,22 +1,11 @@
-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 { NumberInput } from "../../ui/number.input";
 import { numeric } from "../../core/numeric";
 import { helper } from "../../core/helper";
 import { EventHandler } from "../../interaction/eventhandler";
-var NumberComponent = /** @class */ (function () {
-    function NumberComponent(options) {
+export class NumberComponent {
+    constructor(options) {
         var _a;
-        this.options = __assign({ onChange: new EventHandler(), bindMode: "toModel" }, options);
+        this.options = { ...{ onChange: new EventHandler(), bindMode: "toModel" }, ...options };
         if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
             this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
                 this.options.converter.toUI(this.options.bindTo[this.options.property]) :
@@ -25,24 +14,20 @@ var NumberComponent = /** @class */ (function () {
         this.options.onChange = EventHandler.Create(this.options.onChange);
         this.id = options.id || helper.newDomGuid();
     }
-    Object.defineProperty(NumberComponent.prototype, "onChange", {
-        get: function () {
-            return this.options.onChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    NumberComponent.prototype.render = function () {
+    get onChange() {
+        return this.options.onChange;
+    }
+    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) {
-            var current = this.getValue();
-            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+            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]);
-            var newValStr = numeric.format(newVal, this.options.format);
+            const newValStr = numeric.format(newVal, this.options.format);
+            val = newVal;
             if (newValStr !== current) {
-                val = newVal;
                 if (this.currentDom != null) {
                     this.currentDom.value = newValStr;
                 }
@@ -58,17 +43,17 @@ var NumberComponent = /** @class */ (function () {
                 placeholder: this.options.placeholder
             }
         };
-    };
-    NumberComponent.prototype.getValue = function () {
+    }
+    getValue() {
         if (this.currentDom == null) {
             return null;
         }
         return this.currentDom.value;
-    };
-    NumberComponent.prototype.getValueAsNumber = function () {
+    }
+    getValueAsNumber() {
         return numeric.parse(this.getValue());
-    };
-    NumberComponent.prototype.setValue = function (value) {
+    }
+    setValue(value) {
         var _a;
         this.options.value = value;
         if (this.currentDom != null) {
@@ -78,21 +63,18 @@ var NumberComponent = /** @class */ (function () {
             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;
         }
-    };
-    NumberComponent.prototype.onCreate = function (node) {
-        var _this = this;
+    }
+    onCreate(node) {
         this.currentDom = node.dom;
-        var handler = new EventHandler(function (value) {
+        const handler = new EventHandler((value) => {
             var _a;
-            if (_this.options.bindTo != null && _this.options.bindMode !== "fromModel" && _this.options.property != null) {
-                if (_this.options.bindTo && _this.options.property) {
-                    _this.options.bindTo[_this.options.property] = ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(value) : value;
+            if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && this.options.property != null) {
+                if (this.options.bindTo && this.options.property) {
+                    this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
                 }
             }
-            _this.options.onChange.notify(value);
+            this.options.onChange.notify(value);
         });
-        NumberInput(this.currentDom, __assign(__assign({}, this.options), { onChange: handler }));
-    };
-    return NumberComponent;
-}());
-export { NumberComponent };
+        NumberInput(this.currentDom, { ...this.options, onChange: handler });
+    }
+}

package/lib/components/overlay/OverlayComponent.js

@@ -1,46 +1,17 @@
-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 "./overlay.css";
 import { JSLRender } from "jsl-render";
-var OverlayComponent = /** @class */ (function () {
-    function OverlayComponent(options) {
-        var _this = this;
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "overl-close-btn", click: function () {
-                    _this.close();
-                }
-            }
-        };
-        this.options = __assign({ closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true }, options);
-        if (this.options.closeOnEscape) {
-            this.onKeydownEvent = document.addEventListener("keydown", function (args) {
-                if (args.keyCode === 27) { // escape
-                    _this.close();
-                }
-            });
-        }
-    }
-    OverlayComponent.show = function (options) {
-        var container = document.createElement("div");
+export class OverlayComponent {
+    static show(options) {
+        const container = document.createElement("div");
         document.body.appendChild(container);
-        var oldRenderer = JSLRender.lastCreatedRenderer;
-        var oldLastDlg = OverlayComponent.lastRenderedDlg;
-        var renderer = new JSLRender(container, oldRenderer != null);
+        const oldRenderer = JSLRender.lastCreatedRenderer;
+        const oldLastDlg = OverlayComponent.lastRenderedDlg;
+        const renderer = new JSLRender(container, oldRenderer != null);
         if (oldRenderer != null) {
             JSLRender.lastCreatedRenderer = renderer;
         }
-        var o = __assign({}, options);
-        o.onClose = function () {
+        const o = { ...options };
+        o.onClose = () => {
             if (options.onClose) {
                 if (options.onClose() === false) {
                     return;
@@ -53,12 +24,12 @@ var OverlayComponent = /** @class */ (function () {
             }
             OverlayComponent.lastRenderedDlg = oldLastDlg;
         };
-        var dlg = new OverlayComponent(o);
+        const dlg = new OverlayComponent(o);
         OverlayComponent.lastRenderedDlg = dlg;
         renderer.render(dlg);
         return dlg;
-    };
-    OverlayComponent.prototype.close = function () {
+    }
+    close() {
         if (this.options.onClose) {
             if (this.options.onClose() === false) {
                 return;
@@ -68,14 +39,31 @@ var OverlayComponent = /** @class */ (function () {
         if (this.onKeydownEvent != null) {
             document.removeEventListener("keydown", this.onKeydownEvent);
         }
-    };
-    OverlayComponent.prototype.onCreate = function (node) {
-        var bodyDom = node.dom.querySelector(".overl-body");
+    }
+    constructor(options) {
+        this.closeIcon = {
+            tag: "div", content: "✖" /*"🗙"*/, attr: {
+                class: "overl-close-btn", click: () => {
+                    this.close();
+                }
+            }
+        };
+        this.options = { closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true, ...options };
+        if (this.options.closeOnEscape) {
+            this.onKeydownEvent = document.addEventListener("keydown", (args) => {
+                if (args.keyCode === 27) { // escape
+                    this.close();
+                }
+            });
+        }
+    }
+    onCreate(node) {
+        const bodyDom = node.dom.querySelector(".overl-body");
         if (bodyDom != null) {
             if (this.options.direction === "left") {
                 node.dom.style.width = this.options.size;
                 if (this.options.animate) {
-                    var realWidth = bodyDom.getBoundingClientRect().width;
+                    const realWidth = bodyDom.getBoundingClientRect().width;
                     node.dom.style.left = -realWidth + "px";
                     JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
                 }
@@ -83,7 +71,7 @@ var OverlayComponent = /** @class */ (function () {
             else {
                 node.dom.style.height = this.options.size;
                 if (this.options.animate) {
-                    var realHeight = bodyDom.getBoundingClientRect().height;
+                    const realHeight = bodyDom.getBoundingClientRect().height;
                     node.dom.style.top = -realHeight + "px";
                     JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
                 }
@@ -92,10 +80,9 @@ var OverlayComponent = /** @class */ (function () {
         else {
             console.error("overl-body class not found");
         }
-    };
-    OverlayComponent.prototype.render = function () {
-        var _this = this;
-        var body = this.toNode(this.options.content);
+    }
+    render() {
+        const body = this.toNode(this.options.content);
         // let styleW = "";
         // let styleH = "";
         // if (this.options.width != null) {
@@ -119,11 +106,11 @@ var OverlayComponent = /** @class */ (function () {
         // const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
         return {
             tag: "div", attr: {
-                class: "jsl-overlay-overlay", click: function (e) {
-                    if (_this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
-                        _this.close();
+                class: "jsl-overlay-overlay", click: (e) => {
+                    if (this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
+                        this.close();
                     }
-                }, wheel: function (e) {
+                }, wheel: (e) => {
                     e.stopImmediatePropagation();
                     e.stopPropagation();
                 }
@@ -137,13 +124,11 @@ var OverlayComponent = /** @class */ (function () {
             ]
             // }]
         };
-    };
-    OverlayComponent.prototype.toNode = function (content) {
+    }
+    toNode(content) {
         if (typeof content === "string") {
-            return { tag: "div", content: content };
+            return { tag: "div", content };
         }
         return content;
-    };
-    return OverlayComponent;
-}());
-export { OverlayComponent };
+    }
+}

package/lib/components/progress/ProgressComponent.js

@@ -1,23 +1,23 @@
 import "./ProgressStyle.scss";
 import { numeric } from "../../core/numeric";
-var ProgressComponent = /** @class */ (function () {
-    function ProgressComponent(progress, options) {
+export class ProgressComponent {
+    constructor(progress, options) {
         this.progress = progress;
         this.options = options;
     }
-    ProgressComponent.prototype.isEqual = function (node) {
+    isEqual(node) {
         return this.__proto__ === node.__proto__;
-    };
-    ProgressComponent.prototype.render = function () {
+    }
+    render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        var style = "width: " + this.progress + "%";
+        let style = "width: " + this.progress + "%";
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.color) {
             style += ";background:" + this.options.color;
         }
         if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.style) {
             style += ";" + this.options.style;
         }
-        var content = "";
+        let content = "";
         if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
             content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
         }
@@ -26,17 +26,15 @@ var ProgressComponent = /** @class */ (function () {
             attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
             children: [{
                     tag: "div",
-                    attr: { class: "bar", style: style },
-                    content: content
+                    attr: { class: "bar", style },
+                    content
                 }]
         };
-    };
-    ProgressComponent.prototype.setProgress = function (progress) {
+    }
+    setProgress(progress) {
         this.progress = progress;
-    };
-    ProgressComponent.prototype.getProgress = function () {
+    }
+    getProgress() {
         return this.progress;
-    };
-    return ProgressComponent;
-}());
-export { ProgressComponent };
+    }
+}

package/lib/components/ribbon-menu/RibbonMenuComponent.js

@@ -1,34 +1,23 @@
-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 "./RibbonMenuStyle.scss";
-var RibbonMenuComponent = /** @class */ (function () {
+export class RibbonMenuComponent {
     // private options: IStackPanelOptions;
-    function RibbonMenuComponent(groups) {
+    constructor(groups) {
         this.groups = groups;
         // this.options = {...{orientation: "horizontal", verticalAlign: "stretch"}, ...options};
     }
-    RibbonMenuComponent.prototype.isEqual = function (node) {
+    isEqual(node) {
         return this.__proto__ === node.__proto__;
-    };
-    RibbonMenuComponent.prototype.render = function () {
+    }
+    render() {
         return {
             tag: "div", attr: { class: "ribbon-menu-comp" },
-            children: this.groups.map(function (g) {
+            children: this.groups.map((g) => {
                 var _a;
                 return {
                     tag: "div", attr: { class: "ribbon-group" },
-                    children: __spreadArray([{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }], g.children, true)
+                    children: [{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }, ...g.children]
                 };
             })
         };
-    };
-    return RibbonMenuComponent;
-}());
-export { RibbonMenuComponent };
+    }
+}