@datorama/core 22.1.1-rc.1 → 22.2.2

package/bundle.scss

@@ -14300,6 +14300,19 @@ dato-grid-v2 .ag-cell {
     border-right: solid 1px themify(primary-300, 0.5);
 }
 
+dato-grid-v2 ag-grid-angular .ag-floating-bottom {
+    border: none !important;
+}
+
+dato-grid-v2 ag-grid-angular .ag-floating-bottom .ag-row {
+    background-color: themify(primary-0) !important;
+    border: 1px solid themify(primary-200);
+}
+
+dato-grid-v2 ag-grid-angular .ag-floating-bottom .ag-row .ag-cell {
+    border-right: none;
+}
+
 dato-grid-v2 ag-grid-angular.enable-v2_1 {
     padding-top: 8px;
 }
@@ -14341,19 +14354,6 @@ dato-grid-v2 ag-grid-angular.pivot-mode .ag-row.ag-row-group:not(.ag-row-level-0
     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;
 }
@@ -14364,6 +14364,7 @@ dato-grid-v2 ag-grid-angular.pivot-mode .ag-cell {
 
 dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell {
     border: none;
+    border-top: 1px solid themify(primary-200);
 }
 
 dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-cell dato-grid-column-header {
@@ -14394,11 +14395,9 @@ dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell .ag
 }
 
 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-top: 1px solid themify(primary-200);
     border-right: 1px solid themify(primary-200);
+    background-color: themify(primary-100);
 }
 
 dato-grid-v2 ag-grid-angular.pivot-mode .ag-header-row .ag-header-group-cell.ag-header-group-cell-with-group.empty-pivot-header {

package/bundles/datorama-core.umd.js

@@ -8629,8 +8629,9 @@
         DatoSelectComponent.prototype.writeValue = function (activeOptions) {
             this._model = activeOptions ? akita.coerceArray(activeOptions) : [];
             if (this.options) {
+                var overTheLimit = this.limitSelectedTo && this.isMulti && this._model.length >= this.limitSelectedTo;
                 this.markAsActive(this._model, { deselectAll: true });
-                this.limitSelectedTo && this.updateDisabledState();
+                overTheLimit && this.updateDisabledState();
             }
             /** For later updates */
             this.cdr.markForCheck();
@@ -8667,7 +8668,7 @@
              */
             if (this.hasValue && this._initialOpen) {
                 this.markAsActive(this._model);
-                if (this.limitSelectedTo) {
+                if (this.limitSelectedTo && this._model.length === this.limitSelectedTo) {
                     this.updateDisabledState();
                 }
                 this._initialOpen = false;
@@ -8756,6 +8757,7 @@
         };
         DatoSelectComponent.prototype.removeOption = function (option) {
             var _this = this;
+            var updateDisabled = this.limitSelectedTo && this._model.length === this.limitSelectedTo;
             this._model = this._model.filter(function (current) { return current[_this.idKey] !== option[_this.idKey]; });
             var optionToRemove = this.options.find(function (datoOption) { return datoOption.option && datoOption.option[_this.idKey] === option[_this.idKey]; });
             /**
@@ -8765,7 +8767,7 @@
             if (optionToRemove) {
                 optionToRemove.active = false;
             }
-            this.limitSelectedTo && this.updateDisabledState();
+            updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             if (this.datoOverlay.attached) {
@@ -9115,6 +9117,9 @@
             if (!datoOption) {
                 return;
             }
+            var modelLength = this._model.length;
+            var updateDisabled = this.limitSelectedTo &&
+                (modelLength === this.limitSelectedTo || (modelLength === this.limitSelectedTo - 1 && !datoOption.active));
             datoOption.active = !datoOption.active;
             var rawOption = datoOption.option;
             if (datoOption.active) {
@@ -9123,7 +9128,7 @@
             else {
                 this._model = this._model.filter(function (current) { return current[_this.idKey] !== rawOption[_this.idKey]; });
             }
-            this.limitSelectedTo && this.updateDisabledState();
+            updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             this.datoOverlay.scheduleUpdate();
@@ -11578,20 +11583,17 @@
             if (this.gridRef.gridOptions.pivotMode) {
                 var _a = this.api.grid.getSortModel().pop() || {}, sort = _a.sort, colId = _a.colId;
                 var column = this.api.columns.getColumn(colId);
-                var pivotedColumn = this.getSecondaryColumn(colId);
-                if (pivotedColumn) {
-                    var uniquePivotParents = uniq(this.api.columns.getSecondaryColumns().map(function (column) { return column.getParent(); }));
-                    var secondaryColumn = this.getSecondaryColumn(pivotedColumn.getColId());
-                    var pivotColIndex = uniquePivotParents.indexOf(secondaryColumn.getParent());
-                    return { colId: getColField(pivotedColumn.getColDef()), sort: sort, pivotColIndex: pivotColIndex };
+                if (column) {
+                    return { colId: colId, sort: sort, colField: getColField(column.getColDef()) };
                 }
-                else if (column) {
-                    return { colId: getColField(column.getColDef()), sort: sort };
+                else {
+                    var secondaryColumn = this.getSecondaryColumn(colId);
+                    if (secondaryColumn) {
+                        return { colId: colId, sort: sort, colField: getColField(secondaryColumn.getColDef()) };
+                    }
                 }
             }
-            else {
-                return this.api.grid.getSortModel().pop();
-            }
+            return this.api.grid.getSortModel().pop();
         };
         GridQuery.prototype.selectSort = function () {
             return this.select(function (state) { return state.settings.sort; });
@@ -11688,7 +11690,10 @@
         };
         GridQuery.prototype.getSecondaryColumn = function (colId) {
             var secondaryColumns = this.api.columns.getSecondaryColumns();
-            return secondaryColumns && secondaryColumns.find(function (col) { return col.getColId() === colId; });
+            if (secondaryColumns) {
+                return secondaryColumns.find(function (col) { return col.getColId() === colId; });
+            }
+            return null;
         };
         GridQuery.prototype.filterCheckboxSelectionColumn = function (columns) {
             return columns.filter(function (column) { return !column.getUserProvidedColDef() || !column.getUserProvidedColDef().checkboxSelection; });
@@ -11740,6 +11745,8 @@
         DatoFilterConditions["NOT_IN_LIST"] = "NOT_IN_LIST";
         DatoFilterConditions["IS_EMPTY"] = "IS_EMPTY";
         DatoFilterConditions["NOT_EMPTY"] = "NOT_EMPTY";
+        DatoFilterConditions["IS_NULL"] = "IS_NULL";
+        DatoFilterConditions["NOT_NULL"] = "NOT_NULL";
     })(exports.DatoFilterConditions || (exports.DatoFilterConditions = {}));
     var DatoGridDateFilterOptions = [
         exports.DatoFilterConditions.IN_RANGE,
@@ -11823,8 +11830,10 @@
             case exports.DatoFilterConditions.IN_RANGE:
                 return rowValue >= filterValue && rowValue <= parseFloat(rangeEnd);
             case exports.DatoFilterConditions.IS_EMPTY:
+            case exports.DatoFilterConditions.IS_NULL:
                 return isNil(rowValue);
             case exports.DatoFilterConditions.NOT_EMPTY:
+            case exports.DatoFilterConditions.NOT_NULL:
                 return !isNil(rowValue);
         }
     }
@@ -12010,7 +12019,7 @@
         return contextActions;
     }
 
-    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_AP');
+    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_API');
 
     var defaultEditableColumnRenderer = function (params) {
         return params && params.value ? "<div class=\"value-wrapper ellipsis\">" + params.value + "</div>" : null;
@@ -12825,10 +12834,11 @@
             var _a;
             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 _c = this.colDef, filter = _c.filter, 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 filtersConfig = colDef.filtersConfig || this.colDef.filtersConfig || {};
             var colFilter = filter || colDef.filter;
             var filterOptions = DatoGridFilterOptionsMap[colFilter];
             this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
@@ -12850,7 +12860,11 @@
             if (this.filterSections.Conditional) {
                 var filterConditions = filterOptions || DatoGridStringFilterOptions;
                 if (filtersConfig.showEmptyConditions) {
-                    filterConditions = __spread(filterConditions, [exports.DatoFilterConditions.IS_EMPTY, exports.DatoFilterConditions.NOT_EMPTY]);
+                    var emptyConditions = [exports.DatoFilterConditions.IS_EMPTY, exports.DatoFilterConditions.NOT_EMPTY];
+                    if (this.filterType === exports.DatoGridFilterTypes.Number) {
+                        emptyConditions = [exports.DatoFilterConditions.IS_NULL, exports.DatoFilterConditions.NOT_NULL];
+                    }
+                    filterConditions = __spread(filterConditions, emptyConditions);
                 }
                 this.conditionalFilterOptions = filterConditions.map(function (operand, id) { return ({
                     id: id,
@@ -13241,7 +13255,10 @@
             valueControl.updateValueAndValidity();
         };
         DatoGridFilterComponent.prototype.isEmptyOperand = function (operand) {
-            return operand === exports.DatoFilterConditions.IS_EMPTY || operand === exports.DatoFilterConditions.NOT_EMPTY;
+            return (operand === exports.DatoFilterConditions.IS_EMPTY ||
+                operand === exports.DatoFilterConditions.NOT_EMPTY ||
+                operand === exports.DatoFilterConditions.IS_NULL ||
+                operand === exports.DatoFilterConditions.NOT_NULL);
         };
         DatoGridFilterComponent.prototype.isStringArray = function (value) {
             return isString(value[0]);
@@ -14382,17 +14399,19 @@
         };
         GridService.prototype.setGridFilters = function (filters) {
             var e_2, _a;
-            if (this.api) {
+            if (this.api && filters) {
                 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);
+                            this.setColumnFilter(column, filter, false);
                         }
                         else {
-                            var pivotColumn = this.gridQuery.getSecondaryColumn(filter.colId);
-                            this.setColumnFilter(pivotColumn, filter);
+                            var secondaryColumn = this.gridQuery.getSecondaryColumn(filter.colId);
+                            if (secondaryColumn) {
+                                this.setColumnFilter(secondaryColumn, filter, false);
+                            }
                         }
                     }
                 }
@@ -14403,7 +14422,23 @@
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
-                this.notifyFilterUpdate();
+                this.api.grid.onFilterChanged();
+            }
+        };
+        GridService.prototype.setGridSort = function (gridSort) {
+            if (this.api && gridSort) {
+                var colId = gridSort.colId, sort = gridSort.sort;
+                var column = this.api.columns.getColumn(colId);
+                if (column) {
+                    column.setSort(sort);
+                }
+                else {
+                    var secondaryColumn = this.gridQuery.getSecondaryColumn(colId);
+                    if (secondaryColumn) {
+                        secondaryColumn.setSort(sort);
+                    }
+                }
+                this.api.grid.onSortChanged();
             }
         };
         GridService.prototype.updateFilter = function (column, filter) {
@@ -14461,8 +14496,7 @@
             this.updateSettings({ gridAlignment: gridAlignment, columnsSizes: null });
         };
         GridService.prototype.saveSettingsToServer = function (settings) {
-            var isGlobal = this.gridQuery.getGridOptions().isGlobalSettings;
-            this.storageAPI.set(this.gridName, settings, isGlobal);
+            this.storageAPI.set(this.gridName, settings);
         };
         /**
          * @internal used to log grid events to the platform's logging service
@@ -14869,6 +14903,13 @@
                             column: column
                         };
                     }
+                    if (condition === exports.DatoFilterConditions.IS_NULL || condition === exports.DatoFilterConditions.NOT_NULL) {
+                        return {
+                            condition: exports.DatoFilterConditions.IS_NULL,
+                            value: condition === exports.DatoFilterConditions.IS_NULL ? 'true' : 'false',
+                            column: column
+                        };
+                    }
                     return __assign(__assign({}, item), { column: column });
                 })
             };
@@ -15460,10 +15501,7 @@
                 .pipe(operators.switchMap(function () {
                 _this.gridOptions = _this.normalizeOptions();
                 agGrid.gridOptions = _this.gridOptions;
-                var isGlobal = _this.gridOptions.isGlobalSettings;
-                var settingsLoader = _this.gridOptions.saveSettings === false
-                    ? rxjs.of(null)
-                    : _this.storageAPI.get(_this.gridOptions.gridName, isGlobal);
+                var settingsLoader = _this.gridOptions.saveSettings === false ? rxjs.of(null) : _this.storageAPI.get(_this.gridOptions.gridName);
                 return rxjs.combineLatest([agGrid.gridReady, settingsLoader]);
             }), ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function (_a) {
@@ -15471,6 +15509,11 @@
                 if (!_this.gridOptions.rowData) {
                     api.showLoadingOverlay();
                 }
+                if (!_this.gridOptions.statusBar) {
+                    /** Fix ag-grid bug that doesn't add ag-hidden class to the status bar, which only get fixed in later versions */
+                    var el = agGridEl.querySelector('.ag-status-bar');
+                    addClass(el, 'ag-hidden');
+                }
                 var gridApi = { grid: api, columns: columnApi };
                 _this.gridService._setApi(gridApi, agGrid);
                 _this.gridQuery._setApi(gridApi, agGrid);
@@ -15510,6 +15553,9 @@
         DatoGridControllerComponent.prototype.setGridFilters = function (filters) {
             this.gridService.setGridFilters(filters);
         };
+        DatoGridControllerComponent.prototype.setGridSort = function (sort) {
+            this.gridService.setGridSort(sort);
+        };
         DatoGridControllerComponent.prototype.onFilterChanged = function () {
             return this.gridQuery.filterChanged();
         };
@@ -16248,6 +16294,7 @@
             // Show fit cell content and collapse/expand row groups controls
             this.showBottomControls = false;
             this.isExpanded = true;
+            this.hasRowGroupColumns = false;
             this.isServerSidePagination = false;
             // The number of pages displayed in the navigation panel for each view as defined by product.
             this.MINI_DISPLAY_LENGTH = 2;
@@ -16296,8 +16343,10 @@
             });
             this.gridQuery.gridReady$
                 .pipe(operators.tap(function () {
+                var rowGroupColumns = _this.gridQuery.api.columns.getRowGroupColumns();
                 _this.gridApi = _this.gridQuery.api.grid;
                 _this.showBottomControls = _this.gridQuery.getGridOptions().showBottomControls;
+                _this.hasRowGroupColumns = rowGroupColumns && rowGroupColumns.length > 0;
             }), operators.switchMap(function () {
                 _this.isServerSidePagination = _this.gridQuery.isServerSide;
                 return _this.isServerSidePagination ? _this.gridQuery.serverDataLoaded$ : _this.gridQuery.rowDataChanged$;
@@ -16423,9 +16472,6 @@
         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);
@@ -16518,7 +16564,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-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",
+                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 *ngIf=\"hasRowGroupColumns\" [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\"\n                      datoSize=\"md\" (click)=\"toggleGroupsState()\" data-auto-id=\"pagination-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=\"pagination-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=\"pagination-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}"]
             }),
