jsl-ui 9.18.2 → 9.18.3

package/lib/components/select/SelectDDAreaComponent.js

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

package/lib/components/select/SelectStyle.scss

@@ -1,187 +0,0 @@
-.select-comp {
-    border: solid 1px #bdbdbd;
-    border-radius: 0.2rem;
-    position: relative;
-    min-width: 8rem;
-    display: inline-block;
-    box-sizing: border-box;
-    padding-left: 0.2rem;
-    height: 1.6rem;
-    line-height: 1.6rem;
-    vertical-align: middle;
-
-    &.expanded {
-        border-color: #3B99FF;
-    }
-
-    &.disabled {
-        color:#999999;
-    }
-
-    .sel-result {
-
-        .clear-btn {
-            position: absolute;
-            right: 1.2rem;
-            top: 0;
-            font-size: 1.4rem;
-            line-height: 1.4rem;
-            font-weight: bold;
-            color: #999999;
-            font-family: sans-serif;
-            cursor: pointer;
-            opacity: 0.3;
-            z-index: 10;
-            border: none;
-            background: none;
-
-            &:not([disabled]):hover {
-                color:#d00000;
-            }
-        }
-
-        &:hover .clear-btn:not([disabled]) {
-            opacity: 1;
-        }
-    }
-
-    .sel-expander {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 1.5rem;
-        box-sizing: border-box;
-        border: none;
-        // border-left: solid 2px #bdbdbd;
-        // border-bottom-left-radius: 3px;
-        // border-top-left-radius: 3px;
-        text-align: center;
-        border-bottom-right-radius: 0.2rem;
-        border-top-right-radius: 0.2rem;
-        background: white;
-        opacity: 0.7;
-        cursor: pointer;
-        font-size: 0.65em;
-
-        &:focus {
-            outline:0;
-            color: white;
-            background: #3b9aff;
-        }
-    }
-
-    .sel-expander::before {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 2px;
-        bottom: 2px;
-        width: 0;
-        box-sizing: content-box;
-        padding: 0;
-        margin: 0;
-        border-left: solid 1px #bdbdbd;
-        // box-shadow: -1px 0px 1px 1px #f0f0f0;
-    }
-
-    .sel-dd-item {
-        overflow: hidden;
-        display: block;
-        height: 100%;
-        margin-right: 2.6rem;
-        white-space: nowrap;
-    }
-    
-    &:hover .sel-expander {
-        opacity: 1;
-        background: #dadada;
-    }
-}
-
-.sel-comp-dd {
-    position: absolute;
-    // overflow: hidden;
-    box-sizing: border-box;
-    background: white;
-    z-index:2010;
-
-    > div {
-        position: absolute;
-        top: 0; left: 0; right: 0; bottom: 0;
-        box-sizing: border-box;
-        border: solid 1px #bcbcbc;
-        border-radius: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        cursor: pointer;
-    }
-
-    .sel-search {
-        height: 1.8rem;
-        padding: 0.1rem;
-        overflow: hidden;
-        box-sizing: border-box;
-    }
-
-    .sel-search > input {
-        height: 1.6rem;
-        line-height: 1.6rem;
-        border: none;
-        border-bottom: 2px solid #c8c8c8;
-        margin: 0 2px;
-        width: calc(100% - 4px);
-        box-sizing: border-box;
-        
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .sel-dd-item:not(.sel-dd-group) {
-        &:hover {
-            background: #d0d0d0;
-        }
-    }
-
-    .sel-dd-items {
-
-        .focused {
-            background: #CCE8FF;
-        }
-        .selected {
-            background: #3B99FF;
-        }
-    }
-
-    .sel-dd-items.multiple {
-        .sel-dd-item {
-            padding-left: 1rem;
-        }
-        .sel-dd-item.selected {
-            // padding-left: 0;
-            &::before {
-                content: "✓";
-                position: absolute;
-                color: #404040;
-                font-weight: bold;
-                left: 0;
-            }
-        }
-    }
-
-    .sel-dd-item {
-        height: 100%;
-        line-height: 26px;
-    }
-
-    .sel-dd-group {
-        font-weight: bold;
-        background: #e0e0e0;
-        text-align: center;
-        // &:hover {
-        //     background: #d0d0d0;
-        // }
-    }
-}