@datorama/core 22.10.3-rc.0 → 22.10.9-rc.1

package/bundle.scss

@@ -4870,13 +4870,13 @@ dato-button button[disabled] {
  Secondary
  */
 dato-button[datoType='secondary'] button {
-    background-color: themify(primary-300, 0.15);
-    color: themify(primary-400);
+    background-color: themify(primary-100);
+    color: themify(primary-600);
 }
 
 dato-button[datoType='secondary'] button:hover {
-    background-color: themify(primary-300, 0.25);
-    color: themify(primary-500);
+    background-color: themify(primary-200);
+    color: themify(primary-600);
 }
 
 dato-button[datoType='secondary'] dato-icon svg {
@@ -4884,8 +4884,8 @@ dato-button[datoType='secondary'] dato-icon svg {
 }
 
 dato-button[datoType='secondary'] button:active {
-    background-color: themify(primary-300, 0.35);
-    color: themify(primary-600);
+    background-color: themify(primary-300);
+    color: themify(primary-700);
 }
 
 /**
@@ -14054,7 +14054,6 @@ dato-input input:disabled:hover {
 }
 
 .dato-grid .ag-row.ag-row-group {
-    background-color: themify(primary-0);
     border-bottom: solid 1px themify(primary-200);
     height: 35px;
 }
@@ -14064,6 +14063,178 @@ dato-input input:disabled:hover {
     font-weight: 600;
 }
 
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-0 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-1 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14 {
+    background-color: rgba(var(--primary-50), 1) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2.ag-row-even .ag-cell.ag-cell-value:nth-child(n+3) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-2.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+3) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3.ag-row-even .ag-cell.ag-cell-value:nth-child(n+4) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-3.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+4) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4.ag-row-even .ag-cell.ag-cell-value:nth-child(n+5) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-4.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+5) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5.ag-row-even .ag-cell.ag-cell-value:nth-child(n+6) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-5.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+6) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6.ag-row-even .ag-cell.ag-cell-value:nth-child(n+7) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-6.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+7) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7.ag-row-even .ag-cell.ag-cell-value:nth-child(n+8) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-7.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+8) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8.ag-row-even .ag-cell.ag-cell-value:nth-child(n+9) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-8.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+9) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9.ag-row-even .ag-cell.ag-cell-value:nth-child(n+10) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-9.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+10) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10.ag-row-even .ag-cell.ag-cell-value:nth-child(n+11) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-10.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+11) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11.ag-row-even .ag-cell.ag-cell-value:nth-child(n+12) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-11.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+12) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12.ag-row-even .ag-cell.ag-cell-value:nth-child(n+13) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-12.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+13) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13.ag-row-even .ag-cell.ag-cell-value:nth-child(n+14) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-13.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+14) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14.ag-row-even .ag-cell.ag-cell-value:nth-child(n+15) {
+    background-color: themify(primary-100) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-14.ag-row-odd .ag-cell.ag-cell-value:nth-child(n+15) {
+    background-color: themify(primary-50) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-0 .ag-cell.ag-cell-value:nth-child(n+1) {
+    background-color: themify(primary-0) !important;
+}
+
+.dato-grid .ag-row.ag-row-group .ag-row-group:not(.ag-row-hover).ag-row-level-1 .ag-cell.ag-cell-value:nth-child(n+2) {
+    background-color: themify(primary-0) !important;
+}
+
 .dato-grid .ag-row.ag-row-group:hover span {
     color: themify(accent-400);
 }
@@ -14368,10 +14539,6 @@ 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:not(.ag-row-level-0) {
-    background-color: themify(primary-50) !important;
-}
-
 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

@@ -8789,7 +8789,7 @@
                     this.markAsActive(this._model);
                     this._initialOpen = false;
                 }
-                if (this.limitSelectedTo) {
+                if (this.limitSelectedTo && this._model.length === this.limitSelectedTo) {
                     this.updateDisabledState();
                 }
             }
@@ -12087,6 +12087,14 @@
         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.
@@ -12175,26 +12183,40 @@
      * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
      */
     var DatoGridV2NoDataOverlayComponent = /** @class */ (function () {
-        function DatoGridV2NoDataOverlayComponent(gridQuery, gridService, element) {
+        function DatoGridV2NoDataOverlayComponent(gridQuery, gridService, element, cdr) {
             this.gridQuery = gridQuery;
             this.gridService = gridService;
             this.element = element;
+            this.cdr = cdr;
             this.config = {};
         }
-        Object.defineProperty(DatoGridV2NoDataOverlayComponent.prototype, "showImage", {
+        Object.defineProperty(DatoGridV2NoDataOverlayComponent.prototype, "overlayStyles", {
+            /** Adjust the overlay to the grid body viewport height */
             get: function () {
-                var elParent = this.element.nativeElement.parentElement;
-                if (elParent.classList.contains('ag-overlay-wrapper')) {
-                    return elParent.offsetHeight >= 390;
+                if (this.gridBody) {
+                    var _a = this.gridBody, offsetHeight = _a.offsetHeight, offsetTop = _a.offsetTop;
+                    return {
+                        height: offsetHeight + "px",
+                        marginTop: offsetTop + "px"
+                    };
                 }
-                return true;
+                return null;
             },
             enumerable: true,
             configurable: true
         });
         DatoGridV2NoDataOverlayComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var grid = this.element.nativeElement.closest('dato-grid-v2');
+            this.gridBody = grid && grid.querySelector('.ag-body-viewport');
             this.filterActive$ = this.gridQuery.filterActive$;
-            this.hasError$ = this.gridQuery.isServerSide ? this.gridQuery.serverSideError$ : rxjs.of(false);
+            this.hasError$ = this.gridQuery.isServerSide
+                ? this.gridQuery.serverSideError$.pipe(operators.tap(function () {
+                    setTimeout(function () {
+                        _this.cdr.detectChanges();
+                    });
+                }))
+                : rxjs.of(false);
             this.initDefaultConfig();
             var gridConfig = this.gridQuery.getGridOptions().overlaysConfig || {};
             var userConfig = deepmerge(gridConfig, this.config);
@@ -12204,6 +12226,38 @@
             this.gridService.clearAllFilters();
         };
         DatoGridV2NoDataOverlayComponent.prototype.agInit = function (params) { };
+        DatoGridV2NoDataOverlayComponent.prototype.isIconHidden = function () {
+            var e_1, _a;
+            if (this.gridBody) {
+                var el = this.element.nativeElement;
+                if (el) {
+                    var container = el.querySelector('.container');
+                    var icon = container.querySelector('img');
+                    var heightOfElements = 0;
+                    /** hide the icon until next change detection cycle */
+                    if (icon.height === 0) {
+                        return true;
+                    }
+                    try {
+                        for (var _b = __values(container.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var child = _c.value;
+                            var childHeight = child.offsetHeight || child.height || 0;
+                            var childMarginBottom = toNumber(child.style.marginBottom.replace('px', ''));
+                            heightOfElements += childHeight + childMarginBottom;
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                    return heightOfElements > this.gridBody.offsetHeight;
+                }
+            }
+            return true;
+        };
         DatoGridV2NoDataOverlayComponent.prototype.initDefaultConfig = function () {
             var enableSearch = this.gridQuery.getGridOptions().enableSearch;
             this.defaultConfig = {
@@ -12224,20 +12278,29 @@
         DatoGridV2NoDataOverlayComponent.ctorParameters = function () { return [
             { type: GridQuery },
             { type: GridService },
-            { type: core.ElementRef }
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
         ], DatoGridV2NoDataOverlayComponent.prototype, "config", void 0);
+        __decorate([
+            core.HostBinding('style'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], DatoGridV2NoDataOverlayComponent.prototype, "overlayStyles", null);
         DatoGridV2NoDataOverlayComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-v2-no-data-overlay',
-                template: "<div class=\"container d-flex-column align-center\">\n    <ng-container *ngIf=\"(hasError$ | async) === false; else error\">\n          <ng-container *ngIf=\"(filterActive$ | async) === true; else noData\">\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noResult }\"></ng-container>\n              <div class=\"d-flex items-center\">\n                  <div class=\"dato-simple primary-400-color\">{{'core.try-to-adjust-or' | translate}}&nbsp;</div>\n                  <dato-link (click)=\"clearFilters()\">{{ 'core.clear-filters' | translate }}</dato-link>\n              </div>\n          </ng-container>\n          <ng-template #noData>\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noData}\"></ng-container>\n              <ng-content select=\"[no-data-content]\"></ng-content>\n          </ng-template>\n\n    </ng-container>\n    <ng-template #error>\n        <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.serverSideError}\"></ng-container>\n        <div #errorContent><ng-content select=\"[server-error-content]\"></ng-content></div>\n        <div class=\"dato-simple primary-400-color\" *ngIf=\"errorContent.children.length === 0\">{{'core.try-to-refresh-or-contact' | translate}}&nbsp;</div>\n    </ng-template>\n</div>\n\n<ng-template #imgNText let-view>\n    <img class=\"mb-30\" [datoStaticSrc]=\"view.icon\" *ngIf=\"showImage && view.icon\">\n    <div class=\"dato-simple-bold primary-500-color mb-3\">{{ view.text | translate }}</div>\n</ng-template>\n",
+                template: "<div class=\"container d-flex-column align-center height-100 p-4\">\n    <ng-container *ngIf=\"(hasError$ | async) === false; else error\">\n          <ng-container *ngIf=\"(filterActive$ | async) === true; else noData\">\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noResult }\"></ng-container>\n              <div class=\"d-flex items-center\">\n                  <div class=\"dato-simple primary-400-color\">{{'core.try-to-adjust-or' | translate}}&nbsp;</div>\n                  <dato-link (click)=\"clearFilters()\">{{ 'core.clear-filters' | translate }}</dato-link>\n              </div>\n          </ng-container>\n          <ng-template #noData>\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noData}\"></ng-container>\n              <ng-content select=\"[no-data-content]\"></ng-content>\n          </ng-template>\n\n    </ng-container>\n    <ng-template #error>\n        <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.serverSideError}\"></ng-container>\n        <div #errorContent><ng-content select=\"[server-error-content]\"></ng-content></div>\n        <div class=\"dato-simple primary-400-color\" *ngIf=\"errorContent.children.length === 0\">{{'core.try-to-refresh-or-contact' | translate}}&nbsp;</div>\n    </ng-template>\n</div>\n\n<ng-template #imgNText let-view>\n    <img [datoStaticSrc]=\"view.icon\" *ngIf=\"view.icon\" [hidden]=\"isIconHidden()\" [style.marginBottom]=\"'30px'\">\n    <div class=\"dato-simple-bold primary-500-color\" [style.marginBottom]=\"'3px'\">{{ view.text | translate }}</div>\n</ng-template>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [":host{pointer-events:all}"]
+                styles: [":host{pointer-events:all;overflow:auto}"]
             }),
-            __metadata("design:paramtypes", [GridQuery, GridService, core.ElementRef])
+            __metadata("design:paramtypes", [GridQuery,
+                GridService,
+                core.ElementRef,
+                core.ChangeDetectorRef])
         ], DatoGridV2NoDataOverlayComponent);
         return DatoGridV2NoDataOverlayComponent;
     }());
@@ -15568,7 +15631,7 @@
         });
         DatoGridControllerComponent.prototype.ngOnDestroy = function () {
             this.contentInit.complete();
-            this.tooltip && this.clearTooltip();
+            this.clearTooltip();
             this.rowHoverComponent && this.rowHoverComponent.destroy();
             this.rowHoverComponent = null;
         };
@@ -15798,40 +15861,51 @@
                 });
                 this.addOnHoverElement();
             }
-            agGrid.cellMouseOver
-                .pipe(operators.filter(function (_a) {
-                var node = _a.node, column = _a.column;
-                return lastHoveredCell !== node.id + "-" + column.getColId();
-            }), ngxTakeUntilDestroy.untilDestroyed(this))
-                .subscribe(function (event) {
-                lastHoveredCell = event.node.id + "-" + event.column.getColId();
+            agGrid.cellMouseOver.pipe(ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function (event) {
+                var node = event.node, column = event.column;
+                if (lastHoveredCell === node.id + "-" + column.getColId()) {
+                    clearTimeout(_this.cellMouseOutTimer);
+                    return;
+                }
+                lastHoveredCell = node.id + "-" + column.getColId();
                 _this.showTooltip(event);
                 var row = event.event.target.parentElement;
-                if (onHoverEnabled && (event.node.group === false || isNil(event.node.group)) && _this.lastHoveredRow !== row) {
+                if (onHoverEnabled && (node.group === false || isNil(node.group)) && _this.lastHoveredRow !== row) {
                     var previousNode = _this.lastHoveredRow;
                     _this.lastHoveredRow = row;
                     _this.toggleRowHoverClass([previousNode, _this.lastHoveredRow]);
                     _this.setOnHoverState(true, event);
                 }
             });
-            var onTooltipOut = rxjs.merge(rxjs.fromEvent(bodyViewport, 'scroll'), rxjs.fromEvent(this.agGridEl, 'mouseleave'), agGrid.cellMouseOut);
-            onTooltipOut
+            var onTooltipOut = rxjs.merge(rxjs.fromEvent(bodyViewport, 'scroll'), rxjs.fromEvent(this.agGridEl, 'mouseleave'));
+            onTooltipOut.pipe(ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function () {
+                lastHoveredCell = null;
+                _this.clearTooltip();
+            });
+            agGrid.cellMouseOut
                 .pipe(operators.filter(function () { return !isNil(_this.tooltip); }), ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function () {
-                _this.clearTooltip();
+                _this.cellMouseOutTimer = window.setTimeout(function () { return _this.clearTooltip(); });
             });
         };
         /**
          * Dispose the tooltip
          */
         DatoGridControllerComponent.prototype.clearTooltip = function () {
-            this.tooltip.dispose();
+            this.tooltip && this.tooltip.dispose();
             this.tooltip = null;
         };
         DatoGridControllerComponent.prototype.showTooltip = function (event) {
             var cell = event.event.target;
+            if (cell.tagName === 'SPAN' && cell.scrollWidth === 0) {
+                cell = cell.parentElement;
+            }
+            if (event.colDef.editable) {
+                cell = cell.querySelector('.value-wrapper') || cell;
+            }
             var textOverflow = cell.offsetWidth < cell.scrollWidth;
             if (textOverflow) {
+                clearTimeout(this.cellMouseOutTimer);
                 var params = { cell: cell, value: cell.innerText };
                 isNil(this.tooltip) ? this.createAndShowTooltip(params) : this.updateTooltip(params);
             }
@@ -16076,7 +16150,7 @@
                 template: "<ag-grid-angular data-auto-id=\"grid\" class=\"dato-grid ag-theme-material\" [class.has-background]=\"enableBackground\" [class.enable-v2_1]=\"enableV2_1\"\n                 [class.with-multi-selection-col]=\"gridOptions?.showMultiSelectionCheckboxes\" [class.pivot-mode]=\"isPivotMode\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 encapsulation: core.ViewEncapsulation.None,
-                styles: ["dato-grid-v2{flex-grow:1;display:flex;flex-direction:column;position:relative}dato-grid-v2 .dato-grid,dato-grid-v2 dato-grid-pagination-v2{position:absolute;left:0;right:0;bottom:0}dato-grid-v2 .dato-grid{top:0;bottom:50px}dato-grid-v2 .grid-hover-actions{position:absolute;z-index:2;transition:opacity .2s ease-in-out}dato-grid-v2 .ag-row-drag{width:initial!important}dato-grid-v2 .da-grid-icon{display:inline-block;line-height:31px;vertical-align:middle;width:initial;height:initial}dato-grid-v2 .da-grid-icon.drag{width:14px;height:14px;margin-right:6px;opacity:0;transition:opacity .3s;transform:translateY(-50%)}dato-grid-v2 .da-grid-icon.folder{width:18px;height:35px;margin:0 8px}dato-grid-v2 .ag-row.ag-row-hover .da-grid-icon.drag{opacity:1}dato-grid-v2 ag-grid-angular.tree .ag-group-contracted,dato-grid-v2 ag-grid-angular.tree .ag-group-expanded{display:inline-block;width:18px;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-group-checkbox{display:none}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-empty-folder .folder{margin-left:26px}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-1 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 1)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-1{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-2 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 2)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-2{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-3 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 3)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-3{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-4 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 4)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-4{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row div[col-id=ag-Grid-AutoColumn]{padding-left:0}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell{display:flex;align-items:center}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .ag-group-value>span{display:inline-block;vertical-align:middle}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .initials{border-radius:50%;padding:4px;margin-right:8px;margin-left:20px;width:28px;height:28px;display:inline-block;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-row-group-leaf-indent{margin-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate:before{text-align:center;content:'-';display:inline-block;position:absolute;top:0;left:0;right:0;bottom:0;line-height:.5;color:#fff}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell{line-height:33px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.dato-editable-cell{line-height:29px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.ag-cell-inline-editing{height:35px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell{line-height:42px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.dato-editable-cell{line-height:38px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.ag-cell-inline-editing{height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell{line-height:48px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.dato-editable-cell{line-height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.ag-cell-inline-editing{height:50px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell{line-height:57px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.dato-editable-cell{line-height:53px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.ag-cell-inline-editing{height:59px}dato-grid-v2 ag-grid-angular .ag-cell.checkbox-selection-cell{display:flex}dato-grid-v2 .ag-menu .da-grid-icon svg{vertical-align:middle}dato-grid-v2 .ag-header-cell-sortable .ag-sort-none-icon{opacity:0;transition:opacity .2s}dato-grid-v2 .ag-header-cell-sortable:hover .ag-sort-none-icon{opacity:1}dato-grid-v2 .group-contracted-icon,dato-grid-v2 .group-expanded-icon{width:7px}dato-grid-v2 .group-expanded-icon{transform:rotate(90deg)}dato-grid-v2 .dato-grid .ag-cell{border-top:0;border-bottom:0}.ag-dnd-ghost{min-width:100px;border:none;display:flex;justify-content:flex-start;align-content:center;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;z-index:10000000}.ag-dnd-ghost .da-grid-icon.column-move-hide svg{height:18px;width:18px}.ag-dnd-ghost .da-grid-icon.column-move svg,.ag-dnd-ghost .da-grid-icon.column-move-pin svg{height:16px;width:16px}"]
+                styles: ["dato-grid-v2{flex-grow:1;display:flex;flex-direction:column;position:relative}dato-grid-v2 .dato-grid,dato-grid-v2 dato-grid-pagination-v2{position:absolute;left:0;right:0;bottom:0}dato-grid-v2 .dato-grid{top:0;bottom:50px}dato-grid-v2 .grid-hover-actions{position:absolute;z-index:2;transition:opacity .2s ease-in-out}dato-grid-v2 .ag-row-drag{width:initial!important}dato-grid-v2 .da-grid-icon{display:inline-block;line-height:31px;vertical-align:middle;width:initial;height:initial}dato-grid-v2 .da-grid-icon.drag{width:14px;height:14px;margin-right:6px;opacity:0;transition:opacity .3s;transform:translateY(-50%)}dato-grid-v2 .da-grid-icon.folder{width:18px;height:35px;margin:0 8px}dato-grid-v2 .ag-row.ag-row-hover .da-grid-icon.drag{opacity:1}dato-grid-v2 ag-grid-angular.tree .ag-group-contracted,dato-grid-v2 ag-grid-angular.tree .ag-group-expanded{display:inline-block;width:18px;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-group-checkbox{display:none}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-empty-folder .folder{margin-left:26px}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-1 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 1)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-1{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-2 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 2)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-2{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-3 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 3)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-3{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-4 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 4)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-4{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row div[col-id=ag-Grid-AutoColumn]{padding-left:0}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell{display:flex;align-items:center}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .ag-group-value>span{display:inline-block;vertical-align:middle}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .initials{border-radius:50%;padding:4px;margin-right:8px;margin-left:20px;width:28px;height:28px;display:inline-block;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-row-group-leaf-indent{margin-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate:before{text-align:center;content:'-';display:inline-block;position:absolute;top:0;left:0;right:0;bottom:0;line-height:.5;color:#fff}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell{line-height:33px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.dato-editable-cell{line-height:29px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.ag-cell-inline-editing{height:35px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell{line-height:42px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.dato-editable-cell{line-height:38px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.ag-cell-inline-editing{height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell{line-height:48px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.dato-editable-cell{line-height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.ag-cell-inline-editing{height:50px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell{line-height:57px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.dato-editable-cell{line-height:53px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.ag-cell-inline-editing{height:59px}dato-grid-v2 ag-grid-angular .ag-cell.checkbox-selection-cell{display:flex}dato-grid-v2 .ag-menu .da-grid-icon svg{vertical-align:middle}dato-grid-v2 .ag-header-cell-sortable .ag-sort-none-icon{opacity:0;transition:opacity .2s}dato-grid-v2 .ag-header-cell-sortable:hover .ag-sort-none-icon{opacity:1}dato-grid-v2 .group-contracted-icon,dato-grid-v2 .group-expanded-icon{width:7px}dato-grid-v2 .group-expanded-icon{transform:rotate(90deg)}dato-grid-v2 .dato-grid .ag-cell{border-top:0;border-bottom:0}dato-grid-v2 .ag-overlay-wrapper ng-component{display:flex}.ag-dnd-ghost{min-width:100px;border:none;display:flex;justify-content:flex-start;align-content:center;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;z-index:10000000}.ag-dnd-ghost .da-grid-icon.column-move-hide svg{height:18px;width:18px}.ag-dnd-ghost .da-grid-icon.column-move svg,.ag-dnd-ghost .da-grid-icon.column-move-pin svg{height:16px;width:16px}"]
             }),
             __metadata("design:paramtypes", [DatoGridControllerComponent, core.ElementRef])
         ], DatoGridV2Component);
@@ -16418,7 +16492,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);
@@ -19496,6 +19572,7 @@
         function DatoPageLoaderComponent() {
             this.msg = '';
             this.salesforce = false;
+            this.size = 'medium';
             this.circleIds = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
         }
         __decorate([
@@ -19506,10 +19583,14 @@
             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_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>",
+                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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             })
         ], DatoPageLoaderComponent);
