@datorama/core 22.15.0 → 22.15.3

package/fesm5/datorama-core.js

@@ -1,6 +1,6 @@
 import { __extends, __assign, __decorate, __metadata, __values, __param, __spread, __read, __rest } from 'tslib';
 import { forwardRef, NgZone, Renderer2, Input, ViewChild, ElementRef, Component, ChangeDetectionStrategy, NgModule, Attribute, HostBinding, ɵɵdefineInjectable, Injectable, isDevMode, InjectionToken, Inject, ChangeDetectorRef, HostListener, Directive, EventEmitter, Output, ɵɵinject, ApplicationRef, Injector, INJECTOR, TemplateRef, ViewContainerRef, Pipe, ViewEncapsulation, ComponentFactoryResolver, ContentChildren, QueryList, ViewChildren, Optional, ContentChild, SkipSelf, Self, SecurityContext } from '@angular/core';
-import { fromEvent, merge as merge$1, Subject, combineLatest, Observable, forkJoin, of, Subscription, BehaviorSubject, EMPTY, defer, interval, ReplaySubject, throwError, isObservable, timer, pipe } from 'rxjs';
+import { fromEvent, merge as merge$1, Subject, combineLatest, Observable, forkJoin, of, Subscription, BehaviorSubject, ReplaySubject, EMPTY, defer, interval, throwError, isObservable, timer, pipe } from 'rxjs';
 import { NG_VALUE_ACCESSOR, NgControl, FormControl, ReactiveFormsModule, Validators, FormBuilder, ControlContainer, FormGroup, FormControlDirective, FormControlName } from '@angular/forms';
 import { untilDestroyed } from 'ngx-take-until-destroy';
 import { debounceTime, filter as filter$1, map as map$1, pluck, tap, switchMap, takeUntil, take, auditTime, distinctUntilChanged, throttleTime, first, mapTo, startWith, pairwise, skip, shareReplay, delay as delay$1, switchMapTo, repeat, concatMap, concatMapTo } from 'rxjs/operators';
@@ -5695,10 +5695,10 @@ var DatoGridComponent = /** @class */ (function (_super) {
                 _this.onChange(selectedRows);
             },
             rowSelection: 'multiple',
-            rowDeselection: true,
+            // rowDeselection removed: true by default in AG Grid 27 (suppress with suppressRowDeselection).
             unSortIcon: true,
-            animateRows: true,
-            rememberGroupStateWhenNewData: true
+            animateRows: true
+            // rememberGroupStateWhenNewData removed: no-op since AG Grid 24 (transaction updates keep group state).
         };
         _this.infinitePagination = false;
         _this.isRowsCollapsed = true;
