jsl-ui 9.28.2 → 9.28.3

package/lib/components/select/SelectDDAreaComponent.js

@@ -1,317 +1,303 @@
-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 { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
-import { EventHandler } from "../../interaction/eventhandler";
-function isInternetExplorer() {
-    return window.navigator.userAgent.indexOf("MSIE ") > 0 || !!window.navigator.userAgent.match(/Trident.*rv\:11\./);
-}
-var SelectDDAreaComponent = /** @class */ (function () {
-    function SelectDDAreaComponent(options, component, args) {
-        this.options = options;
-        this.component = component;
-        this.args = args;
-        this.onRender = new EventHandler();
-        this.isScrolling = false;
-        if (args.searchTxt) {
-            this.search(args.searchTxt);
-        }
-        this.focusFirst();
-    }
-    SelectDDAreaComponent.prototype.onCreate = function (node) {
-        var _this = this;
-        var _a, _b;
-        this.dom = node.dom;
-        this.scrollContainer = this.dom.querySelector(".sel-dd-items");
-        var item = this.component.getSelected();
-        if (item != null) {
-            if (Array.isArray(item)) {
-                item = item[0];
-            }
-            if (item != null) {
-                var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-                var idx = d.indexOf(item);
-                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-            }
-        }
-        //bugfix for IE -> blur event of search box is called when user clicks scroll bar
-        if (isInternetExplorer()) {
-            this.scrollContainer.addEventListener("scroll", function (e) {
-                _this.isScrolling = true;
-                setTimeout(function () {
-                    _this.isScrolling = false;
-                    _this.dom.querySelector(".sel-search input").focus();
-                }, 20);
-            });
-            this.scrollContainer.addEventListener("mousedown", function (e) {
-                if (e.offsetX > _this.scrollContainer.clientWidth || e.offsetY > _this.scrollContainer.clientHeight) {
-                    _this.isScrolling = true;
-                    setTimeout(function () {
-                        _this.isScrolling = false;
-                        _this.dom.querySelector(".sel-search input").focus();
-                    }, 20);
-                }
-            });
-        }
-    };
-    SelectDDAreaComponent.prototype.render = function () {
-        var _this = this;
-        var _a;
-        var data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
-        if (this.options.groupProperty != null) {
-            var sortedData = __spreadArray([], data, true);
-            sortedData.sort(function (a, b) {
-                return a[_this.options.groupProperty] < b[_this.options.groupProperty] ? -1
-                    : a[_this.options.groupProperty] > b[_this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
-                    );
-            });
-            data = [];
-            var prevGroupVal = NaN;
-            for (var _i = 0, sortedData_1 = sortedData; _i < sortedData_1.length; _i++) {
-                var x = sortedData_1[_i];
-                if (x[this.options.groupProperty] !== prevGroupVal) {
-                    // create group entry
-                    data.push({ __isGroup: true, __groupValue: x[this.options.groupProperty] });
-                    prevGroupVal = x[this.options.groupProperty];
-                }
-                data.push(x);
-            }
-        }
-        this.onRender.notify(data);
-        this.renderedData = data;
-        var ddNode = {
-            tag: "div", animation: this.options.enableAnimation ? { attr: "opacity", from: "0", to: "1", duration: 400 } : undefined, children: [
-                {
-                    tag: "div", attr: { class: "sel-search", style: this.options.enableSearch ? undefined : "height:0;padding:0;margin:0;border:none;" },
-                    children: [
-                        {
-                            tag: "input", attr: {
-                                type: "text", value: this.args.searchTxt, placeholder: "Search", blur: function (e) {
-                                    e.preventDefault();
-                                    if (isInternetExplorer()) {
-                                        requestAnimationFrame(function () {
-                                            if (!_this.isScrolling) {
-                                                _this.component.close();
-                                            }
-                                        });
-                                    }
-                                    else {
-                                        _this.component.close();
-                                    }
-                                    return false;
-                                }, input: function (e, node) {
-                                    if (!_this.options.enableSearch) {
-                                        return false;
-                                    }
-                                    var term = node.dom.value;
-                                    if (!term) {
-                                        _this.clearSearch();
-                                    }
-                                    else {
-                                        _this.search(term);
-                                    }
-                                }, keydown: function (e, node) {
-                                    var _a;
-                                    if (!_this.options.enableKeyboard) {
-                                        return;
-                                    }
-                                    if (e.which === SelectDDAreaComponent.ESCAPE_KEY) {
-                                        node.dom.blur();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.DOWN_KEY) {
-                                        _this.navigateDown();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.UP_KEY) {
-                                        _this.navigateUp();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.ENTER_KEY) { // TODO: multiselect
-                                        var focus_1 = _this.component.getFocus();
-                                        if (focus_1 == null) {
-                                            // if only 1 result is left then auto select this entry
-                                            var d = (_a = _this.filteredData) !== null && _a !== void 0 ? _a : _this.options.data;
-                                            if (d.length === 1) {
-                                                focus_1 = d[0];
-                                            }
-                                        }
-                                        if (_this.options.multiple) {
-                                            if (focus_1 != null) {
-                                                var currentSelection = _this.component.getSelected();
-                                                if (currentSelection.indexOf(focus_1) >= 0) {
-                                                    currentSelection.splice(currentSelection.indexOf(focus_1), 1);
-                                                }
-                                                else {
-                                                    currentSelection.push(focus_1);
-                                                }
-                                                _this.component.setSelected(currentSelection);
-                                            }
-                                        }
-                                        else {
-                                            if (focus_1 != null) {
-                                                _this.component.setSelected(focus_1);
-                                            }
-                                            node.dom.blur();
-                                        }
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.TAB_KEY) {
-                                        e.preventDefault();
-                                        node.dom.blur();
-                                    }
-                                }
-                            }
-                        }
-                    ]
-                },
-                new VirtualRenderComponent({
-                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""),
-                    data: data,
-                    style: this.options.enableSearch ? "height:calc(100% - 1.8rem)" : "height:100%",
-                    viewportSizeInPX: this.args.renderHeight + 20,
-                    bufferSizeInPx: 20,
-                    renderRow: function (args) {
-                        var result = { tag: "div", attr: { class: "sel-dd-item" } };
-                        if (_this.options.groupProperty && args.rowData.__isGroup) {
-                            result.attr.class += " sel-dd-group";
-                            var groupValue = args.rowData.__groupValue;
-                            var groupArgs = {
-                                groupValue: groupValue,
-                                node: result
-                            };
-                            var resGroup = _this.options.onRenderGroup(groupArgs);
-                            if (resGroup != null) {
-                                result.children = [resGroup];
-                            }
-                            result.attr.mousedown = function (evt) {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                                evt.stopImmediatePropagation();
-                            };
-                            return result;
-                        }
-                        var renderArg = {
-                            data: args.rowData,
-                            node: result,
-                            isFocused: _this.component.getFocus() === args.rowData,
-                            isSelected: _this.options.multiple ?
-                                _this.component.getSelected().indexOf(args.rowData) >= 0 :
-                                _this.component.getSelected() === args.rowData,
-                            isCurrent: false
-                        };
-                        if (renderArg.isFocused) {
-                            result.attr.class += " focused";
-                        }
-                        if (renderArg.isSelected) {
-                            result.attr.class += " selected";
-                        }
-                        result.attr.mousedown = function (evt) {
-                            if (_this.options.multiple) {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                                evt.stopImmediatePropagation();
-                                var currentSelection = _this.component.getSelected();
-                                if (currentSelection.indexOf(args.rowData) >= 0) {
-                                    currentSelection.splice(currentSelection.indexOf(args.rowData), 1);
-                                    _this.component.setSelected(currentSelection);
-                                }
-                                else {
-                                    _this.component.setSelected(args.rowData);
-                                }
-                            }
-                            else {
-                                _this.component.setSelected(args.rowData);
-                            }
-                        };
-                        var res = _this.options.onRender(renderArg);
-                        if (res != null) {
-                            result.children = [res];
-                        }
-                        return result;
-                    },
-                    rowHeight: this.options.rowHeight
-                })
-            ]
-        };
-        return ddNode;
-    };
-    SelectDDAreaComponent.prototype.navigateDown = function () {
-        var _a, _b, _c;
-        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
-        if (selItem == null) {
-            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
-            return;
-        }
-        if (Array.isArray(selItem)) {
-            selItem = selItem[0];
-        }
-        var idx = d.indexOf(selItem);
-        if (idx < 0) {
-            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
-        }
-        else {
-            while (idx < d.length - 1) {
-                idx++;
-                if (!d[idx].__isGroup) {
-                    this.component.setFocus(d[idx]);
-                    this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-                    break;
-                }
-            }
-        }
-    };
-    SelectDDAreaComponent.prototype.navigateUp = function () {
-        var _a, _b, _c;
-        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
-        if (selItem == null) {
-            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
-            return;
-        }
-        if (Array.isArray(selItem)) {
-            selItem = selItem[0];
-        }
-        var idx = d.indexOf(selItem);
-        while (idx > 0) {
-            idx--;
-            if (!d[idx].__isGroup) {
-                this.component.setFocus(d[idx]);
-                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-                return;
-            }
-        }
-        this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
-    };
-    SelectDDAreaComponent.prototype.search = function (term) {
-        var _this = this;
-        var _a, _b, _c, _d;
-        var oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        this.filteredData = this.options.data.filter(function (d) { return _this.options.matchSearch(d, term); });
-        var newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
-        if (oldLen !== newLen && this.scrollContainer != null) {
-            this.scrollContainer.scrollTop = 0;
-        }
-        this.focusFirst();
-    };
-    SelectDDAreaComponent.prototype.clearSearch = function () {
-        this.filteredData = null;
-        this.focusFirst();
-    };
-    SelectDDAreaComponent.prototype.focusFirst = function () {
-        var _a;
-        if (this.options.focusFirstItem && (this.component.getSelected() == null || this.component.getSelected().length === 0)) /* TODO multiselect */ {
-            this.component.setFocus(((_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data)[0]);
-        }
-    };
-    SelectDDAreaComponent.ESCAPE_KEY = 27;
-    SelectDDAreaComponent.DOWN_KEY = 40;
-    SelectDDAreaComponent.UP_KEY = 38;
-    SelectDDAreaComponent.ENTER_KEY = 13;
-    SelectDDAreaComponent.TAB_KEY = 9;
-    return SelectDDAreaComponent;
-}());
-export { SelectDDAreaComponent };
+import { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
+import { EventHandler } from "../../interaction/eventhandler";
+function isInternetExplorer() {
+    return window.navigator.userAgent.indexOf("MSIE ") > 0 || !!window.navigator.userAgent.match(/Trident.*rv\:11\./);
+}
+export class SelectDDAreaComponent {
+    constructor(options, component, args) {
+        this.options = options;
+        this.component = component;
+        this.args = args;
+        this.onRender = new EventHandler();
+        this.isScrolling = false;
+        if (args.searchTxt) {
+            this.search(args.searchTxt);
+        }
+        this.focusFirst();
+    }
+    onCreate(node) {
+        var _a, _b;
+        this.dom = node.dom;
+        this.scrollContainer = this.dom.querySelector(".sel-dd-items");
+        let item = this.component.getSelected();
+        if (item != null) {
+            if (Array.isArray(item)) {
+                item = item[0];
+            }
+            if (item != null) {
+                const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+                const idx = d.indexOf(item);
+                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+            }
+        }
+        //bugfix for IE -> blur event of search box is called when user clicks scroll bar
+        if (isInternetExplorer()) {
+            this.scrollContainer.addEventListener("scroll", (e) => {
+                this.isScrolling = true;
+                setTimeout(() => {
+                    this.isScrolling = false;
+                    this.dom.querySelector(".sel-search input").focus();
+                }, 20);
+            });
+            this.scrollContainer.addEventListener("mousedown", (e) => {
+                if (e.offsetX > this.scrollContainer.clientWidth || e.offsetY > this.scrollContainer.clientHeight) {
+                    this.isScrolling = true;
+                    setTimeout(() => {
+                        this.isScrolling = false;
+                        this.dom.querySelector(".sel-search input").focus();
+                    }, 20);
+                }
+            });
+        }
+    }
+    render() {
+        var _a;
+        let data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
+        if (this.options.groupProperty != null) {
+            const sortedData = [...data];
+            sortedData.sort((a, b) => {
+                return a[this.options.groupProperty] < b[this.options.groupProperty] ? -1
+                    : a[this.options.groupProperty] > b[this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
+                    );
+            });
+            data = [];
+            let prevGroupVal = NaN;
+            for (const x of sortedData) {
+                if (x[this.options.groupProperty] !== prevGroupVal) {
+                    // create group entry
+                    data.push({ __isGroup: true, __groupValue: x[this.options.groupProperty] });
+                    prevGroupVal = x[this.options.groupProperty];
+                }
+                data.push(x);
+            }
+        }
+        this.onRender.notify(data);
+        this.renderedData = data;
+        const ddNode = {
+            tag: "div", animation: this.options.enableAnimation ? { attr: "opacity", from: "0", to: "1", duration: 400 } : undefined,
+            children: [
+                {
+                    tag: "div", attr: { class: "sel-search", style: this.options.enableSearch ? undefined : "height:0;padding:0;margin:0;border:none;" },
+                    children: [
+                        {
+                            tag: "input",
+                            attr: {
+                                type: "text", value: this.args.searchTxt, placeholder: "Search", blur: (e) => {
+                                    e.preventDefault();
+                                    if (isInternetExplorer()) {
+                                        requestAnimationFrame(() => {
+                                            if (!this.isScrolling) {
+                                                this.component.close();
+                                            }
+                                        });
+                                    }
+                                    else {
+                                        this.component.close();
+                                    }
+                                    return false;
+                                },
+                                input: (e, node) => {
+                                    if (!this.options.enableSearch) {
+                                        return false;
+                                    }
+                                    const term = node.dom.value;
+                                    if (!term) {
+                                        this.clearSearch();
+                                    }
+                                    else {
+                                        this.search(term);
+                                    }
+                                }, keydown: (e, node) => {
+                                    var _a;
+                                    if (!this.options.enableKeyboard) {
+                                        return;
+                                    }
+                                    if (e.which === SelectDDAreaComponent.ESCAPE_KEY) {
+                                        node.dom.blur();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.DOWN_KEY) {
+                                        this.navigateDown();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.UP_KEY) {
+                                        this.navigateUp();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.ENTER_KEY) { // TODO: multiselect
+                                        let focus = this.component.getFocus();
+                                        if (focus == null) {
+                                            // if only 1 result is left then auto select this entry
+                                            const d = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
+                                            if (d.length === 1) {
+                                                focus = d[0];
+                                            }
+                                        }
+                                        if (this.options.multiple) {
+                                            if (focus != null) {
+                                                const currentSelection = this.component.getSelected();
+                                                if (currentSelection.indexOf(focus) >= 0) {
+                                                    currentSelection.splice(currentSelection.indexOf(focus), 1);
+                                                }
+                                                else {
+                                                    currentSelection.push(focus);
+                                                }
+                                                this.component.setSelected(currentSelection);
+                                            }
+                                        }
+                                        else {
+                                            if (focus != null) {
+                                                this.component.setSelected(focus);
+                                            }
+                                            node.dom.blur();
+                                        }
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.TAB_KEY) {
+                                        e.preventDefault();
+                                        node.dom.blur();
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+                new VirtualRenderComponent({
+                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""), data,
+                    style: this.options.enableSearch ? "height:calc(100% - 1.8rem)" : "height:100%",
+                    viewportSizeInPX: this.args.renderHeight + 20,
+                    bufferSizeInPx: 20,
+                    renderRow: (args) => {
+                        const result = { tag: "div", attr: { class: "sel-dd-item" } };
+                        if (this.options.groupProperty && args.rowData.__isGroup) {
+                            result.attr.class += " sel-dd-group";
+                            const groupValue = args.rowData.__groupValue;
+                            const groupArgs = {
+                                groupValue, node: result
+                            };
+                            const resGroup = this.options.onRenderGroup(groupArgs);
+                            if (resGroup != null) {
+                                result.children = [resGroup];
+                            }
+                            result.attr.mousedown = (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                evt.stopImmediatePropagation();
+                            };
+                            return result;
+                        }
+                        const renderArg = {
+                            data: args.rowData,
+                            node: result,
+                            isFocused: this.component.getFocus() === args.rowData,
+                            isSelected: this.options.multiple ?
+                                this.component.getSelected().indexOf(args.rowData) >= 0 :
+                                this.component.getSelected() === args.rowData,
+                            isCurrent: false
+                        };
+                        if (renderArg.isFocused) {
+                            result.attr.class += " focused";
+                        }
+                        if (renderArg.isSelected) {
+                            result.attr.class += " selected";
+                        }
+                        result.attr.mousedown = (evt) => {
+                            if (this.options.multiple) {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                evt.stopImmediatePropagation();
+                                const currentSelection = this.component.getSelected();
+                                if (currentSelection.indexOf(args.rowData) >= 0) {
+                                    currentSelection.splice(currentSelection.indexOf(args.rowData), 1);
+                                    this.component.setSelected(currentSelection);
+                                }
+                                else {
+                                    this.component.setSelected(args.rowData);
+                                }
+                            }
+                            else {
+                                this.component.setSelected(args.rowData);
+                            }
+                        };
+                        const res = this.options.onRender(renderArg);
+                        if (res != null) {
+                            result.children = [res];
+                        }
+                        return result;
+                    },
+                    rowHeight: this.options.rowHeight
+                })
+            ]
+        };
+        return ddNode;
+    }
+    navigateDown() {
+        var _a, _b, _c;
+        const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        let selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
+        if (selItem == null) {
+            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+            return;
+        }
+        if (Array.isArray(selItem)) {
+            selItem = selItem[0];
+        }
+        let idx = d.indexOf(selItem);
+        if (idx < 0) {
+            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+        }
+        else {
+            while (idx < d.length - 1) {
+                idx++;
+                if (!d[idx].__isGroup) {
+                    this.component.setFocus(d[idx]);
+                    this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                    break;
+                }
+            }
+        }
+    }
+    navigateUp() {
+        var _a, _b, _c;
+        const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        let selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
+        if (selItem == null) {
+            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+            return;
+        }
+        if (Array.isArray(selItem)) {
+            selItem = selItem[0];
+        }
+        let idx = d.indexOf(selItem);
+        while (idx > 0) {
+            idx--;
+            if (!d[idx].__isGroup) {
+                this.component.setFocus(d[idx]);
+                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                return;
+            }
+        }
+        this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+    }
+    search(term) {
+        var _a, _b, _c, _d;
+        const oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        this.filteredData = this.options.data.filter((d) => this.options.matchSearch(d, term));
+        const newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+        if (oldLen !== newLen && this.scrollContainer != null) {
+            this.scrollContainer.scrollTop = 0;
+        }
+        this.focusFirst();
+    }
+    clearSearch() {
+        this.filteredData = null;
+        this.focusFirst();
+    }
+    focusFirst() {
+        var _a;
+        if (this.options.focusFirstItem && (this.component.getSelected() == null || this.component.getSelected().length === 0)) /* TODO multiselect */ {
+            this.component.setFocus(((_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data)[0]);
+        }
+    }
+}
+SelectDDAreaComponent.ESCAPE_KEY = 27;
+SelectDDAreaComponent.DOWN_KEY = 40;
+SelectDDAreaComponent.UP_KEY = 38;
+SelectDDAreaComponent.ENTER_KEY = 13;
+SelectDDAreaComponent.TAB_KEY = 9;