jsl-ui 9.18.3 → 9.19.0

package/lib/grid/slick.groupitemmetadataprovider.d.ts

@@ -0,0 +1,39 @@
+/***
+ * Provides item metadata for group (Slick.Group) and totals (Slick.Totals) rows produced by the DataView.
+ * This metadata overrides the default behavior and formatting of those rows so that they appear and function
+ * correctly when processed by the grid.
+ *
+ * This class also acts as a grid plugin providing event handlers to expand & collapse groups.
+ * If "grid.registerPlugin(...)" is not called, expand & collapse will not work.
+ *
+ * @class GroupItemMetadataProvider
+ * @module Data
+ * @namespace Slick.Data
+ * @constructor
+ * @param options
+ */
+export declare function GroupItemMetadataProvider(options?: any): {
+    init: (grid: any) => void;
+    destroy: () => void;
+    getGroupRowMetadata: (item: any) => {
+        selectable: boolean;
+        focusable: any;
+        cssClasses: any;
+        columns: {
+            0: {
+                colspan: string;
+                formatter: any;
+                editor: any;
+            };
+        };
+        height: any;
+    };
+    getTotalsRowMetadata: (item: any) => {
+        selectable: boolean;
+        focusable: any;
+        cssClasses: any;
+        formatter: any;
+        editor: any;
+        height: any;
+    };
+};

package/lib/grid/slick.groupitemmetadataprovider.js

