@skyux/ag-grid 12.5.0 → 12.7.0

package/fesm2022/skyux-ag-grid.mjs

@@ -1,16 +1,16 @@
-import { DOCUMENT, AsyncPipe, NgClass, NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, AsyncPipe, NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, input, numberAttribute, computed, inject, ChangeDetectorRef, ElementRef, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, effect, Directive, viewChildren, viewChild, output, contentChild, linkedSignal, EnvironmentInjector, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, signal, Optional } from '@angular/core';
+import { NgModule, Injectable, input, numberAttribute, computed, inject, ChangeDetectorRef, ElementRef, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, effect, Directive, InjectionToken, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, Optional } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/core';
-import { SkyMutationObserverService, SkyViewkeeperModule, SkyMediaQueryService, SkyAffixService, SkyDynamicComponentService, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyIdModule, SkyNumericModule, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
-import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, filter as filter$1, switchMap, merge, delay, tap, observeOn, asapScheduler, sample, animationFrames, map, fromEvent, Subscription, fromEventPattern, isObservable } from 'rxjs';
+import { SkyMutationObserverService, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyIdModule, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
+import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, Subscription, switchMap, merge, fromEvent, startWith, map, scan, filter as filter$1, fromEventPattern, isObservable } from 'rxjs';
 import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
 import * as i2$4 from '@skyux/theme';
