jsl-ui 9.18.3 → 9.18.4

package/lib/components/select/SelectComponent.js

@@ -0,0 +1,362 @@
+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;
+        var _a;
+        this.expanded = false;
+        this.doNotFocus = false;
+        var defaultOptions = {
+            data: undefined,
+            keyColumn: "value",
+            textColumn: "text",
+            dropdownHeight: "10rem",
+            dropDirection: "auto",
+            enableSearch: true,
+            enableAnimation: true,
+            enableKeyboard: true,
+            rowHeight: 28,
+            allowEmpty: true,
+            enabled: true,
+            openOnEnter: true,
+            focusFirstItem: true,
+            autoShrink: true,
+            bindMode: "toModel",
+            onAppend: function (dom) {
+                document.body.appendChild(dom);
+            },
+            onRenderGroup: function (args) {
+                args.node.content = args.groupValue;
+            },
+            onRender: o.multiple ? function (args) {
+                if (args.isCurrent) {
+                    args.node.content = args.data.map(function (d) { return d[_this.options.textColumn]; }).join(", ");
+                }
+                else {
+                    args.node.content = args.data[_this.options.textColumn];
+                }
+            } : function (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); }
+        };
+        this.options = __assign(__assign({}, 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) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.setValue(this.options.value);
+    }
+    SelectComponent.prototype.render = function () {
+        var _this = this;
+        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) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property];
+            if (value_1 != null) {
+                if (this.options.multiple) {
+                    this.selected = this.options.data.filter(function (x) { return value_1.indexOf(x[_this.options.keyColumn]) >= 0; });
+                }
+                else {
+                    this.selected = this.options.data.filter(function (x) { return x[_this.options.keyColumn] === value_1; })[0];
+                }
+            }
+            else {
+                this.selected = this.options.multiple ? [] : null;
+            }
+        }
+        return {
+            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) {
+                    return;
+                } {
+                    _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) {
+                                if (e.which === SelectComponent.ENTER_KEY) {
+                                    _this.toggle();
+                                }
+                                else if (!_this.expanded) {
+                                    if (e.key && e.key.length === 1) {
+                                        _this.show(e.key);
+                                    }
+                                }
+                            }
+                        }, focus: function (e) {
+                            if (!_this.doNotFocus && _this.options.openOnFocus && _this.options.enabled) {
+                                _this.toggle();
+                            }
+                            if (_this.doNotFocus) {
+                                _this.doNotFocus = false;
+                            }
+                        }
+                    }, content: this.expanded ? "▲" : "▼"
+                }]
+        };
+    };
+    SelectComponent.prototype.onCreate = function (node) {
+        this.dom = node.dom;
+    };
+    SelectComponent.prototype.onUpdate = function (node) {
+        this.dom = node.dom;
+    };
+    SelectComponent.prototype.onInit = function (renderer) {
+        this.renderer = renderer;
+    };
+    SelectComponent.prototype.toggle = function () {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.show();
+        }
+        else {
+            this.close();
+        }
+    };
+    SelectComponent.prototype.isExpanded = function () {
+        return this.expanded;
+    };
+    SelectComponent.prototype.show = function (searchTxt) {
+        var _this = this;
+        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);
+        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");
+        this.dropdownArea.style.height = this.options.dropdownHeight;
+        this.dropdownArea.style.left = left + "px";
+        if (this.options.dropDirection === "up") {
+            this.dropdownArea.style.top = "calc(" + top + "px - " + this.options.dropdownHeight + ")";
+            this.dropdownArea.classList.add("sel-comp-dd-up");
+        }
+        else {
+            this.dropdownArea.style.top = Math.round(top + dimension.height) + "px";
+            this.dropdownArea.classList.add("sel-comp-dd-down");
+        }
+        this.options.onAppend(this.dropdownArea);
+        var ddDimension = this.dropdownArea.getBoundingClientRect();
+        if (this.options.dropDirection === "auto") {
+            // check if there is enought room for dropdown at bottom
+            if (ddDimension.bottom > window.innerHeight) {
+                // position "up"
+                this.dropdownArea.style.top = "calc(" + Math.round(top) + "px - " + this.options.dropdownHeight + ")";
+                this.dropdownArea.classList.add("sel-comp-dd-up");
+                this.dropdownArea.classList.remove("sel-comp-dd-down");
+            }
+        }
+        var ddAreaComp = new SelectDDAreaComponent(this.options, this, {
+            renderHeight: ddDimension.height - 2,
+            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 + ")";
+                }
+                else {
+                    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 + "))";
+                }
+            });
+        }
+        new JSLRender(this.dropdownArea, false).render(ddAreaComp);
+        requestAnimationFrame(function () {
+            var 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");
+        if (x != null && x.parentElement != null) {
+            try {
+                x.parentElement.removeChild(x);
+            }
+            catch (ex) {
+                // under certain conditions the child may not be in the parentElements child collection anymore, although the child node still has that element as its parent (e.g. blur event handler) - weird JavaScript stuff eh
+            }
+        }
+        this.expanded = false;
+    };
+    SelectComponent.prototype.close = function () {
+        var _a;
+        this.expanded = false;
+        this.focused = null;
+        this.doNotFocus = true;
+        try {
+            if (((_a = this.dropdownArea) === null || _a === void 0 ? void 0 : _a.parentElement) != null) {
+                this.dropdownArea.parentElement.removeChild(this.dropdownArea);
+            }
+            if (this.renderer != null) {
+                this.renderer.refresh();
+            }
+            this.dom.querySelector(".sel-expander").focus();
+        }
+        catch (e) {
+            // https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node
+        }
+    };
+    SelectComponent.prototype.setFocus = function (item) {
+        this.focused = item;
+    };
+    SelectComponent.prototype.getFocus = function () {
+        return this.focused;
+    };
+    SelectComponent.prototype.getValue = function () {
+        var _this = this;
+        if (this.selected == null) {
+            return null;
+        }
+        if (this.options.multiple) {
+            return this.selected.map(function (itm) { return itm[_this.options.keyColumn]; });
+        }
+        else {
+            return this.selected[this.options.keyColumn];
+        }
+    };
+    SelectComponent.prototype.setValue = function (value) {
+        var _this = this;
+        if (value != null) {
+            if (this.options.multiple) {
+                this.selected = this.options.data.filter(function (x) { return value.indexOf(x[_this.options.keyColumn]) >= 0; });
+            }
+            else {
+                this.selected = this.options.data.filter(function (x) { return x[_this.options.keyColumn] === value; })[0];
+            }
+        }
+        else {
+            this.selected = this.options.multiple ? [] : null;
+        }
+        if (this.renderer != null) {
+            this.renderer.refresh();
+        }
+    };
+    SelectComponent.prototype.getSelected = function () {
+        return this.selected;
+    };
+    SelectComponent.prototype.setSelected = function (item) {
+        var _a;
+        if (this.options.multiple) {
+            if (item == null) {
+                this.selected = [];
+            }
+            else {
+                if (Array.isArray(item)) {
+                    this.selected = item;
+                }
+                else {
+                    this.selected.push(item);
+                }
+            }
+        }
+        else {
+            this.selected = item;
+        }
+        var 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;
+        }
+        if (this.options.onChange != null) {
+            this.options.onChange.notify(value, this.selected);
+        }
+        this.renderer.refresh();
+    };
+    SelectComponent.prototype.focus = function () {
+        var _this = this;
+        var _a;
+        if (this.dom == null) {
+            requestAnimationFrame(function () {
+                var _a;
+                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 () {
+        if (this.options.multiple) {
+            return this.selected.length > 0;
+        }
+        return this.selected != null;
+    };
+    SelectComponent.prototype.renderSelection = function () {
+        var _this = this;
+        var node;
+        if (this.hasSelection()) {
+            node = { tag: "div", attr: { class: "sel-dd-item" } };
+            var res = this.options.onRender({
+                isSelected: true,
+                isCurrent: true,
+                isFocused: false,
+                data: this.selected,
+                node: node
+            });
+            if (res != null) {
+                node.children = [res];
+            }
+        }
+        var 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) {
+                            return;
+                        }
+                        e.stopImmediatePropagation();
+                        _this.setSelected(null);
+                    },
+                    click: function (e) {
+                        _this.setSelected(null);
+                    }
+                }
+            };
+        }
+        return {
+            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 };

package/lib/components/select/SelectDDAreaComponent.d.ts

@@ -0,0 +1,32 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { ISelectComponentOptions, SelectComponent } from "./SelectComponent";
+import { EventHandler } from "../../interaction/eventhandler";
+interface IDDArguments {
+    renderHeight: number;
+    searchTxt: string;
+}
+export declare class SelectDDAreaComponent implements IJSLComponent {
+    private options;
+    private component;
+    private args;
+    private static ESCAPE_KEY;
+    private static DOWN_KEY;
+    private static UP_KEY;
+    private static ENTER_KEY;
+    private static TAB_KEY;
+    onRender: EventHandler<any[], void>;
+    private filteredData;
+    private renderedData;
+    private dom;
+    private scrollContainer;
+    private isScrolling;
+    constructor(options: ISelectComponentOptions<any>, component: SelectComponent, args: IDDArguments);
+    onCreate(node: IJSLVNode): void;
+    render(): IJSLVNode;
+    navigateDown(): void;
+    navigateUp(): void;
+    search(term: string): void;
+    clearSearch(): void;
+    private focusFirst;
+}
+export {};