@@ -0,0 +1,165 @@
+import { jQueryReplacement } from "../core/jq";
+import { Slick } from "./slick.core";
+var $ = jQueryReplacement;
+$.deepExtend(Slick, {
+    Data: {
+        GroupItemMetadataProvider: GroupItemMetadataProvider
+    }
+});
+/***
+ * Provides item metadata for group (Slick.Group) and totals (Slick.Totals) rows produced by the DataView.
+ * This metadata overrides the default behavior and formatting of those rows so that they appear and function
+ * correctly when processed by the grid.
+ *
+ * This class also acts as a grid plugin providing event handlers to expand & collapse groups.
+ * If "grid.registerPlugin(...)" is not called, expand & collapse will not work.
+ *
+ * @class GroupItemMetadataProvider
+ * @module Data
+ * @namespace Slick.Data
+ * @constructor
+ * @param options
+ */
+export function GroupItemMetadataProvider(options) {
+    var _grid;
+    var _defaults = {
+        checkboxSelect: false,
+        checkboxSelectCssClass: "slick-group-select-checkbox",
+        checkboxSelectPlugin: null,
+        groupCssClass: "slick-group",
+        groupTitleCssClass: "slick-group-title",
+        totalsCssClass: "slick-group-totals",
+        groupFocusable: true,
+        totalsFocusable: false,
+        toggleCssClass: "slick-group-toggle",
+        toggleExpandedCssClass: "expanded",
+        toggleCollapsedCssClass: "collapsed",
+        enableExpandCollapse: true,
+        groupFormatter: defaultGroupCellFormatter,
+        totalsFormatter: defaultTotalsCellFormatter
+    };
+    options = $.deepExtend({}, _defaults, options);
+    function defaultGroupCellFormatter(row, cell, value, columnDef, item, grid) {
+        if (!options.enableExpandCollapse) {
+            return item.title;
+        }
+        var indentation = item.level * 15 + "px";
+        return (options.checkboxSelect ? '<span class="' + options.checkboxSelectCssClass +
+            ' ' + (item.selectChecked ? 'checked' : 'unchecked') + '"></span>' : '') +
+            "<span class='" + options.toggleCssClass + " " +
+            (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
+            "' style='margin-left:" + indentation + "'>" +
+            "</span>" +
+            "<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
+            item.title +
+            "</span>";
+    }
+    function defaultTotalsCellFormatter(row, cell, value, columnDef, item, grid) {
+        var formatter_res;
+        if (columnDef.groupTotalsFormatter) {
+            formatter_res = columnDef.groupTotalsFormatter(item, columnDef, grid) || "";
+        }
+        else {
+            var res = (item.avg && item.avg[columnDef.field])
+                || (item.sum && item.sum[columnDef.field])
+                || (item.max && item.max[columnDef.field])
+                || (item.min && item.min[columnDef.field]);
+            formatter_res = (columnDef.formatter ? columnDef.formatter(row, cell, res, columnDef, item) : "");
+        }
+        return formatter_res;
+        //return (Object.prototype.toString.call(formatter_res) !== '[object Object]' ? (<string>formatter_res) : (<ISlickFormatterResult>formatter_res).text);
+    }
+    function init(grid) {
+        _grid = grid;
+        _grid.onClick.subscribe(handleGridClick);
+        _grid.onKeyDown.subscribe(handleGridKeyDown);
+    }
+    function destroy() {
+        if (_grid) {
+            _grid.onClick.unsubscribe(handleGridClick);
+            _grid.onKeyDown.unsubscribe(handleGridKeyDown);
+        }
+    }
+    function handleGridClick(e, args) {
+        var $target = $(e.target);
+        var item = this.getDataItem(args.row);
+        if (item && item instanceof Slick.Group && $target.hasClass(options.toggleCssClass)) {
+            var range = _grid.getRenderedRange();
+            this.dataView.setRefreshHints({
+                ignoreDiffsBefore: range.top,
+                ignoreDiffsAfter: range.bottom + 1
+            });
+            if (item.collapsed) {
+                this.dataView.expandGroup(item.groupingKey);
+            }
+            else {
+                this.dataView.collapseGroup(item.groupingKey);
+            }
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+        if (item && item instanceof Slick.Group && $target.hasClass(options.checkboxSelectCssClass)) {
+            item.selectChecked = !item.selectChecked;
+            $target.removeClass((item.selectChecked ? "unchecked" : "checked"));
+            $target.addClass((item.selectChecked ? "checked" : "unchecked"));
+            // get rowIndexes array
+            var rowIndexes = _grid.dataView.mapItemsToRows(item.rows);
+            (item.selectChecked ? options.checkboxSelectPlugin.selectRows : options.checkboxSelectPlugin.deSelectRows)(rowIndexes);
+        }
+    }
+    // TODO:  add -/+ handling
+    function handleGridKeyDown(e, args) {
+        if (options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE)) {
+            var activeCell = this.getActiveCell();
+            if (activeCell) {
+                var item = this.getDataItem(activeCell.row);
+                if (item && item instanceof Slick.Group) {
+                    var range = _grid.getRenderedRange();
+                    this.dataView.setRefreshHints({
+                        ignoreDiffsBefore: range.top,
+                        ignoreDiffsAfter: range.bottom + 1
+                    });
+                    if (item.collapsed) {
+                        this.dataView.expandGroup(item.groupingKey);
+                    }
+                    else {
+                        this.dataView.collapseGroup(item.groupingKey);
+                    }
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                }
+            }
+        }
+    }
+    function getGroupRowMetadata(item) {
+        return {
+            selectable: false,
+            focusable: options.groupFocusable,
+            cssClasses: options.groupCssClass,
+            columns: {
+                0: {
+                    colspan: "*",
+                    formatter: options.groupFormatter,
+                    editor: null
+                }
+            },
+            height: options.calcGroupHeight ? options.calcGroupHeight(item) : undefined
+        };
+    }
+    function getTotalsRowMetadata(item) {
+        return {
+            selectable: false,
+            focusable: options.totalsFocusable,
+            cssClasses: options.totalsCssClass,
+            formatter: options.totalsFormatter,
+            editor: null,
+            height: options.calcTotalsHeight ? options.calcTotalsHeight(item) : undefined
+        };
+    }
+    return {
+        "init": init,
+        "destroy": destroy,
+        "getGroupRowMetadata": getGroupRowMetadata,
+        "getTotalsRowMetadata": getTotalsRowMetadata
+    };
+}

package/lib/grid/slick.tree.css

@@ -0,0 +1,20 @@
+.slick-cell .jsl-toggle {
+    color: #888888;
+    /* font-size: 0.8em; */
+    width: 1.2em;
+    box-sizing: border-box;
+    display: inline-block;
+    cursor: pointer;
+    height: 100%;
+}
+
+.slick-cell .jsl-toggle-spacer {
+    min-width: 1.2em;
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+.slick-cell .jsl-indent {
+    display: inline-block;
+    position: relative;
+}

package/lib/grid/slick.tree.d.ts

@@ -0,0 +1,33 @@
+import "./slick.tree.css";
+import { IJSLGrid } from "./slick.creator";
+import { ISlickFormatter } from "./slick.core";
+export interface IGridTreeOptions {
+    parentColumn: string;
+    indentInRem?: number;
+    enableCollapsing?: boolean;
+    hiddenStateField?: string;
+    collapsedStateField?: string;
+    expandIconHTML?: string;
+    collapseIconHTML?: string;
+}
+export declare let IndentFormatter: ISlickFormatter;
+export declare class GridTree<T> {
+    private grid;
+    private primaryKey;
+    private options;
+    constructor(grid: IJSLGrid<T>, o: IGridTreeOptions);
+    getOptions(): IGridTreeOptions;
+    getLevel(item: T): number;
+    getParent(item: T): T;
+    hasChildren(item: T): boolean;
+    getDirectChildren(item: T): T[];
+    getAllChildren(item: T): T[];
+    rowHasChildren(row: number): boolean;
+    toggleExpand(item: T): void;
+    expand(item: T): void;
+    indent(rows: T[]): void;
+    outdent(rows: T[]): void;
+    filterChildren(rows: T[]): T[];
+    collapse(item: T): void;
+    private initEvents;
+}

package/lib/grid/slick.tree.js

@@ -0,0 +1,220 @@
+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 "./slick.tree.css";
+export var IndentFormatter = function (row, cell, value, columnDef, dataContext, grid) {
+    var result = "";
+    var hierachy = grid._hierachy;
+    if (hierachy != null) {
+        var options = hierachy.getOptions();
+        var level = hierachy.getLevel(dataContext);
+        if (level > 0) {
+            result += "<span class='jsl-indent' style='min-width:" + (level * hierachy.getOptions().indentInRem) + "rem;'></span>";
+        }
+        if (options.enableCollapsing) {
+            var hasChildren = hierachy.hasChildren(dataContext);
+            if (hasChildren) {
+                if (dataContext[options.collapsedStateField]) {
+                    result += "<span class='jsl-toggle'>" + options.expandIconHTML + "</span>";
+                }
+                else {
+                    result += "<span class='jsl-toggle'>" + options.collapseIconHTML + "</span>";
+                }
+            }
+            else {
+                result += "<span class='jsl-toggle-spacer'></span>";
+            }
+        }
+    }
+    if (value != null) {
+        result += (value + "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+    return result;
+};
+var GridTree = /** @class */ (function () {
+    function GridTree(grid, o) {
+        this.grid = grid;
+        this.options = __assign({
+            enableCollapsing: true,
+            indentInRem: 1,
+            hiddenStateField: "_hidden_by_h",
+            collapsedStateField: "_callapsed",
+            expandIconHTML: "▶",
+            collapseIconHTML: "▼" // "˅"
+        }, o);
+        this.primaryKey = this.grid.getOptions().primaryKey;
+        grid._hierachy = this;
+        grid.refresh();
+        this.initEvents();
+    }
+    GridTree.prototype.getOptions = function () {
+        return this.options;
+    };
+    GridTree.prototype.getLevel = function (item) {
+        var level = 0;
+        var parent = this.getParent(item);
+        while (parent != null) {
+            parent = this.getParent(parent);
+            level++;
+        }
+        return level;
+    };
+    GridTree.prototype.getParent = function (item) {
+        return this.grid.dataView.getItemById(item[this.options.parentColumn]);
+    };
+    GridTree.prototype.hasChildren = function (item) {
+        return this.rowHasChildren(this.grid.dataView.getIdxByItem(item));
+    };
+    GridTree.prototype.getDirectChildren = function (item) {
+        var id = item[this.primaryKey];
+        var result = [];
+        var data = this.grid.getData();
+        for (var i = 0; i < data.length; i++) {
+            var pid = data[i][this.options.parentColumn];
+            if (pid === id) {
+                result.push(data[i]);
+            }
+        }
+        return result;
+    };
+    GridTree.prototype.getAllChildren = function (item) {
+        var parentid = item[this.primaryKey];
+        var result = [];
+        var data = this.grid.getData();
+        for (var i = 0; i < data.length; i++) {
+            if (data[i][this.options.parentColumn] === parentid) {
+                result.push(data[i]);
+                result.push.apply(result, this.getAllChildren(data[i]));
+            }
+        }
+        return result;
+    };
+    GridTree.prototype.rowHasChildren = function (row) {
+        var data = this.grid.getData();
+        if (data.length > row + 1) {
+            return data[row + 1][this.options.parentColumn] === data[row][this.primaryKey];
+        }
+        return false;
+    };
+    GridTree.prototype.toggleExpand = function (item) {
+        if (item[this.options.collapsedStateField]) {
+            this.expand(item);
+        }
+        else {
+            this.collapse(item);
+        }
+    };
+    GridTree.prototype.expand = function (item) {
+        item[this.options.collapsedStateField] = false;
+        var data = this.grid.getData();
+        var i = this.grid.dataView.getIdxByItem(item);
+        while (i < data.length) {
+            data[i][this.options.hiddenStateField] = false;
+            if (this.rowHasChildren(i)) {
+                if (data[i][this.options.collapsedStateField]) {
+                    //skip children
+                    i += this.getAllChildren(data[i]).length;
+                }
+            }
+            i++;
+        }
+        this.grid.refreshData();
+    };
+    GridTree.prototype.indent = function (rows) {
+        var realRows = this.filterChildren(rows);
+        var data = this.grid.getData();
+        //get indexes of rows
+        var indexes = [];
+        for (var i = 0; i < realRows.length; i++) {
+            indexes.push(this.grid.dataView.getIdxByItem(realRows[i]));
+        }
+        //sort indexes
+        indexes.sort(function (a, b) { return a > b ? 1 : (a < b ? -1 : 0); });
+        //change parents to indent rows
+        for (var i = 0; i < indexes.length; i++) {
+            var rowIdx = indexes[i];
+            var parentID = data[rowIdx][this.options.parentColumn];
+            for (var tmp = rowIdx - 1; tmp >= 0; tmp--) {
+                if (data[tmp][this.options.parentColumn] === parentID) {
+                    data[rowIdx][this.options.parentColumn] = data[tmp][this.primaryKey];
+                    break;
+                }
+            }
+        }
+        this.grid.refreshData();
+    };
+    GridTree.prototype.outdent = function (rows) {
+        var rows2 = this.filterChildren(rows);
+        var data = this.grid.getData();
+        for (var i = 0; i < rows2.length; i++) {
+            var row = rows2[i];
+            var oldparent = row[this.options.parentColumn];
+            if (oldparent) {
+                var newparent = data[this.grid.dataView.getIdxById(oldparent)][this.options.parentColumn];
+                row[this.options.parentColumn] = newparent;
+                //make all subsequent items with same ParentID have current row as new parentid
+                var idx = this.grid.dataView.getIdxById(row[this.primaryKey]);
+                while (++idx < data.length) {
+                    if (data[idx][this.options.parentColumn] === oldparent) {
+                        data[idx][this.options.parentColumn] = row[this.primaryKey];
+                    }
+                    //TODO: optimize -> break sooner
+                }
+            }
+        }
+        this.grid.refreshData();
+    };
+    GridTree.prototype.filterChildren = function (rows) {
+        var result = [];
+        var dict = {};
+        for (var i = 0; i < rows.length; i++) {
+            dict[rows[i][this.primaryKey]] = true;
+        }
+        for (var i = 0; i < rows.length; i++) {
+            var row = rows[i];
+            var parentid = row[this.options.parentColumn];
+            if (!parentid || !dict[parentid]) {
+                result.push(row);
+            }
+        }
+        return result;
+    };
+    GridTree.prototype.collapse = function (item) {
+        item[this.options.collapsedStateField] = true;
+        var children = this.getAllChildren(item);
+        for (var i = 0; i < children.length; i++) {
+            children[i][this.options.hiddenStateField] = true;
+        }
+        this.grid.refreshData();
+    };
+    GridTree.prototype.initEvents = function () {
+        var _this = this;
+        // collapse / expand click events
+        if (this.options.enableCollapsing) {
+            this.grid.onClick.subscribe(function (e, args) {
+                if (e.target.classList.contains("jsl-toggle")) {
+                    e.stopImmediatePropagation();
+                    _this.toggleExpand(_this.grid.dataView.getItem(args.row));
+                }
+            });
+        }
+        // filters
+        var hiddenFilter = {
+            field: this.options.hiddenStateField,
+            match: function (itm, field) {
+                return !itm[_this.options.hiddenStateField];
+            }
+        };
+        this.grid.addFilter(hiddenFilter);
+    };
+    return GridTree;
+}());
+export { GridTree };

package/lib/grid.d.ts

@@ -0,0 +1,13 @@
+export * from "./grid/slick.core";
+export * from "./grid/slick.creator";
+export * from "./grid/slick.dataview";
+export * from "./grid/slick.editors.core";
+export * from "./grid/slick.formatters";
+export * from "./grid/slick.grid";
+export * from "./grid/slick.groupitemmetadataprovider";
+export * from "./grid/slick.tree";
+export * from "./grid/plugins/slick.cellrangedecorator";
+export * from "./grid/plugins/slick.cellrangeselector";
+export * from "./grid/plugins/slick.cellselectionmodel";
+export * from "./grid/plugins/slick.headermenu";
+export * from "./grid/plugins/slick.rowselectionmodel";

package/lib/grid.js

@@ -0,0 +1,13 @@
+export * from "./grid/slick.core";
+export * from "./grid/slick.creator";
+export * from "./grid/slick.dataview";
+export * from "./grid/slick.editors.core";
+export * from "./grid/slick.formatters";
+export * from "./grid/slick.grid";
+export * from "./grid/slick.groupitemmetadataprovider";
+export * from "./grid/slick.tree";
+export * from "./grid/plugins/slick.cellrangedecorator";
+export * from "./grid/plugins/slick.cellrangeselector";
+export * from "./grid/plugins/slick.cellselectionmodel";
+export * from "./grid/plugins/slick.headermenu";
+export * from "./grid/plugins/slick.rowselectionmodel";