jsl-ui 9.18.3 → 9.19.0

package/lib/grid/filterDialogs/excelFilter.js

@@ -0,0 +1,313 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { UILang } from "../../core/lang";
+import { helper } from "../../core/helper";
+import { Dialog } from "../../ui/dialog";
+import { VirtualRenderComponent } from "../../components/virtual-render/VirtualRenderComponent";
+import { JSLRender } from "jsl-render";
+var ExcelFilter = /** @class */ (function () {
+    function ExcelFilter(grid) {
+        this.grid = grid;
+    }
+    ExcelFilter.convertRemToPixels = function (rem) {
+        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    };
+    ExcelFilter.prototype.show = function (col) {
+        return __awaiter(this, void 0, void 0, function () {
+            var values, filters, currentFilters, mode, filterOptions, oldCheckedValues, _i, currentFilters_1, f, dlg, dlgBody, id, search, cbAllContainer, cbAll, cbAllLabel, sortedValues, _a, values_1, x, o, visibleValues, checkedValues, cbContainer, rowHeight, height, vr, renderer, dlgObj, dlgOkButton, dlgCancelButton, dlgClearButton;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        filters = this.grid.getFilters();
+                        currentFilters = filters.filter(function (f) { return f.columnId === col.id; });
+                        mode = this.grid.getOptions().mode;
+                        filterOptions = this.grid.getOptions().getFilterValues;
+                        if (!(filterOptions == null)) return [3 /*break*/, 1];
+                        if (mode === "client") {
+                            // remove any filters for this column
+                            if (currentFilters.length > 0) {
+                                this.grid.clearFilter(col.id);
+                            }
+                            values = this.getDistinctValues(col);
+                        }
+                        else {
+                            throw new Error("getFilterValues option has to be set when filter mode = server");
+                        }
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, filterOptions(col)];
+                    case 2:
+                        values = _b.sent();
+                        _b.label = 3;
+                    case 3:
+                        oldCheckedValues = {};
+                        if (currentFilters.length > 0) {
+                            for (_i = 0, currentFilters_1 = currentFilters; _i < currentFilters_1.length; _i++) {
+                                f = currentFilters_1[_i];
+                                if (f._checkedValues) {
+                                    oldCheckedValues = f._checkedValues;
+                                }
+                                if (mode === "client") {
+                                    filters.push(f);
+                                }
+                            }
+                            if (mode === "client") {
+                                this.grid.refreshFilters();
+                            }
+                        }
+                        dlg = document.createElement("div");
+                        dlg.classList.add("jsl-dialog-overlay");
+                        dlg.innerHTML = '<div class="jsl-dialog" style="width:50vw;min-height:50vh;"><div class="dlg-header">' + UILang.grid.Filter + '</div><div class="dlg-body" style="max-height:calc(100vh - 7.5rem)"></div>' +
+                            '<div class="dlg-footer">' +
+                            '<button class="jsl-button ok-button">' + UILang.core.Ok + "</button>" +
+                            (currentFilters.length > 0 ? ('<button class="jsl-button clear-button">' + UILang.grid.ClearFilter + '</button>') : "") +
+                            '<button class="jsl-button close-button">' + UILang.core.Cancel + "</button>" +
+                            "</div></div>";
+                        dlgBody = dlg.querySelector(".dlg-body");
+                        id = helper.newDomGuid();
+                        search = document.createElement("div");
+                        search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
+                        dlgBody.appendChild(search);
+                        cbAllContainer = document.createElement("div");
+                        cbAll = document.createElement("input");
+                        cbAll.type = "checkbox";
+                        cbAll.id = id;
+                        cbAllContainer.appendChild(cbAll);
+                        cbAllLabel = document.createElement("label");
+                        cbAllLabel.setAttribute("for", id);
+                        cbAllLabel.textContent = UILang.core.All;
+                        cbAllLabel.style.cursor = "pointer";
+                        cbAllLabel.style.marginLeft = "0.2rem";
+                        cbAllContainer.appendChild(cbAllLabel);
+                        dlgBody.appendChild(cbAllContainer);
+                        sortedValues = [];
+                        if (Array.isArray(values)) {
+                            for (_a = 0, values_1 = values; _a < values_1.length; _a++) {
+                                x = values_1[_a];
+                                sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
+                            }
+                        }
+                        else {
+                            for (o in values) {
+                                if (values.hasOwnProperty(o)) {
+                                    sortedValues.push({ id: values[o], txt: o !== null && o !== void 0 ? o : "" });
+                                }
+                            }
+                        }
+                        // TODO: use custom comparer when available
+                        sortedValues.sort(function (a, b) { return a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0); });
+                        visibleValues = sortedValues;
+                        checkedValues = __assign({}, oldCheckedValues);
+                        cbContainer = document.createElement("div");
+                        dlgBody.appendChild(cbContainer);
+                        rowHeight = Math.round(ExcelFilter.convertRemToPixels(1.4));
+                        height = sortedValues.length * rowHeight;
+                        height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
+                        vr = new VirtualRenderComponent({
+                            data: visibleValues,
+                            renderRow: function (args) {
+                                args.container.attr.style["padding-left"] = "1rem";
+                                args.container.children.push({
+                                    tag: "input",
+                                    attr: {
+                                        id: id + "_" + args.index,
+                                        checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
+                                        change: function (_, node) {
+                                            if (node.dom.checked) {
+                                                for (var _i = 0, _a = args.rowData.id; _i < _a.length; _i++) {
+                                                    var selId = _a[_i];
+                                                    checkedValues[selId] = true;
+                                                }
+                                            }
+                                            else {
+                                                for (var _b = 0, _c = args.rowData.id; _b < _c.length; _b++) {
+                                                    var selId = _c[_b];
+                                                    delete checkedValues[selId];
+                                                }
+                                            }
+                                            // check if all values or none are checked
+                                            var allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
+                                            var allCb = dlgBody.querySelector("#" + id);
+                                            allCb.checked = allChecked;
+                                        },
+                                        type: "checkbox"
+                                    }
+                                });
+                                args.container.children.push({
+                                    tag: "label",
+                                    attr: {
+                                        for: id + "_" + args.index,
+                                        style: "margin-left:0.2rem;cursor:pointer"
+                                    },
+                                    raw: true,
+                                    content: args.rowData.txt
+                                });
+                            },
+                            rowHeight: rowHeight,
+                            style: "height:" + height + "px"
+                        });
+                        renderer = new JSLRender(cbContainer, false);
+                        renderer.render(vr);
+                        search.addEventListener("input", function (evt) {
+                            var _a;
+                            var term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
+                            if (term) {
+                                visibleValues = sortedValues.filter(function (x) { var _a; return ((_a = x.txt) !== null && _a !== void 0 ? _a : "").toLowerCase().indexOf(term) >= 0; });
+                            }
+                            else {
+                                visibleValues = sortedValues;
+                            }
+                            vr.setData(visibleValues);
+                            renderer.refresh();
+                        });
+                        cbAll.addEventListener("change", function () {
+                            for (var i = 0; i < visibleValues.length; i++) {
+                                // if (cbAll.checked) {
+                                //     checkedValues[visibleValues[i].id] = true;
+                                // } else {
+                                //     delete checkedValues[visibleValues[i].id];
+                                // }
+                                if (cbAll.checked) {
+                                    for (var _i = 0, _a = visibleValues[i].id; _i < _a.length; _i++) {
+                                        var selId = _a[_i];
+                                        checkedValues[selId] = true;
+                                    }
+                                }
+                                else {
+                                    for (var _b = 0, _c = visibleValues[i].id; _b < _c.length; _b++) {
+                                        var selId = _c[_b];
+                                        delete checkedValues[selId];
+                                    }
+                                }
+                            }
+                            renderer.refresh();
+                        });
+                        document.body.appendChild(dlg);
+                        dlgObj = Dialog(dlg, {
+                            autoOpen: true, onClose: function () {
+                                dlg.innerHTML = "";
+                                dlg.parentElement.removeChild(dlg);
+                            }
+                        });
+                        dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
+                        dlgOkButton.addEventListener("click", function (evt) {
+                            var selLength = Object.getOwnPropertyNames(checkedValues).length;
+                            var allChecked = selLength === sortedValues.length;
+                            var anyChecked = selLength > 0;
+                            _this.grid.clearFilter(col.id, true);
+                            if (!allChecked && anyChecked) {
+                                // something (but not everything) was selected -> filter
+                                var filterObject = {
+                                    field: col.field, columnId: col.id, match: mode === "server" ? function () { return true; } : function (item, field) {
+                                        return !!checkedValues[_this.grid.getDataItemValueForColumn(item, col)];
+                                    }
+                                };
+                                filterObject._checkedValues = checkedValues;
+                                _this.grid.addFilter(filterObject, true);
+                            }
+                            _this.grid.refreshFilters();
+                            dlgObj.close();
+                        });
+                        dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
+                        dlgCancelButton.addEventListener("click", function (evt) {
+                            dlgObj.close();
+                        });
+                        dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
+                        if (dlgClearButton != null) {
+                            dlgClearButton.addEventListener("click", function (evt) {
+                                _this.grid.clearFilter(col.id);
+                                dlgObj.close();
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
+    //     let counter = 0;
+    //     let el: HTMLInputElement;
+    //     const allCb: HTMLInputElement = dlgBody.querySelector("#" + id) as HTMLInputElement;
+    //     // tslint:disable-next-line: no-conditional-assignment
+    //     while (null != (el = dlgBody.querySelector("#" + id + "_" + counter) as HTMLInputElement)) {
+    //         if (el.parentElement.style.display !== "none" && !el.checked) {
+    //             allCb.checked = false;
+    //             return;
+    //         }
+    //         counter++;
+    //     }
+    //     allCb.checked = true;
+    // }
+    // private checkAllVisibleBoxes(el: HTMLElement, state: boolean) {
+    //     const checkboxes = el.querySelectorAll("input");
+    //     for (let i = 0; i < checkboxes.length; i++) {
+    //         if (checkboxes[i].type === "checkbox" &&
+    //             checkboxes[i].parentElement.style.display !== "none") {
+    //             checkboxes[i].checked = state;
+    //         }
+    //     }
+    // }
+    ExcelFilter.prototype.getDistinctValues = function (col) {
+        var textToValues = {};
+        for (var idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
+            var item = this.grid.getDataItem(idx);
+            var value = this.grid.getDataItemValueForColumn(item, col);
+            var text = this.grid.getFormattedValue(col, value, item);
+            var valueList = textToValues[text];
+            if (valueList == null) {
+                valueList = textToValues[text] = [];
+            }
+            if (valueList.indexOf(value) < 0) {
+                valueList.push(value);
+            }
+        }
+        return textToValues;
+    };
+    return ExcelFilter;
+}());
+export { ExcelFilter };

package/lib/grid/plugins/ext.overlay.css

@@ -0,0 +1,28 @@
+
+.header-overlay {
+    background-color: #217346;
+}
+
+.cell-overlay,
+.selection-cell-overlay {
+    display: block;
+    position: absolute;
+    z-index: 20;
+    background-color: #217346;
+}
+
+.handle-overlay {
+    border: 1px solid white;
+    padding: 3px;
+    background-color: #217346;
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    z-index: 20;
+    cursor: crosshair;
+}
+
+.overlay-handle-decorator {
+    border: 2px solid #217346;
+    z-index: 20;
+}

package/lib/grid/plugins/ext.overlay.d.ts

@@ -0,0 +1,2 @@
+import "./ext.overlay.css";
+export declare function Overlays(options: any): void;

package/lib/grid/plugins/ext.overlay.js

@@ -0,0 +1,291 @@
+import "./ext.overlay.css";
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+import { Moveable } from "../../interaction/moveable";
+import { EventHandler } from "../../interaction/eventhandler";
+var selectinOverlayWidth = 1;
+var $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Ext": {
+        "Plugins": {
+            "Overlays": Overlays
+        }
+    }
+});
+export function Overlays(options) {
+    var $headerOverlay;
+    var $rowOverlay;
+    var selectionOverlay;
+    var currentColumn;
+    var handleDragging;
+    var grid;
+    var self = this;
+    var handler = new Slick.EventHandler();
+    var dragDecorator;
+    var defaults = {
+        buttonCssClass: null,
+        buttonImage: "../images/down.gif",
+        decoratorWidth: 2
+    };
+    function init(g) {
+        options = $.deepExtend({}, defaults, options);
+        grid = g;
+        dragDecorator = overlayRangeDecorator(grid);
+        $headerOverlay = createRowHeaderOverlay(100);
+        $rowOverlay = createRowHeaderOverlay(100);
+        selectionOverlay = createSelectionOverlay();
+        handler.subscribe(grid.onActiveCellChanged, activeCellChanged)
+            .subscribe(grid.onColumnsResized, columnResized)
+            .subscribe(grid.onScroll, gridScrolled);
+    }
+    function destroy() {
+        handler.unsubscribeAll();
+    }
+    function createRowHeaderOverlay(zIndex) {
+        return $(document.createElement("div"))
+            .addClass("header-overlay")
+            .css("position", "absolute")
+            .css("z-index", zIndex)
+            .appendTo(grid.getContainerNode());
+    }
+    function createSelectionOverlay() {
+        var canvas = grid.getCanvasNode();
+        var overlay = new Overlay(canvas, true);
+        return overlay;
+    }
+    function activeCellChanged(e, args) {
+        dragDecorator.hide();
+        moveSelectionOverlay(e, args);
+        moveHeaderRowOverlays(e, args);
+    }
+    function columnResized(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function gridScrolled(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function moveHeaderRowOverlays(e, args) {
+        if (typeof args.cell != 'undefined') {
+            currentColumn = args.cell;
+        }
+        else {
+            if (!currentColumn) {
+                return;
+            }
+        }
+        if (!grid.getActiveCell()) {
+            $rowOverlay.css("display", "none");
+            return;
+        }
+        $rowOverlay.css("display", "");
+        var headerHeight = grid.getContainerNode().querySelector('.slick-header').getBoundingClientRect().height;
+        var cellPosition = grid.getActiveCellPosition();
+        var gridPosition = grid.getGridPosition();
+        $rowOverlay.css("display", cellPosition.visible ? "" : "none");
+        $headerOverlay.css("display", cellPosition.visible ? "" : "none");
+        var headerWidth = cellPosition.width;
+        $headerOverlay.css("left", (cellPosition.left - gridPosition.left) + "px").css("top", (headerHeight - 2) + "px").css("width", headerWidth + "px").css("height", "2px");
+        $rowOverlay.css("left", "0px").css("top", (cellPosition.top - gridPosition.top) + "px").css("width", "2px").css("height", cellPosition.height + "px");
+    }
+    function moveSelectionOverlay(e, args) {
+        var activeCell = grid.getActiveCell();
+        if (!activeCell) {
+            selectionOverlay.toggle(false);
+            return;
+        }
+        var column = grid.getColumns()[activeCell.cell];
+        selectionOverlay.toggle(true);
+        // Only show the handle if the cell is editable
+        selectionOverlay.handle.style.display = (column.editor != null && !column.readonly && grid.getOptions().editable) ? "" : "none";
+        var position = grid.getCellNodeBox(activeCell.row, activeCell.cell);
+        // Not coming through on the property so re-calculated
+        position.height = position.bottom - position.top;
+        position.width = position.right - position.left;
+        selectionOverlay.$left.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$right.css({
+            left: (position.left + position.width) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$top.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top - selectinOverlayWidth) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        selectionOverlay.$bottom.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top + position.height) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        selectionOverlay.handle.style.left = (position.left + position.width - 4) + "px";
+        selectionOverlay.handle.style.top = (position.top + position.height - 4) + "px";
+        // console.log("row: " + activeCell.row + " - cell: "+ activeCell.cell);
+        // console.log("container: " + grid.getCanvasNode(activeCell.row, activeCell.cell).className);
+        selectionOverlay.moveToContainer(grid.getCanvasNode(activeCell.cell, activeCell.row));
+    }
+    var dd_range;
+    function handleOverlayDragStart(e) {
+        var cell = grid.getActiveCell();
+        if (grid.canCellBeSelected(cell.row, cell.cell)) {
+            handleDragging = true;
+        }
+        if (!handleDragging) {
+            e.cancelEvent();
+            return null;
+        }
+        grid.focus();
+        dd_range = { start: cell, end: {} };
+        return dragDecorator.show(new Slick.Range(cell.row, cell.cell));
+    }
+    function handleOverlayDrag(e) {
+        if (!handleDragging) {
+            return;
+        }
+        var end = {
+            cell: dd_range.start.cell, row: grid.getCellFromPoint(0, e.y /* + grid.getCanvasNode().scrollTop*/).row - 1
+        };
+        if (!grid.canCellBeSelected(end.row, end.cell)) {
+            e.cancelEvent(); // ?
+            return;
+        }
+        dd_range.end = end;
+        dragDecorator.show(new Slick.Range(dd_range.start.row, dd_range.start.cell, end.row, dd_range.start.cell));
+    }
+    function handleOverlayDragEnd(e) {
+        if (!handleDragging) {
+            return;
+        }
+        handleDragging = false;
+        selectionOverlay.handle.style.display = "none";
+        self.onFillUpDown.notify({ "grid": grid, "range": dragDecorator.getSelectedRange(), direction: dd_range.end.row >= dd_range.start.row ? "down" : "up" }, e, self);
+    }
+    function Overlay(target, withHandel, prefix) {
+        var className = (prefix || '') + 'cell-overlay';
+        this.$left = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('left')
+            .appendTo(target);
+        this.$right = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('right')
+            .appendTo(target);
+        this.$top = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('top')
+            .appendTo(target);
+        this.$bottom = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('bottom')
+            .appendTo(target);
+        if (withHandel) {
+            this.handle = document.createElement("div");
+            this.handle.classList.add("handle-overlay");
+            target.appendChild(this.handle);
+            var gridContainer = target.closest(".slickgrid");
+            var viewports = gridContainer.querySelectorAll(".grid-canvas");
+            for (var idx = 0; idx < viewports.length; idx++) {
+                console.log(idx);
+                Moveable(viewports[idx], {
+                    selector: ".handle-overlay",
+                    direction: "y",
+                    gridY: grid.getOptions().rowHeight,
+                    containInParent: false,
+                    onStart: EventHandler.Create(function (e) {
+                        handleOverlayDragStart(e);
+                    }),
+                    onMove: EventHandler.Create(function (e) {
+                        handleOverlayDrag(e);
+                    }),
+                    onStop: EventHandler.Create(function (e) {
+                        handleOverlayDragEnd(e);
+                    })
+                });
+            }
+        }
+        this.moveToContainer = function (container) {
+            this.$left.appendTo(container);
+            this.$right.appendTo(container);
+            this.$top.appendTo(container);
+            this.$bottom.appendTo(container);
+            if (this.handle) {
+                $(this.handle).appendTo(container);
+            }
+        };
+        this.toggle = function (showOrHide) {
+            this.$left.css("display", showOrHide ? "" : "none");
+            this.$right.css("display", showOrHide ? "" : "none");
+            this.$top.css("display", showOrHide ? "" : "none");
+            this.$bottom.css("display", showOrHide ? "" : "none");
+            if (this.handle) {
+                this.handle.style.display = showOrHide ? "" : "none";
+            }
+        };
+    }
+    function overlayRangeDecorator(targetGrid) {
+        var decorator;
+        var r;
+        function show(range) {
+            r = range;
+            if (!decorator) {
+                decorator = new Overlay(grid.getCanvasNode(range.fromCell, range.fromRow), false, 'selection-');
+            }
+            var from = targetGrid.getCellNodeBox(range.fromRow, range.fromCell);
+            var to = targetGrid.getCellNodeBox(range.toRow, range.toCell);
+            decorator.$left.css({
+                top: from.top - 2,
+                left: from.left - 2,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$right.css({
+                top: from.top - 2,
+                left: to.right - 1,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$top.css({
+                top: from.top - 2,
+                left: to.left - 1,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 2
+            });
+            decorator.$bottom.css({
+                top: to.bottom - 1,
+                left: from.left - 2,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 3
+            });
+            return decorator;
+        }
+        function getSelectedRange() {
+            return r;
+        }
+        function hide() {
+            if (decorator) {
+                decorator.toggle(false);
+                decorator = null;
+            }
+        }
+        return {
+            hide: hide,
+            show: show,
+            getSelectedRange: getSelectedRange
+        };
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "onFillUpDown": new Slick.Event()
+    });
+}

package/lib/grid/plugins/slick.cellrangedecorator.d.ts

@@ -0,0 +1,12 @@
+/***
+ * Displays an overlay on top of a given cell range.
+ *
+ * TODO:
+ * Currently, it blocks mouse events to DOM nodes behind it.
+ * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
+ * Could also construct the borders separately using 4 individual DIVs.
+ *
+ * @param {Grid} grid
+ * @param {Object} options
+ */
+export declare function CellRangeDecorator(grid: any, options: any): void;