@datorama/core 21.4.0-rc.9 → 22.1.1-rc.1

package/bundle.scss

@@ -14333,11 +14333,11 @@ 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) {
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group: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 {
+dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group:not(.ag-row-level-0) span {
     font-weight: 400;
 }
 

package/bundles/datorama-core.umd.js

@@ -11576,15 +11576,14 @@
         };
         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 _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_1.getColDef()), sort: sort, pivotColIndex: pivotColIndex };
+                    return { colId: getColField(pivotedColumn.getColDef()), sort: sort, pivotColIndex: pivotColIndex };
                 }
                 else if (column) {
                     return { colId: getColField(column.getColDef()), sort: sort };
@@ -11619,9 +11618,9 @@
         GridQuery.prototype.filterChanged = function () {
             return this.selectFilter().pipe(operators.map(function (filter) {
                 return Object.keys(filter).reduce(function (filters, field) {
-                    if (filter[field]) {
-                        var _a = filter[field], conditional = _a.conditional, pivotFieldsMap = _a.pivotFieldsMap;
-                        filters.push({ field: field, filter: conditional, pivotFieldsMap: pivotFieldsMap });
+                    var datoFilter = filter[field];
+                    if (datoFilter) {
+                        filters.push({ field: field, filter: datoFilter });
                     }
                     return filters;
                 }, []);
@@ -11687,6 +11686,10 @@
         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; });
         };
@@ -11799,9 +11802,10 @@
                 return !isEmpty(valueLowerCase);
         }
     }
-    function validateNumberCondition(unparsedRowValue, _a) {
+    function validateNumberCondition(unparsedRowValue, _a, filterKey) {
         var condition = _a.condition, value = _a.value, rangeEnd = _a.rangeEnd;
-        var rowValue = !!unparsedRowValue ? parseFloat(unparsedRowValue) : null;
+        if (filterKey === void 0) { filterKey = ''; }
+        var rowValue = !!unparsedRowValue ? parseFloat(unparsedRowValue[filterKey] || unparsedRowValue) : null;
         var filterValue = parseFloat(value);
         switch (condition) {
             case exports.DatoFilterConditions.EQUALS:
@@ -11849,14 +11853,14 @@
         }
     }
     function validateCondition(_a) {
-        var rowValue = _a.rowValue, filter = _a.filter, type = _a.type;
+        var rowValue = _a.rowValue, condition = _a.condition, type = _a.type, filterKey = _a.filterKey;
         switch (type) {
             case exports.DatoGridFilterTypes.Date:
-                return validateDateCondition(rowValue, filter);
+                return validateDateCondition(rowValue, condition);
             case exports.DatoGridFilterTypes.Number:
-                return validateNumberCondition(rowValue, filter);
+                return validateNumberCondition(rowValue, condition, filterKey);
             default:
-                return validateStringCondition(rowValue, filter);
+                return validateStringCondition(rowValue, condition);
         }
     }
     function validateFilter(_a, activeFilters) {
@@ -11867,7 +11871,7 @@
             var _loop_1 = function (filter) {
                 var filterPasses = true;
                 var _a = activeFilters[filter], byValue = _a.byValue, conditional = _a.conditional, pivotKeys = _a.pivotKeys;
-                var currentRowPivotKeys = row.parent.childrenMapped && getRowPivotKeys(row.parent.childrenMapped);
+                var currentRowPivotKeys = (row.parent && 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)) {
@@ -11876,7 +11880,9 @@
                 if (conditional) {
                     var operator = conditional.operator, conditions = conditional.conditions, type_1 = conditional.type;
                     var conditionsRelation = operator === exports.OperatorTypes.AND ? 'every' : 'some';
-                    filterPasses = conditions[conditionsRelation](function (filter) { return validateCondition({ rowValue: rowValue, filter: filter, type: type_1 }); });
+                    filterPasses = conditions[conditionsRelation](function (condition) {
+                        return validateCondition({ rowValue: rowValue, condition: condition, type: type_1, filterKey: filter });
+                    });
                 }
                 if (filterPasses && byValue) {
                     var includesValue = byValue.values.includes(rowValue);
@@ -12676,12 +12682,12 @@
     var ɵ0$1 = mapToValue;
     var mapToListItem = function (val) { return ({ id: val, label: isNil(val) ? "(Empty)" : ("" + val).trim(), value: val }); };
     var ɵ1$1 = mapToListItem;
-    var mapToListItemWithFormatted = function (_a) {
+    var mapToListItemWithFormatted = function (_a, key) {
         var value = _a.value, formattedValue = _a.formattedValue;
         return ({
-            id: value,
-            label: isNil(formattedValue) ? "(Empty)" : ("" + formattedValue).trim(),
-            value: value
+            id: key && value ? value[key] : value,
+            label: isNil(formattedValue) ? "(Empty)" : ("" + (key ? formattedValue[key] : formattedValue)).trim(),
+            value: key && value ? value[key] : value
         });
     };
     var ɵ2$1 = mapToListItemWithFormatted;
@@ -12820,15 +12826,18 @@
             var _this = this;
             var _b = this.popover.data, gridService = _b.gridService, gridQuery = _b.gridQuery;
             var _c = this.colDef, filter = _c.filter, _d = _c.filtersConfig, filtersConfig = _d === void 0 ? {} : _d, pivotValueColumn = _c.pivotValueColumn, pivotKeys = _c.pivotKeys;
+            var colDefs = gridQuery.api.columns.getAllColumns().map(function (column) { return column.getColDef(); });
             this.colField = getColField(this.colDef);
+            var colDef = colDefs.find(function (colDef) { return colDef.field === _this.colField; });
+            var colFilter = filter || colDef.filter;
+            var filterOptions = DatoGridFilterOptionsMap[colFilter];
             this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
             if (filtersConfig.sections) {
                 this.filterSections = (_a = {}, _a[filtersConfig.sections] = true, _a);
             }
             this.keepPredefinedListOriginalOrder =
                 filtersConfig.keepPredefinedListOriginalOrder && !isEmpty(filtersConfig.predefinedListValues);
-            var filterOptions = DatoGridFilterOptionsMap[filter];
-            this.filterType = filterOptions ? filter : exports.DatoGridFilterTypes.String;
+            this.filterType = filterOptions ? colFilter : exports.DatoGridFilterTypes.String;
             this.listLabelType = this.filterType.toLowerCase();
             this.listSortByKey = this.filterType === exports.DatoGridFilterTypes.Number && this.colDef.valueFormatter ? 'id' : 'label';
             this.gridQuery = gridQuery;
@@ -12863,9 +12872,11 @@
                         var columnValues = this.getColumnValues();
                         this.columnValues = columnValues.map(function (_a) {
                             var value = _a.value;
-                            return value;
+                            return !isNil(_this.pivotColumn) && value ? value[_this.colField] : value;
+                        });
+                        this.listOptions = columnValues.map(function (colValue) {
+                            return mapToListItemWithFormatted(colValue, !isNil(_this.pivotColumn) && _this.colField);
                         });
-                        this.listOptions = columnValues.map(mapToListItemWithFormatted);
                     }
                 }
                 else {
@@ -12903,6 +12914,7 @@
                 isEmpty(filter)
                     ? this.gridService.clearColumnFilter(this.colField)
                     : this.gridService.setColumnFilter(column, filter);
+                this.gridService.notifyFilterUpdate();
             }
         };
         DatoGridFilterComponent.prototype.clearFilters = function () {
@@ -12956,19 +12968,25 @@
             var _this = this;
             var _a = this.filterForm.value, byValue = _a.byValue, conditional = _a.conditional;
             var filter = {};
-            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);
             }
             if (this.filterSections.By_Value) {
                 this.setByValueFilter(filter, byValue);
             }
+            /** If filters applied, add the extra properties to be used by pivot mode */
+            if (filter.byValue || filter.conditional) {
+                filter.colId = this.colDef.colId;
+                filter.pivotKeys = this.pivotKeys;
+                if (this.pivotColumn) {
+                    filter.pivotFieldsMap = this.getPivotFields(this.pivotColumn.getParent()).reduce(function (fieldMap, field, index) {
+                        if (_this.pivotKeys[index]) {
+                            fieldMap[field] = _this.pivotKeys[index];
+                        }
+                        return fieldMap;
+                    }, {});
+                }
+            }
             return filter;
         };
         DatoGridFilterComponent.prototype.initForm = function () {
@@ -14350,12 +14368,45 @@
             });
             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;