@@ -16741,18 +16787,6 @@
             this.registerGroupListeners();
             this.subscribeRowsSelectionData();
         };
-        DatoGridV2ToolbarComponent.prototype.getCellValueChangeEvent = function () {
-            var _this = this;
-            return this.gridController.gridQuery.waitForGrid(function () {
-                return _this.gridQuery.gridRef.cellValueChanged.pipe(operators.debounceTime(100), ngxTakeUntilDestroy.untilDestroyed(_this));
-            });
-        };
-        DatoGridV2ToolbarComponent.prototype.getRowDataUpdatedEvent = function () {
-            var _this = this;
-            return this.gridController.gridQuery.waitForGrid(function () {
-                return _this.gridQuery.gridRef.rowDataUpdated.pipe(operators.debounceTime(100), ngxTakeUntilDestroy.untilDestroyed(_this));
-            });
-        };
         DatoGridV2ToolbarComponent.prototype.onActionClick = function (action) {
             if (isFunction(action.onClick)) {
                 var selectedRowsCount = this.gridController.gridQuery.getSelectedRowsCount();
@@ -21228,40 +21262,6 @@
      * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
      */
 
-    var RichTextService = /** @class */ (function () {
-        function RichTextService(http, config) {
-            this.http = http;
-            this.config = config;
-        }
-        RichTextService.prototype.getLib = function (appendScriptFunc, appendStyleFunc) {
-            if (!this.richTextScript$) {
-                this.initLib(appendScriptFunc, appendStyleFunc);
-            }
-            return this.richTextScript$;
-        };
-        RichTextService.prototype.initLib = function (appendScriptFunc, appendStyleFunc) {
-            this.richTextScript$ = rxjs.combineLatest([
-                this.http
-                    .get(this.config.paths.richText + "/index.js", { responseType: 'text' })
-                    .pipe(operators.tap(function (lib) { return appendScriptFunc(lib, 'rich-text-editor'); })),
-                this.http
-                    .get(this.config.paths.richText + "/plugins/autocomplete/plugin.css", { responseType: 'text' })
-                    .pipe(operators.tap(function (style) { return appendStyleFunc(style, 'tinymce-autocomplete'); }))
-            ]).pipe(operators.shareReplay(1));
-        };
-        RichTextService.ctorParameters = function () { return [
-            { type: http.HttpClient },
-            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] }
-        ]; };
-        RichTextService.ɵprov = core.ɵɵdefineInjectable({ factory: function RichTextService_Factory() { return new RichTextService(core.ɵɵinject(http.HttpClient), core.ɵɵinject(DATO_CORE_CONFIG)); }, token: RichTextService, providedIn: "root" });
-        RichTextService = __decorate([
-            core.Injectable({ providedIn: 'root' }),
-            __param(1, core.Inject(DATO_CORE_CONFIG)),
-            __metadata("design:paramtypes", [http.HttpClient, Object])
-        ], RichTextService);
-        return RichTextService;
-    }());
-
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -21275,12 +21275,12 @@
     var ɵ0$3 = getTinymce;
     var DatoRichTextDirective = /** @class */ (function (_super) {
         __extends(DatoRichTextDirective, _super);
-        function DatoRichTextDirective(ngZone, richTextService, config, host) {
+        function DatoRichTextDirective(ngZone, http, host, config) {
             var _this = _super.call(this) || this;
             _this.ngZone = ngZone;
-            _this.richTextService = richTextService;
-            _this.config = config;
+            _this.http = http;
             _this.host = host;
+            _this.config = config;
             _this.autocompleteOptions = {};
             _this.forcePlainTextPasting = false;
             _this.format = 'html';
@@ -21314,11 +21314,28 @@
                 base: this.config.paths.richText,
                 query: ''
             };
-            this.richTextService
-                .getLib(appendScript, appendStyle)
-                .pipe(ngxTakeUntilDestroy.untilDestroyed(this))
-                .subscribe(function () {
-                _this.init.call(_this);
+            /**
+             * We support only one instance in load time
+             */
+            if (window.tinymce) {
+                this.init.call(this);
+            }
+            else {
+                this.loadLib().subscribe(function (lib) {
+                    appendScript(lib, 'rich-text-editor');
+                    _this.init.call(_this);
+                    _this.loadAutoCompleteStyle();
+                });
+            }
+        };
+        DatoRichTextDirective.prototype.loadLib = function () {
+            return this.http.get(this.config.paths.richText + "/index.js", { responseType: 'text' });
+        };
+        DatoRichTextDirective.prototype.loadAutoCompleteStyle = function () {
+            this.http
+                .get(this.config.paths.richText + "/plugins/autocomplete/plugin.css", { responseType: 'text' })
+                .subscribe(function (style) {
+                appendStyle(style, 'tinymce-autocomplete');
             });
         };
         DatoRichTextDirective.prototype.initEditor = function (_, editor) {
@@ -21411,9 +21428,9 @@
         var DatoRichTextDirective_1;
         DatoRichTextDirective.ctorParameters = function () { return [
             { type: core.NgZone },
-            { type: RichTextService },
-            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] },
-            { type: core.ElementRef }
+            { type: http.HttpClient },
+            { type: core.ElementRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] }
         ]; };
         __decorate([
             core.Input(),
@@ -21479,9 +21496,10 @@
                     }
                 ]
             }),
