jsl-ui 9.28.2 → 9.28.4

package/lib/components/select/SelectComponent.js

@@ -1,25 +1,13 @@
-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 "./SelectStyle.scss";
 import { JSLRender } from "jsl-render";
 import { SelectDDAreaComponent } from "./SelectDDAreaComponent";
 import { EventHandler } from "../../interaction/eventhandler";
-var SelectComponent = /** @class */ (function () {
-    function SelectComponent(o) {
-        var _this = this;
+export class SelectComponent {
+    constructor(o) {
         var _a;
         this.expanded = false;
         this.doNotFocus = false;
-        var defaultOptions = {
+        const defaultOptions = {
             data: undefined,
             keyColumn: "value",
             textColumn: "text",
@@ -35,25 +23,25 @@ var SelectComponent = /** @class */ (function () {
             focusFirstItem: true,
             autoShrink: true,
             bindMode: "toModel",
-            onAppend: function (dom) {
+            onAppend: (dom) => {
                 document.body.appendChild(dom);
             },
-            onRenderGroup: function (args) {
+            onRenderGroup: (args) => {
                 args.node.content = args.groupValue;
             },
-            onRender: o.multiple ? function (args) {
+            onRender: o.multiple ? (args) => {
                 if (args.isCurrent) {
-                    args.node.content = args.data.map(function (d) { return d[_this.options.textColumn]; }).join(", ");
+                    args.node.content = args.data.map((d) => d[this.options.textColumn]).join(", ");
                 }
                 else {
-                    args.node.content = args.data[_this.options.textColumn];
+                    args.node.content = args.data[this.options.textColumn];
                 }
-            } : function (args) {
-                args.node.content = args.data[_this.options.textColumn];
+            } : (args) => {
+                args.node.content = args.data[this.options.textColumn];
             },
-            matchSearch: function (data, term) { var _a; return (((_a = data[_this.options.textColumn]) !== null && _a !== void 0 ? _a : "").toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
+            matchSearch: (data, term) => { var _a; return (((_a = data[this.options.textColumn]) !== null && _a !== void 0 ? _a : "").toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
         };
-        this.options = __assign(__assign({}, defaultOptions), o);
+        this.options = { ...defaultOptions, ...o };
         this.options.onChange = EventHandler.Create(o.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) ?
@@ -62,19 +50,18 @@ var SelectComponent = /** @class */ (function () {
         }
         this.setValue(this.options.value);
     }
-    SelectComponent.prototype.render = function () {
-        var _this = this;
+    render() {
         var _a, _b;
         if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            var value_1 = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+            const 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];
-            if (value_1 != null) {
+            if (value != null) {
                 if (this.options.multiple) {
-                    this.selected = this.options.data.filter(function (x) { return value_1.indexOf(x[_this.options.keyColumn]) >= 0; });
+                    this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
                 }
                 else {
-                    this.selected = this.options.data.filter(function (x) { return x[_this.options.keyColumn] === value_1; })[0];
+                    this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
                 }
             }
             else {
@@ -85,51 +72,54 @@ var SelectComponent = /** @class */ (function () {
             tag: "div", attr: {
                 style: this.options.style,
                 class: "select-comp " + (this.expanded ? "expanded " : "") + (!this.options.enabled ? "disabled " : "") + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
-                mousedown: function (e) { if (_this.expanded || e.which === 3) {
+                mousedown: (e) => { if (this.expanded || e.which === 3) {
                     return;
                 } {
-                    _this.doNotFocus = true;
-                    _this.show();
+                    this.doNotFocus = true;
+                    this.show();
                 } }
             },
             children: [this.renderSelection(), {
                     tag: "button", attr: {
                         disabled: this.options.enabled ? undefined : "disabled",
-                        class: "sel-expander", keydown: function (e) {
-                            if (_this.options.openOnEnter && _this.options.enabled) {
+                        class: "sel-expander", keydown: (e) => {
+                            if (this.options.openOnEnter && this.options.enabled) {
                                 if (e.which === SelectComponent.ENTER_KEY) {
-                                    _this.toggle();
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.stopImmediatePropagation();
+                                    this.toggle();
                                 }
-                                else if (!_this.expanded) {
+                                else if (!this.expanded) {
                                     if (e.key && e.key.length === 1) {
-                                        _this.show(e.key);
+                                        this.show(e.key);
                                     }
                                 }
                             }
-                        }, focus: function (e) {
-                            if (!_this.doNotFocus && _this.options.openOnFocus && _this.options.enabled) {
-                                _this.toggle();
+                        }, focus: (e) => {
+                            if (!this.doNotFocus && this.options.openOnFocus && this.options.enabled) {
+                                this.toggle();
                             }
-                            if (_this.doNotFocus) {
-                                _this.doNotFocus = false;
+                            if (this.doNotFocus) {
+                                this.doNotFocus = false;
                             }
-                        }, click: function (e) {
+                        }, click: (e) => {
                             e.preventDefault();
                         }
                     }, content: this.expanded ? "▲" : "▼"
                 }]
         };
-    };
-    SelectComponent.prototype.onCreate = function (node) {
+    }
+    onCreate(node) {
         this.dom = node.dom;
-    };
-    SelectComponent.prototype.onUpdate = function (node) {
+    }
+    onUpdate(node) {
         this.dom = node.dom;
-    };
-    SelectComponent.prototype.onInit = function (renderer) {
+    }
+    onInit(renderer) {
         this.renderer = renderer;
-    };
-    SelectComponent.prototype.toggle = function () {
+    }
+    toggle() {
         this.expanded = !this.expanded;
         if (this.expanded) {
             this.show();
@@ -137,20 +127,19 @@ var SelectComponent = /** @class */ (function () {
         else {
             this.close();
         }
-    };
-    SelectComponent.prototype.isExpanded = function () {
+    }
+    isExpanded() {
         return this.expanded;
-    };
-    SelectComponent.prototype.show = function (searchTxt) {
-        var _this = this;
+    }
+    show(searchTxt) {
         var _a;
         if (!this.options.enabled) {
             return;
         }
         this.expanded = true;
-        var dimension = this.dom.getBoundingClientRect();
-        var left = Math.round(dimension.left + window.pageXOffset);
-        var top = Math.round(dimension.top + window.pageYOffset);
+        const dimension = this.dom.getBoundingClientRect();
+        const left = Math.round(dimension.left + window.pageXOffset);
+        const top = Math.round(dimension.top + window.pageYOffset);
         this.dropdownArea = document.createElement("div");
         this.dropdownArea.className = "sel-comp-dd " + ((_a = this.options.dropdownClass) !== null && _a !== void 0 ? _a : "");
         this.dropdownArea.style.width = this.options.dropdownWidth || (Math.round(dimension.width) + "px");
@@ -165,7 +154,7 @@ var SelectComponent = /** @class */ (function () {
             this.dropdownArea.classList.add("sel-comp-dd-down");
         }
         this.options.onAppend(this.dropdownArea);
-        var ddDimension = this.dropdownArea.getBoundingClientRect();
+        const ddDimension = this.dropdownArea.getBoundingClientRect();
         if (this.options.dropDirection === "auto") {
             // check if there is enought room for dropdown at bottom
             if (ddDimension.bottom > window.innerHeight) {
@@ -175,35 +164,35 @@ var SelectComponent = /** @class */ (function () {
                 this.dropdownArea.classList.remove("sel-comp-dd-down");
             }
         }
-        var ddAreaComp = new SelectDDAreaComponent(this.options, this, {
+        const ddAreaComp = new SelectDDAreaComponent(this.options, this, {
             renderHeight: ddDimension.height - 2,
-            searchTxt: searchTxt
+            searchTxt
         });
         if (this.options.autoShrink) {
-            ddAreaComp.onRender.subscribe(function (data) {
-                var ddHeight;
-                if (_this.options.enableSearch) {
-                    ddHeight = Math.min((data.length * _this.options.rowHeight + 4), ddDimension.height - 2) + "px + 1.8rem";
-                    _this.dropdownArea.style.height = "calc(" + ddHeight + ")";
+            ddAreaComp.onRender.subscribe((data) => {
+                let ddHeight;
+                if (this.options.enableSearch) {
+                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px + 1.8rem";
+                    this.dropdownArea.style.height = "calc(" + ddHeight + ")";
                 }
                 else {
-                    ddHeight = Math.min((data.length * _this.options.rowHeight + 4), ddDimension.height - 2) + "px";
-                    _this.dropdownArea.style.height = ddHeight;
+                    ddHeight = Math.min((data.length * this.options.rowHeight + 4), ddDimension.height - 2) + "px";
+                    this.dropdownArea.style.height = ddHeight;
                 }
-                if (_this.dropdownArea.classList.contains("sel-comp-dd-up")) {
-                    _this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - (" + ddHeight + "))";
+                if (this.dropdownArea.classList.contains("sel-comp-dd-up")) {
+                    this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - (" + ddHeight + "))";
                 }
             });
         }
         new JSLRender(this.dropdownArea, false).render(ddAreaComp);
-        requestAnimationFrame(function () {
-            var s = _this.dropdownArea.querySelector(".sel-search input");
+        requestAnimationFrame(() => {
+            const s = this.dropdownArea.querySelector(".sel-search input");
             s.focus();
             s.selectionStart = s.selectionEnd = s.value.length;
         });
-    };
-    SelectComponent.prototype.destroy = function () {
-        var x = document.querySelector(".sel-comp-dd");
+    }
+    destroy() {
+        const x = document.querySelector(".sel-comp-dd");
         if (x != null && x.parentElement != null) {
             try {
                 x.parentElement.removeChild(x);
@@ -213,8 +202,8 @@ var SelectComponent = /** @class */ (function () {
             }
         }
         this.expanded = false;
-    };
-    SelectComponent.prototype.close = function () {
+    }
+    close() {
         var _a;
         this.expanded = false;
         this.focused = null;
@@ -231,34 +220,32 @@ var SelectComponent = /** @class */ (function () {
         catch (e) {
             // https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node
         }
-    };
-    SelectComponent.prototype.setFocus = function (item) {
+    }
+    setFocus(item) {
         this.focused = item;
-    };
-    SelectComponent.prototype.getFocus = function () {
+    }
+    getFocus() {
         return this.focused;
-    };
-    SelectComponent.prototype.getValue = function () {
-        var _this = this;
+    }
+    getValue() {
         if (this.selected == null) {
             return null;
         }
         if (this.options.multiple) {
-            return this.selected.map(function (itm) { return itm[_this.options.keyColumn]; });
+            return this.selected.map((itm) => itm[this.options.keyColumn]);
         }
         else {
             return this.selected[this.options.keyColumn];
         }
-    };
-    SelectComponent.prototype.setValue = function (value) {
-        var _this = this;
+    }
+    setValue(value) {
         var _a;
         if (value != null) {
             if (this.options.multiple) {
-                this.selected = this.options.data.filter(function (x) { return value.indexOf(x[_this.options.keyColumn]) >= 0; });
+                this.selected = this.options.data.filter((x) => value.indexOf(x[this.options.keyColumn]) >= 0);
             }
             else {
-                this.selected = this.options.data.filter(function (x) { return x[_this.options.keyColumn] === value; })[0];
+                this.selected = this.options.data.filter((x) => x[this.options.keyColumn] === value)[0];
             }
         }
         else {
@@ -270,11 +257,11 @@ var SelectComponent = /** @class */ (function () {
         if (this.renderer != null) {
             this.renderer.refresh();
         }
-    };
-    SelectComponent.prototype.getSelected = function () {
+    }
+    getSelected() {
         return this.selected;
-    };
-    SelectComponent.prototype.setSelected = function (item) {
+    }
+    setSelected(item) {
         var _a;
         if (this.options.multiple) {
             if (item == null) {
@@ -292,7 +279,7 @@ var SelectComponent = /** @class */ (function () {
         else {
             this.selected = item;
         }
-        var value = this.getValue();
+        const value = this.getValue();
         if (this.options.bindMode !== "fromModel" && 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;
@@ -301,59 +288,57 @@ var SelectComponent = /** @class */ (function () {
             this.options.onChange.notify(value, this.selected);
         }
         this.renderer.refresh();
-    };
-    SelectComponent.prototype.focus = function () {
-        var _this = this;
+    }
+    focus() {
         var _a;
         if (this.dom == null) {
-            requestAnimationFrame(function () {
+            requestAnimationFrame(() => {
                 var _a;
-                if (_this.dom != null) {
-                    (_a = _this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
+                if (this.dom != null) {
+                    (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
                 }
             });
         }
         else {
             (_a = this.dom.querySelector(".sel-expander")) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    };
-    SelectComponent.prototype.hasSelection = function () {
+    }
+    hasSelection() {
         if (this.options.multiple) {
             return this.selected.length > 0;
         }
         return this.selected != null;
-    };
-    SelectComponent.prototype.renderSelection = function () {
-        var _this = this;
-        var node;
+    }
+    renderSelection() {
+        let node;
         if (this.hasSelection()) {
             node = { tag: "div", attr: { class: "sel-dd-item" } };
-            var res = this.options.onRender({
+            const res = this.options.onRender({
                 isSelected: true,
                 isCurrent: true,
                 isFocused: false,
                 data: this.selected,
-                node: node
+                node
             });
             if (res != null) {
                 node.children = [res];
             }
         }
-        var clearbtn;
+        let clearbtn;
         if (this.options.allowEmpty) {
             clearbtn = {
                 tag: "button", content: "✗", attr: {
                     disabled: this.options.enabled ? undefined : "disabled",
-                    title: "clear", class: "clear-btn", mousedown: function (e) {
-                        if (!_this.options.enabled) {
+                    title: "clear", class: "clear-btn", mousedown: (e) => {
+                        if (!this.options.enabled) {
                             return;
                         }
                         e.stopImmediatePropagation();
-                        _this.setSelected(null);
+                        this.setSelected(null);
                     },
-                    click: function (e) {
+                    click: (e) => {
                         e.preventDefault();
-                        _this.setSelected(null);
+                        this.setSelected(null);
                     }
                 }
             };
@@ -362,8 +347,6 @@ var SelectComponent = /** @class */ (function () {
             tag: "div", attr: { class: "sel-result" }, content: node != null ? undefined : this.options.placehoder,
             children: node == null ? undefined : [node, clearbtn]
         };
-    };
-    SelectComponent.ENTER_KEY = 13;
-    return SelectComponent;
-}());
-export { SelectComponent };
+    }
+}
+SelectComponent.ENTER_KEY = 13;