+            if (this.api) {
+                try {
+                    for (var filters_1 = __values(filters), filters_1_1 = filters_1.next(); !filters_1_1.done; filters_1_1 = filters_1.next()) {
+                        var filter = filters_1_1.value.filter;
+                        var column = this.api.columns.getColumn(filter.colId);
+                        if (column) {
+                            this.setColumnFilter(column, filter);
+                        }
+                        else {
+                            var pivotColumn = this.gridQuery.getSecondaryColumn(filter.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;
@@ -14363,7 +14414,6 @@
                     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) {
@@ -14656,7 +14706,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()) {
@@ -14692,12 +14742,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;
         };
@@ -14750,7 +14800,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()) {
@@ -14775,12 +14825,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;
         };
@@ -14873,27 +14923,14 @@
         /**
          * 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;
-                    }
+                var userProvidedColDef = colDef.pivotValueColumn && colDef.pivotValueColumn.getUserProvidedColDef();
+                if (userProvidedColDef) {
+                    colDef.filter = userProvidedColDef.filter;
                 }
                 if (colDef.pivotKeys) {
                     colDef.pivotKeys = colDef.pivotKeys.map(function (key) {
@@ -14909,7 +14946,7 @@
                         var field = parsedValue.field, value = parsedValue.value;
                         colGroupDef.headerClass = [field];
                         colGroupDef.headerName = value;
-                        if (colGroupDef.children && colGroupDef.children.length > 1) {
+                        if (colGroupDef.children && colGroupDef.children.length > 0) {
                             colGroupDef.headerClass.push('group-pivot-cell');
                         }
                     }
@@ -14936,7 +14973,7 @@
         GridService.prototype.setPivotModeRows = function (data) {
             var pivotColumns = this.gridQuery.getAllPivotColumns();
             var convertedData = data.map(function (currentValue, index) {
-                var e_4, _a;
+                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()) {
@@ -14946,12 +14983,12 @@
                         mappedValues[field] = JSON.stringify(pivotValue);
                     }
                 }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                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_4) throw e_4.error; }
+                    finally { if (e_5) throw e_5.error; }
                 }
                 return mappedValues;
             });
@@ -15470,6 +15507,9 @@
         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();
         };
@@ -16383,6 +16423,9 @@
         DatoGridPaginationV2Component.prototype.toggleGroupsState = function () {
             this.isExpanded ? this.gridApi.collapseAll() : this.gridApi.expandAll();
             this.isExpanded = !this.isExpanded;
+            // this.gridApi.forEachNode((node: RowNode) => {
+            //   node.setExpanded(this.isExpanded);
+            // });
         };
         DatoGridPaginationV2Component.prototype.autoFitGrid = function (type) {
             this.gridService.fitGrid(type);
@@ -16475,7 +16518,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 *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",
+                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-expand-collapse\"\n                      [datoTooltipV2]=\"isExpanded ? 'core.collapse-rows' : 'core.expand-rows'\">\n    </dato-icon-button>\n\n    <dato-icon-button class=\"mx-4\" icon=\"maximize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('content')\" [datoTooltipV2]=\"'core.fit-to-content'\"\n                      data-auto-id=\"pagiantion-fit-to-content\">\n    </dato-icon-button>\n\n    <dato-icon-button icon=\"minimize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('container')\" [datoTooltipV2]=\"'core.fit-to-container'\"\n                      data-auto-id=\"pagiantion-fit-to-container\">\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}"]
             }),
@@ -16589,6 +16632,7 @@
             this.gridActions = { mainList: [], moreMenu: [] };
             this.searchPlaceholder = this.translate.transform('core.search');
             this.rowActionsShortLabelThreshold = 1539;
+            this.displayCustomGridActionsSeparator = true;
             this.openMenus = {
                 group: false,
                 settings: false
@@ -17008,10 +17052,14 @@
             core.Input(),
             __metadata("design:type", Number)
         ], DatoGridV2ToolbarComponent.prototype, "rowActionsShortLabelThreshold", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], DatoGridV2ToolbarComponent.prototype, "displayCustomGridActionsSeparator", void 0);
         DatoGridV2ToolbarComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-toolbar-v2',
-                template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n    <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n        <!--  Dynamic content for the left area -->\n        <div data-auto-id=\"grid-toolbar-dynamic-left\">\n            <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n        </div>\n\n        <div class=\"d-flex items-center\">\n            <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n            <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n                <div class=\"d-flex items-center\">\n                    <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n                        <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n                        <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n                                   data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n                    </div>\n                    <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n                               data-auto-id=\"grid-select-all-pages\">\n                        <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n                    </dato-link>\n                </div>\n                <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n            </ng-container>\n        </div>\n\n        <!--  Row Actions-->\n        <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n            <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n                <div *ngIf=\"!isRowActionHidden(rowAction)\"\n                    [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n                    [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n                    [class.disabled-action]=\"isActionDisabled(rowAction)\">\n                    <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n                                  [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n                </div>\n\n                <ng-template #defaultButton>\n                    <div (click)=\"onActionClick(rowAction)\">\n                        <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n                                                  [disabled]=\"isActionDisabled(rowAction)\"\n                                                  [label]=\"rowAction.label\"\n                                                  [shortLabel]=\"rowAction.shortLabel\"\n                                                  [tooltip]=\"rowAction.tooltip\"\n                                                  [getMenu]=\"rowAction.getMenu\"\n                                                  [enableV2_1]=\"enableV2_1\"\n                                                  [isLast]=\"isLast\"\n                                                  [widthToHideLabel]=\"widthToHideActionsLabels\">\n                        </dato-grid-toolbar-button>\n                    </div>\n                </ng-template>\n            </ng-container>\n\n            <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n            </dato-grid-toolbar-more-menu>\n        </div>\n\n    </section>\n\n\n    <!--  General Actions -->\n    <div class=\"d-flex items-center\">\n        <!--  Dynamic content for the right area -->\n        <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n            <ng-content select=\"[toolbarRightArea]\"></ng-content>\n        </div>\n        <div *ngIf=\"customActions.childNodes.length\" class=\"separator\"></div>\n        <!--  Group buttons  -->\n        <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n            <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n                              data-auto-id=\"grid-toolbar-open-groups\"\n                              removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n                              datoTooltip=\"core.row-grouping\" #groupTrigger\n                              class=\"mr-10 pointer\"></dato-icon-button>\n            <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n                              (click)=\"executeTableAction('Collapse Expand')\"\n                              [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n                              [disabled]=\"!hasGroups\"\n                              [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n                              class=\"pointer\"></dato-icon-button>\n            <div class=\"separator\"></div>\n        </div>\n\n        <!--  Settings and export  -->\n        <ng-container *ngIf=\"createAction\">\n            <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n                         [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n                <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n                {{ createAction.label | translate }}\n            </dato-button>\n            <div class=\"separator\"></div>\n        </ng-container>\n        <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n            <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n                <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n            </div>\n            <ng-template #button>\n                <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n                           [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n                           [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n                           [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n                           [class.mr-16]=\"!gridAction.separator\"\n                           [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n                </dato-icon>\n            </ng-template>\n            <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n        </ng-container>\n\n        <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n                          (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n                          icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n        <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n                          data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n                          icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n                          #settingsTrigger\n                          [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n        <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n            <div class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n            </dato-grid-toolbar-more-menu>\n        </ng-container>\n\n\n        <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n                   (menuClosed)=\"openMenus.settings = false\">\n            <ng-template datoMenuContent>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Page')\">\n                    <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitPage' | translate }}</button>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Content')\">\n                    <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitContent' | translate }}</button>\n                <ng-container *ngIf=\"groupsAllowed\">\n                    <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n                        <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n                        {{ 'core.group' | translate }}\n                    </button>\n                </ng-container>\n                <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n                    <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    <span>{{ 'core.hideShowColumns' | translate }}<span\n                            class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Settings')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetTableSettings' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Filters')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetAllFilters' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n                        (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n                <dato-icon datoSize=\"sm\"\n                           icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n                    {{ 'core.export-table' | translate }}\n                </button>\n            </ng-template>\n        </dato-menu>\n    </div>\n</section>\n\n\n",
+                template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n    <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n        <!--  Dynamic content for the left area -->\n        <div data-auto-id=\"grid-toolbar-dynamic-left\">\n            <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n        </div>\n\n        <div class=\"d-flex items-center\">\n            <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n            <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n                <div class=\"d-flex items-center\">\n                    <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n                        <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n                        <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n                                   data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n                    </div>\n                    <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n                               data-auto-id=\"grid-select-all-pages\">\n                        <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n                    </dato-link>\n                </div>\n                <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n            </ng-container>\n        </div>\n\n        <!--  Row Actions-->\n        <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n            <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n                <div *ngIf=\"!isRowActionHidden(rowAction)\"\n                    [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n                    [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n                    [class.disabled-action]=\"isActionDisabled(rowAction)\">\n                    <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n                                  [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n                </div>\n\n                <ng-template #defaultButton>\n                    <div (click)=\"onActionClick(rowAction)\">\n                        <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n                                                  [disabled]=\"isActionDisabled(rowAction)\"\n                                                  [label]=\"rowAction.label\"\n                                                  [shortLabel]=\"rowAction.shortLabel\"\n                                                  [tooltip]=\"rowAction.tooltip\"\n                                                  [getMenu]=\"rowAction.getMenu\"\n                                                  [enableV2_1]=\"enableV2_1\"\n                                                  [isLast]=\"isLast\"\n                                                  [widthToHideLabel]=\"widthToHideActionsLabels\">\n                        </dato-grid-toolbar-button>\n                    </div>\n                </ng-template>\n            </ng-container>\n\n            <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n            </dato-grid-toolbar-more-menu>\n        </div>\n\n    </section>\n\n\n    <!--  General Actions -->\n    <div class=\"d-flex items-center\">\n        <!--  Create action  -->\n        <ng-container *ngIf=\"createAction\">\n            <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n                         [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n                <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n                {{ createAction.label | translate }}\n            </dato-button>\n            <div class=\"separator\"></div>\n        </ng-container>\n\n        <!--  Dynamic content for the right area -->\n        <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n            <ng-content select=\"[toolbarRightArea]\"></ng-content>\n        </div>\n        <div *ngIf=\"customActions.childNodes.length && displayCustomGridActionsSeparator\" class=\"separator\"></div>\n\n        <!--  Group buttons  -->\n        <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n            <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n                              data-auto-id=\"grid-toolbar-open-groups\"\n                              removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n                              datoTooltip=\"core.row-grouping\" #groupTrigger\n                              class=\"mr-10 pointer\"></dato-icon-button>\n            <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n                              (click)=\"executeTableAction('Collapse Expand')\"\n                              [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n                              [disabled]=\"!hasGroups\"\n                              [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n                              class=\"pointer\"></dato-icon-button>\n            <div class=\"separator\"></div>\n        </div>\n\n        <!-- Grid Actions -->\n        <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n            <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n                <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n            </div>\n            <ng-template #button>\n                <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n                           [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n                           [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n                           [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n                           [class.mr-16]=\"!gridAction.separator\"\n                           [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n                </dato-icon>\n            </ng-template>\n            <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n        </ng-container>\n\n        <!-- Export -->\n        <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n                          (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n                          icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n\n        <!-- Settings -->\n        <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n                          data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n                          icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n                          #settingsTrigger\n                          [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n        <!-- More actions menu -->\n        <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n            <div class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n            </dato-grid-toolbar-more-menu>\n        </ng-container>\n\n        <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n                   (menuClosed)=\"openMenus.settings = false\">\n            <ng-template datoMenuContent>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Page')\">\n                    <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitPage' | translate }}</button>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Content')\">\n                    <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitContent' | translate }}</button>\n                <ng-container *ngIf=\"groupsAllowed\">\n                    <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n                        <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n                        {{ 'core.group' | translate }}\n                    </button>\n                </ng-container>\n                <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n                    <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    <span>{{ 'core.hideShowColumns' | translate }}<span\n                            class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Settings')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetTableSettings' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Filters')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetAllFilters' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n                        (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n                <dato-icon datoSize=\"sm\"\n                           icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n                    {{ 'core.export-table' | translate }}\n                </button>\n            </ng-template>\n        </dato-menu>\n    </div>\n</section>\n\n\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [".grouping-section{transition:visibility .2s ease-in-out,width .2s ease-in-out,opacity .2s ease-in-out;width:0}.grouping-section.open{width:75px;visibility:visible;opacity:1}:host .main-container{min-height:24px}:host .right-section{margin-right:50px}:host .separator{width:1px;height:24px;margin:0 16px}.disabled-action{pointer-events:none}"]
             }),
@@ -25301,7 +25349,7 @@
         };
     }
 
-    window.coreVersion = '21.4.0-rc.';
+    window.coreVersion = '22.1.1-rc.';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;