@datorama/core 22.9.10 → 22.10.1-rc.1

package/bundles/datorama-core.umd.js

@@ -8430,6 +8430,91 @@
         return !!window.Cypress;
     }
 
+    /**
+     * @license
+     * Copyright Datorama. All Rights Reserved.
+     *
+     * Use of this source code is governed by an Apache License 2.0 license that can be
+     * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
+     */
+    var DatoTriggerSingle = /** @class */ (function () {
+        function DatoTriggerSingle(cdr) {
+            this.cdr = cdr;
+            this._placeholder = '';
+        }
+        Object.defineProperty(DatoTriggerSingle.prototype, "placeholder", {
+            set: function (value) {
+                this._placeholder = value;
+                this.cdr.detectChanges();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DatoTriggerSingle.prototype, "context", {
+            set: function (value) {
+                this._model = { $implicit: value };
+                this.cdr.detectChanges();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DatoTriggerSingle.prototype, "hidePlaceholder", {
+            get: function () {
+                return !this._model || !this._model.$implicit;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        DatoTriggerSingle.prototype.ngOnInit = function () {
+            this.cdr.detach();
+        };
+        Object.defineProperty(DatoTriggerSingle.prototype, "getLabel", {
+            get: function () {
+                return this._model && this._model.$implicit && this._model.$implicit[this.labelKey];
+            },
+            enumerable: true,
+            configurable: true
+        });
+        DatoTriggerSingle.prototype.triggerChangeDetection = function () {
+            this.cdr.detectChanges();
+        };
+        DatoTriggerSingle.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", core.TemplateRef)
+        ], DatoTriggerSingle.prototype, "loadingTemplate", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", DatoSelectActiveDirective)
+        ], DatoTriggerSingle.prototype, "active", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DatoTriggerSingle.prototype, "placeholder", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], DatoTriggerSingle.prototype, "labelKey", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DatoTriggerSingle.prototype, "context", null);
+        DatoTriggerSingle = __decorate([
+            core.Component({
+                selector: 'dato-trigger-single',
+                template: "<ng-template *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n<ng-container\n        *ngIf=\"active && !hidePlaceholder\"\n        [ngTemplateOutlet]=\"active.tpl\"\n        [ngTemplateOutletContext]=\"_model\">\n</ng-container>\n<ng-container *ngIf=\"!active\">{{getLabel | translate}}</ng-container>\n<span class=\"dato-select__placeholder\" *ngIf=\"hidePlaceholder\">{{_placeholder}}</span>\n<dato-icon datoIcon=\"arrow-down\" datoSize=\"sm\" class=\"dato-select__single__arrow\"></dato-icon>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;position:relative;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host dato-icon{position:absolute;top:50%;transform:translateY(-50%);right:10px}"]
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], DatoTriggerSingle);
+        return DatoTriggerSingle;
+    }());
+
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -8748,8 +8833,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();
@@ -8877,6 +8963,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]; });
             /**
@@ -8886,7 +8973,7 @@
             if (optionToRemove) {
                 optionToRemove.active = false;
             }
-            this.limitSelectedTo && this.updateDisabledState();
+            updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             this.asyncUpdateDropdownPosition();
@@ -9234,6 +9321,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) {
@@ -9242,7 +9332,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.asyncUpdateDropdownPosition();
@@ -9306,6 +9396,9 @@
                 setTimeout(function () { return _this.datoOverlay.scheduleUpdate(); }, 0);
             }
         };
+        DatoSelectComponent.prototype.triggerChangeDetectionInDatoSingle = function () {
+            this.datoTriggerSingle.triggerChangeDetection();
+        };
         DatoSelectComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef },
             { type: DatoTranslateService },
@@ -9315,6 +9408,10 @@
             { type: undefined, decorators: [{ type: core.Attribute, args: ['datoSize',] }] },
             { type: String, decorators: [{ type: core.Attribute, args: ['width',] }] }
         ]; };
+        __decorate([
+            core.ViewChild('datoTriggerSingle'),
+            __metadata("design:type", DatoTriggerSingle)
+        ], DatoSelectComponent.prototype, "datoTriggerSingle", void 0);
         __decorate([
             core.ViewChild('dropdown'),
             __metadata("design:type", core.TemplateRef)
@@ -9481,7 +9578,7 @@
         DatoSelectComponent = __decorate([
             core.Component({
                 selector: 'dato-select',
-                template: "<section class=\"dato-select__trigger\" [class.dato-select--naked]=\"_naked\" [class.dato-select--disabled]=\"_disabled\">\n\n  <div class=\"dato-select__single\" *ngIf=\"isSingle\" [ngClass]=\"_dropdownClass\">\n    <dato-input [class.force-hide]=\"(!open && isCombo) || !isCombo\" [placeholder]=\"searchPlaceholder | translate\"\n      (keyup)=\"keyup($event)\" [isFocused]=\"_focus\" [isLoading]=\"isLoading\" [formControl]=\"searchControl\" type=\"search\">\n    </dato-input>\n\n    <dato-trigger-single [loadingTemplate]=\"loadingTemplate\" [active]=\"active\" datoErrorValidationBorderAnchor tabindex=\"0\" [labelKey]=\"labelKey\"\n      [context]=\"_model[0]\" [class.force-hide]=\"open && isCombo\" [placeholder]=\"placeholder | translate\"\n      class=\"ontop-overlay\" (keydown)=\"preventBodyScroll($event)\" (keyup)=\"keyup($event)\" (click)=\"openDropdown()\">\n    </dato-trigger-single>\n  </div>\n\n  <dato-trigger-multi [loadingTemplate]=\"loadingTemplate\" [options]=\"_model\" datoErrorValidationBorderAnchor [control]=\"searchControl\"\n    [placeholder]=\"placeholder | translate\" [labelKey]=\"labelKey\" [idKey]=\"idKey\" (keyup)=\"keyup($event)\"\n    [isLoading]=\"isLoading\" [keepFocus]=\"keepFocus\" [limitTo]=\"limitTo\" [clickOutside]=\"_clickOutside\" [isSortable]=\"isSortable\"\n                      [selectAllChipTxt]=\"selectAllChipTxt\"\n                      [showSelectAllChip]=\"selectAllChipTxt && showSelectAllChip\"\n                      (unselectAll)=\"checkAll(false)\"\n    (removeOption)=\"removeOption($event)\" (reorderOptions)=\"reorderOptions($event)\" *ngIf=\"isMulti\"\n    (click)=\"openDropdown($event)\"></dato-trigger-multi>\n\n</section>\n\n<ng-template #dropdown>\n  <section class=\"dato-select__dropdown-container\" tabindex=\"0\" (keyup)=\"keyup($event)\">\n\n    <!-- HEADER -->\n\n    <header class=\"dato-select__header dato-select__option dato-select__option--simple\" data-is-floating\n      *ngIf=\"isMulti && allowSelectAll\" [class.force-hide]=\"_showEmptyResults\" [class.ml-10]=\"containsGroups\">\n      <dato-checkbox [checked]=\"_isAllChecked\" (check)=\"checkAll($event)\"\n        [indeterminatelyChecked]=\"_isIndeterminatelyChecked\">\n        {{'core.select-all' | translate}}<span class=\"primary-300-color note-italic ml-5\">{{_count}}</span>\n      </dato-checkbox>\n    </header>\n\n    <!-- END HEADER -->\n\n    <!-- DROPDOWN -->\n\n    <div class=\"dato-select__dropdown\">\n\n      <ng-content></ng-content>\n\n      <dato-select-empty [show]=\"_showEmptyResults\">{{_noItemsLabel}}</dato-select-empty>\n      <div class=\"dato-select__option dato-select-infinite-spinner\" data-is-floating *ngIf=\"infiniteScrollLoading\">\n        <span class=\"dato-input__spinner\"></span>\n      </div>\n\n    </div>\n\n    <!-- END DROPDOWN -->\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"dato-select__footer d-flex\" [class.with-actions]=\"_withActions\">\n\n      <ng-content select=\"[datoSelectFooter]\"></ng-content>\n\n      <ng-container *ngIf=\"_withActions\">\n        <dato-link class=\"mr-20\" datoType=\"secondary\" (click)=\"close()\">Cancel</dato-link>\n        <dato-button datoSize=\"sm\" (click)=\"save.emit(); close();\">Save</dato-button>\n      </ng-container>\n\n    </footer>\n\n    <!-- END FOOTER -->\n\n  </section>\n\n</ng-template>\n",
+                template: "<section class=\"dato-select__trigger\" [class.dato-select--naked]=\"_naked\" [class.dato-select--disabled]=\"_disabled\">\n\n  <div class=\"dato-select__single\" *ngIf=\"isSingle\" [ngClass]=\"_dropdownClass\">\n    <dato-input [class.force-hide]=\"(!open && isCombo) || !isCombo\" [placeholder]=\"searchPlaceholder | translate\"\n      (keyup)=\"keyup($event)\" [isFocused]=\"_focus\" [isLoading]=\"isLoading\" [formControl]=\"searchControl\" type=\"search\">\n    </dato-input>\n\n    <dato-trigger-single #datoTriggerSingle [loadingTemplate]=\"loadingTemplate\" [active]=\"active\" datoErrorValidationBorderAnchor tabindex=\"0\" [labelKey]=\"labelKey\"\n      [context]=\"_model[0]\" [class.force-hide]=\"open && isCombo\" [placeholder]=\"placeholder | translate\"\n      class=\"ontop-overlay\" (keydown)=\"preventBodyScroll($event)\" (keyup)=\"keyup($event)\" (click)=\"openDropdown()\">\n    </dato-trigger-single>\n  </div>\n\n  <dato-trigger-multi [loadingTemplate]=\"loadingTemplate\" [options]=\"_model\" datoErrorValidationBorderAnchor [control]=\"searchControl\"\n    [placeholder]=\"placeholder | translate\" [labelKey]=\"labelKey\" [idKey]=\"idKey\" (keyup)=\"keyup($event)\"\n    [isLoading]=\"isLoading\" [keepFocus]=\"keepFocus\" [limitTo]=\"limitTo\" [clickOutside]=\"_clickOutside\" [isSortable]=\"isSortable\"\n                      [selectAllChipTxt]=\"selectAllChipTxt\"\n                      [showSelectAllChip]=\"selectAllChipTxt && showSelectAllChip\"\n                      (unselectAll)=\"checkAll(false)\"\n    (removeOption)=\"removeOption($event)\" (reorderOptions)=\"reorderOptions($event)\" *ngIf=\"isMulti\"\n    (click)=\"openDropdown($event)\"></dato-trigger-multi>\n\n</section>\n\n<ng-template #dropdown>\n  <section class=\"dato-select__dropdown-container\" tabindex=\"0\" (keyup)=\"keyup($event)\">\n\n    <!-- HEADER -->\n\n    <header class=\"dato-select__header dato-select__option dato-select__option--simple\" data-is-floating\n      *ngIf=\"isMulti && allowSelectAll\" [class.force-hide]=\"_showEmptyResults\" [class.ml-10]=\"containsGroups\">\n      <dato-checkbox [checked]=\"_isAllChecked\" (check)=\"checkAll($event)\"\n        [indeterminatelyChecked]=\"_isIndeterminatelyChecked\">\n        {{'core.select-all' | translate}}<span class=\"primary-300-color note-italic ml-5\">{{_count}}</span>\n      </dato-checkbox>\n    </header>\n\n    <!-- END HEADER -->\n\n    <!-- DROPDOWN -->\n\n    <div class=\"dato-select__dropdown\">\n\n      <ng-content></ng-content>\n\n      <dato-select-empty [show]=\"_showEmptyResults\">{{_noItemsLabel}}</dato-select-empty>\n      <div class=\"dato-select__option dato-select-infinite-spinner\" data-is-floating *ngIf=\"infiniteScrollLoading\">\n        <span class=\"dato-input__spinner\"></span>\n      </div>\n\n    </div>\n\n    <!-- END DROPDOWN -->\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"dato-select__footer d-flex\" [class.with-actions]=\"_withActions\">\n\n      <ng-content select=\"[datoSelectFooter]\"></ng-content>\n\n      <ng-container *ngIf=\"_withActions\">\n        <dato-link class=\"mr-20\" datoType=\"secondary\" (click)=\"close()\">Cancel</dato-link>\n        <dato-button datoSize=\"sm\" (click)=\"save.emit(); close();\">Save</dato-button>\n      </ng-container>\n\n    </footer>\n\n    <!-- END FOOTER -->\n\n  </section>\n\n</ng-template>\n",
                 preserveWhitespaces: false,
                 providers: [valueAccessor$3, DatoOverlay],
                 encapsulation: core.ViewEncapsulation.None,
@@ -9499,88 +9596,6 @@
         return DatoSelectComponent;
     }(BaseCustomControl));
 
-    /**
-     * @license
-     * Copyright Datorama. All Rights Reserved.
-     *
-     * Use of this source code is governed by an Apache License 2.0 license that can be
-     * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
-     */
-    var DatoTriggerSingle = /** @class */ (function () {
-        function DatoTriggerSingle(cdr) {
-            this.cdr = cdr;
-            this._placeholder = '';
-        }
-        Object.defineProperty(DatoTriggerSingle.prototype, "placeholder", {
-            set: function (value) {
-                this._placeholder = value;
-                this.cdr.detectChanges();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DatoTriggerSingle.prototype, "context", {
-            set: function (value) {
-                this._model = { $implicit: value };
-                this.cdr.detectChanges();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DatoTriggerSingle.prototype, "hidePlaceholder", {
-            get: function () {
-                return !this._model || !this._model.$implicit;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DatoTriggerSingle.prototype.ngOnInit = function () {
-            this.cdr.detach();
-        };
-        Object.defineProperty(DatoTriggerSingle.prototype, "getLabel", {
-            get: function () {
-                return this._model && this._model.$implicit && this._model.$implicit[this.labelKey];
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DatoTriggerSingle.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", core.TemplateRef)
-        ], DatoTriggerSingle.prototype, "loadingTemplate", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", DatoSelectActiveDirective)
-        ], DatoTriggerSingle.prototype, "active", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DatoTriggerSingle.prototype, "placeholder", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], DatoTriggerSingle.prototype, "labelKey", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DatoTriggerSingle.prototype, "context", null);
-        DatoTriggerSingle = __decorate([
-            core.Component({
-                selector: 'dato-trigger-single',
-                template: "<ng-template *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n<ng-container\n        *ngIf=\"active && !hidePlaceholder\"\n        [ngTemplateOutlet]=\"active.tpl\"\n        [ngTemplateOutletContext]=\"_model\">\n</ng-container>\n<ng-container *ngIf=\"!active\">{{getLabel | translate}}</ng-container>\n<span class=\"dato-select__placeholder\" *ngIf=\"hidePlaceholder\">{{_placeholder}}</span>\n<dato-icon datoIcon=\"arrow-down\" datoSize=\"sm\" class=\"dato-select__single__arrow\"></dato-icon>\n",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;position:relative;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host dato-icon{position:absolute;top:50%;transform:translateY(-50%);right:10px}"]
-            }),
-            __metadata("design:paramtypes", [core.ChangeDetectorRef])
-        ], DatoTriggerSingle);
-        return DatoTriggerSingle;
-    }());
-
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -12047,7 +12062,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;
@@ -12087,14 +12102,6 @@
         GridRowSelectionType["MULTIPLE"] = "multiple";
     })(exports.GridRowSelectionType || (exports.GridRowSelectionType = {}));
 
-    (function (GridStatusColumnTypes) {
-        GridStatusColumnTypes["SUCCESS"] = "SUCCESS";
-        GridStatusColumnTypes["FAILURE"] = "FAILURE";
-        GridStatusColumnTypes["IN_PROGRESS"] = "IN_PROGRESS";
-        GridStatusColumnTypes["PENDING"] = "PENDING";
-        GridStatusColumnTypes["WAITING"] = "WAITING";
-    })(exports.GridStatusColumnTypes || (exports.GridStatusColumnTypes = {}));
-
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -14336,9 +14343,36 @@
                 this.initPivotSecondaryColsProcess(params);
                 params.gridOptions.enableV2_1 = true;
                 params.gridOptions.saveSettings = false;
+                params.gridOptions.defaultColDef.cellClass = this.getPivotCellClass.bind(this);
+                params.gridOptions.autoGroupColumnDef.cellClass = this.getPivotCellClass.bind(this);
             }
             return params.gridOptions;
         };
+        GridService.prototype.getPivotCellClass = function (params) {
+            var _a = params.node, leafGroup = _a.leafGroup, childIndex = _a.childIndex, rowGroupIndex = _a.rowGroupIndex;
+            var gridQuery = params.colDef.headerComponentParams.gridQuery;
+            var cellClass = "";
+            if (gridQuery && gridQuery.api) {
+                var columns = gridQuery.api.columns;
+                var allDisplayedColumns = columns.getAllDisplayedColumns();
+                var col = allDisplayedColumns.find(function (column) {
+                    return column.getColId() === params.colDef.colId;
+                });
+                var colIndex = allDisplayedColumns.indexOf(col);
+                if (rowGroupIndex <= colIndex) {
+                    if (leafGroup) {
+                        if (childIndex % 2 === 0) {
+                            /** If row is even */
+                            cellClass += ' primary-100-background-color';
+                        }
+                    }
+                    else {
+                        cellClass += 'primary-0-background-color pointer dato-simple-bold';
+                    }
+                }
+            }
+            return cellClass;
+        };
         GridService.prototype.normalizeColumns = function (colDefs, gridOptions) {
             var _this = this;
             if (gridOptions === void 0) { gridOptions = null; }
@@ -14642,8 +14676,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
@@ -15648,10 +15681,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) {
@@ -16492,7 +16522,9 @@
         DatoGridPaginationV2Component.prototype.ngOnInit = function () {
             var _this = this;
             this.gridQuery
-                .waitForGrid(function () { return _this.gridQuery.gridRef.filterChanged; })
+                .waitForGrid(function () {
+                return rxjs.merge(_this.gridQuery.gridRef.filterChanged, _this.gridQuery.gridRef.rowGroupOpened, _this.gridQuery.gridRef.expandOrCollapseAll);
+            })
                 .pipe(ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function () {
                 _this.gridApi.paginationGoToPage(0);
@@ -16944,18 +16976,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();
@@ -19570,7 +19590,6 @@
         function DatoPageLoaderComponent() {
             this.msg = '';
             this.salesforce = false;
-            this.size = 'medium';
             this.circleIds = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
         }
         __decorate([
@@ -19581,14 +19600,10 @@
             core.Input(),
             __metadata("design:type", Object)
         ], DatoPageLoaderComponent.prototype, "salesforce", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], DatoPageLoaderComponent.prototype, "size", void 0);
         DatoPageLoaderComponent = __decorate([
             core.Component({
                 selector: 'dato-page-loader',
-                template: "<div class=\"d-flex-column align-center\">\n    <ng-container *ngIf=\"salesforce; else datoramaPageLoader\">\n        <div class=\"slds-spinner_container\">\n            <div role=\"status\" class=\"slds-spinner slds-spinner_brand\" [ngClass]=\"'slds-spinner_' + size\">\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-template #datoramaPageLoader>\n        <div class=\"animation-container d-flex align-center d-flex-wrap\">\n            <div class=\"circle d-flex align-center\" *ngFor=\"let id of circleIds\" [ngClass]=\"'circle-' + id\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n                    <circle cx=\"6\" cy=\"6\" r=\"5\" />\n                </svg>\n            </div>\n        </div>\n    </ng-template>\n    <span class=\"loading-message simple-bold\">{{msg | translate}}</span>\n</div>\n",
+                template: "<div class=\"d-flex-column align-center\">\n    <ng-container *ngIf=\"salesforce; else datoramaPageLoader\">\n        <div class=\"slds-spinner_container\">\n            <div role=\"status\" class=\"slds-spinner slds-spinner_medium slds-spinner_brand\">\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-template #datoramaPageLoader>\n        <div class=\"animation-container d-flex align-center d-flex-wrap\">\n            <div class=\"circle d-flex align-center\" *ngFor=\"let id of circleIds\" [ngClass]=\"'circle-' + id\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n                    <circle cx=\"6\" cy=\"6\" r=\"5\" />\n                </svg>\n            </div>\n        </div>\n    </ng-template>\n    <span class=\"loading-message simple-bold\">{{msg | translate}}</span>\n</div>",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             })
         ], DatoPageLoaderComponent);
@@ -20566,15 +20581,8 @@
 
     var DatoGridStatusCellComponent = /** @class */ (function () {
         function DatoGridStatusCellComponent(cdr) {
-            var _a;
             this.cdr = cdr;
-            this.defaultConfigByStatus = (_a = {},
-                _a[exports.GridStatusColumnTypes.SUCCESS] = { icon: 'success-line', iconCssClass: 'green-400-color' },
-                _a[exports.GridStatusColumnTypes.FAILURE] = { icon: 'failed-line', iconCssClass: 'red-400-color' },
-                _a[exports.GridStatusColumnTypes.PENDING] = { icon: 'time', iconCssClass: 'yellow-400-color' },
-                _a[exports.GridStatusColumnTypes.WAITING] = { icon: 'info-line', iconCssClass: 'orange-400-color' },
-                _a[exports.GridStatusColumnTypes.IN_PROGRESS] = { showSpinner: true },
-                _a);
+            this.DEFAULT_MIN_WIDTH = 100;
         }
         DatoGridStatusCellComponent.prototype.agInit = function (params) {
             var value = params.value, valueFormatted = params.valueFormatted, node = params.node;
@@ -20589,14 +20597,15 @@
             var mainCustomCellConfig = customCellConfig || {};
             var valueCustomCellConfig = valueToCustomCellConfig ? valueToCustomCellConfig[params.value] || {} : {};
             var config = __assign(__assign({}, mainCustomCellConfig), valueCustomCellConfig);
-            var textCssClass = config.textCssClass, icon = config.icon, iconCssClass = config.iconCssClass, showSpinner = config.showSpinner, getAdditionalText = config.getAdditionalText, additionalTextCssClass = config.additionalTextCssClass, getIsVisible = config.getIsVisible, status = config.status;
-            var defaultConfig = this.defaultConfigByStatus[status] || {};
+            var color = config.color, icon = config.icon, cssClass = config.cssClass, iconCssClass = config.iconCssClass, minWidth = config.minWidth, showSpinner = config.showSpinner, getAdditionalText = config.getAdditionalText, getIsVisible = config.getIsVisible;
             this.isVisible = !getIsVisible || getIsVisible(params.data);
-            this.icon = icon || defaultConfig.icon;
-            this.iconCssClass = iconCssClass || defaultConfig.iconCssClass || '';
-            this.textCssClass = textCssClass || '';
-            this.additionalTextCssClass = additionalTextCssClass || '';
-            this.showSpinner = !!showSpinner || !!defaultConfig.showSpinner;
+            this.color = color || 'primary';
+            this.backgroundClass = this.color + "-" + (this.color === 'accent' ? '100' : '200') + "-background-color";
+            this.icon = icon;
+            this.minWidth = minWidth || this.DEFAULT_MIN_WIDTH;
+            this.cssClass = cssClass || '';
+            this.iconCssClass = iconCssClass || '';
+            this.showSpinner = showSpinner;
             this.additionalText = getAdditionalText ? getAdditionalText(params.data) : null;
         };
         DatoGridStatusCellComponent.prototype.refresh = function (params) {
@@ -20610,9 +20619,8 @@
         DatoGridStatusCellComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-status-cell',
-                template: "<div *ngIf=\"!isGroup && isVisible\" class=\"height-100 d-flex items-center\">\n    <dato-icon *ngIf=\"icon\" class=\"mr-6 {{iconCssClass}}\" [icon]=\"icon\" datoSize=\"sm\"></dato-icon>\n    <dato-page-loader *ngIf=\"showSpinner\" [salesforce]=\"true\" size=\"x-small\" class=\"mr-10 mt-15\"></dato-page-loader>\n    <div class=\"dato-simple status line-height-18 {{textCssClass}}\" [class.ellipsis]=\"!additionalText\"\n         [datoTooltipV2]=\"status\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n        {{status}}\n    </div>\n    <div *ngIf=\"additionalText\" class=\"dato-simple ml-3 ellipsis line-height-18 {{additionalTextCssClass}}\"\n         [datoTooltipV2]=\"status + ' ' + additionalText\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n        {{additionalText}}\n    </div>\n</div>\n<span *ngIf=\"isGroup\">{{status}}</span>\n",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [".line-height-18{line-height:18px}"]
+                template: "<div *ngIf=\"!isGroup && isVisible\" class=\"height-100 d-flex items-center\">\n    <div *ngIf=\"status\" class=\"d-flex justify-center items-center px-15 py-5 {{backgroundClass}} {{cssClass}}\" [style.min-width.px]=\"minWidth\">\n        <dato-icon *ngIf=\"icon\" class=\"mr-5 {{iconCssClass}}\" [icon]=\"icon\" datoSize=\"sm\"></dato-icon>\n        <div class=\"dato-note {{color}}-800-color\" [class.ellipsis]=\"!additionalText\"\n             [datoTooltipV2]=\"status\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\" [datoTooltipDisabled]=\"!!additionalText\">\n            {{status}}\n        </div>\n        <div *ngIf=\"additionalText\" class=\"dato-note {{color}}-800-color ml-3 ellipsis\"\n             [datoTooltipV2]=\"status + ' ' + additionalText\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n            {{additionalText}}\n        </div>\n        <span *ngIf=\"showSpinner\" class=\"dato-spinner-loader ml-5\"></span>\n    </div>\n</div>\n<span *ngIf=\"isGroup\">{{status}}</span>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [core.ChangeDetectorRef])
         ], DatoGridStatusCellComponent);
@@ -21443,40 +21451,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.
@@ -21490,20 +21464,20 @@
     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';
             _this.isOneLine = false;
             _this.initialValue = '';
-            _this.defaultPlugins = 'link fullscreen image lists table autocomplete';
+            _this.defaultPlugins = 'link fullscreen textcolor colorpicker image lists table textpattern autocomplete';
             _this.defaultToolbar = [
-                'fontfamily fontsize forecolor backcolor bold italic underline link',
+                'fontselect fontsizeselect forecolor backcolor bold italic underline link',
                 'alignleft aligncenter alignright alignjustify outdent indent | table numlist bullist  | image fullscreen'
             ];
             return _this;
@@ -21529,11 +21503,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) {
@@ -21557,6 +21548,8 @@
                 target: this.host.nativeElement,
                 width: this.width || 600,
                 height: this.height || 300,
+                force_br_newlines: true,
+                force_p_newlines: false,
                 resize: 'both',
                 branding: false,
                 inline: this.inline,
@@ -21564,12 +21557,10 @@
                 readonly: this.disabled,
                 plugins: this.plugins || this.defaultPlugins,
                 toolbar: isNil(this.toolbar) ? this.defaultToolbar : this.toolbar,
-                font_size_formats: '8px 10px 12px 14px 18px 24px 36px',
+                fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
                 min_width: 480,
                 menubar: false,
                 autocomplete: this.autocompleteOptions,
-                suffix: '.min',
-                skin: 'tinymce-5',
                 setup: function (editor) {
                     _this.editor = editor;
                     editor.on('init', function (e) {
@@ -21626,9 +21617,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(),
@@ -21694,9 +21685,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));
@@ -24219,9 +24211,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();
             });
@@ -25584,7 +25574,7 @@
         };
     }
 
-    window.coreVersion = '22.10.7-rc.';
+    window.coreVersion = '22.10.0';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;
@@ -26026,7 +26016,6 @@
     exports.ɵl = DatoGridItemsCountCellComponent;
     exports.ɵm = DatoGridV2ToolbarMoreMenuComponent;
     exports.ɵn = DatoGridSearchBarComponent;
-    exports.ɵo = RichTextService;
 
     Object.defineProperty(exports, '__esModule', { value: true });