jsl-ui 9.28.2 → 9.28.4

package/lib/grid/filterDialogs/excelFilter.js

@@ -1,277 +1,213 @@
-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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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 (g && (g = 0, op[0] && (_ = 0)), _) 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) {
+export class ExcelFilter {
+    static convertRemToPixels(rem) {
+        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    constructor(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 : "" });
+    async show(col) {
+        let values;
+        const filters = this.grid.getFilters();
+        const currentFilters = filters.filter((f) => f.columnId === col.id);
+        const mode = this.grid.getOptions().mode;
+        const filterOptions = this.grid.getOptions().getFilterValues;
+        if (filterOptions == null) {
+            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");
+            }
+        }
+        else {
+            values = await filterOptions(col);
+        }
+        let oldCheckedValues = {};
+        if (currentFilters.length > 0) {
+            for (const f of currentFilters) {
+                if (f._checkedValues) {
+                    oldCheckedValues = f._checkedValues;
+                }
+                if (mode === "client") {
+                    filters.push(f);
+                }
+            }
+            if (mode === "client") {
+                this.grid.refreshFilters();
+            }
+        }
+        const 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>";
+        const dlgBody = dlg.querySelector(".dlg-body");
+        const id = helper.newDomGuid();
+        const search = document.createElement("div");
+        search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
+        dlgBody.appendChild(search);
+        const cbAllContainer = document.createElement("div");
+        const cbAll = document.createElement("input");
+        cbAll.type = "checkbox";
+        cbAll.id = id;
+        cbAllContainer.appendChild(cbAll);
+        const 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);
+        const sortedValues = [];
+        if (Array.isArray(values)) {
+            for (const x of values) {
+                sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
+            }
+        }
+        else {
+            for (const 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((a, b) => a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0));
+        let visibleValues = sortedValues;
+        const checkedValues = { ...oldCheckedValues };
+        const cbContainer = document.createElement("div");
+        dlgBody.appendChild(cbContainer);
+        const rowHeight = /*this.grid.getOptions().rowHeight ||*/ Math.round(ExcelFilter.convertRemToPixels(1.5));
+        let height = sortedValues.length * rowHeight;
+        height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
+        const vr = new VirtualRenderComponent({
+            data: visibleValues,
+            renderRow: (args) => {
+                args.container.attr.style["padding-left"] = "1rem";
+                args.container.attr.style["overflow"] = "hidden";
+                args.container.attr.style["display"] = "flex";
+                args.container.attr.style["align-items"] = "center";
+                args.container.children.push({
+                    tag: "input",
+                    attr: {
+                        id: id + "_" + args.index,
+                        checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
+                        change: (_, node) => {
+                            if (node.dom.checked) {
+                                for (const selId of args.rowData.id) {
+                                    checkedValues[selId] = true;
                                 }
                             }
-                        }
-                        // 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.5));
-                        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.attr.style["overflow"] = "hidden";
-                                args.container.attr.style["display"] = "flex";
-                                args.container.attr.style["align-items"] = "center";
-                                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];
-                                    }
+                                for (const selId of args.rowData.id) {
+                                    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*/];
+                            // check if all values or none are checked
+                            const allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
+                            const 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,
+            style: "height:" + height + "px"
+        });
+        const renderer = new JSLRender(cbContainer, false);
+        renderer.render(vr);
+        search.addEventListener("input", (evt) => {
+            var _a;
+            const term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
+            if (term) {
+                visibleValues = sortedValues.filter((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", () => {
+            for (let i = 0; i < visibleValues.length; i++) {
+                // if (cbAll.checked) {
+                //     checkedValues[visibleValues[i].id] = true;
+                // } else {
+                //     delete checkedValues[visibleValues[i].id];
+                // }
+                if (cbAll.checked) {
+                    for (const selId of visibleValues[i].id) {
+                        checkedValues[selId] = true;
+                    }
                 }
-            });
+                else {
+                    for (const selId of visibleValues[i].id) {
+                        delete checkedValues[selId];
+                    }
+                }
+            }
+            renderer.refresh();
+        });
+        document.body.appendChild(dlg);
+        const dlgObj = Dialog(dlg, {
+            autoOpen: true, onClose: () => {
+                dlg.innerHTML = "";
+                dlg.parentElement.removeChild(dlg);
+            }
+        });
+        const dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
+        dlgOkButton.addEventListener("click", (evt) => {
+            const selLength = Object.getOwnPropertyNames(checkedValues).length;
+            const allChecked = selLength === sortedValues.length;
+            const anyChecked = selLength > 0;
+            this.grid.clearFilter(col.id, true);
+            if (!allChecked && anyChecked) {
+                // something (but not everything) was selected -> filter
+                const filterObject = {
+                    field: col.field, columnId: col.id, match: mode === "server" ? () => true : (item, field) => {
+                        return !!checkedValues[this.grid.getDataItemValueForColumn(item, col)];
+                    }
+                };
+                filterObject._checkedValues = checkedValues;
+                this.grid.addFilter(filterObject, true);
+            }
+            this.grid.refreshFilters();
+            dlgObj.close();
+        });
+        const dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
+        dlgCancelButton.addEventListener("click", (evt) => {
+            dlgObj.close();
         });
-    };
+        const dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
+        if (dlgClearButton != null) {
+            dlgClearButton.addEventListener("click", (evt) => {
+                this.grid.clearFilter(col.id);
+                dlgObj.close();
+            });
+        }
+    }
     // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
     //     let counter = 0;
     //     let el: HTMLInputElement;
@@ -295,13 +231,13 @@ var ExcelFilter = /** @class */ (function () {
     //         }
     //     }
     // }
-    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];
+    getDistinctValues(col) {
+        const textToValues = {};
+        for (let idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
+            const item = this.grid.getDataItem(idx);
+            const value = this.grid.getDataItemValueForColumn(item, col);
+            const text = this.grid.getFormattedValue(col, value, item);
+            let valueList = textToValues[text];
             if (valueList == null) {
                 valueList = textToValues[text] = [];
             }
@@ -310,7 +246,5 @@ var ExcelFilter = /** @class */ (function () {
             }
         }
         return textToValues;
-    };
-    return ExcelFilter;
-}());
-export { ExcelFilter };
+    }
+}

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

@@ -3,8 +3,8 @@ 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;
+const selectinOverlayWidth = 1;
+let $ = jQueryReplacement;
 // register namespace
 $.deepExtend(window, {
     "Ext": {
@@ -140,7 +140,7 @@ export function Overlays(options) {
         if (grid.canCellBeSelected(cell.row, cell.cell)) {
             handleDragging = true;
         }
-        var column = grid.getColumns()[cell.cell];
+        const column = grid.getColumns()[cell.cell];
         if (column.editor == null || column.readonly || !grid.getOptions().editable) {
             handleDragging = false;
         }
@@ -196,22 +196,22 @@ export function Overlays(options) {
             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++) {
+            const gridContainer = target.closest(".slickgrid");
+            const viewports = gridContainer.querySelectorAll(".grid-canvas");
+            for (let 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) {
+                    onStart: EventHandler.Create((e) => {
                         handleOverlayDragStart(e);
                     }),
-                    onMove: EventHandler.Create(function (e) {
+                    onMove: EventHandler.Create((e) => {
                         handleOverlayDrag(e);
                     }),
-                    onStop: EventHandler.Create(function (e) {
+                    onStop: EventHandler.Create((e) => {
                         handleOverlayDragEnd(e);
                     })
                 });

package/lib/grid/plugins/slick.cellrangedecorator.js

@@ -1,6 +1,6 @@
 import { jQueryReplacement } from '../../core/jq';
 import { Slick } from '../slick.core';
-var $ = jQueryReplacement;
+let $ = jQueryReplacement;
 // register namespace
 $.deepExtend(Slick, {
     "CellRangeDecorator": CellRangeDecorator
@@ -39,7 +39,7 @@ export function CellRangeDecorator(grid, options) {
                 .css("position", "absolute")
                 .appendTo(grid.getActiveCanvasNode());
             if (options.selectionCss) {
-                for (var key in options.selectionCss) {
+                for (let key in options.selectionCss) {
                     _elem.css(key, options.selectionCss[key]);
                 }
             }

package/lib/grid/plugins/slick.cellrangeselector.js

@@ -1,7 +1,7 @@
 import { jQueryReplacement } from '../../core/jq';
 import { Slick, Range } from '../slick.core';
 import { CellRangeDecorator } from './slick.cellrangedecorator';
-var $ = jQueryReplacement;
+let $ = jQueryReplacement;
 // register namespace
 $.deepExtend(window, {
     "Slick": {

package/lib/grid/plugins/slick.cellselectionmodel.js

@@ -1,7 +1,7 @@
 import { jQueryReplacement } from '../../core/jq';
 import { Slick, Range } from '../slick.core';
 import { CellRangeSelector } from './slick.cellrangeselector';
-var $ = jQueryReplacement;
+let $ = jQueryReplacement;
 // register namespace
 $.deepExtend(window, {
     "Slick": {
@@ -76,7 +76,7 @@ export function CellSelectionModel(options) {
             return;
         }
         // if range has not changed, don't fire onSelectedRangesChanged
-        var rangeHasChanged = !rangesAreEqual(_ranges, ranges);
+        const rangeHasChanged = !rangesAreEqual(_ranges, ranges);
         _ranges = removeInvalidRanges(ranges);
         if (rangeHasChanged) {
             _self.onSelectedRangesChanged.notify(_ranges);
@@ -95,24 +95,24 @@ export function CellSelectionModel(options) {
         _grid.setActiveCell(args.range.fromRow, args.range.fromCell, false, false, true);
         setSelectedRanges([args.range]);
     }
-    var lastActiveCell;
+    let lastActiveCell;
     function handleActiveCellChange(e, args) {
         if (_options.selectActiveCell && args.row != null && args.cell != null) {
-            var metaKey = e.ctrlKey || e.metaKey;
+            const metaKey = e.ctrlKey || e.metaKey;
             if (metaKey) {
-                var ranges = getSelectedRanges().slice();
+                const ranges = getSelectedRanges().slice();
                 ranges.push(new Range(args.row, args.cell));
                 setSelectedRanges(ranges);
                 lastActiveCell = { row: args.row, cell: args.cell };
             }
             else if (e.shiftKey) {
-                var ranges = getSelectedRanges().slice();
+                const ranges = getSelectedRanges().slice();
                 if (ranges.length > 0) {
-                    var currentRange = ranges.pop();
+                    const currentRange = ranges.pop();
                     if (lastActiveCell == null) {
                         lastActiveCell = { row: currentRange.fromRow, cell: currentRange.fromCell };
                     }
-                    var newRange = new Range(Math.min(lastActiveCell.row, args.row), Math.min(lastActiveCell.cell, args.cell), Math.max(lastActiveCell.row, args.row), Math.max(lastActiveCell.cell, args.cell));
+                    const newRange = new Range(Math.min(lastActiveCell.row, args.row), Math.min(lastActiveCell.cell, args.cell), Math.max(lastActiveCell.row, args.row), Math.max(lastActiveCell.cell, args.cell));
                     ranges.push(newRange);
                 }
                 else {