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

package/bundle.scss

@@ -5206,7 +5206,7 @@ dato-list-v2 .checkmark {
     line-height: 19px;
 }
 
-.simple-bold {
+.simple-bold, dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
     font-size: 14px;
     font-weight: 600;
     line-height: 19px;
@@ -11265,7 +11265,7 @@ dato-button-group.is-round-edges dato-button:last-of-type button {
     line-height: 19px;
 }
 
-.simple-bold {
+.simple-bold, dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
     font-size: 14px;
     font-weight: 600;
     line-height: 19px;
@@ -14325,6 +14325,83 @@ dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indet
     background-color: themify(primary-200) !important;
 }
 
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group {
+    border-bottom: none;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group span {
+    color: themify(primary-500) !important;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group.ag-row-group-contracted:not(.ag-row-level-0) {
+    background-color: themify(primary-50) !important;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group.ag-row-group-contracted:not(.ag-row-level-0) span {
+    font-weight: 400;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-floating-bottom {
+    border: none;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-floating-bottom .ag-row {
+    background-color: themify(primary-0);
+    border: 1px solid themify(primary-200);
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-floating-bottom .ag-row .ag-cell {
+    border-right: none;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-ltr .ag-row-group-leaf-indent {
+    margin-left: 0;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-cell {
+    color: themify(primary-500);
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell {
+    border: none;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header {
+    display: block;
+    height: 100%;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header > div {
+    height: inherit;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header > div span {
+    color: themify(primary-500);
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-cell-resize {
+    height: 100%;
+    border: none;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label {
+    align-items: center;
+    justify-content: center;
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag-header-group-cell-label span {
+    height: auto;
+    color: themify(primary-500);
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group {
+    border-bottom: 1px solid themify(primary-200);
+}
+
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group:not(:last-child) {
+    border-right: 1px solid themify(primary-200);
+}
+
 .ag-dnd-ghost {
     box-shadow: 0 0 10px -1px themify(primary-700, 0.3);
     background-color: themify(primary-100) !important;
@@ -14504,6 +14581,14 @@ dato-grid-pagination-v2 {
     border-top: solid 1px themify(primary-100);
 }
 
+dato-grid-pagination-v2 .grid-controls dato-button[datoType='secondary'] dato-icon {
+    padding: 4px !important;
+}
+
+dato-grid-pagination-v2 .grid-controls dato-button[datoType='secondary'] dato-icon svg {
+    fill: themify(primary-500);
+}
+
 dato-grid-on-hover .actions dato-button[datoType='none'] button {
     color: themify(primary-400);
 }

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,15 @@
             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;
+    }
 
     var GridQuery = /** @class */ (function (_super) {
         __extends(GridQuery, _super);
@@ -11520,7 +11540,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 +11550,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 +11564,29 @@
             }
             return settings;
         };
+        GridQuery.prototype.getSort = function () {
+            if (this.gridRef.gridOptions.pivotMode) {
+                var _a = this.api.grid.getSortModel().pop() || {}, sort = _a.sort, colId_1 = _a.colId;
+                var column = this.api.columns.getColumn(colId_1);
+                var secondaryColumns = this.api.columns.getSecondaryColumns();
+                var pivotedColumn_1 = secondaryColumns && secondaryColumns.find(function (col) { return col.getColId() === colId_1; });
+                if (pivotedColumn_1) {
+                    var uniquePivotParents = uniq(secondaryColumns.map(function (column) { return column.getParent(); }));
+                    var secondaryColumn = secondaryColumns.find(function (col) { return col.getColId() === pivotedColumn_1.getColId(); });
+                    var pivotColIndex = uniquePivotParents.indexOf(secondaryColumn.getParent());
+                    return { colId: getColField(pivotedColumn_1.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 +11603,9 @@
         GridQuery.prototype.getFilter = function () {
             return this.getValue().settings.filter;
         };
+        GridQuery.prototype.selectFilter = function () {
+            return this.select(function (state) { return state.settings.filter; });
+        };
         GridQuery.prototype.getSearchTerm = function () {
             return this.getValue().settings.searchTerm;
         };
@@ -11614,6 +11660,9 @@
         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; });
         };
@@ -11796,8 +11845,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 && !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 +11883,26 @@
         }
         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;
+        try {
+            parsedKey = JSON.parse(key);
+        }
+        catch (e) {
+            console.error("Can't parse " + key + " from JSON");
+        }
+        finally {
+            if (parsedKey) {
+                keys = getRowPivotKeys(childrenMapped[key], __spread(keys, [parsedKey.value]));
+            }
+        }
+        return keys;
+    }
 
 
     (function (GridActionType) {
@@ -12708,7 +12782,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 +12795,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 +12820,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) {
@@ -12855,6 +12942,10 @@
         DatoGridFilterComponent.prototype.buildFilter = function () {
             var _a = this.filterForm.value, byValue = _a.byValue, conditional = _a.conditional;
             var filter = {};
+            filter.pivotKeys = this.pivotKeys;
+            if (this.pivotColumn) {
+                filter.pivotFields = this.getPivotFields(this.pivotColumn.getParent());
+            }
             if (this.filterSections.Conditional) {
                 this.setConditionalFilter(filter, conditional);
             }
@@ -13183,6 +13274,18 @@
             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();
+            if (grandParent) {
+                this.getPivotFields(grandParent, fields);
+            }
+            fields.push(parent.getOriginalColumnGroup().getColGroupDef().headerClass);
+            return fields;
+        };
         DatoGridFilterComponent.ctorParameters = function () { return [
             { type: core.ElementRef },
             { type: PopoverRef },
@@ -13271,10 +13374,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 +13388,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 +13453,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 +13951,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 +14018,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 +14141,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) {
@@ -14231,10 +14338,11 @@
                 numOfConditions: (filter.conditional && filter.conditional.conditions.length) || 0,
                 byValue: !!filter.byValue ? 'Yes' : 'No'
             });
+            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();
@@ -14744,6 +14852,68 @@
                 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 gridOptions = _a.gridOptions;
+            gridOptions.processSecondaryColDef = function (colDef) {
+                var api = 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) { return JSON.parse(key).value; });
+                }
+            };
+            gridOptions.processSecondaryColGroupDef = function (colGroupDef) {
+                if (colGroupDef.headerName) {
+                    var _a = JSON.parse(colGroupDef.headerName), field = _a.field, value = _a.value;
+                    colGroupDef.headerClass = field;
+                    colGroupDef.headerName = value;
+                }
+                if (colGroupDef.pivotKeys) {
+                    colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(function (key) { return JSON.parse(key).value; });
+                }
+            };
+        };
+        GridService.prototype.setPivotModeRows = function (data) {
+            var pivotColumns = this.gridQuery.getAllPivotColumns();
+            var convertedData = data.map(function (currentValue, index) {
+                var e_4, _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;
+                        mappedValues[field] = JSON.stringify({ field: field, value: currentValue[field] });
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (pivotColumns_1_1 && !pivotColumns_1_1.done && (_a = pivotColumns_1.return)) _a.call(pivotColumns_1);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                return mappedValues;
+            });
+            this.api.grid.setRowData(convertedData);
+        };
         GridService.ctorParameters = function () { return [
             { type: GridStore },
             { type: GridQuery },
@@ -15178,6 +15348,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 +15424,15 @@
             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.onFilterChanged = function () {
+            return this.gridQuery.selectFilter();
+        };
+        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 +15842,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 +15861,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 +16162,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 +16212,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 +16337,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 +16432,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 +25587,7 @@
     exports.inView = inView;
     exports.intersection = intersection;
     exports.invert = invert;
+    exports.isArrayValuesEqual = isArrayValuesEqual;
     exports.isArrowUpDown = isArrowUpDown;
     exports.isBoolean = isBoolean;
     exports.isEmpty = isEmpty;