@@ -11157,7 +11157,12 @@ function getGridModel(gridName) {
  */
 function getSortModel(columnApi) {
     var sortIndexes = {};
-    var sortedColumns = columnApi.getColumnState().filter(function (columnState) { return columnState.sort != null; });
+    // AG Grid 27: getColumnState() returns undefined before the grid's columns are initialized.
+    // getSortModel() is reached via getCurrentGridSettings()/onFilterSortChanged() on resize/data
+    // events that can fire before that point, so guard against undefined to avoid
+    // "Cannot read properties of undefined (reading 'filter')".
+    var columnState = columnApi.getColumnState() || [];
+    var sortedColumns = columnState.filter(function (state) { return state.sort != null; });
     sortedColumns.forEach(function (columnState) {
         sortIndexes[columnState.colId] = columnState.sortIndex;
     });
@@ -11372,6 +11377,32 @@ function tryParsePivotValue(str) {
     }
     return value;
 }
+/** ag-grid's colId prefix for pivotRowTotals columns (PivotColDefService.PIVOT_ROW_TOTAL_PREFIX, not exported) */
+var PIVOT_ROW_TOTAL_COL_ID_PREFIX = 'PivotRowTotal_';
+/**
+ * ag-grid 22 nested each pivot row total column in one group per pivot level, and the innermost group gets the "Total" header,
+ * but ag-grid 27 adds the column without groups.
+ * Turn the column def into those groups in place, as processSecondaryColDef can't replace it in its parent's children.
+ * This relies on ag-grid checking for children before it calls processSecondaryColDef, so re-check it when moving to processPivotResultColDef.
+ */
+function wrapPivotRowTotalColDef(colDef, headerName, pivotLevels) {
+    if (!colDef.colId || !colDef.colId.startsWith(PIVOT_ROW_TOTAL_COL_ID_PREFIX)) {
+        return;
+    }
+    var totalColDef = __assign({}, colDef);
+    // A 'group_' prefix can't match a pivot column id, which starts with 'pivot_' or 'PivotRowTotal_'
+    var groupDef = {
+        groupId: "group_" + totalColDef.colId,
+        headerName: headerName,
+        headerClass: ['total-pivot-cell'],
+        children: [totalColDef]
+    };
+    for (var level = 1; level < pivotLevels; level++) {
+        groupDef = { groupId: "group_" + totalColDef.colId + "_" + level, children: [groupDef] };
+    }
+    Object.keys(colDef).forEach(function (key) { return delete colDef[key]; });
+    Object.assign(colDef, groupDef);
+}
 function isHtmlAllowedForCol(gridOptions, colDef) {
     return (!gridOptions.disabledHTMLRenderingFields || !gridOptions.disabledHTMLRenderingFields.includes(getColField(colDef)));
 }
@@ -11452,9 +11483,13 @@ var GridQuery = /** @class */ (function (_super) {
     GridQuery.prototype.getCurrentGridSettings = function () {
         var toColId = function (column) { return column.getColId(); };
         var columns = this.api.columns;
-        var groupedColumns = columns.getRowGroupColumns();
-        var columnsOrder = columns.getAllColumns();
-        var allGridColumns = columns.getAllGridColumns();
+        // AG Grid 27: getAllColumns() returns Column[] | null (and the grouped/grid column getters can
+        // likewise be empty) before the grid's columns are initialized. getCurrentGridSettings() is
+        // reached via fitGrid -> updateSettings on window resize, which can fire before that point, so
+        // guard against null to avoid "Cannot read properties of undefined (reading 'filter')".
+        var groupedColumns = columns.getRowGroupColumns() || [];
+        var columnsOrder = columns.getAllColumns() || [];
+        var allGridColumns = columns.getAllGridColumns() || [];
         var hiddenColumns = columnsOrder
             .filter(function (column) { return !column.isVisible() && !groupedColumns.includes(column); })
             .map(toColId);
@@ -11465,7 +11500,7 @@ var GridQuery = /** @class */ (function (_super) {
             hiddenColumns: hiddenColumns,
             groupedColumns: groupedColumns.map(toColId),
             filter: this.getFilter(),
-            pinnedColumns: columns.getDisplayedLeftColumns().map(toColId),
+            pinnedColumns: (columns.getDisplayedLeftColumns() || []).map(toColId),
             columnsOrder: allGridColumns.map(toColId),
             columnsSizes: null,
             searchTerm: null
@@ -13611,7 +13646,27 @@ var defaultGridOptions = __assign({
             comparator: function (a, b) { return getTime$1(a) - getTime$1(b); }
         },
         _a$3[DatoGridColumnTypes.Number] = {
-            filter: DatoGridFilterTypes.Number
+            filter: DatoGridFilterTypes.Number,
+            // AG Grid resolves a column's sort comparator only from its merged colDef.comparator.
+            // Number columns had none, so they fell back to AG Grid's default comparator, which sorts
+            // string-typed values lexicographically ("10" before "2"). Provide an explicit numeric
+            // comparator. Map null/empty/non-numeric to -Infinity so we never return NaN (AG Grid's
+            // sorter skips a NaN result). Ascending-sense only — AG Grid flips the sign for descending.
+            comparator: function (a, b) {
+                var toNum = function (v) {
+                    var n = v == null || v === '' ? NaN : Number(v);
+                    return isNaN(n) ? -Infinity : n;
+                };
+                var na = toNum(a);
+                var nb = toNum(b);
+                // Compare relationally (not by subtraction): two missing/non-numeric values both map to
+                // -Infinity, and -Infinity - (-Infinity) === NaN, which AG Grid's sorter skips. Returning
+                // 0 / -1 / 1 avoids NaN entirely. Ascending sense — AG Grid flips the sign for descending.
+                if (na === nb) {
+                    return 0;
+                }
+                return na < nb ? -1 : 1;
+            }
         },
         _a$3[DatoGridColumnTypes.String] = stringColDef,
         _a$3[DatoGridColumnTypes.Status] = __assign(__assign({}, stringColDef), { cellRenderer: 'DatoGridStatusCellComponent' }),
@@ -13619,14 +13674,20 @@ var defaultGridOptions = __assign({
         _a$3[DatoGridColumnTypes.ItemsCount] = __assign(__assign({}, stringColDef), { cellRenderer: 'DatoGridItemsCountCellComponent' }),
         _a$3[DatoGridColumnTypes.Initials] = __assign(__assign({}, stringColDef), { cellRenderer: 'DatoGridInitialsCellComponent' }),
         _a$3[DatoGridColumnTypes.Avatar] = __assign(__assign({}, stringColDef), { cellRenderer: 'DatoGridAvatarCellComponent' }),
-        _a$3), multiSortKey: 'ctrl', suppressPaginationPanel: true, pagination: true, paginateChildRows: true, deltaColumnMode: true, loadingOverlayComponentFramework: DatoGridV2LoaderComponent, noRowsOverlayComponentFramework: DatoGridV2NoDataOverlayComponent, defaultColDef: {
+        _a$3), multiSortKey: 'ctrl', suppressPaginationPanel: true, pagination: true, paginateChildRows: true, 
+    // deltaColumnMode removed: deprecated in AG Grid 27, delta column updates are the default now.
+    loadingOverlayComponentFramework: DatoGridV2LoaderComponent, noRowsOverlayComponentFramework: DatoGridV2NoDataOverlayComponent, defaultColDef: {
         minWidth: GridMinWidths.Default,
         sortable: true,
         resizable: true,
         type: DatoGridColumnTypes.String,
         menuTabs: ['filterMenuTab'],
         headerComponentFramework: DatoGridColumnHeaderComponent
-    }, suppressCellSelection: true, suppressPropertyNamesCheck: true, rowHeight: 35, headerHeight: 30, rowSelection: GridRowSelectionType.MULTIPLE, rowDeselection: true, unSortIcon: true, animateRows: true, rememberGroupStateWhenNewData: true, groupDisplayType: 'multipleColumns', groupDefaultExpanded: -1, usePivotGridStyle: false, disabledHTMLRenderingFields: [] }, (isTestEnv() ? { suppressColumnVirtualisation: true, rowBuffer: 99999 } : {}));
+    }, suppressCellFocus: true, suppressPropertyNamesCheck: true, rowHeight: 35, headerHeight: 30, rowSelection: GridRowSelectionType.MULTIPLE, 
+    // rowDeselection removed: true by default in AG Grid 27 (suppress with suppressRowDeselection).
+    unSortIcon: true, animateRows: true, 
+    // rememberGroupStateWhenNewData removed: no-op since AG Grid 24 (transaction updates keep group state).
+    groupDisplayType: 'multipleColumns', groupDefaultExpanded: -1, usePivotGridStyle: false, disabledHTMLRenderingFields: [] }, (isTestEnv() ? { suppressColumnVirtualisation: true, rowBuffer: 99999 } : {}));
 var DEFAULT_GRID_SEARCH_DEBOUNCE_TIME = {
     CLIENT: 200,
     SERVER: 250
@@ -15087,6 +15148,7 @@ var GridService = /** @class */ (function () {
                     return (parsedKey && parsedKey.value) || '';
                 });
             }
+            wrapPivotRowTotalColDef(colDef, _this.translate.transform('core.total'), _this.api ? _this.api.columns.getPivotColumns().length : 1);
         };
         /** Use processPivotResultColGroupDe from ver 28 */
         gridOptions.processSecondaryColGroupDef = function (colGroupDef) {
@@ -15596,18 +15658,30 @@ var DatoGridControllerComponent = /** @class */ (function () {
         this.gridActions = [];
         this.gridReady$ = this.gridQuery.gridReady$;
         this.contentInit = new Subject();
+        // ngx-take-until-destroy patches ngOnDestroy on the instance, which Ivy never calls (it uses the
+        // prototype hook), so listeners outlived the grid and hit the destroyed AG Grid API.
+        this.destroy$ = new Subject();
+        this.hasGridOptions = new BehaviorSubject(false);
+        this.agGridReady = new ReplaySubject(1);
         this.gridElements = {
             centerViewport: null,
             centerContainer: null,
             bodyViewport: null
         };
         this.treeGridClass = 'tree';
+        this.hasGridOptions$ = this.hasGridOptions.asObservable();
     }
     Object.defineProperty(DatoGridControllerComponent.prototype, "gridOptions", {
         get: function () {
             return this._gridOptions;
         },
         set: function (gridOptions) {
+            // The [gridOptions] binding can resolve to undefined during the host's initial change-detection
+            // pass (before the consumer computes its options). Ignore it instead of throwing
+            // "Cannot read properties of undefined" from initGridOptions() and aborting the view render.
+            if (!gridOptions) {
+                return;
+            }
             this._gridOptions = this.gridService.initGridOptions(gridOptions);
             this.gridService.treeData = gridOptions.treeData;
             this.gridService.isPivotMode = gridOptions.pivotMode;
@@ -15619,16 +15693,37 @@ var DatoGridControllerComponent = /** @class */ (function () {
                     this.agGridEl.classList.add(this.treeGridClass);
                 }
             }
+            !this.hasGridOptions.value && this.hasGridOptions.next(true);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DatoGridControllerComponent.prototype, "agGridOptions", {
+        /* @internal */
+        get: function () {
+            if (!this._agGridOptions && this._gridOptions) {
+                this.gridOptions = this.normalizeOptions();
+                this._agGridOptions = this.gridOptions;
+            }
+            return this._agGridOptions;
         },
         enumerable: true,
         configurable: true
     });
     DatoGridControllerComponent.prototype.ngOnDestroy = function () {
+        this.destroy$.next();
+        this.destroy$.complete();
         this.contentInit.complete();
+        this.hasGridOptions.complete();
+        this.agGridReady.complete();
         this.clearTooltip();
         this.rowHoverComponent && this.rowHoverComponent.destroy();
         this.rowHoverComponent = null;
     };
+    /* @internal */
+    DatoGridControllerComponent.prototype.onAgGridReady = function (event) {
+        this.agGridReady.next(event);
+    };
     DatoGridControllerComponent.prototype.initializeGrid = function (agGrid, agGridEl) {
         if (!this.contentInit.isStopped) {
             this._initializeGrid(agGrid, agGridEl);
@@ -15643,11 +15738,13 @@ var DatoGridControllerComponent = /** @class */ (function () {
         this.contentInit
             .asObservable()
             .pipe(switchMap(function () {
-            _this.gridOptions = _this.normalizeOptions();
-            agGrid.gridOptions = _this.gridOptions;
+            // Already normalized when dato-grid-v2 bound them to <ag-grid-angular [gridOptions]>.
+            if (!_this.agGridOptions) {
+                return EMPTY;
+            }
             var settingsLoader = _this.gridOptions.saveSettings === false ? of(null) : _this.storageAPI.get(_this.gridOptions.gridName);
-            return combineLatest([agGrid.gridReady, settingsLoader]);
-        }), untilDestroyed(this))
+            return combineLatest([_this.agGridReady, settingsLoader]);
+        }), takeUntil(this.destroy$))
             .subscribe(function (_a) {
             var _b = __read(_a, 2), _c = _b[0], api = _c.api, columnApi = _c.columnApi, _d = _b[1], savedSettings = _d === void 0 ? {} : _d;
             if (!_this.gridOptions.rowData) {
@@ -15726,7 +15823,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
             .pipe(auditTime(100), filter$1(function (_a) {
             var finished = _a.finished, source = _a.source;
             return finished && source === 'uiColumnDragged';
-        }), untilDestroyed(this))
+        }), takeUntil(this.destroy$))
             .subscribe(function (e) {
             var _a = __read(e.columns, 1), column = _a[0];
             var columnsSizes = __assign({}, _this.gridQuery.getColumnSizes());
@@ -15745,7 +15842,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         merge$1(columnVisible, sortChanged, columnRowGroupChanged, columnPinned, dragStopped, filterChanged)
             .pipe(
         /* Skip the initial sorting event fired by the grid when adding rows */
-        skip(1), untilDestroyed(this))
+        skip(1), takeUntil(this.destroy$))
             .subscribe(function (_a) {
             var type = _a.type;
             var settingsDiff = _this.gridService.getSettingsDiff();
@@ -15763,7 +15860,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         var _this = this;
         this.gridQuery
             .select(function (state) { return state.settings; })
-            .pipe(skip(1), debounceTime(1000), untilDestroyed(this))
+            .pipe(skip(1), debounceTime(1000), takeUntil(this.destroy$))
             .subscribe(function () {
             var settingsDiff = _this.gridService.getSettingsDiff();
             _this.gridService.saveSettingsToServer(settingsDiff);
@@ -15793,7 +15890,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
                     var value = _a.value, node = _a.node;
                     return value !== undefined && node.group === true;
                 }));
-        }), untilDestroyed(this))
+        }), takeUntil(this.destroy$))
             .subscribe(function (_a) {
             var node = _a.node;
             node.setExpanded(!node.expanded);
@@ -15804,7 +15901,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
                 .pipe(filter$1(function (_a) {
                 var node = _a.node;
                 return node.expanded === false;
-            }), untilDestroyed(this))
+            }), takeUntil(this.destroy$))
                 .subscribe(function () {
                 _this.lastHoveredRow = null;
                 _this.setOnHoverState(false);
@@ -15819,7 +15916,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         fromEvent(bodyViewport, 'click')
             .pipe(filter$1(function (event) {
             return (event.target === bodyViewport || event.target === centerViewport) && api.getSelectedRows().length > 0;
-        }), untilDestroyed(this))
+        }), takeUntil(this.destroy$))
             .subscribe(function () { return api.deselectAll(); });
     };
     DatoGridControllerComponent.prototype.onHoverEnabled = function () {
@@ -15832,7 +15929,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         var onHoverEnabled = this.onHoverEnabled();
         if (onHoverEnabled) {
             fromEvent(centerContainer, 'mouseleave')
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(function () {
                 _this.toggleRowHoverClass(_this.lastHoveredRow);
                 _this.lastHoveredRow = null;
@@ -15843,13 +15940,13 @@ var DatoGridControllerComponent = /** @class */ (function () {
                 var direction = _a.direction;
                 return direction === 'horizontal';
             })), agGrid.rowDataChanged)
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(function () {
                 _this.updateOnHoverPos();
             });
             this.addOnHoverElement();
         }
-        agGrid.cellMouseOver.pipe(untilDestroyed(this)).subscribe(function (event) {
+        agGrid.cellMouseOver.pipe(takeUntil(this.destroy$)).subscribe(function (event) {
             var node = event.node, column = event.column;
             if (lastHoveredCell === node.id + "-" + column.getColId()) {
                 clearTimeout(_this.cellMouseOutTimer);
@@ -15866,12 +15963,12 @@ var DatoGridControllerComponent = /** @class */ (function () {
             }
         });
         var onTooltipOut = merge$1(fromEvent(bodyViewport, 'scroll'), fromEvent(this.agGridEl, 'mouseleave'));
-        onTooltipOut.pipe(untilDestroyed(this)).subscribe(function () {
+        onTooltipOut.pipe(takeUntil(this.destroy$)).subscribe(function () {
             lastHoveredCell = null;
             _this.clearTooltip();
         });
         agGrid.cellMouseOut
-            .pipe(filter$1(function () { return !isNil(_this.tooltip); }), untilDestroyed(this))
+            .pipe(filter$1(function () { return !isNil(_this.tooltip); }), takeUntil(this.destroy$))
             .subscribe(function () {
             _this.cellMouseOutTimer = window.setTimeout(function () { return _this.clearTooltip(); });
         });
@@ -15888,9 +15985,13 @@ var DatoGridControllerComponent = /** @class */ (function () {
         if (cell.tagName === 'SPAN' && cell.scrollWidth === 0) {
             cell = cell.parentElement;
         }
-        if (event.colDef.editable) {
+        if (event.colDef.editable && cell) {
             cell = cell.querySelector('.value-wrapper') || cell;
         }
+        // AG Grid 27 can fire cellMouseOver for an element that was already detached by a re-render.
+        if (!cell) {
+            return;
+        }
         var textOverflow = cell.offsetWidth < cell.scrollWidth;
         if (textOverflow) {
             clearTimeout(this.cellMouseOutTimer);
@@ -15974,7 +16075,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
             keys: 'meta.a',
             ignoreInEditable: true
         })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(function () {
             _this.gridService.selectAllCurrentPageRows();
         });
@@ -15982,7 +16083,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
     DatoGridControllerComponent.prototype.registerWindowResizeListener = function () {
         var _this = this;
         fromEvent(window, 'resize')
-            .pipe(debounceTime(100), filter$1(function () { return _this.gridQuery.gridAlignment !== 2 /* CUSTOM */; }), untilDestroyed(this))
+            .pipe(debounceTime(100), filter$1(function () { return _this.gridQuery.gridAlignment !== 2 /* CUSTOM */; }), takeUntil(this.destroy$))
             .subscribe(function () {
             var fitTo = _this.gridQuery.gridAlignment === 0 /* FIT_TO_CONTAINER */ ? 'container' : 'content';
             _this.gridService.fitGrid(fitTo);
@@ -16006,7 +16107,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         var events$ = this.gridQuery.isServerSide
             ? merge$1(agGrid.sortChanged, agGrid.filterChanged)
             : agGrid.filterChanged;
-        events$.pipe(untilDestroyed(this)).subscribe(function () {
+        events$.pipe(takeUntil(this.destroy$)).subscribe(function () {
             _this.gridService.deselectAllRows();
         });
     };
@@ -16015,7 +16116,7 @@ var DatoGridControllerComponent = /** @class */ (function () {
         if (!this.gridQuery.isServerSide) {
             return;
         }
-        agGrid.paginationChanged.pipe(untilDestroyed(this)).subscribe(function () {
+        agGrid.paginationChanged.pipe(takeUntil(this.destroy$)).subscribe(function () {
             if (_this.gridQuery.isServerSelectAllRowsEnabled) {
                 _this.gridService.selectAllCurrentPageRows(true, true);
             }
@@ -16087,6 +16188,7 @@ var DatoGridV2Component = /** @class */ (function () {
     function DatoGridV2Component(controller, host) {
         this.controller = controller;
         this.host = host;
+        this.hasGridOptions$ = this.controller.hasGridOptions$;
     }
     Object.defineProperty(DatoGridV2Component.prototype, "grid", {
         set: function (agGrid) {
@@ -16098,6 +16200,13 @@ var DatoGridV2Component = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DatoGridV2Component.prototype, "agGridOptions", {
+        get: function () {
+            return this.controller.agGridOptions;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DatoGridV2Component.prototype, "gridOptions", {
         get: function () {
             return this.controller ? this.controller.gridOptions : null;
@@ -16126,6 +16235,9 @@ var DatoGridV2Component = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    DatoGridV2Component.prototype.onGridReady = function (event) {
+        this.controller.onAgGridReady(event);
+    };
     DatoGridV2Component.ctorParameters = function () { return [
         { type: DatoGridControllerComponent },
         { type: ElementRef }
@@ -16138,10 +16250,10 @@ var DatoGridV2Component = /** @class */ (function () {
     DatoGridV2Component = __decorate([
         Component({
             selector: 'dato-grid-v2',
-            template: "<ag-grid-angular data-auto-id=\"grid\" class=\"dato-grid ag-theme-material\" [class.has-background]=\"enableBackground\" [class.enable-v2_1]=\"enableV2_1\"\n                 [class.with-multi-selection-col]=\"gridOptions?.showMultiSelectionCheckboxes\" [class.pivot-style]=\"isPivotStyle\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
+            template: "<ag-grid-angular *ngIf=\"hasGridOptions$ | async\" [gridOptions]=\"agGridOptions\" (gridReady)=\"onGridReady($event)\"\n                 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-style]=\"isPivotStyle\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             encapsulation: 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;min-width:auto!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;padding-right:0}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}"]
+            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;min-width:auto!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-checkbox-input-wrapper.ag-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;padding-right:0}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, ElementRef])
     ], DatoGridV2Component);
@@ -16340,7 +16452,8 @@ var DatoGridHeaderV2Component = /** @class */ (function () {
     }
     Object.defineProperty(DatoGridHeaderV2Component.prototype, "enableBackground", {
         get: function () {
-            return this.controller.gridOptions.enableBackground;
+            var gridOptions = this.controller.gridOptions;
+            return gridOptions ? gridOptions.enableBackground : false;
         },
         enumerable: true,
         configurable: true
@@ -16822,6 +16935,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
         this.gridService = gridService;
         this.MAX_VISIBLE_ROW_ACTIONS = 5;
         this.MAX_VISIBLE_GRID_ACTIONS = 2;
+        this.destroy$ = new Subject();
         this._maxRowActions = this.MAX_VISIBLE_ROW_ACTIONS;
         this.displayExport = true;
         this.rowActions = { mainList: [], moreMenu: [] };
@@ -16859,21 +16973,24 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
     });
     Object.defineProperty(DatoGridV2ToolbarComponent.prototype, "enableV2_1", {
         get: function () {
-            return this.gridController.gridOptions.enableV2_1;
+            var gridOptions = this.gridController.gridOptions;
+            return gridOptions ? gridOptions.enableV2_1 : false;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(DatoGridV2ToolbarComponent.prototype, "enableSearch", {
         get: function () {
-            return this.gridController.gridOptions.enableSearch;
+            var gridOptions = this.gridController.gridOptions;
+            return gridOptions ? gridOptions.enableSearch : false;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(DatoGridV2ToolbarComponent.prototype, "enableBackground", {
         get: function () {
-            return this.gridController.gridOptions.enableBackground;
+            var gridOptions = this.gridController.gridOptions;
+            return gridOptions ? gridOptions.enableBackground : false;
         },
         enumerable: true,
         configurable: true
@@ -16919,17 +17036,17 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
     DatoGridV2ToolbarComponent.prototype.ngOnInit = function () {
         var _this = this;
         var dataChanges = this.gridController.gridQuery.waitForGrid(function () {
-            return merge$1(_this.gridQuery.gridRef.cellValueChanged, _this.gridQuery.gridRef.rowDataUpdated, _this.gridQuery.rowActionVisibilityChanged$).pipe(debounceTime(100), untilDestroyed(_this));
+            return merge$1(_this.gridQuery.gridRef.cellValueChanged, _this.gridQuery.gridRef.rowDataUpdated, _this.gridQuery.rowActionVisibilityChanged$).pipe(debounceTime(100), takeUntil(_this.destroy$));
         });
         var gridInit = this.gridQuery.gridReady$.pipe(take(1));
-        gridInit.pipe(untilDestroyed(this)).subscribe(function () {
+        gridInit.pipe(takeUntil(this.destroy$)).subscribe(function () {
             _this.groupsAllowed = !_this.hideGrouping && !_this.gridQuery.getValue().serverSidePagination.enabled;
         });
         this.initGridActions();
         var selectedRowsChanged$ = this.gridQuery.selectedRowsChange$;
         var isSelectAllRowsChanged$ = this.gridQuery.selectIsSelectAllRowsEnabled();
         merge$1(dataChanges, gridInit, selectedRowsChanged$, isSelectAllRowsChanged$)
-            .pipe(filter$1(function () { return !!_this.api; }), untilDestroyed(this))
+            .pipe(filter$1(function () { return !!_this.api; }), takeUntil(this.destroy$))
             .subscribe(function () {
             _this.resolveVisibleActions();
             _this.cdr.detectChanges();
@@ -17105,7 +17222,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
         var waitForAnimation = this.hasGroups ? 0 : 200;
         /** When changing the tables grouping all the rows are automatically expanded, we need to update the icon state */
         var expandSubscription = this.gridQuery.gridRef.columnRowGroupChanged
-            .pipe(take(1), untilDestroyed(this))
+            .pipe(take(1), takeUntil(this.destroy$))
             .subscribe(function () {
             _this.rowGroupsCollapsed = false;
             _this.cdr.detectChanges();
@@ -17122,7 +17239,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
                     gridService: _this.gridService
                 }
             })
-                .pipe(untilDestroyed(_this))
+                .pipe(takeUntil(_this.destroy$))
                 .subscribe(function () {
                 expandSubscription.unsubscribe();
                 _this.openMenus.group = false;
@@ -17139,7 +17256,10 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
     DatoGridV2ToolbarComponent.prototype.clearSelectedRows = function () {
         this.gridService.deselectAllRows();
     };
-    DatoGridV2ToolbarComponent.prototype.ngOnDestroy = function () { };
+    DatoGridV2ToolbarComponent.prototype.ngOnDestroy = function () {
+        this.destroy$.next();
+        this.destroy$.complete();
+    };
     DatoGridV2ToolbarComponent.prototype.getCollapseState = function (_a) {
         var node = _a.node, api = _a.api;
         var collapsed = true;
@@ -17158,7 +17278,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
         /** Listen to adding or removing row groups from the columns and not the groups menu */
         this.gridQuery
             .waitForGrid(function () { return _this.gridQuery.gridRef.columnRowGroupChanged; })
-            .pipe(filter$1(function () { return !_this.openMenus.group; }), untilDestroyed(this))
+            .pipe(filter$1(function () { return !_this.openMenus.group; }), takeUntil(this.destroy$))
             .subscribe(function () {
             _this.rowGroupsCollapsed = false;
             _this.cdr.detectChanges();
@@ -17166,7 +17286,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
         /** Listen to row collapse state to update the icon */
         this.gridQuery
             .waitForGrid(function () { return _this.gridQuery.gridRef.rowGroupOpened; })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(function (event) {
             var collapsed = _this.getCollapseState(event);
             if (collapsed !== _this.rowGroupsCollapsed) {
@@ -17178,7 +17298,7 @@ var DatoGridV2ToolbarComponent = /** @class */ (function () {
     DatoGridV2ToolbarComponent.prototype.subscribeRowsSelectionData = function () {
         var _this = this;
         this.gridQuery.rowsSelectionData$
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(function (_a) {
             var totalRowsCount = _a.totalRowsCount, selectedRowsCount = _a.selectedRowsCount, selectedPageRowsCount = _a.selectedPageRowsCount, isAllPageRowsSelected = _a.isAllPageRowsSelected;
             _this.totalRowsCount = totalRowsCount;
@@ -25554,7 +25674,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.15.0';
+window.coreVersion = '22.15.3';
 
 /**
  * @license