jsl-ui 9.18.2 → 9.18.3

package/lib/components/select/SelectComponent.js

@@ -1,362 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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 {};