@datorama/core 22.15.0 → 22.15.3

package/fesm2015/datorama-core.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __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';
@@ -5098,10 +5098,10 @@ let DatoGridComponent = class DatoGridComponent extends BaseCustomControl {
                 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;
@@ -9904,7 +9904,12 @@ function getGridModel(gridName) {
  */
 function getSortModel(columnApi) {
     const sortIndexes = {};
-    const sortedColumns = columnApi.getColumnState().filter(columnState => 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')".
+    const columnState = columnApi.getColumnState() || [];
+    const sortedColumns = columnState.filter(state => state.sort != null);
     sortedColumns.forEach(columnState => {
         sortIndexes[columnState.colId] = columnState.sortIndex;
     });
@@ -10098,6 +10103,32 @@ function tryParsePivotValue(str) {
     }
     return value;
 }
+/** ag-grid's colId prefix for pivotRowTotals columns (PivotColDefService.PIVOT_ROW_TOTAL_PREFIX, not exported) */
+const 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;
+    }
+    const totalColDef = Object.assign({}, colDef);
+    // A 'group_' prefix can't match a pivot column id, which starts with 'pivot_' or 'PivotRowTotal_'
+    let groupDef = {
+        groupId: `group_${totalColDef.colId}`,
+        headerName,
+        headerClass: ['total-pivot-cell'],
+        children: [totalColDef]
+    };
+    for (let level = 1; level < pivotLevels; level++) {
+        groupDef = { groupId: `group_${totalColDef.colId}_${level}`, children: [groupDef] };
+    }
+    Object.keys(colDef).forEach(key => delete colDef[key]);
+    Object.assign(colDef, groupDef);
+}
 function isHtmlAllowedForCol(gridOptions, colDef) {
     return (!gridOptions.disabledHTMLRenderingFields || !gridOptions.disabledHTMLRenderingFields.includes(getColField(colDef)));
 }
@@ -10150,9 +10181,13 @@ let GridQuery = class GridQuery extends Query {
     getCurrentGridSettings() {
         const toColId = column => column.getColId();
         const { columns } = this.api;
-        const groupedColumns = columns.getRowGroupColumns();
-        const columnsOrder = columns.getAllColumns();
-        const 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')".
+        const groupedColumns = columns.getRowGroupColumns() || [];
+        const columnsOrder = columns.getAllColumns() || [];
+        const allGridColumns = columns.getAllGridColumns() || [];
         const hiddenColumns = columnsOrder
             .filter(column => !column.isVisible() && !groupedColumns.includes(column))
             .map(toColId);
@@ -10163,7 +10198,7 @@ let GridQuery = class GridQuery extends Query {
             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
@@ -12109,7 +12144,27 @@ const defaultGridOptions = Object.assign({
             comparator: (a, b) => getTime$1(a) - getTime$1(b)
         },
         [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: (a, b) => {
+                const toNum = (v) => {
+                    const n = v == null || v === '' ? NaN : Number(v);
+                    return isNaN(n) ? -Infinity : n;
+                };
+                const na = toNum(a);
+                const 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;
+            }
         },
         [DatoGridColumnTypes.String]: stringColDef,
         [DatoGridColumnTypes.Status]: Object.assign(Object.assign({}, stringColDef), { cellRenderer: 'DatoGridStatusCellComponent' }),
@@ -12117,14 +12172,20 @@ const defaultGridOptions = Object.assign({
         [DatoGridColumnTypes.ItemsCount]: Object.assign(Object.assign({}, stringColDef), { cellRenderer: 'DatoGridItemsCountCellComponent' }),
         [DatoGridColumnTypes.Initials]: Object.assign(Object.assign({}, stringColDef), { cellRenderer: 'DatoGridInitialsCellComponent' }),
         [DatoGridColumnTypes.Avatar]: Object.assign(Object.assign({}, stringColDef), { cellRenderer: 'DatoGridAvatarCellComponent' })
-    }, multiSortKey: 'ctrl', suppressPaginationPanel: true, pagination: true, paginateChildRows: true, deltaColumnMode: true, loadingOverlayComponentFramework: DatoGridV2LoaderComponent, noRowsOverlayComponentFramework: DatoGridV2NoDataOverlayComponent, defaultColDef: {
+    }, 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 } : {}));
 const DEFAULT_GRID_SEARCH_DEBOUNCE_TIME = {
     CLIENT: 200,
     SERVER: 250
@@ -13450,6 +13511,7 @@ let GridService = class GridService {
                     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 = (colGroupDef) => {
@@ -13925,14 +13987,26 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         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();
     }
     set gridOptions(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;
@@ -13944,16 +14018,33 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
                 this.agGridEl.classList.add(this.treeGridClass);
             }
         }
+        !this.hasGridOptions.value && this.hasGridOptions.next(true);
     }
     get gridOptions() {
         return this._gridOptions;
     }
+    /* @internal */
+    get agGridOptions() {
+        if (!this._agGridOptions && this._gridOptions) {
+            this.gridOptions = this.normalizeOptions();
+            this._agGridOptions = this.gridOptions;
+        }
+        return this._agGridOptions;
+    }
     ngOnDestroy() {
+        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 */
+    onAgGridReady(event) {
+        this.agGridReady.next(event);
+    }
     initializeGrid(agGrid, agGridEl) {
         if (!this.contentInit.isStopped) {
             this._initializeGrid(agGrid, agGridEl);
@@ -13967,11 +14058,13 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         this.contentInit
             .asObservable()
             .pipe(switchMap(() => {
-            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;
+            }
             const 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(([{ api, columnApi }, savedSettings = {}]) => {
             if (!this.gridOptions.rowData) {
                 api.showLoadingOverlay();
@@ -14041,7 +14134,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             observable = observable.pipe(filter$1(({ source }) => source === 'uiColumnDragged'), tap(() => this.updateOnHoverPos()));
         }
         observable
-            .pipe(auditTime(100), filter$1(({ finished, source }) => finished && source === 'uiColumnDragged'), untilDestroyed(this))
+            .pipe(auditTime(100), filter$1(({ finished, source }) => finished && source === 'uiColumnDragged'), takeUntil(this.destroy$))
             .subscribe(e => {
             const [column] = e.columns;
             let columnsSizes = Object.assign({}, this.gridQuery.getColumnSizes());
@@ -14059,7 +14152,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         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(({ type }) => {
             const settingsDiff = this.gridService.getSettingsDiff();
             this.gridService.updateSettings(settingsDiff);
@@ -14075,7 +14168,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
     listenToStoreSettingsChanges() {
         this.gridQuery
             .select(state => state.settings)
-            .pipe(skip(1), debounceTime(1000), untilDestroyed(this))
+            .pipe(skip(1), debounceTime(1000), takeUntil(this.destroy$))
             .subscribe(() => {
             const settingsDiff = this.gridService.getSettingsDiff();
             this.gridService.saveSettingsToServer(settingsDiff);
@@ -14100,14 +14193,14 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             return columns.length === 0
                 ? EMPTY
                 : agGrid.cellClicked.pipe(filter$1(({ value, node }) => value !== undefined && node.group === true));
-        }), untilDestroyed(this))
+        }), takeUntil(this.destroy$))
             .subscribe(({ node }) => {
             node.setExpanded(!node.expanded);
         });
         /* When closing a grouped row we want to hide the on hover actions */
         if (this.onHoverEnabled()) {
             agGrid.rowGroupOpened
-                .pipe(filter$1(({ node }) => node.expanded === false), untilDestroyed(this))
+                .pipe(filter$1(({ node }) => node.expanded === false), takeUntil(this.destroy$))
                 .subscribe(() => {
                 this.lastHoveredRow = null;
                 this.setOnHoverState(false);
@@ -14122,7 +14215,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         fromEvent(bodyViewport, 'click')
             .pipe(filter$1((event) => {
             return (event.target === bodyViewport || event.target === centerViewport) && api.getSelectedRows().length > 0;
-        }), untilDestroyed(this))
+        }), takeUntil(this.destroy$))
             .subscribe(() => api.deselectAll());
     }
     onHoverEnabled() {
@@ -14134,7 +14227,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         const onHoverEnabled = this.onHoverEnabled();
         if (onHoverEnabled) {
             fromEvent(centerContainer, 'mouseleave')
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(() => {
                 this.toggleRowHoverClass(this.lastHoveredRow);
                 this.lastHoveredRow = null;
@@ -14142,13 +14235,13 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
                 lastHoveredCell = null;
             });
             merge$1(agGrid.bodyScroll.pipe(filter$1(({ direction }) => direction === 'horizontal')), agGrid.rowDataChanged)
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(() => {
                 this.updateOnHoverPos();
             });
             this.addOnHoverElement();
         }
-        agGrid.cellMouseOver.pipe(untilDestroyed(this)).subscribe((event) => {
+        agGrid.cellMouseOver.pipe(takeUntil(this.destroy$)).subscribe((event) => {
             const { node, column } = event;
             if (lastHoveredCell === `${node.id}-${column.getColId()}`) {
                 clearTimeout(this.cellMouseOutTimer);
@@ -14165,12 +14258,12 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             }
         });
         const onTooltipOut = merge$1(fromEvent(bodyViewport, 'scroll'), fromEvent(this.agGridEl, 'mouseleave'));
-        onTooltipOut.pipe(untilDestroyed(this)).subscribe(() => {
+        onTooltipOut.pipe(takeUntil(this.destroy$)).subscribe(() => {
             lastHoveredCell = null;
             this.clearTooltip();
         });
         agGrid.cellMouseOut
-            .pipe(filter$1(() => !isNil(this.tooltip)), untilDestroyed(this))
+            .pipe(filter$1(() => !isNil(this.tooltip)), takeUntil(this.destroy$))
             .subscribe(() => {
             this.cellMouseOutTimer = window.setTimeout(() => this.clearTooltip());
         });
@@ -14187,9 +14280,13 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         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;
+        }
         const textOverflow = cell.offsetWidth < cell.scrollWidth;
         if (textOverflow) {
             clearTimeout(this.cellMouseOutTimer);
@@ -14265,14 +14362,14 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             keys: 'meta.a',
             ignoreInEditable: true
         })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             this.gridService.selectAllCurrentPageRows();
         });
     }
     registerWindowResizeListener() {
         fromEvent(window, 'resize')
-            .pipe(debounceTime(100), filter$1(() => this.gridQuery.gridAlignment !== 2 /* CUSTOM */), untilDestroyed(this))
+            .pipe(debounceTime(100), filter$1(() => this.gridQuery.gridAlignment !== 2 /* CUSTOM */), takeUntil(this.destroy$))
             .subscribe(() => {
             const fitTo = this.gridQuery.gridAlignment === 0 /* FIT_TO_CONTAINER */ ? 'container' : 'content';
             this.gridService.fitGrid(fitTo);
@@ -14292,7 +14389,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         const events$ = this.gridQuery.isServerSide
             ? merge$1(agGrid.sortChanged, agGrid.filterChanged)
             : agGrid.filterChanged;
-        events$.pipe(untilDestroyed(this)).subscribe(() => {
+        events$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.gridService.deselectAllRows();
         });
     }
@@ -14300,7 +14397,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
         if (!this.gridQuery.isServerSide) {
             return;
         }
-        agGrid.paginationChanged.pipe(untilDestroyed(this)).subscribe(() => {
+        agGrid.paginationChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.gridQuery.isServerSelectAllRowsEnabled) {
                 this.gridService.selectAllCurrentPageRows(true, true);
             }
@@ -14373,6 +14470,7 @@ let DatoGridV2Component = class DatoGridV2Component {
     constructor(controller, host) {
         this.controller = controller;
         this.host = host;
+        this.hasGridOptions$ = this.controller.hasGridOptions$;
     }
     set grid(agGrid) {
         if (agGrid) {
@@ -14380,6 +14478,9 @@ let DatoGridV2Component = class DatoGridV2Component {
             this.controller.initializeGrid(agGrid, agGridEl);
         }
     }
+    get agGridOptions() {
+        return this.controller.agGridOptions;
+    }
     get gridOptions() {
         return this.controller ? this.controller.gridOptions : null;
     }
@@ -14392,6 +14493,9 @@ let DatoGridV2Component = class DatoGridV2Component {
     get isPivotStyle() {
         return this.gridOptions && this.gridOptions.usePivotGridStyle;
     }
+    onGridReady(event) {
+        this.controller.onAgGridReady(event);
+    }
 };
 DatoGridV2Component.ctorParameters = () => [
     { type: DatoGridControllerComponent },
@@ -14405,10 +14509,10 @@ __decorate([
 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);
@@ -14590,7 +14694,8 @@ let DatoGridHeaderV2Component = class DatoGridHeaderV2Component {
         this.displayRowCount = true;
     }
     get enableBackground() {
-        return this.controller.gridOptions.enableBackground;
+        const { gridOptions } = this.controller;
+        return gridOptions ? gridOptions.enableBackground : false;
     }
     ngOnInit() {
         this.rowCount$ = this.gridQuery.gridReady$.pipe(switchMap(() => this.rowsCount()));
@@ -15032,6 +15137,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         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: [] };
@@ -15064,13 +15170,16 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         }
     }
     get enableV2_1() {
-        return this.gridController.gridOptions.enableV2_1;
+        const { gridOptions } = this.gridController;
+        return gridOptions ? gridOptions.enableV2_1 : false;
     }
     get enableSearch() {
-        return this.gridController.gridOptions.enableSearch;
+        const { gridOptions } = this.gridController;
+        return gridOptions ? gridOptions.enableSearch : false;
     }
     get enableBackground() {
-        return this.gridController.gridOptions.enableBackground;
+        const { gridOptions } = this.gridController;
+        return gridOptions ? gridOptions.enableBackground : false;
     }
     get isRowActionsVisible() {
         return !this.enableV2_1 || (this.enableV2_1 && this.isSelectedRow);
@@ -15088,16 +15197,16 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         return this.gridController.gridQuery.api;
     }
     ngOnInit() {
-        const dataChanges = this.gridController.gridQuery.waitForGrid(() => merge$1(this.gridQuery.gridRef.cellValueChanged, this.gridQuery.gridRef.rowDataUpdated, this.gridQuery.rowActionVisibilityChanged$).pipe(debounceTime(100), untilDestroyed(this)));
+        const dataChanges = this.gridController.gridQuery.waitForGrid(() => merge$1(this.gridQuery.gridRef.cellValueChanged, this.gridQuery.gridRef.rowDataUpdated, this.gridQuery.rowActionVisibilityChanged$).pipe(debounceTime(100), takeUntil(this.destroy$)));
         const gridInit = this.gridQuery.gridReady$.pipe(take(1));
-        gridInit.pipe(untilDestroyed(this)).subscribe(() => {
+        gridInit.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.groupsAllowed = !this.hideGrouping && !this.gridQuery.getValue().serverSidePagination.enabled;
         });
         this.initGridActions();
         const selectedRowsChanged$ = this.gridQuery.selectedRowsChange$;
         const isSelectAllRowsChanged$ = this.gridQuery.selectIsSelectAllRowsEnabled();
         merge$1(dataChanges, gridInit, selectedRowsChanged$, isSelectAllRowsChanged$)
-            .pipe(filter$1(() => !!this.api), untilDestroyed(this))
+            .pipe(filter$1(() => !!this.api), takeUntil(this.destroy$))
             .subscribe(() => {
             this.resolveVisibleActions();
             this.cdr.detectChanges();
@@ -15259,7 +15368,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         const waitForAnimation = this.hasGroups ? 0 : 200;
         /** When changing the tables grouping all the rows are automatically expanded, we need to update the icon state */
         const expandSubscription = this.gridQuery.gridRef.columnRowGroupChanged
-            .pipe(take(1), untilDestroyed(this))
+            .pipe(take(1), takeUntil(this.destroy$))
             .subscribe(() => {
             this.rowGroupsCollapsed = false;
             this.cdr.detectChanges();
@@ -15276,7 +15385,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
                     gridService: this.gridService
                 }
             })
-                .pipe(untilDestroyed(this))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(() => {
                 expandSubscription.unsubscribe();
                 this.openMenus.group = false;
@@ -15293,7 +15402,10 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
     clearSelectedRows() {
         this.gridService.deselectAllRows();
     }
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     getCollapseState({ node, api }) {
         let collapsed = true;
         if (node.rowGroupIndex === 0) {
@@ -15309,7 +15421,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         /** Listen to adding or removing row groups from the columns and not the groups menu */
         this.gridQuery
             .waitForGrid(() => this.gridQuery.gridRef.columnRowGroupChanged)
-            .pipe(filter$1(() => !this.openMenus.group), untilDestroyed(this))
+            .pipe(filter$1(() => !this.openMenus.group), takeUntil(this.destroy$))
             .subscribe(() => {
             this.rowGroupsCollapsed = false;
             this.cdr.detectChanges();
@@ -15317,7 +15429,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         /** Listen to row collapse state to update the icon */
         this.gridQuery
             .waitForGrid(() => this.gridQuery.gridRef.rowGroupOpened)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             const collapsed = this.getCollapseState(event);
             if (collapsed !== this.rowGroupsCollapsed) {
@@ -15328,7 +15440,7 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
     }
     subscribeRowsSelectionData() {
         this.gridQuery.rowsSelectionData$
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(({ totalRowsCount, selectedRowsCount, selectedPageRowsCount, isAllPageRowsSelected }) => {
             this.totalRowsCount = totalRowsCount;
             this.selectedRowsCount = selectedRowsCount;
@@ -22973,7 +23085,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.15.0';
+window.coreVersion = '22.15.3';
 
 /**
  * @license