@@ -20487,8 +20568,15 @@
 
     var DatoGridStatusCellComponent = /** @class */ (function () {
         function DatoGridStatusCellComponent(cdr) {
+            var _a;
             this.cdr = cdr;
-            this.DEFAULT_MIN_WIDTH = 100;
+            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);
         }
         DatoGridStatusCellComponent.prototype.agInit = function (params) {
             var value = params.value, valueFormatted = params.valueFormatted, node = params.node;
@@ -20503,15 +20591,14 @@
             var mainCustomCellConfig = customCellConfig || {};
             var valueCustomCellConfig = valueToCustomCellConfig ? valueToCustomCellConfig[params.value] || {} : {};
             var config = __assign(__assign({}, mainCustomCellConfig), valueCustomCellConfig);
-            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;
+            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] || {};
             this.isVisible = !getIsVisible || getIsVisible(params.data);
-            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.icon = icon || defaultConfig.icon;
+            this.iconCssClass = iconCssClass || defaultConfig.iconCssClass || '';
+            this.textCssClass = textCssClass || '';
+            this.additionalTextCssClass = additionalTextCssClass || '';
+            this.showSpinner = !!showSpinner || !!defaultConfig.showSpinner;
             this.additionalText = getAdditionalText ? getAdditionalText(params.data) : null;
         };
         DatoGridStatusCellComponent.prototype.refresh = function (params) {
@@ -20525,8 +20612,9 @@
         DatoGridStatusCellComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-status-cell',
-                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
+                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}"]
             }),
             __metadata("design:paramtypes", [core.ChangeDetectorRef])
         ], DatoGridStatusCellComponent);
@@ -25498,7 +25586,7 @@
         };
     }
 
-    window.coreVersion = '22.10.3-rc.';
+    window.coreVersion = '22.10.9-rc.';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;