-import { SkyThemeService, SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
+import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { themeQuartz, colorSchemeLight, iconSetQuartz, colorSchemeDark, KeyCode, PopupComponent } from 'ag-grid-community';
 import * as i1$1 from '@skyux/data-manager';
 import * as i1$2 from '@skyux/layout';
@@ -1083,108 +1083,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * @internal
+ */
+const SKY_AG_GRID_ROW_DELETE_CONTEXT = new InjectionToken('SkyAgGridRowDeleteContext');
+/**
+ * Used to provide dependencies to the `SkyAgGridRowDeleteComponent` overlay.
+ * @internal
+ */
+class SkyAgGridRowDeleteContext {
+    constructor(rows, gridElement, gridApi) {
+        this.rows = rows;
+        this.gridElement = gridElement;
+        this.gridApi = gridApi;
+        this.cancelRowDelete = new Subject();
+        this.confirmRowDelete = new Subject();
+        this.subscription = new Subscription();
+        this.subscription.add(() => {
+            this.cancelRowDelete.complete();
+            this.confirmRowDelete.complete();
+        });
+    }
+}
+
 /**
  * Component for rendering the inline delete template in the overlay.
  * @internal
  */
 class SkyAgGridRowDeleteComponent {
+    #resizeObserverSvc;
     constructor() {
-        this.inlineDeleteRefs = viewChildren('inlineDeleteRef');
-        this.inlineDeleteTemplateRef = viewChild('inlineDeleteTemplateRef');
+        this.service = inject(SKY_AG_GRID_ROW_DELETE_CONTEXT);
+        this.tableWidthStyle = computed(() => {
+            const tableWidth = this.tableWidth();
+            if (tableWidth > 0) {
+                return `${tableWidth}px`;
+            }
+            return 'auto';
+        });
+        this.rowsWithElements = computed(() => {
+            const rows = this.service.rows();
+            const gridElement = this.service.gridElement();
+            const gridApi = this.service.gridApi();
+            const increment = this.gridChanges();
+            if (!gridElement || !gridApi) {
+                return [];
+            }
+            return rows
+                .filter((rowId) => !!rowId && !!gridApi.getRowNode(rowId))
+                .map((rowId) => {
+                const element = gridElement[0]?.nativeElement
+                    .querySelector(`
+          [row-id="${rowId}"] div[aria-colindex],
+          .ag-row.sky-ag-grid-row-${rowId} div[aria-colindex]
+        `);
+                return { rowId, element, increment: `${rowId}-${increment}` };
+            });
+        });
+        this.pending = signal([]);
+        this.tableWidth = signal(0);
+        // Force redrawing overlays when the grid changes by incrementing a number.
+        this.gridChanges = toSignal(toObservable(this.service.gridApi).pipe(switchMap((gridApi) => gridApi
+            ? merge(fromEvent(gridApi, 'componentStateChanged'), fromEvent(gridApi, 'firstDataRendered'), fromEvent(gridApi, 'gridSizeChanged'), fromEvent(gridApi, 'modelUpdated'), fromEvent(gridApi, 'rowDataUpdated')).pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')))
+            : of(undefined)), startWith(1), map(() => 1), scan((acc, val) => acc + val)), { initialValue: 0 });
+        this.#resizeObserverSvc = inject(SkyResizeObserverService);
+        // Maintain table width when the grid is resized.
+        toObservable(this.service.gridElement)
+            .pipe(filter$1((el) => Array.isArray(el) && !!el[0]), switchMap((gridElement) => this.#resizeObserverSvc
+            .observe(gridElement[0])
+            .pipe(map(() => gridElement[0].nativeElement.offsetWidth))), takeUntilDestroyed())
+            .subscribe((tableWidth) => {
+            this.tableWidth.set(tableWidth);
+        });
+        // Clean up pending rows when the grid data is updated.
+        toObservable(this.service.gridApi)
+            .pipe(filter$1((gridApi) => !!gridApi), switchMap((gridApi) => fromEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
+            .subscribe((gridApi) => {
+            this.pending.update((pending) => pending.filter((rowId) => !!gridApi.getRowNode(rowId)));
+        });
+    }
+    cancelDelete(rowId) {
+        this.service.cancelRowDelete.next(rowId);
+    }
+    confirmDelete(rowId) {
+        this.pending.update((pending) => pending.concat(rowId));
+        this.service.confirmRowDelete.next(rowId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", viewQueries: [{ propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true, isSignal: true }, { propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template
-      #inlineDeleteTemplateRef
-      let-row
-      let-tableWidth="tableWidth()"
-      let-getRowDeleteItem="getRowDeleteItem"
-      let-cancelRowDelete="cancelRowDelete"
-      let-confirmRowDelete="confirmRowDelete"
-    >
-      <div
-        #inlineDeleteRef
-        class="sky-ag-grid-row-delete"
-        [id]="'row-delete-ref-' + row.id"
-        [ngStyle]="{
-          height: row.rowHeight + 'px',
-          position: 'fixed',
-          top: '-100vh',
-          width: tableWidth + 'px',
-        }"
-      >
-        <sky-inline-delete
-          [pending]="getRowDeleteItem(row).pending"
-          (cancelTriggered)="cancelRowDelete(row)"
-          (deleteTriggered)="confirmRowDelete(row)"
-        />
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", host: { properties: { "style": "\"--table-width: \" + tableWidthStyle()" } }, ngImport: i0, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"], dependencies: [{ kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyAffixModule }, { kind: "directive", type: i1.λ1, selector: "[skyAffixTo]", inputs: ["skyAffixTo", "affixAutoFitContext", "affixAutoFitOverflowOffset", "affixEnableAutoFit", "affixHorizontalAlignment", "affixIsSticky", "affixPlacement", "affixPosition", "affixVerticalAlignment"], outputs: ["affixOffsetChange", "affixOverflowScroll", "affixPlacementChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sky-ag-grid-row-delete',
-                    template: `
-    <ng-template
-      #inlineDeleteTemplateRef
-      let-row
-      let-tableWidth="tableWidth()"
-      let-getRowDeleteItem="getRowDeleteItem"
-      let-cancelRowDelete="cancelRowDelete"
-      let-confirmRowDelete="confirmRowDelete"
-    >
-      <div
-        #inlineDeleteRef
-        class="sky-ag-grid-row-delete"
-        [id]="'row-delete-ref-' + row.id"
-        [ngStyle]="{
-          height: row.rowHeight + 'px',
-          position: 'fixed',
-          top: '-100vh',
-          width: tableWidth + 'px',
-        }"
-      >
-        <sky-inline-delete
-          [pending]="getRowDeleteItem(row).pending"
-          (cancelTriggered)="cancelRowDelete(row)"
-          (deleteTriggered)="confirmRowDelete(row)"
-        />
-      </div>
-    </ng-template>
-  `,
-                    imports: [NgStyle, SkyInlineDeleteModule],
-                }]
-        }] });
+            args: [{ selector: 'sky-ag-grid-row-delete', imports: [SkyInlineDeleteModule, SkyAffixModule], host: {
+                        '[style]': '"--table-width: " + tableWidthStyle()',
+                    }, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"] }]
+        }], ctorParameters: () => [] });
 
 class SkyAgGridRowDeleteDirective {
     #ngUnsubscribe;
-    #rowDeleteComponent;
-    #rowDeleteConfigs;
-    #rowDeleteContents;
-    #rowDeleteContentsQueue;
-    #rowDeleteContentsQueued;
     #rowDeleteIdsInternal;
     #clipPath;
     #zIndex;
-    #affixService;
-    #dynamicComponentSvc;
     #elementRef;
     #environmentInjector;
     #overlayService;
+    #rowDeleteSvc;
     #scrollableHostService;
     #stackingContext;
-    #viewContainerRef;
-    #viewUpdate;
     constructor() {
         /**
          * The IDs of the data in the rows where the inline delete appears.
          */
-        this.rowDeleteIds = input([], {
-            transform: (value) => (Array.isArray(value) ? value.map(String) : []),
-        });
-        this.rowDeleteIdsChange = output();
+        this.rowDeleteIds = model([]);
         /**
          * Emits a `SkyAgGridRowDeleteCancelArgs` object when a row's inline delete is cancelled.
          */
@@ -1194,11 +1204,8 @@ class SkyAgGridRowDeleteDirective {
          */
         this.rowDeleteConfirm = output();
         this.agGrid = contentChild(AgGridAngular);
+        this.agGridBodyViewport = new BehaviorSubject([]);
         this.#ngUnsubscribe = new Subject();
-        this.#rowDeleteConfigs = [];
-        this.#rowDeleteContents = [];
-        this.#rowDeleteContentsQueue = [];
-        this.#rowDeleteContentsQueued = new Subject();
         this.#rowDeleteIdsInternal = linkedSignal({
             source: this.rowDeleteIds,
             computation: (value) => [...new Set(value)]
@@ -1209,15 +1216,11 @@ class SkyAgGridRowDeleteDirective {
         });
         this.#clipPath = new BehaviorSubject(undefined);
         this.#zIndex = new BehaviorSubject(998);
-        this.#affixService = inject(SkyAffixService);
-        this.#dynamicComponentSvc = inject(SkyDynamicComponentService);
         this.#elementRef = inject((ElementRef));
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#overlayService = inject(SkyOverlayService);
         this.#scrollableHostService = inject(SkyScrollableHostService);
         this.#stackingContext = inject(SKY_STACKING_CONTEXT, { optional: true });
-        this.#viewContainerRef = inject(ViewContainerRef);
-        this.#viewUpdate = new Subject();
         if (this.#stackingContext) {
             this.#stackingContext.zIndex
                 .pipe(takeUntil(this.#ngUnsubscribe))
@@ -1225,198 +1228,85 @@ class SkyAgGridRowDeleteDirective {
                 this.#zIndex.next(zIndex);
             });
         }
-        const rowDeleteIds = toObservable(this.#rowDeleteIdsInternal);
-        toObservable(this.agGrid)
-            .pipe(takeUntil(this.#ngUnsubscribe), filter$1((agGrid) => !!agGrid), switchMap((agGrid) => merge(agGrid.componentStateChanged, agGrid.filterChanged, agGrid.firstDataRendered, agGrid.gridReady, agGrid.gridSizeChanged.pipe(delay(500)), agGrid.rowDataUpdated.pipe(takeUntil(this.#ngUnsubscribe), tap((evt) => {
-            const ids = this.#rowDeleteIdsInternal();
-            this.#rowDeleteIdsInternal.set(ids.filter((id) => evt.api.getRowNode(id)));
-        })), agGrid.sortChanged, this.#viewUpdate.pipe(delay(200)), rowDeleteIds.pipe(takeUntil(this.#ngUnsubscribe), tap((value) => {
-            this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter((config) => value.includes(config.id));
-            for (const id of value) {
-                if (!this.#rowDeleteConfigs.some((config) => config.id === id)) {
-                    this.#rowDeleteConfigs.push({
-                        id,
-                        pending: false,
-                    });
-                }
+        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.agGridBodyViewport), signal(undefined));
+        this.#rowDeleteSvc.cancelRowDelete
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((rowId) => {
+            if (rowId) {
+                this.rowDeleteIds.update((rowIds) => rowIds.filter((id) => id !== rowId));
+                this.rowDeleteCancel.emit({ id: rowId });
+            }
+        });
+        this.#rowDeleteSvc.confirmRowDelete
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((rowId) => {
+            if (rowId) {
+                this.rowDeleteConfirm.emit({ id: rowId });
             }
-            this.rowDeleteIdsChange.emit(value);
-        }))).pipe(takeUntil(this.#ngUnsubscribe), 
-        // After change detection.
-        observeOn(asapScheduler), 
-        // Wait for a render cycle.
-        sample(animationFrames()), map(() => undefined))))
-            .subscribe(() => {
-            this.#updateRowDeleteStates();
         });
