@skyux/ag-grid 4.12.0 → 4.12.4

package/fesm2015/skyux-ag-grid.js

@@ -7,7 +7,7 @@ import { SkyDataManagerService, SkyDataManagerModule } from '@skyux/data-manager
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import { SkyLibResourcesService, getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 import { SkyThemeService } from '@skyux/theme';
 import { PopupComponent, RowNode, Events } from 'ag-grid-community';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -648,6 +648,7 @@ function getValidatorCellRendererSelector(component, fallback) {
         return fallback;
     };
 }
+let rowNodeId = -1;
 /**
  * A service that provides default styling and behavior for agGrids in SKY UX SPAs.
  */
@@ -796,6 +797,20 @@ let SkyAgGridService = class SkyAgGridService {
                 'sky-ag-grid-cell-renderer-currency-validator': SkyAgGridCellRendererCurrencyValidatorComponent,
                 'sky-ag-grid-cell-renderer-validator-tooltip': SkyAgGridCellRendererValidatorTooltipComponent
             },
+            getRowNodeId(data) {
+                if ('id' in data && data.id !== undefined) {
+                    return `${data.id}`;
+                }
+                return `${rowNodeId--}`;
+            },
+            getRowClass: (params) => {
+                if (params.node.id) {
+                    return `sky-ag-grid-row-${params.node.id}`;
+                }
+                else {
+                    return undefined;
+                }
+            },
             headerHeight: ((_d = (_c = this.currentTheme) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.name) === 'modern' ? 60 : 37,
             icons: {
                 sortDescending: this.getIconTemplate('caret-down'),
@@ -1209,13 +1224,28 @@ let SkyAgGridDataManagerAdapterDirective = class SkyAgGridDataManagerAdapterDire
             agGrid.api.sizeColumnsToFit();
         });
         agGrid.columnMoved
+            .pipe(takeUntil(this.ngUnsubscribe), filter((event) => ![
+            'gridInitializing',
+            'uiColumnResized',
+            'uiColumnDragged',
+            'api'
+        ].includes(event.source)))
+            .subscribe((value) => {
+            this.updateColumnsInCurrentDataState(value.columnApi);
+        });
+        let currentColumns;
+        agGrid.dragStarted
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((event) => {
-            let columnOrder = agGrid.columnApi.getAllDisplayedVirtualColumns().map(col => col.getColDef().colId);
-            if (event.source !== 'api') {
-                const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
-                viewState.displayedColumnIds = columnOrder;
-                this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+            .subscribe((value) => {
+            currentColumns = this.getColumnOrder(value.columnApi);
+        });
+        agGrid.dragStopped
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            const newColumns = this.getColumnOrder(value.columnApi);
+            const hasChanged = currentColumns.findIndex((colId, i) => colId !== newColumns[i]);
+            if (hasChanged > -1) {
+                this.updateColumnsInCurrentDataState(value.columnApi);
             }
         });
         agGrid.rowSelected
@@ -1259,6 +1289,17 @@ let SkyAgGridDataManagerAdapterDirective = class SkyAgGridDataManagerAdapterDire
             this.dataManagerSvc.updateDataState(this.currentDataState, this.viewConfig.id);
         });
     }
+    updateColumnsInCurrentDataState(columnApi) {
+        const columnOrder = this.getColumnOrder(columnApi);
+        const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
+        viewState.displayedColumnIds = columnOrder;
+        this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+    }
+    getColumnOrder(columnApi) {
+        return columnApi
+            .getAllDisplayedVirtualColumns()
+            .map((col) => col.getColDef().colId);
+    }
     displayColumns(dataState) {
         const agGrid = this.currentAgGrid;
         const viewState = dataState.getViewStateById(this.viewConfig.id);
@@ -1342,7 +1383,7 @@ let SkyAgGridCellValidatorTooltipComponent = class SkyAgGridCellValidatorTooltip
     hideIndicator() {
         this.zone.run(() => {
             this.indicatorShouldShow = false;
-            this.changeDetector.markForCheck();
+            this.changeDetector.detectChanges();
         });
     }
     hidePopover() {
@@ -1351,7 +1392,7 @@ let SkyAgGridCellValidatorTooltipComponent = class SkyAgGridCellValidatorTooltip
     showIndicator() {
         this.zone.run(() => {
             this.indicatorShouldShow = true;
-            this.changeDetector.markForCheck();
+            this.changeDetector.detectChanges();
         });
     }
     showPopover() {
@@ -1600,7 +1641,10 @@ let SkyAgGridRowDeleteDirective = class SkyAgGridRowDeleteDirective {
         return this.rowDeleteConfigs.find(rowDelete => rowDelete.id === row.id);
     }
     affixToRow(affixer, id) {
-        let rowElement = this.elementRef.nativeElement.querySelector('[row-id="' + id + '"] div[aria-colindex="1"]');
+        let rowElement = this.elementRef.nativeElement.querySelector(`
+      [row-id="${id}"] div[aria-colindex="1"],
+      .ag-row.sky-ag-grid-row-${id} div[aria-colindex="1"]
+    `);
         // This covers cases where AG Grid places the column index on an inner element (such as with the `enableCellTextSelection` option)
         // This appears to have been fixed by AG Grid in version 24 and so it is not testable after that version.
         /* istanbul ignore if */