@datorama/core 21.3.1-rc.5 → 21.4.0-rc.11

package/bundles/datorama-core.umd.js

@@ -1383,6 +1383,17 @@
         if (n === void 0) { n = 1; }
         return array.filter(function (e, index) { return index >= n; });
     }
+    /**
+     * Compares 2 array and return whether their inner values are the same,
+     * without considering their order
+     */
+    function isArrayValuesEqual(arrA, arrB) {
+        if (arrA === void 0) { arrA = []; }
+        if (arrB === void 0) { arrB = []; }
+        var aInb = arrA.every(function (valA) { return arrB.find(function (valB) { return valB === valA; }); });
+        var bIna = arrB.every(function (valB) { return arrA.find(function (valA) { return valA === valB; }); });
+        return aInb && bIna && arrA.length === arrB.length;
+    }
 
     function toBoolean(value, includeZero) {
         if (includeZero === void 0) { includeZero = false; }
@@ -11446,6 +11457,25 @@
             return sizeMap;
         }, {});
     }
+    /**
+     * Take pivoted value field if pivot column,
+     * or field of the colDef,
+     * or group field form showRowGroup if its agg column
+     */
+    function getColField(colDef) {
+        var field = colDef.field, showRowGroup = colDef.showRowGroup, pivotValueColumn = colDef.pivotValueColumn;
+        return pivotValueColumn ? pivotValueColumn.getColId() : field || showRowGroup;
+    }
+    function tryParsePivotValue(str) {
+        var value;
+        try {
+            value = JSON.parse(str);
+        }
+        catch (e) {
+            // Do nothing
+        }
+        return value;
+    }
 
     var GridQuery = /** @class */ (function (_super) {
         __extends(GridQuery, _super);
@@ -11520,7 +11550,7 @@
         };
         GridQuery.prototype.getCurrentGridSettings = function () {
             var toColId = function (column) { return column.getColId(); };
-            var _a = this.api, columns = _a.columns, grid = _a.grid;
+            var columns = this.api.columns;
             var groupedColumns = columns.getRowGroupColumns();
             var columnsOrder = columns.getAllColumns();
             var allGridColumns = columns.getAllGridColumns();
@@ -11530,7 +11560,7 @@
             var storeSettings = this.getValue().settings;
             var settings = {
                 gridAlignment: storeSettings.gridAlignment,
-                sort: grid.getSortModel().pop(),
+                sort: this.getSort(),
                 hiddenColumns: hiddenColumns,
                 groupedColumns: groupedColumns.map(toColId),
                 filter: this.getFilter(),
@@ -11544,6 +11574,28 @@
             }
             return settings;
         };
+        GridQuery.prototype.getSort = function () {
+            if (this.gridRef.gridOptions.pivotMode) {
+                var _a = this.api.grid.getSortModel().pop() || {}, sort = _a.sort, colId = _a.colId;
+                var column = this.api.columns.getColumn(colId);
+                var pivotedColumn = this.getSecondaryColumn(colId);
+                if (pivotedColumn) {
+                    var uniquePivotParents = uniq(this.api.columns.getSecondaryColumns().map(function (column) { return column.getParent(); }));
+                    var secondaryColumn = this.getSecondaryColumn(pivotedColumn.getColId());
+                    var pivotColIndex = uniquePivotParents.indexOf(secondaryColumn.getParent());
+                    return { colId: getColField(pivotedColumn.getColDef()), sort: sort, pivotColIndex: pivotColIndex };
+                }
+                else if (column) {
+                    return { colId: getColField(column.getColDef()), sort: sort };
+                }
+            }
+            else {
+                return this.api.grid.getSortModel().pop();
+            }
+        };
+        GridQuery.prototype.selectSort = function () {
+            return this.select(function (state) { return state.settings.sort; });
+        };
         /* @internal */
         GridQuery.prototype._setApi = function (api, gridRef) {
             this.api = api;
@@ -11560,6 +11612,20 @@
         GridQuery.prototype.getFilter = function () {
             return this.getValue().settings.filter;
         };
+        GridQuery.prototype.selectFilter = function () {
+            return this.select(function (state) { return state.settings.filter; });
+        };
+        GridQuery.prototype.filterChanged = function () {
+            return this.selectFilter().pipe(operators.map(function (filter) {
+                return Object.keys(filter).reduce(function (filters, field) {
+                    var datoFilter = filter[field];
+                    if (datoFilter) {
+                        filters.push({ colId: datoFilter.colId, field: field, filter: datoFilter });
+                    }
+                    return filters;
+                }, []);
+            }));
+        };
         GridQuery.prototype.getSearchTerm = function () {
             return this.getValue().settings.searchTerm;
         };
@@ -11614,9 +11680,16 @@
         GridQuery.prototype.getAllDisplayedColumns = function () {
             return this.filterCheckboxSelectionColumn(this.api.columns.getAllDisplayedColumns());
         };
+        GridQuery.prototype.getAllPivotColumns = function () {
+            return this.getAllColumns().filter(function (column) { return column.isPivotActive(); });
+        };
         GridQuery.prototype.selectIsSelectAllRowsEnabled = function () {
             return this.select(function (state) { return state.serverSidePagination.selectAllRowsEnabled; });
         };
+        GridQuery.prototype.getSecondaryColumn = function (colId) {
+            var secondaryColumns = this.api.columns.getSecondaryColumns();
+            return secondaryColumns && secondaryColumns.find(function (col) { return col.getColId() === colId; });
+        };
         GridQuery.prototype.filterCheckboxSelectionColumn = function (columns) {
             return columns.filter(function (column) { return !column.getUserProvidedColDef() || !column.getUserProvidedColDef().checkboxSelection; });
         };
@@ -11709,7 +11782,7 @@
     function validateStringCondition(rowValue, _a) {
         var condition = _a.condition, filterValue = _a.value;
         var filterTextLowerCase = filterValue ? filterValue.toLowerCase() : '';
-        var valueLowerCase = rowValue ? rowValue.toLowerCase() : '';
+        var valueLowerCase = rowValue ? ("" + rowValue).toLowerCase() : '';
         switch (condition) {
             case exports.DatoFilterConditions.EQUALS:
                 return valueLowerCase === filterTextLowerCase;
@@ -11796,8 +11869,13 @@
             var orderedFilters = Object.keys(activeFilters);
             var _loop_1 = function (filter) {
                 var filterPasses = true;
-                var _a = activeFilters[filter], byValue = _a.byValue, conditional = _a.conditional;
+                var _a = activeFilters[filter], byValue = _a.byValue, conditional = _a.conditional, pivotKeys = _a.pivotKeys;
+                var currentRowPivotKeys = row.parent.childrenMapped && getRowPivotKeys(row.parent.childrenMapped);
                 var rowValue = api.getValue(filter, row);
+                /** If value is under a pivoted column but doesn't match the filter pivot */
+                if (pivotKeys && pivotKeys.length > 0 && !isArrayValuesEqual(pivotKeys, currentRowPivotKeys)) {
+                    return { value: true };
+                }
                 if (conditional) {
                     var operator = conditional.operator, conditions = conditional.conditions, type_1 = conditional.type;
                     var conditionsRelation = operator === exports.OperatorTypes.AND ? 'every' : 'some';
@@ -11829,6 +11907,18 @@
         }
         return true;
     }
+    /**
+     * Get pivot keys from a row parent
+     */
+    function getRowPivotKeys(childrenMapped, keys) {
+        if (keys === void 0) { keys = []; }
+        var key = Object.keys(childrenMapped)[0];
+        var parsedKey = tryParsePivotValue(key);
+        if (parsedKey) {
+            keys = getRowPivotKeys(childrenMapped[key], __spread(keys, [parsedKey.value]));
+        }
+        return keys;
+    }
 
 
     (function (GridActionType) {
@@ -12708,7 +12798,8 @@
         });
         Object.defineProperty(DatoGridFilterComponent.prototype, "colFilter", {
             get: function () {
-                return this.gridQuery.getFilter()[this.colField];
+                var filter = this.gridQuery.getFilter()[this.colField];
+                return filter && isArrayValuesEqual(this.pivotKeys, filter.pivotKeys) ? filter : null;
             },
             enumerable: true,
             configurable: true
@@ -12720,12 +12811,20 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(DatoGridFilterComponent.prototype, "pivotKeys", {
+            get: function () {
+                return this.colDef.pivotKeys || [];
+            },
+            enumerable: true,
+            configurable: true
+        });
         DatoGridFilterComponent.prototype.ngOnInit = function () {
             var _a;
             var _this = this;
             var _b = this.popover.data, gridService = _b.gridService, gridQuery = _b.gridQuery;
-            var _c = this.colDef, field = _c.field, filter = _c.filter, _d = _c.filtersConfig, filtersConfig = _d === void 0 ? {} : _d;
-            this.colField = field;
+            var _c = this.colDef, filter = _c.filter, _d = _c.filtersConfig, filtersConfig = _d === void 0 ? {} : _d, pivotValueColumn = _c.pivotValueColumn, pivotKeys = _c.pivotKeys;
+            this.colField = getColField(this.colDef);
+            this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
             if (filtersConfig.sections) {
                 this.filterSections = (_a = {}, _a[filtersConfig.sections] = true, _a);
             }
@@ -12737,7 +12836,11 @@
             this.listSortByKey = this.filterType === exports.DatoGridFilterTypes.Number && this.colDef.valueFormatter ? 'id' : 'label';
             this.gridQuery = gridQuery;
             this.gridService = gridService;
-            this.hasFilter$ = this.gridQuery.select(function (state) { return state.settings.filter[field]; }).pipe(operators.map(function (filter) { return !isNil(filter); }));
+            this.hasFilter$ = this.gridQuery
+                .select(function (state) { return state.settings.filter[_this.colField]; })
+                .pipe(operators.map(function (filter) {
+                return !isNil(filter) && isArrayValuesEqual(filter.pivotKeys, _this.pivotKeys);
+            }));
             if (this.filterSections.Conditional) {
                 var filterConditions = filterOptions || DatoGridStringFilterOptions;
                 if (filtersConfig.showEmptyConditions) {
@@ -12803,6 +12906,7 @@
                 isEmpty(filter)
                     ? this.gridService.clearColumnFilter(this.colField)
                     : this.gridService.setColumnFilter(column, filter);
+                this.gridService.notifyFilterUpdate();
             }
         };
         DatoGridFilterComponent.prototype.clearFilters = function () {
@@ -12853,8 +12957,16 @@
             return this.columnValues.filter(function (value) { return !includedSet.has(value); });
         };
         DatoGridFilterComponent.prototype.buildFilter = function () {
+            var _this = this;
             var _a = this.filterForm.value, byValue = _a.byValue, conditional = _a.conditional;
-            var filter = {};
+            var filter = { colId: this.colDef.colId };
+            filter.pivotKeys = this.pivotKeys;
+            if (this.pivotColumn) {
+                filter.pivotFieldsMap = this.getPivotFields(this.pivotColumn.getParent()).reduce(function (fieldMap, field, index) {
+                    fieldMap[field] = _this.pivotKeys[index];
+                    return fieldMap;
+                }, {});
+            }
             if (this.filterSections.Conditional) {
                 this.setConditionalFilter(filter, conditional);
             }
@@ -13183,6 +13295,19 @@
             var _this = this;
             return data.filter(function (v) { return !_this.excludedValues.has(v); });
         };
+        /**
+         * Get pivot dimensions as defined in the parent group column header class.
+         */
+        DatoGridFilterComponent.prototype.getPivotFields = function (parent, fields) {
+            if (fields === void 0) { fields = []; }
+            var grandParent = parent.getParent();
+            var headerClass = parent.getOriginalColumnGroup().getColGroupDef().headerClass;
+            if (grandParent) {
+                this.getPivotFields(grandParent, fields);
+            }
+            headerClass && fields.push(headerClass[0]);
+            return fields;
+        };
         DatoGridFilterComponent.ctorParameters = function () { return [
             { type: core.ElementRef },
             { type: PopoverRef },
@@ -13271,10 +13396,9 @@
             var colDef = params.column.getColDef();
             this.headerInfo = colDef.info;
             this.headerName = colDef.headerName;
-            this.aggColumn = this.column.getColId().indexOf('ag-Grid-AutoColumn') !== -1;
             this.showFilter = colDef.filter !== exports.DatoGridFilterTypes.None;
             this.showMoreMenu = isNil(colDef.moreMenuActions) || colDef.moreMenuActions.length > 0;
-            this.field = this.aggColumn ? this.groupField : colDef.field;
+            this.field = getColField(colDef);
             this.context = {
                 api: {
                     grid: params.api,
@@ -13286,7 +13410,10 @@
             this.customTemplates = gridService.getCustomHeader(this.field);
             this.filterActive$ = gridQuery
                 .select(function (state) { return state.settings.filter[_this.field]; })
-                .pipe(operators.map(function (filter) { return size(filter) > 0; }));
+                .pipe(operators.map(function (filter) {
+                var isPivotColumnMatchFilter = filter && isArrayValuesEqual(filter.pivotKeys, colDef.pivotKeys);
+                return size(filter) > 0 && isPivotColumnMatchFilter;
+            }));
             if (this.params.enableSorting) {
                 rxjs.fromEvent(this.host.nativeElement, 'click')
                     .pipe(ngxTakeUntilDestroy.untilDestroyed(this))
@@ -13348,13 +13475,6 @@
             });
         };
         DatoGridColumnHeaderComponent.prototype.ngOnDestroy = function () { };
-        Object.defineProperty(DatoGridColumnHeaderComponent.prototype, "groupField", {
-            get: function () {
-                return this.column.getColDef().showRowGroup;
-            },
-            enumerable: true,
-            configurable: true
-        });
         DatoGridColumnHeaderComponent.ctorParameters = function () { return [
             { type: core.ViewContainerRef },
             { type: CustomHeaderControllerService },
@@ -13853,8 +13973,8 @@
             this.svgRegistry = svgRegistry;
             this.storageAPI = storageAPI;
             this.logger = logger;
-            this.pageNumberToReturnAfterRefresh = -1;
             this.treeConfig = defaultGridTreeLabel;
+            this.pageNumberToReturnAfterRefresh = -1;
             this.CHECKBOX_SELECTION_COL_ID = 'grid-checkbox-selection';
         }
         Object.defineProperty(GridService.prototype, "treeData", {
@@ -13920,6 +14040,9 @@
                     var treeDate = convertToTreeData(data, _this.treeConfig);
                     _this.api.grid.setRowData(treeDate);
                 }
+                else if (_this.isPivotMode) {
+                    _this.setPivotModeRows(data);
+                }
                 else {
                     _this.api.grid.setRowData(data);
                 }
@@ -14040,6 +14163,12 @@
             params.gridOptions.saveSettings = saveSettings !== false && !isNil(gridName);
             /** Server Side Pagination for select all option */
             this.initOnRowSelectedForServerSidePagination(params);
+            /** Add pivot specific required settings */
+            if (params.gridOptions.pivotMode) {
+                this.initPivotSecondaryColsProcess(params);
+                params.gridOptions.enableV2_1 = true;
+                params.gridOptions.saveSettings = false;
+            }
             return params.gridOptions;
         };
         GridService.prototype.normalizeColumns = function (colDefs, gridOptions) {
@@ -14225,19 +14354,50 @@
             });
             this.notifyFilterUpdate();
         };
-        GridService.prototype.setColumnFilter = function (column, filter) {
+        GridService.prototype.setColumnFilter = function (column, filter, notifyGrid) {
+            if (notifyGrid === void 0) { notifyGrid = true; }
             this._logEvent("Grids - Filter Applied" /* GRID_FILTER_APPLIED */, {
                 column: column.getColId(),
                 numOfConditions: (filter.conditional && filter.conditional.conditions.length) || 0,
                 byValue: !!filter.byValue ? 'Yes' : 'No'
             });
+            this.updateFilter(column, filter);
+            if (notifyGrid) {
+                this.notifyFilterUpdate();
+            }
+        };
+        GridService.prototype.setGridFilters = function (filters) {
+            var e_2, _a;
+            try {
+                for (var filters_1 = __values(filters), filters_1_1 = filters_1.next(); !filters_1_1.done; filters_1_1 = filters_1.next()) {
+                    var _b = filters_1_1.value, colId = _b.colId, filter = _b.filter;
+                    var column = this.api.columns.getColumn(colId);
+                    if (column) {
+                        this.setColumnFilter(column, filter);
+                    }
+                    else {
+                        var pivotColumn = this.gridQuery.getSecondaryColumn(colId);
+                        this.setColumnFilter(pivotColumn, filter);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (filters_1_1 && !filters_1_1.done && (_a = filters_1.return)) _a.call(filters_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.notifyFilterUpdate();
+        };
+        GridService.prototype.updateFilter = function (column, filter) {
+            var colField = getColField(column.getColDef());
             this.store.update(function (state) {
                 var _a;
                 return {
-                    settings: __assign(__assign({}, state.settings), { filter: __assign(__assign({}, state.settings.filter), (_a = {}, _a[column.getColDef().field] = filter, _a)) })
+                    settings: __assign(__assign({}, state.settings), { filter: __assign(__assign({}, state.settings.filter), (_a = {}, _a[colField] = filter, _a)) })
                 };
             });
-            this.notifyFilterUpdate();
         };
         GridService.prototype.setSearchTerm = function (searchTerm) {
             this.store.update(function (state) {
@@ -14530,7 +14690,7 @@
             this.api.grid.onFilterChanged();
         };
         GridService.prototype.buildServerRequestFilters = function (filter) {
-            var e_2, _a;
+            var e_3, _a;
             var columnsFilters = {};
             try {
                 for (var _b = __values(Object.entries(filter)), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14566,12 +14726,12 @@
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
             return columnsFilters;
         };
@@ -14624,7 +14784,7 @@
             return { operator: exports.OperatorTypes.AND, filters: [columnFilter, searchFilter] };
         };
         GridService.prototype.buildServerColumnFilters_v2_1 = function (filter) {
-            var e_3, _a;
+            var e_4, _a;
             var columnFilters = [];
             try {
                 for (var _b = __values(Object.entries(filter)), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14649,12 +14809,12 @@
                     columnFilters.push(columnFilter);
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
             return columnFilters;
         };
@@ -14744,6 +14904,93 @@
                 this.setServerSidePagination({ selectAllRowsEnabled: false, excludedFromSelectAll: [] });
             }
         };
+        /**
+         * When pivoting,
+         * we add the field name to the column header class in order to access it through the auto generated pivot column.
+         * @private
+         */
+        GridService.prototype.initPivotSecondaryColsProcess = function (_a) {
+            var _this = this;
+            var gridOptions = _a.gridOptions;
+            gridOptions.processSecondaryColDef = function (colDef) {
+                var api = colDef.headerComponentParams && colDef.headerComponentParams.gridQuery.api;
+                if (api) {
+                    var valueColumns = colDef.headerComponentParams.gridQuery.api.columns.getValueColumns();
+                    var originalColDef = valueColumns
+                        .map(function (_a) {
+                        var userProvidedColDef = _a.userProvidedColDef;
+                        return userProvidedColDef;
+                    })
+                        .find(function (_a) {
+                        var colId = _a.colId;
+                        return colId === colDef.pivotValueColumn.getColId();
+                    });
+                    if (originalColDef) {
+                        colDef.filter = originalColDef.filter;
+                    }
+                }
+                if (colDef.pivotKeys) {
+                    colDef.pivotKeys = colDef.pivotKeys.map(function (key) {
+                        var parsedKey = tryParsePivotValue(key);
+                        return (parsedKey && parsedKey.value) || '';
+                    });
+                }
+            };
+            gridOptions.processSecondaryColGroupDef = function (colGroupDef) {
+                if (colGroupDef.headerName) {
+                    var parsedValue = tryParsePivotValue(colGroupDef.headerName);
+                    if (parsedValue) {
+                        var field = parsedValue.field, value = parsedValue.value;
+                        colGroupDef.headerClass = [field];
+                        colGroupDef.headerName = value;
+                        if (colGroupDef.children && colGroupDef.children.length > 1) {
+                            colGroupDef.headerClass.push('group-pivot-cell');
+                        }
+                    }
+                }
+                else if (colGroupDef.children) {
+                    var _a = __read(colGroupDef.children, 1), colChild = _a[0];
+                    var pivotTotalColumnIds = colChild && colChild.pivotTotalColumnIds;
+                    if (pivotTotalColumnIds && pivotTotalColumnIds.length > 0) {
+                        colGroupDef.headerClass = ['total-pivot-cell'];
+                        colGroupDef.headerName = _this.translate.transform('core.total');
+                    }
+                }
+                else {
+                    colGroupDef.headerClass = ['empty-pivot-header'];
+                }
+                if (colGroupDef.pivotKeys) {
+                    colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(function (key) {
+                        var parsedKey = tryParsePivotValue(key);
+                        return (parsedKey && parsedKey.value) || '';
+                    });
+                }
+            };
+        };
+        GridService.prototype.setPivotModeRows = function (data) {
+            var pivotColumns = this.gridQuery.getAllPivotColumns();
+            var convertedData = data.map(function (currentValue, index) {
+                var e_5, _a;
+                var mappedValues = __assign({}, currentValue);
+                try {
+                    for (var pivotColumns_1 = __values(pivotColumns), pivotColumns_1_1 = pivotColumns_1.next(); !pivotColumns_1_1.done; pivotColumns_1_1 = pivotColumns_1.next()) {
+                        var col = pivotColumns_1_1.value;
+                        var field = col.getColDef().field;
+                        var pivotValue = { field: field, value: currentValue[field] };
+                        mappedValues[field] = JSON.stringify(pivotValue);
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (pivotColumns_1_1 && !pivotColumns_1_1.done && (_a = pivotColumns_1.return)) _a.call(pivotColumns_1);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+                return mappedValues;
+            });
+            this.api.grid.setRowData(convertedData);
+        };
         GridService.ctorParameters = function () { return [
             { type: GridStore },
             { type: GridQuery },
@@ -15178,6 +15425,7 @@
             set: function (gridOptions) {
                 this._gridOptions = gridOptions;
                 this.gridService.treeData = gridOptions.treeData;
+                this.gridService.isPivotMode = gridOptions.pivotMode;
                 if (this.agGridEl) {
                     if (gridOptions.treeData) {
                         !this.agGridEl.classList.contains(this.treeGridClass) && this.agGridEl.classList.add(this.treeGridClass);
@@ -15253,6 +15501,18 @@
             var defaults = __assign(__assign(__assign({}, defaultGridOptions), (this.gridOptions.treeData ? defaultTreeOptions : {})), { icons: this.getGridIcons() });
             return deepmerge(defaults, normalized);
         };
+        DatoGridControllerComponent.prototype.setGridRows = function (data) {
+            this.gridService.setRows(data);
+        };
+        DatoGridControllerComponent.prototype.setGridFilters = function (filters) {
+            this.gridService.setGridFilters(filters);
+        };
+        DatoGridControllerComponent.prototype.onFilterChanged = function () {
+            return this.gridQuery.filterChanged();
+        };
+        DatoGridControllerComponent.prototype.onSortChanged = function () {
+            return this.gridQuery.selectSort();
+        };
         DatoGridControllerComponent.prototype.getGridIcons = function () {
             var moveColumnIcon = "<span class=\"da-grid-icon pointer d-flex column-move\">" + this.iconRegistry.getSvg('move-column') + "</span>";
             return {
@@ -15662,6 +15922,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(DatoGridV2Component.prototype, "isPivotMode", {
+            get: function () {
+                return this.gridOptions ? this.gridOptions.pivotMode : false;
+            },
+            enumerable: true,
+            configurable: true
+        });
         DatoGridV2Component.ctorParameters = function () { return [
             { type: DatoGridControllerComponent },
             { type: core.ElementRef }
@@ -15674,7 +15941,7 @@
         DatoGridV2Component = __decorate([
             core.Component({
                 selector: 'dato-grid-v2',
-                template: "<ag-grid-angular data-auto-id=\"grid\" class=\"dato-grid ag-theme-material\" [class.has-background]=\"enableBackground\" [class.enable-v2_1]=\"enableV2_1\"\n                 [class.with-multi-selection-col]=\"gridOptions?.showMultiSelectionCheckboxes\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
+                template: "<ag-grid-angular data-auto-id=\"grid\" class=\"dato-grid ag-theme-material\" [class.has-background]=\"enableBackground\" [class.enable-v2_1]=\"enableV2_1\"\n                 [class.with-multi-selection-col]=\"gridOptions?.showMultiSelectionCheckboxes\" [class.pivot-mode]=\"isPivotMode\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 encapsulation: core.ViewEncapsulation.None,
                 styles: ["dato-grid-v2{flex-grow:1;display:flex;flex-direction:column;position:relative}dato-grid-v2 .dato-grid,dato-grid-v2 dato-grid-pagination-v2{position:absolute;left:0;right:0;bottom:0}dato-grid-v2 .dato-grid{top:0;bottom:50px}dato-grid-v2 .grid-hover-actions{position:absolute;z-index:2;transition:opacity .2s ease-in-out}dato-grid-v2 .ag-row-drag{width:initial!important}dato-grid-v2 .da-grid-icon{display:inline-block;line-height:31px;vertical-align:middle;width:initial;height:initial}dato-grid-v2 .da-grid-icon.drag{width:14px;height:14px;margin-right:6px;opacity:0;transition:opacity .3s;transform:translateY(-50%)}dato-grid-v2 .da-grid-icon.folder{width:18px;height:35px;margin:0 8px}dato-grid-v2 .ag-row.ag-row-hover .da-grid-icon.drag{opacity:1}dato-grid-v2 ag-grid-angular.tree .ag-group-contracted,dato-grid-v2 ag-grid-angular.tree .ag-group-expanded{display:inline-block;width:18px;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-group-checkbox{display:none}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-empty-folder .folder{margin-left:26px}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-1 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 1)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-1{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-2 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 2)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-2{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-3 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 3)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-3{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-4 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 4)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-4{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row div[col-id=ag-Grid-AutoColumn]{padding-left:0}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell{display:flex;align-items:center}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .ag-group-value>span{display:inline-block;vertical-align:middle}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .initials{border-radius:50%;padding:4px;margin-right:8px;margin-left:20px;width:28px;height:28px;display:inline-block;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-row-group-leaf-indent{margin-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate:before{text-align:center;content:'-';display:inline-block;position:absolute;top:0;left:0;right:0;bottom:0;line-height:.5;color:#fff}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell{line-height:33px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.dato-editable-cell{line-height:29px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.ag-cell-inline-editing{height:35px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell{line-height:42px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.dato-editable-cell{line-height:38px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.ag-cell-inline-editing{height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell{line-height:48px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.dato-editable-cell{line-height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.ag-cell-inline-editing{height:50px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell{line-height:57px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.dato-editable-cell{line-height:53px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.ag-cell-inline-editing{height:59px}dato-grid-v2 ag-grid-angular .ag-cell.checkbox-selection-cell{display:flex}dato-grid-v2 .ag-menu .da-grid-icon svg{vertical-align:middle}dato-grid-v2 .ag-header-cell-sortable .ag-sort-none-icon{opacity:0;transition:opacity .2s}dato-grid-v2 .ag-header-cell-sortable:hover .ag-sort-none-icon{opacity:1}dato-grid-v2 .group-contracted-icon,dato-grid-v2 .group-expanded-icon{width:7px}dato-grid-v2 .group-expanded-icon{transform:rotate(90deg)}dato-grid-v2 .dato-grid .ag-cell{border-top:0;border-bottom:0}.ag-dnd-ghost{min-width:100px;border:none;display:flex;justify-content:flex-start;align-content:center;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;z-index:10000000}.ag-dnd-ghost .da-grid-icon.column-move-hide svg{height:18px;width:18px}.ag-dnd-ghost .da-grid-icon.column-move svg,.ag-dnd-ghost .da-grid-icon.column-move-pin svg{height:16px;width:16px}"]
@@ -15975,6 +16242,9 @@
                 showFirstEllipsis: false,
                 showLastPage: false
             };
+            // Show fit cell content and collapse/expand row groups controls
+            this.showBottomControls = false;
+            this.isExpanded = true;
             this.isServerSidePagination = false;
             // The number of pages displayed in the navigation panel for each view as defined by product.
             this.MINI_DISPLAY_LENGTH = 2;
@@ -16022,7 +16292,10 @@
                 _this.initPagination();
             });
             this.gridQuery.gridReady$
-                .pipe(operators.tap(function () { return (_this.gridApi = _this.gridQuery.api.grid); }), operators.switchMap(function () {
+                .pipe(operators.tap(function () {
+                _this.gridApi = _this.gridQuery.api.grid;
+                _this.showBottomControls = _this.gridQuery.getGridOptions().showBottomControls;
+            }), operators.switchMap(function () {
                 _this.isServerSidePagination = _this.gridQuery.isServerSide;
                 return _this.isServerSidePagination ? _this.gridQuery.serverDataLoaded$ : _this.gridQuery.rowDataChanged$;
             }), operators.throttleTime(100), tapOnce(function () { return _this.initPagination(); }), ngxTakeUntilDestroy.untilDestroyed(this))
@@ -16144,6 +16417,13 @@
         DatoGridPaginationV2Component.prototype.trackByPage = function (index, page) {
             return page;
         };
+        DatoGridPaginationV2Component.prototype.toggleGroupsState = function () {
+            this.isExpanded ? this.gridApi.collapseAll() : this.gridApi.expandAll();
+            this.isExpanded = !this.isExpanded;
+        };
+        DatoGridPaginationV2Component.prototype.autoFitGrid = function (type) {
+            this.gridService.fitGrid(type);
+        };
         DatoGridPaginationV2Component.prototype.ngOnDestroy = function () { };
         /**
          * Sets the rows display string
@@ -16232,7 +16512,7 @@
             core.Component({
                 selector: 'dato-grid-pagination-v2',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n     [attr.data-pages-count]=\"totalPages\"\n     [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n     [attr.data-page-size]=\"rowsPerPage\"\n     [attr.data-rows-count]=\"rowCount\">\n  <div *ngIf=\"totalPages > 1\" #navigation\n       class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n    <!-- First Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n                      icon=\"chevron-left-double\"\n                      datoType=\"secondary\"\n                      datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\"\n                      (click)=\"navigateFirstPage()\">\n    </dato-icon-button>\n\n    <!-- Previous Page -->\n    <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n                      (click)=\"navigatePrevPage()\">\n    </dato-icon-button>\n\n\n    <div class=\"d-flex mx-5 align-center number-container\">\n      <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n                        *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n                        (click)=\"showPreviousBatch()\">...\n      </dato-link>\n      <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n                 *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n                 (click)=\"navigatePage(page - 1)\">\n        {{page}}\n      </dato-link>\n\n      <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n        <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n                          (click)=\"showNextBatch()\">...</dato-link>\n        <dato-link  class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n                          [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n                          (click)=\"navigatePage(totalPages - 1)\">\n          {{totalPages}}\n        </dato-link>\n      </div>\n\n    </div>\n\n    <!-- Next Page -->\n    <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n                      [disabled]=\"nextPageDisabled\">\n    </dato-icon-button>\n\n    <!-- Last Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"ml-4\" icon=\"chevron-right-double\"\n                      datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n                      [disabled]=\"nextPageDisabled\"\n                      (click)=\"navigatePage(totalPages - 1)\">\n    </dato-icon-button>\n\n  </div>\n\n  <div *ngIf=\"totalPages > 1 && !smallVersion\"\n       class=\"separator mx-10 my-auto primary-100-background-color\">\n  </div>\n\n  <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n    <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n  </div>\n\n</div>\n",
+                template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n     [attr.data-pages-count]=\"totalPages\"\n     [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n     [attr.data-page-size]=\"rowsPerPage\"\n     [attr.data-rows-count]=\"rowCount\">\n  <div *ngIf=\"totalPages > 1\" #navigation\n       class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n    <!-- First Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n                      icon=\"chevron-left-double\"\n                      datoType=\"secondary\"\n                      datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\"\n                      (click)=\"navigateFirstPage()\">\n    </dato-icon-button>\n\n    <!-- Previous Page -->\n    <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n                      (click)=\"navigatePrevPage()\">\n    </dato-icon-button>\n\n\n    <div class=\"d-flex mx-5 align-center number-container\">\n      <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n                        *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n                        (click)=\"showPreviousBatch()\">...\n      </dato-link>\n      <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n                 *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n                 (click)=\"navigatePage(page - 1)\">\n        {{page}}\n      </dato-link>\n\n      <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n        <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n                          (click)=\"showNextBatch()\">...</dato-link>\n        <dato-link  class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n                          [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n                          (click)=\"navigatePage(totalPages - 1)\">\n          {{totalPages}}\n        </dato-link>\n      </div>\n\n    </div>\n\n    <!-- Next Page -->\n    <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n                      [disabled]=\"nextPageDisabled\">\n    </dato-icon-button>\n\n    <!-- Last Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"ml-4\" icon=\"chevron-right-double\"\n                      datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n                      [disabled]=\"nextPageDisabled\"\n                      (click)=\"navigatePage(totalPages - 1)\">\n    </dato-icon-button>\n\n  </div>\n\n  <div *ngIf=\"totalPages > 1 && !smallVersion\"\n       class=\"separator mx-10 my-auto primary-100-background-color\">\n  </div>\n\n  <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n    <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n  </div>\n\n  <div *ngIf=\"showBottomControls\" class=\"grid-controls d-flex d-flex-1 justify-end\">\n    <dato-icon-button [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"toggleGroupsState()\" data-auto-id=\"pagiantion-next-page\">\n    </dato-icon-button>\n\n    <dato-icon-button class=\"mx-4\" icon=\"maximize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('container')\" data-auto-id=\"pagiantion-next-page\">\n    </dato-icon-button>\n\n    <dato-icon-button icon=\"minimize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('content')\" data-auto-id=\"pagiantion-next-page\">\n    </dato-icon-button>\n  </div>\n</div>\n",
                 providers: [common.DecimalPipe],
                 styles: [":host{padding:12px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:25px}:host .container{height:25px}:host .navigation .page-number{transition:color .3s ease-in-out}:host .navigation .page-number:first-of-type{margin-left:7px}:host .navigation .page-number:last-of-type{margin-right:7px}:host .separator{width:1px;height:25px}:host .container.small .navigation,:host .container.small .total{margin-top:8px;margin-left:auto;margin-right:auto}"]
             }),
@@ -25387,6 +25667,7 @@
     exports.inView = inView;
     exports.intersection = intersection;
     exports.invert = invert;
+    exports.isArrayValuesEqual = isArrayValuesEqual;
     exports.isArrowUpDown = isArrowUpDown;
     exports.isBoolean = isBoolean;
     exports.isEmpty = isEmpty;
@@ -25465,6 +25746,7 @@
     exports.toString = toString;
     exports.toggleClass = toggleClass;
     exports.toolbarActionToContextAction = toolbarActionToContextAction;
+    exports.tryParsePivotValue = tryParsePivotValue;
     exports.unescape = unescape;
     exports.union = union;
     exports.uniq = uniq;