-        this.#rowDeleteContentsQueued
-            .pipe(takeUntil(this.#ngUnsubscribe), 
-        // After change detection.
-        observeOn(asapScheduler), 
-        // Wait for a render cycle.
-        sample(animationFrames()))
+        const agGrid = toObservable(this.agGrid);
+        agGrid
+            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), takeUntil(this.#ngUnsubscribe))
             .subscribe(() => {
-            const queue = [...this.#rowDeleteContentsQueue];
-            this.#rowDeleteContentsQueue = [];
-            queue.forEach(({ id, overlay }) => {
-                if (this.#rowDeleteContents.findIndex((content) => content.id === id) === -1 &&
-                    this.#rowDeleteIdsInternal().includes(id)) {
-                    const inlineDeleteRef = this.#rowDeleteComponent
-                        ?.inlineDeleteRefs()
-                        .find((elRef) => elRef.nativeElement.id === 'row-delete-ref-' + id);
-                    const rowNode = this.agGrid()?.api.getRowNode(id);
-                    if (rowNode && inlineDeleteRef) {
-                        const affixer = this.#affixService.createAffixer(inlineDeleteRef);
-                        this.#affixToRow(affixer, id);
-                        this.#rowDeleteContents.push({ id, affixer, overlay });
-                        return;
-                    }
-                }
-                this.#overlayService.close(overlay);
-            });
+            this.agGridBodyViewport.next([
+                new ElementRef(this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper')),
+            ]);
+            this.#rowDeleteSvc.gridApi.set(this.agGrid()?.api);
+        });
+        agGrid
+            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
+            .subscribe((evt) => {
+            this.rowDeleteIds.update((rowIds) => (rowIds ?? []).filter((id) => !!evt.api.getRowNode(id)));
         });
     }
     ngAfterContentInit() {
-        this.#rowDeleteComponent = this.#dynamicComponentSvc.createComponent(SkyAgGridRowDeleteComponent, {
+        const overlay = this.#overlayService.create({
+            enableScroll: true,
             environmentInjector: this.#environmentInjector,
-            viewContainerRef: this.#viewContainerRef,
-        }).instance;
+            showBackdrop: false,
+            closeOnNavigation: true,
+            enableClose: false,
+            enablePointerEvents: true,
+        });
+        overlay.attachComponent(SkyAgGridRowDeleteComponent, [
+            {
+                provide: SKY_AG_GRID_ROW_DELETE_CONTEXT,
+                useValue: this.#rowDeleteSvc,
+            },
+        ]);
+        this.#zIndex
+            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed), distinctUntilChanged())
+            .subscribe((zIndex) => {
+            overlay.componentRef.instance.zIndex = zIndex.toString(10);
+        });
+        this.#clipPath
+            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed), distinctUntilChanged())
+            .subscribe((clipPath) => {
+            overlay.componentRef.instance.updateClipPath(clipPath);
+        });
     }
     ngAfterViewInit() {
-        if (this.#stackingContext) {
-            this.#scrollableHostService
-                .watchScrollableHostClipPathChanges(this.#elementRef)
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((clipPath) => {
-                this.#clipPath.next(clipPath);
-            });
-        }
-        this.#viewUpdate.next();
+        this.#scrollableHostService
+            .watchScrollableHostClipPathChanges(this.#elementRef, this.agGridBodyViewport.asObservable())
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((clipPath) => {
+            this.#clipPath.next(clipPath);
+        });
     }
     ngOnDestroy() {
-        this.#viewUpdate.complete();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
-        this.#rowDeleteContents.forEach(({ id }) => {
-            this.#destroyRowDelete(id);
-        });
-    }
-    cancelRowDelete(row) {
-        if (row.id) {
-            this.#rowDeleteIdsInternal.set(this.#rowDeleteIdsInternal().filter((id) => id !== row.id));
-            this.rowDeleteCancel.emit({ id: row.id });
-        }
-    }
-    confirmRowDelete(row) {
-        const rowConfig = this.#rowDeleteConfigs.find((config) => config.id === row.id);
-        if (row.id && rowConfig) {
-            rowConfig.pending = true;
-            this.rowDeleteConfirm.emit({ id: row.id });
-        }
-    }
-    getRowDeleteItem(row) {
-        return (this.#rowDeleteConfigs.find((config) => config.id === row.id) ?? {
-            id: `${row.id}`,
-            pending: false,
-        });
-    }
-    #affixToRow(affixer, id) {
-        const rowElement = this.#elementRef.nativeElement.querySelector(`
-      [row-id="${id}"] div[aria-colindex],
-      .ag-row.sky-ag-grid-row-${id} div[aria-colindex]
-    `);
-        const values = this.#rowDeleteIdsInternal();
-        if (rowElement && values.includes(id)) {
-            affixer.affixTo(rowElement, {
-                autoFitContext: SkyAffixAutoFitContext.Viewport,
-                isSticky: true,
-                placement: 'above',
-                verticalAlignment: 'top',
-                horizontalAlignment: 'left',
-                enableAutoFit: false,
-            });
-        }
-    }
-    #destroyRowDelete(id) {
-        const idx = this.#rowDeleteContents.findIndex((content) => content.id === id);
-        if (idx > -1 && this.#rowDeleteContents[idx].overlay) {
-            this.#rowDeleteContents[idx].affixer.destroy();
-            this.#overlayService.close(this.#rowDeleteContents[idx].overlay);
-            this.#rowDeleteContents.splice(idx, 1);
-        }
-    }
-    #updateRowDeleteStates() {
-        const deleteTemplateRef = this.#rowDeleteComponent?.inlineDeleteTemplateRef();
-        const agGrid = this.agGrid();
-        const value = this.#rowDeleteIdsInternal();
-        const contentIds = this.#rowDeleteContents.map((content) => content.id);
-        for (const id of contentIds) {
-            if (!value.includes(id)) {
-                this.#destroyRowDelete(id);
-            }
-        }
-        if (deleteTemplateRef && agGrid) {
-            for (const id of value) {
-                this.#updateOneRowDeleteState(id, agGrid, deleteTemplateRef);
-            }
-        }
-    }
-    #updateOneRowDeleteState(id, agGrid, deleteTemplateRef) {
-        const rowNode = agGrid.api.getRowNode(id);
-        const idx = this.#rowDeleteContents.findIndex((content) => content.id === id);
-        if (idx > -1) {
-            if (rowNode?.displayed) {
-                // We must reaffix things when the data changes because the rows rerender and the previous element that the delete was affixed
-                // to is destroyed.
-                this.#affixToRow(this.#rowDeleteContents[idx].affixer, id);
-            }
-            else {
-                this.#destroyRowDelete(id);
-            }
-        }
-        else if (rowNode) {
-            const overlay = this.#overlayService.create({
-                enableScroll: true,
-                environmentInjector: this.#environmentInjector,
-                showBackdrop: false,
-                closeOnNavigation: true,
-                enableClose: false,
-                enablePointerEvents: true,
-            });
-            overlay.attachTemplate(deleteTemplateRef, {
-                $implicit: rowNode,
-                tableWidth: () => this.#elementRef.nativeElement.querySelector('.sky-ag-grid')
-                    .offsetWidth,
-                getRowDeleteItem: (row) => this.getRowDeleteItem(row),
-                cancelRowDelete: (row) => this.cancelRowDelete(row),
-                confirmRowDelete: (row) => this.confirmRowDelete(row),
-            });
-            /**
-             * We are manually setting the z-index here because overlays will always be on top of
-             * the omnibar. The default manual setting is 2 less than the omnibar's z-index of 1000 and one less than
-             * the header row's viewkeeper which is 999. We discussed changing the overlay service to allow for this
-             * but decided against that change at this time due to its niche nature.
-             */
-            this.#zIndex
-                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed))
-                .subscribe((zIndex) => {
-                overlay.componentRef.instance.zIndex = zIndex.toString(10);
-            });
-            this.#clipPath
-                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed))
-                .subscribe((clipPath) => {
-                overlay.componentRef.instance.updateClipPath(clipPath);
-            });
-            this.#rowDeleteContentsQueue.push({ id, overlay });
-            this.#rowDeleteContentsQueued.next();
-        }
+        this.#rowDeleteSvc.subscription.unsubscribe();
+        this.#overlayService.closeAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridRowDeleteDirective, isStandalone: true, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: { classPropertyName: "rowDeleteIds", publicName: "rowDeleteIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleteIdsChange: "rowDeleteIdsChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridRowDeleteDirective, isStandalone: true, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: { classPropertyName: "rowDeleteIds", publicName: "rowDeleteIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleteIds: "rowDeleteIdsChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[skyAgGridRowDelete]' }]
+            args: [{
+                    selector: '[skyAgGridRowDelete]',
+                }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridModule {
@@ -2508,7 +2398,7 @@ class SkyAgGridCellRendererRowSelectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyThemeComponentClassDirective, SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridCellRendererTemplateComponent {
@@ -2664,7 +2554,9 @@ class SkyAgGridHeaderGroupComponent {
         this.#columnGroup = params.columnGroup.getProvidedColumnGroup();
         this.#isExpandableSubject.next(this.#columnGroup.isExpandable());
         if (this.#isExpandableSubject.getValue()) {
-            this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('columnGroupOpened', handler), (handler) => params.api.removeEventListener('columnGroupOpened', handler)).subscribe((event) => {
+            this.#subscriptions.add(fromEvent(params.api, 'columnGroupOpened')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe((event) => {
                 if (this.#columnGroup &&
                     event.columnGroups.includes(this.#columnGroup)) {
                     this.#isExpandedSubject.next(this.#columnGroup.isExpanded());
@@ -2794,7 +2686,9 @@ class SkyAgGridHeaderComponent {
         this.#leftPosition = params.column.getLeft() ?? 0;
         this.#subscriptions = new Subscription();
         if (params.column.isFilterAllowed()) {
-            this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener('filterChanged', handler), (handler) => params.column.removeEventListener('filterChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.column, 'filterChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 const isFilterActive = params.column.isFilterActive();
                 if (isFilterActive !== this.filterEnabled$.getValue()) {
                     this.filterEnabled$.next(isFilterActive);
@@ -2803,11 +2697,15 @@ class SkyAgGridHeaderComponent {
         }
         if (params.enableSorting) {
             // Column sort state changes
-            this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener('sortChanged', handler), (handler) => params.column.removeEventListener('sortChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.column, 'sortChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 this.#updateSort();
             }));
             // Other column sort state changes, for multi-column sorting
-            this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('sortChanged', handler), (handler) => params.api.removeEventListener('sortChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.api, 'sortChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 this.#updateSortIndex();
             }));
             this.#updateSort();
@@ -2815,7 +2713,9 @@ class SkyAgGridHeaderComponent {
         }
         // When the column is moved left via the keyboard, the element is detached
         // and reattached to the DOM to maintain DOM order, and its focus is lost.
-        this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('columnMoved', handler), (handler) => params.api.removeEventListener('columnMoved', handler)).subscribe((event) => {
+        this.#subscriptions.add(fromEvent(params.api, 'columnMoved')
+            .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+            .subscribe((event) => {
             const left = event.column?.getLeft() ?? 0;
             const oldLeft = this.#leftPosition;
             if (event.column === params.column &&