-            __param(2, core.Inject(DATO_CORE_CONFIG)),
+            __param(3, core.Inject(DATO_CORE_CONFIG)),
             __metadata("design:paramtypes", [core.NgZone,
-                RichTextService, Object, core.ElementRef])
+                http.HttpClient,
+                core.ElementRef, Object])
         ], DatoRichTextDirective);
         return DatoRichTextDirective;
     }(BaseCustomControl));
@@ -24004,9 +24022,7 @@
         };
         DatoBreadcrumbsComponent.prototype.initEditableHeader = function () {
             var _this = this;
-            this.headerControl.valueChanges
-                .pipe(operators.debounceTime(300), ngxTakeUntilDestroy.untilDestroyed(this))
-                .subscribe(function (res) {
+            this.headerControl.valueChanges.pipe(operators.debounceTime(300), ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function (res) {
                 _this.updateEditableText.emit(res);
                 _this.cdr.detectChanges();
             });
@@ -24695,22 +24711,17 @@
     }());
 
     var DatoProgressBarComponent = /** @class */ (function () {
-        function DatoProgressBarComponent() {
+        function DatoProgressBarComponent(cdr) {
+            this.cdr = cdr;
             this.barColor = 'primary-100';
             this.thresholds = [33, 66];
         }
         DatoProgressBarComponent.prototype.ngOnInit = function () {
-            if (!this.parts && this.percent) {
-                if (!this.color) {
-                    this.initColor();
-                }
-                this.parts = [
-                    {
-                        percent: this.percent,
-                        color: this.color,
-                        tooltip: this.tooltip
-                    }
-                ];
+            if (!this.parts) {
+                this.percent = this.percent || 0;
+                this.isByPercent = true;
+                this.hasInitialColor = !!this.color;
+                this.initSinglePart();
             }
             else if (this.parts &&
                 this.parts.every(function (part) { return part.weight >= 0; }) &&
@@ -24718,6 +24729,27 @@
                 this.initPartsPercent();
             }
         };
+        DatoProgressBarComponent.prototype.ngOnChanges = function (changes) {
+            if (this.isByPercent &&
+                ((changes.percent && !changes.percent.firstChange) ||
+                    (changes.color && !changes.color.firstChange) ||
+                    (changes.tooltip && !changes.tooltip.firstChange))) {
+                this.initSinglePart();
+                this.cdr.detectChanges();
+            }
+        };
+        DatoProgressBarComponent.prototype.initSinglePart = function () {
+            if (!this.color || !this.hasInitialColor) {
+                this.initColor();
+            }
+            this.parts = [
+                {
+                    percent: this.percent,
+                    color: this.color,
+                    tooltip: this.tooltip
+                }
+            ];
+        };
         DatoProgressBarComponent.prototype.initColor = function () {
             if (isEmpty(this.thresholds)) {
                 this.color = 'accent-400';
@@ -24758,6 +24790,9 @@
                 }
             }
         };
+        DatoProgressBarComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -24793,11 +24828,12 @@
         DatoProgressBarComponent = __decorate([
             core.Component({
                 selector: 'dato-progress-bar',
-                template: "<div class=\"bar d-flex width-100 overflow-hidden\"\n     [style.width]=\"width\"\n     [class]=\"barColor + '-background-color'\">\n    <div *ngFor=\"let part of parts; index as i\"\n         class=\"part height-100\"\n         [ngClass]=\"part.color ? part.color + '-background-color' : ''\"\n         [style.width]=\"i > 0 ? 'calc(' + part.percent + '% + 8px)' : part.percent + '%'\"\n         [style.z-index]=\"100 - i\"\n         [datoTooltipV2]=\"part.tooltip\">\n    </div>\n</div>\n\n<div *ngIf=\"showLegend\" class=\"d-flex mt-12\">\n    <div *ngFor=\"let part of parts; index as i\" class=\"d-flex mr-16\">\n        <div class=\"d-flex dato-note primary-400-color\">\n            <div class=\"legend-color mr-6\" [ngClass]=\"part.color ? part.color + '-background-color' : ''\"></div>\n            <div>{{ part.legendLabel || part.tooltip }}</div>\n        </div>\n    </div>\n</div>\n",
+                template: "<div class=\"bar d-flex width-100 overflow-hidden\"\n     [style.width]=\"width\"\n     [class]=\"barColor + '-background-color'\">\n    <div *ngFor=\"let part of parts; index as i\"\n         class=\"part height-100\"\n         [ngClass]=\"part.color ? part.color + '-background-color' : ''\"\n         [style.width]=\"i > 0 ? 'calc(' + part.percent + '% + 8px)' : part.percent + '%'\"\n         [style.z-index]=\"100 - i\"\n         [datoTooltipV2]=\"part.tooltip\">\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<div *ngIf=\"showLegend\" class=\"d-flex mt-12\">\n    <div *ngFor=\"let part of parts; index as i\" class=\"d-flex mr-16\">\n        <div class=\"d-flex dato-note primary-400-color\">\n            <div class=\"legend-color mr-6\" [ngClass]=\"part.color ? part.color + '-background-color' : ''\"></div>\n            <div>{{ part.legendLabel || part.tooltip }}</div>\n        </div>\n    </div>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 encapsulation: core.ViewEncapsulation.None,
                 styles: ["dato-progress-bar .bar{height:8px;border-radius:4px}dato-progress-bar .part{border-radius:0 4px 4px 0}dato-progress-bar .part:not(:first-child){margin-left:-8px}dato-progress-bar .legend-color{width:16px;height:16px;min-width:16px;border-radius:50%}"]
-            })
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
         ], DatoProgressBarComponent);
         return DatoProgressBarComponent;
     }());
@@ -25349,7 +25385,7 @@
         };
     }
 
-    window.coreVersion = '22.1.1-rc.';
+    window.coreVersion = '22.2.2';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;
@@ -25791,7 +25827,6 @@
     exports.ɵl = DatoGridItemsCountCellComponent;
     exports.ɵm = DatoGridV2ToolbarMoreMenuComponent;
     exports.ɵn = DatoGridSearchBarComponent;
-    exports.ɵo = RichTextService;
 
     Object.defineProperty(exports, '__esModule', { value: true });