@skyux/ag-grid 14.0.0-alpha.1 → 14.0.0-alpha.3

package/fesm2022/skyux-ag-grid.mjs

@@ -1,15 +1,15 @@
-import { NgClass, AsyncPipe, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { NgClass, CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, input, numberAttribute, viewChild, inject, ChangeDetectorRef, ElementRef, DOCUMENT, effect, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, signal, linkedSignal, computed, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, isSignal, DestroyRef, CSP_NONCE, Optional } from '@angular/core';
+import { NgModule, Injectable, signal, input, booleanAttribute, numberAttribute, viewChild, inject, DestroyRef, ElementRef, DOCUMENT, computed, effect, ContentChild, ChangeDetectionStrategy, Component, contentChildren, linkedSignal, ChangeDetectorRef, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, HostBinding, isSignal, Input, CSP_NONCE } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/core';
 import { SkyMutationObserverService, SkyIdModule, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
 import { SkyDataManagerService } from '@skyux/data-manager';
-import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, map, switchMap, filter, fromEvent, Subscription, merge, startWith, scan, first, fromEventPattern, isObservable, observeOn, asyncScheduler } from 'rxjs';
-import * as i2$4 from '@skyux/theme';
+import { Observable, EMPTY, merge, Subject, map, takeUntil, switchMap, of, filter, Subscription, startWith, scan, BehaviorSubject, take, distinctUntilChanged, fromEvent, first, isObservable } from 'rxjs';
+import * as i1$5 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { themeQuartz, colorSchemeLight, KeyCode } from 'ag-grid-community';
 import * as i1$1 from '@skyux/layout';
@@ -28,7 +28,7 @@ import * as i2$3 from '@skyux/indicators';
 import { SkyStatusIndicatorModule, SkyWaitModule } from '@skyux/indicators';
 import * as i1$4 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
-import * as i2$5 from '@skyux/icon';
+import * as i2$4 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 
 /* istanbul ignore file */
@@ -150,6 +150,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }]
         }] });
 
+function fromGridEvent(target, eventType) {
+    return new Observable((subscriber) => {
+        const handler = (event) => subscriber.next(event);
+        target.addEventListener(eventType, handler);
+        return () => {
+            target.removeEventListener(eventType, handler);
+        };
+    });
+}
+
 const defaultsForAllThemes = {
     backgroundColor: 'var(--sky-override-ag-grid-background-color, var(--sky-color-background-row-base))',
     borderColor: 'var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
@@ -400,20 +410,6 @@ var SkyCellType;
 
 let idIndex = 0;
 class SkyAgGridWrapperComponent {
-    /**
-     * Enable a compact layout for the grid when using modern theme. Compact layout uses
-     * a smaller font size and row height to display more data in a smaller space.
-     */
-    set compact(value) {
-        this.#isCompact.next(value);
-    }
-    get viewkeeperClasses() {
-        return this.#_viewkeeperClasses;
-    }
-    set viewkeeperClasses(value) {
-        this.#_viewkeeperClasses = value;
-        this.#changeDetector.markForCheck();
-    }
     get #isInEditMode() {
         if (this.agGrid && this.agGrid.api) {
             const primaryGridEditing = this.agGrid.api.getEditingCells().length > 0;
@@ -432,97 +428,103 @@ class SkyAgGridWrapperComponent {
         }
         return false;
     }
-    #_viewkeeperClasses;
-    #ngUnsubscribe;
+    #destroyRef;
     #themeSvc;
-    #wrapperClasses;
+    #themeSettings;
     #adapterService;
-    #changeDetector;
-    #parentChangeDetector;
     #elementRef;
     #document;
     #mutationObserverService;
-    #isCompact;
     #hasEditableClass;
+    #cellEditingClasses;
+    #agGridClassObserver;
     constructor() {
-        this.isNormalLayout = false;
+        this.isNormalLayout = signal(false, ...(ngDevMode ? [{ debugName: "isNormalLayout" }] : []));
+        /**
+         * Enable a compact layout for the grid when using modern theme. Compact layout uses
+         * a smaller font size and row height to display more data in a smaller space.
+         */
+        this.compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : {}), transform: booleanAttribute });
         /**
          * The minimum height of the grid in pixels. The default value is `50`.
          */
         this.minHeight = input(50, { ...(ngDevMode ? { debugName: "minHeight" } : {}), transform: numberAttribute });
+        /**
+         * @internal
+         */
+        this.viewkeeperClasses = signal([], ...(ngDevMode ? [{ debugName: "viewkeeperClasses" }] : []));
         this.skyAgGridDiv = viewChild('skyAgGridDiv', ...(ngDevMode ? [{ debugName: "skyAgGridDiv" }] : []));
-        this.#_viewkeeperClasses = [];
-        this.#ngUnsubscribe = new Subject();
+        this.#destroyRef = inject(DestroyRef);
         this.#themeSvc = inject(SkyThemeService, {
             optional: true,
         });
-        this.#wrapperClasses = new BehaviorSubject([
-            `ag-theme-sky-data-grid-default`,
-        ]);
+        this.#themeSettings = toSignal(this.#themeSvc?.settingsChange ?? EMPTY);
         this.#adapterService = inject(SkyAgGridAdapterService);
-        this.#changeDetector = inject(ChangeDetectorRef);
-        this.#parentChangeDetector = inject(ChangeDetectorRef, {
-            optional: true,
-            skipSelf: true,
-        });
         this.#elementRef = inject((ElementRef));
         this.#document = inject(DOCUMENT);
         this.#mutationObserverService = inject(SkyMutationObserverService);
-        this.#isCompact = new BehaviorSubject(false);
-        this.#hasEditableClass = new ReplaySubject(1);
+        this.#hasEditableClass = signal(false, ...(ngDevMode ? [{ debugName: "#hasEditableClass" }] : []));
+        this.#cellEditingClasses = signal([], ...(ngDevMode ? [{ debugName: "#cellEditingClasses" }] : []));
+        this.wrapperClasses = computed(() => {
+            const hasEditableClass = this.#hasEditableClass();
+            const isCompact = this.compact();
+            const themeSettings = this.#themeSettings()?.currentSettings;
+            const cellEditingClasses = this.#cellEditingClasses();
+            const skyAgGridThemeClassName = getSkyAgGridThemeClassName(hasEditableClass, themeSettings, isCompact);
+            const classes = [skyAgGridThemeClassName, ...cellEditingClasses];
+            if (this.#getTextSelection(hasEditableClass)) {
+                classes.push('sky-ag-grid-text-selection');
+            }
+            return [...new Set(classes)];
+        }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
         idIndex++;
         this.afterAnchorId = 'sky-ag-grid-nav-anchor-after-' + idIndex;
         this.beforeAnchorId = 'sky-ag-grid-nav-anchor-before-' + idIndex;
         this.gridId = 'sky-ag-grid-' + idIndex;
-        this.wrapperClasses$ = this.#wrapperClasses.asObservable();
         effect(() => {
             const minHeight = this.minHeight();
             const skyAgGridDiv = this.skyAgGridDiv()?.nativeElement;
             skyAgGridDiv?.style.setProperty('--sky-ag-grid-min-height', `${minHeight}px`);
         });
+        effect(() => {
+            const hasEditableClass = this.#hasEditableClass();
+            const skyAgGridTheme = getSkyAgGridTheme(hasEditableClass ? 'data-entry-grid' : 'data-grid');
+            this.agGrid?.api?.setGridOption('theme', skyAgGridTheme);
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#agGridClassObserver?.disconnect();
+        });
     }
     ngAfterContentInit() {
         if (this.agGrid) {
             const domLayout = this.agGrid.gridOptions?.domLayout;
             if (domLayout === 'autoHeight') {
                 if (this.agGrid.gridOptions?.context?.enableTopScroll) {
-                    this.viewkeeperClasses.push('.ag-header', '.ag-body-horizontal-scroll');
+                    this.viewkeeperClasses.update((prev) => [
+                        ...prev,
+                        '.ag-header',
+                        '.ag-body-horizontal-scroll',
+                    ]);
                 }
                 else {
-                    this.viewkeeperClasses.push('.ag-header');
+                    this.viewkeeperClasses.update((prev) => [...prev, '.ag-header']);
                 }
             }
             else if (domLayout === 'normal') {
-                this.isNormalLayout = true;
-                this.#parentChangeDetector?.detectChanges();
+                this.isNormalLayout.set(true);
             }
-            this.agGrid.gridReady
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#moveHorizontalScroll();
-            });
-            this.agGrid.firstDataRendered
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#moveHorizontalScroll();
-            });
-            this.agGrid.rowDataUpdated
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#moveHorizontalScroll();
-            });
+            merge(this.agGrid.gridReady, this.agGrid.firstDataRendered, this.agGrid.rowDataUpdated)
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => this.#moveHorizontalScroll());
             this.agGrid.cellEditingStarted
-                .pipe(takeUntil(this.#ngUnsubscribe))
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe((params) => {
                 if (params.colDef.type) {
                     const types = Array.isArray(params.colDef.type)
                         ? params.colDef.type
                         : [params.colDef.type];
                     const addClasses = types.map((t) => `sky-ag-grid-cell-editing-${t}`);
-                    this.#wrapperClasses.next([
-                        ...this.#wrapperClasses.getValue(),
-                        ...addClasses,
-                    ]);
+                    this.#cellEditingClasses.update((prev) => [...prev, ...addClasses]);
                     if (types.includes(SkyCellType.Template) &&
                         params.rowIndex !== null) {
                         this.agGrid?.api.setFocusedCell(params.rowIndex, params.column);
@@ -530,14 +532,12 @@ class SkyAgGridWrapperComponent {
                 }
             });
             this.agGrid.cellEditingStopped
-                .pipe(takeUntil(this.#ngUnsubscribe))
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe(() => {
-                this.#wrapperClasses.next(this.#wrapperClasses
-                    .getValue()
-                    .filter((c) => !c.startsWith('sky-ag-grid-cell-editing-')));
+                this.#cellEditingClasses.set([]);
             });
             this.agGrid.cellFocused
-                .pipe(takeUntil(this.#ngUnsubscribe))
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe((event) => {
                 const context = event.context || {};
                 context['lastFocusedCell'] = {
@@ -549,7 +549,7 @@ class SkyAgGridWrapperComponent {
                 event.api?.setGridOption('context', context);
             });
             this.agGrid.headerFocused
-                .pipe(takeUntil(this.#ngUnsubscribe))
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe((event) => {
                 const context = event.context || {};
                 context['lastFocusedCell'] = {
@@ -562,38 +562,19 @@ class SkyAgGridWrapperComponent {
             });
         }
     }
-    ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-        this.#hasEditableClass.complete();
-        this.#isCompact.complete();
-        this.#wrapperClasses.complete();
-    }
-    ngOnInit() {
-        combineLatest([
-            this.#hasEditableClass.pipe(distinctUntilChanged()),
-            this.#isCompact.pipe(distinctUntilChanged()),
-            this.#themeSvc?.settingsChange ?? of(undefined),
-        ])
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe(([hasEditableClass, isCompact, settings]) => {
-            this.#updateGridTheme(hasEditableClass, isCompact, settings?.currentSettings);
-        });
-    }
     ngAfterViewInit() {
-        const agGridElement = this.#elementRef.nativeElement.querySelector('ag-grid-angular');
+        const agGridElement = this.#elementRef.nativeElement.querySelector('ag-grid-angular') ??
+            undefined;
         const callback = () => {
-            this.#hasEditableClass.next(!!agGridElement?.classList.contains('sky-ag-grid-editable'));
+            this.#hasEditableClass.set(!!agGridElement?.classList.contains('sky-ag-grid-editable'));
         };
         if (agGridElement) {
-            const agGridClassObserver = this.#mutationObserverService.create(callback);
-            agGridClassObserver.observe(agGridElement, {
+            this.#agGridClassObserver =
+                this.#mutationObserverService.create(callback);
+            this.#agGridClassObserver.observe(agGridElement, {
                 attributes: true,
                 attributeFilter: ['class'],
             });
-            this.#ngUnsubscribe.pipe(take(1)).subscribe(() => {
-                agGridClassObserver.disconnect();
-            });
         }
         callback();
     }
@@ -645,24 +626,6 @@ class SkyAgGridWrapperComponent {
             }
         }
     }
-    #updateGridTheme(hasEditableClass, isCompact, themeSettings) {
-        const skyAgGridTheme = getSkyAgGridTheme(hasEditableClass ? 'data-entry-grid' : 'data-grid');
-        this.agGrid?.api?.setGridOption('theme', skyAgGridTheme);
-        const skyAgGridThemeClassName = getSkyAgGridThemeClassName(hasEditableClass, themeSettings, isCompact);
-        const previousValue = this.#wrapperClasses.getValue();
-        let value = [
-            ...previousValue.filter((c) => !c.startsWith('ag-theme-')),
-            skyAgGridThemeClassName,
-        ];
-        const textSelectionClass = 'sky-ag-grid-text-selection';
-        if (this.#getTextSelection(hasEditableClass)) {
-            value.push(textSelectionClass);
-        }
-        else {
-            value = value.filter((c) => c !== textSelectionClass);
-        }
-        this.#wrapperClasses.next([...new Set(value)]);
-    }
     #getTextSelection(hasEditableClass) {
         if (this.agGrid?.gridOptions?.context?.enableCellTextSelection) {
             return !hasEditableClass;
@@ -672,23 +635,19 @@ class SkyAgGridWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], viewQueries: [{ propertyName: "skyAgGridDiv", first: true, predicate: ["skyAgGridDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "isNormalLayout()" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], viewQueries: [{ propertyName: "skyAgGridDiv", first: true, predicate: ["skyAgGridDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses()\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses()\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgClass, SkyIdModule, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
+            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SkyIdModule, SkyViewkeeperModule], host: {
+                        '[class.sky-ag-grid-layout-normal]': 'isNormalLayout()',
+                    }, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses()\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses()\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
                         static: true,
                     }]
-            }], isNormalLayout: [{
-                type: HostBinding,
-                args: ['class.sky-ag-grid-layout-normal']
-            }], compact: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], skyAgGridDiv: [{ type: i0.ViewChild, args: ['skyAgGridDiv', { isSignal: true }] }] } });
+            }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], skyAgGridDiv: [{ type: i0.ViewChild, args: ['skyAgGridDiv', { isSignal: true }] }] } });
 
 function toColumnWidthName(breakpoint) {
     return breakpoint === 'xs' ? 'xs' : 'sm';
@@ -819,7 +778,7 @@ class SkyAgGridDataManagerAdapterDirective {
         this.#currentSkyAgGridWrapper = wrapper;
         setTimeout(() => {
             if (this.#currentSkyAgGridWrapper) {
-                this.#currentSkyAgGridWrapper.viewkeeperClasses = [];
+                this.#currentSkyAgGridWrapper.viewkeeperClasses.set([]);
             }
         });
     }
@@ -833,8 +792,16 @@ class SkyAgGridDataManagerAdapterDirective {
                 if (viewConfig) {
                     viewConfig = {
                         ...viewConfig,
-                        onSelectAllClick: () => agGrid.api.selectAll(),
-                        onClearAllClick: () => agGrid.api.deselectAll(),
+                        onSelectAllClick: () => {
+                            if (!agGrid.api.isDestroyed()) {
+                                agGrid.api.selectAll();
+                            }
+                        },
+                        onClearAllClick: () => {
+                            if (!agGrid.api.isDestroyed()) {
+                                agGrid.api.deselectAll();
+                            }
+                        },
                     };
                     if (viewConfig.columnPickerEnabled && !viewConfig.columnOptions) {
                         viewConfig.columnOptions = this.#readColumnOptionsFromGrid(agGrid.api);
@@ -853,7 +820,7 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#isAgGridReady.set(true);
             });
             agGrid.gridReady
-                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => fromEvent(agGrid.api, 'gridPreDestroyed')))
+                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => fromGridEvent(agGrid.api, 'gridPreDestroyed')))
                 .subscribe(() => {
                 this.#unregisterAgGrid();
             });
@@ -1119,7 +1086,7 @@ class SkyAgGridRowDeleteComponent {
         this.tableWidth = signal(0, ...(ngDevMode ? [{ debugName: "tableWidth" }] : []));
         // 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')))
+            ? merge(fromGridEvent(gridApi, 'componentStateChanged'), fromGridEvent(gridApi, 'firstDataRendered'), fromGridEvent(gridApi, 'gridSizeChanged'), fromGridEvent(gridApi, 'modelUpdated'), fromGridEvent(gridApi, 'rowDataUpdated')).pipe(takeUntil(fromGridEvent(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.
@@ -1132,7 +1099,7 @@ class SkyAgGridRowDeleteComponent {
         });
         // Clean up pending rows when the grid data is updated.
         toObservable(this.service.gridApi)
-            .pipe(filter((gridApi) => !!gridApi), switchMap((gridApi) => fromEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
+            .pipe(filter((gridApi) => !!gridApi), switchMap((gridApi) => fromGridEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromGridEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
             .subscribe((gridApi) => {
             this.pending.update((pending) => pending.filter((rowId) => !!gridApi.getRowNode(rowId)));
         });
@@ -1160,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * `rowDeleteIds` to determine which rows to add inline delete options to.
  */
 class SkyAgGridRowDeleteDirective {
-    #agGridBodyViewport;
+    #agGridRootElement;
     #agGridBodyClipElements;
     #ngUnsubscribe;
     #rowDeleteIdsInternal;
@@ -1187,7 +1154,7 @@ class SkyAgGridRowDeleteDirective {
          */
         this.rowDeleteConfirm = output();
         this.agGrid = contentChild(AgGridAngular, ...(ngDevMode ? [{ debugName: "agGrid" }] : []));
-        this.#agGridBodyViewport = new BehaviorSubject([]);
+        this.#agGridRootElement = new BehaviorSubject([]);
         this.#agGridBodyClipElements = new BehaviorSubject([]);
         this.#ngUnsubscribe = new Subject();
         this.#rowDeleteIdsInternal = linkedSignal({ ...(ngDevMode ? { debugName: "#rowDeleteIdsInternal" } : {}), source: this.rowDeleteIds,
@@ -1210,7 +1177,7 @@ class SkyAgGridRowDeleteDirective {
                 this.#zIndex.next(zIndex);
             });
         }
-        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.#agGridBodyViewport), signal(undefined));
+        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.#agGridRootElement), signal(undefined));
         this.#rowDeleteSvc.cancelRowDelete
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((rowId) => {
@@ -1229,25 +1196,17 @@ class SkyAgGridRowDeleteDirective {
         const agGrid = toObservable(this.agGrid);
         const agGridReady = agGrid.pipe(filter((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), take(1), takeUntil(this.#ngUnsubscribe));
         agGridReady.subscribe((ready) => {
-            this.#agGridBodyViewport.next([
-                new ElementRef(this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper')),
-            ]);
+            const rootWrapper = this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper');
+            if (rootWrapper) {
+                this.#agGridRootElement.next([
+                    new ElementRef(rootWrapper),
+                ]);
+            }
             this.#rowDeleteSvc.gridApi.set(ready.api);
         });
-        agGrid
-            .pipe(filter((grid) => !!grid), switchMap((grid) => merge(grid.firstDataRendered.asObservable(), grid.rowDataUpdated.asObservable(), agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridOptionsChanged')))).pipe(takeUntil(this.#ngUnsubscribe), takeUntil(agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridPreDestroyed').pipe(take(1))))), startWith(grid.api?.getGridOption('domLayout')), map(() => grid.api?.getGridOption('domLayout')), switchMap((domLayout) => {
-            if (domLayout === 'normal') {
-                return this.#agGridBodyViewport.asObservable();
-            }
-            return of([]);
-        }))))
-            .subscribe((agGridBodyClipElements) => {
-            // When using AG Grid's `domLayout: 'autoHeight'` option,
-            // the grid's body viewport is clipped by the scrollable host.
-            // But when using `domLayout: 'normal'`, the grid's body viewport
-            // should be used as the scrollable host for the row delete overlay.
-            this.#agGridBodyClipElements.next(agGridBodyClipElements);
-        });
+        this.#agGridRootElement
+            .pipe(takeUntilDestroyed())
+            .subscribe((el) => this.#agGridBodyClipElements.next(el));
         agGrid
             .pipe(filter((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
             .subscribe((evt) => {
@@ -2168,103 +2127,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * @internal
  */
 class SkyAgGridCellValidatorTooltipComponent {
+    #keyupHandler;
+    #focusHandler;
+    #cellFocusHandler;
+    #blurHandler;
     constructor() {
+        this.params = input(...(ngDevMode ? [undefined, { debugName: "params" }] : []));
         this.popoverMessageStream = new Subject();
-        this.showValidatorMessage = signal(false, ...(ngDevMode ? [{ debugName: "showValidatorMessage" }] : []));
-        this.#changeDetector = inject(ChangeDetectorRef);
-        this.#listenersAdded = false;
+        this.validatorProperties = computed(() => this.params()?.skyComponentProperties, ...(ngDevMode ? [{ debugName: "validatorProperties" }] : []));
+        this.validatorMessage = computed(() => {
+            const params = this.params();
+            const validatorProperties = this.validatorProperties();
+            const validatorMessage = validatorProperties?.validatorMessage;
+            if (!validatorMessage || !params) {
+                return '';
+            }
+            if (isSignal(validatorMessage)) {
+                return validatorMessage();
+            }
+            if (typeof validatorMessage === 'function') {
+                return validatorMessage(params.value, params.data, params?.node?.rowIndex);
+            }
+            return validatorMessage;
+        }, ...(ngDevMode ? [{ debugName: "validatorMessage" }] : []));
+        this.showValidatorMessage = computed(() => {
+            const validatorMessage = this.validatorMessage();
+            const validatorProperties = this.validatorProperties();
+            const params = this.params();
+            if (!validatorMessage || !validatorProperties || !params) {
+                return false;
+            }
+            const validator = validatorProperties.validator;
+            if (typeof validator === 'function') {
+                return !validator(params.value, params.data, params.node?.rowIndex);
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "showValidatorMessage" }] : []));
         this.#keyupHandler = (event) => {
             if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
-                this.showPopover();
+                this.#showPopover();
             }
         };
-        this.#focusHandler = () => this.showPopover();
+        this.#focusHandler = () => this.#showPopover();
         this.#cellFocusHandler = (eventParams) => {
-            // We want to close any popovers that are opened when other cells are focused, but open a popover if the current cell is focused.
+            const params = this.params();
             if (eventParams.column.getColId() ===
-                this.cellRendererParams?.column?.getColId() &&
-                eventParams.rowIndex === this.cellRendererParams?.node?.rowIndex) {
-                this.showPopover();
+                params?.column?.getColId() &&
+                eventParams.rowIndex === params?.node?.rowIndex) {
+                this.#showPopover();
             }
             else {
-                this.hidePopover();
+                this.#hidePopover();
             }
         };
-        this.#blurHandler = () => this.hidePopover();
-    }
-    set params(value) {
-        this.cellRendererParams = value;
-        if (value?.api && !this.#listenersAdded) {
-            this.#listenersAdded = true;
-            value.api.addEventListener('cellFocused', this.#cellFocusHandler);
-            value.api.addEventListener('cellEditingStarted', this.#blurHandler);
-            value.eGridCell?.addEventListener('keyup', this.#keyupHandler);
-            value.eGridCell?.addEventListener('mouseenter', this.#focusHandler);
-            value.eGridCell?.addEventListener('mouseleave', this.#blurHandler);
-        }
-        if (typeof value?.skyComponentProperties?.validatorMessage === 'function') {
-            this.validatorMessage = value.skyComponentProperties.validatorMessage(value.value, value.data, value?.node?.rowIndex);
-        }
-        else {
-            this.validatorMessage = value?.skyComponentProperties?.validatorMessage;
-        }
-        this.showValidatorMessage.set(this.#showValidatorMessage());
-        this.#changeDetector.markForCheck();
-    }
-    #changeDetector;
-    #listenersAdded;
-    #keyupHandler;
-    #focusHandler;
-    #cellFocusHandler;
-    #blurHandler;
-    ngOnDestroy() {
-        const params = this.cellRendererParams;
-        if (params?.api && (!params.api.isDestroyed || !params.api.isDestroyed())) {
-            params.api.removeEventListener('cellFocused', this.#cellFocusHandler);
-            params.api.removeEventListener('cellEditingStarted', this.#blurHandler);
-        }
-        if (params?.eGridCell) {
-            params.eGridCell.removeEventListener('keyup', this.#keyupHandler);
-            params.eGridCell.removeEventListener('mouseenter', this.#focusHandler);
-            params.eGridCell.removeEventListener('mouseleave', this.#blurHandler);
-        }
+        this.#blurHandler = () => this.#hidePopover();
+        effect((onCleanup) => {
+            const value = this.params();
+            if (value?.api) {
+                value.api.addEventListener('cellFocused', this.#cellFocusHandler);
+                value.api.addEventListener('cellEditingStarted', this.#blurHandler);
+                value.eGridCell?.addEventListener('keyup', this.#keyupHandler);
+                value.eGridCell?.addEventListener('mouseenter', this.#focusHandler);
+                value.eGridCell?.addEventListener('mouseleave', this.#blurHandler);
+                onCleanup(() => {
+                    if (!value.api.isDestroyed || !value.api.isDestroyed()) {
+                        value.api.removeEventListener('cellFocused', this.#cellFocusHandler);
+                        value.api.removeEventListener('cellEditingStarted', this.#blurHandler);
+                    }
+                    if (value.eGridCell) {
+                        value.eGridCell.removeEventListener('keyup', this.#keyupHandler);
+                        value.eGridCell.removeEventListener('mouseenter', this.#focusHandler);
+                        value.eGridCell.removeEventListener('mouseleave', this.#blurHandler);
+                    }
+                });
+            }
+        });
     }
-    hidePopover() {
+    #hidePopover() {
         this.popoverMessageStream.next({ type: SkyPopoverMessageType.Close });
     }
-    showPopover() {
+    #showPopover() {
         if (this.#shouldShowPopover()) {
             this.popoverMessageStream.next({ type: SkyPopoverMessageType.Open });
         }
     }
-    #showValidatorMessage() {
-        if (!this.validatorMessage) {
-            return false;
-        }
-        if (typeof this.cellRendererParams?.skyComponentProperties?.validator ===
-            'function') {
-            return !this.cellRendererParams.skyComponentProperties.validator(this.cellRendererParams.value, this.cellRendererParams.data, this.cellRendererParams.node?.rowIndex);
-        }
-        else {
-            return true;
-        }
-    }
     #shouldShowPopover() {
         if (!this.showValidatorMessage()) {
             return false;
         }
-        const editingCells = this.cellRendererParams?.api.getEditingCells() ?? [];
+        const editingCells = this.params()?.api.getEditingCells() ?? [];
         return editingCells.length === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridCellValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$3.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridCellValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage() }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$3.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SkyPopoverModule, SkyStatusIndicatorModule], template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"] }]
-        }], propDecorators: { params: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SkyPopoverModule, SkyStatusIndicatorModule], template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage() }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }] } });
 
 /**
  * @internal
@@ -2431,9 +2391,9 @@ class SkyAgGridCellRendererRowSelectorComponent {
         this.#subscription.unsubscribe();
         this.#subscription = new Subscription();
         this.#setLabel();
-        const rowSelected = !!this.#params.node?.isSelected();
+        const rowSelected = !!this.#params?.node?.isSelected();
         if (this.dataField) {
-            this.checked.next(!!this.#params.value);
+            this.checked.next(!!this.#params?.value);
             if (rowSelected !== this.checked.value) {
                 this.rowNode?.setSelected(this.checked.value);
             }
@@ -2441,7 +2401,10 @@ class SkyAgGridCellRendererRowSelectorComponent {
         else {
             this.checked.next(rowSelected);
         }
-        this.#subscription.add(fromEventPattern((handler) => this.rowNode?.addEventListener('rowSelected', handler), (handler) => this.rowNode?.removeEventListener('rowSelected', handler)).subscribe((event) => this.#rowSelectedListener(event)));
+        const node = this.rowNode;
+        const handler = (event) => this.#rowSelectedListener(event);
+        node?.addEventListener('rowSelected', handler);
+        this.#subscription.add(() => node?.removeEventListener('rowSelected', handler));
     }
     #setLabel() {
         const cellRendererParamLabel = this.#params?.colDef?.cellRendererParams?.label;
@@ -2535,15 +2498,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * @internal
  */
 class SkyAgGridCellRendererValidatorTooltipComponent {
+    #changeDetector;
+    #valueSubscription;
     constructor() {
+        this.params = input(...(ngDevMode ? [undefined, { debugName: "params" }] : []));
         this.valueObservable = new BehaviorSubject('');
         this.#changeDetector = inject(ChangeDetectorRef);
+        effect(() => {
+            const params = this.params();
+            if (params) {
+                this.agInit(params);
+            }
+        });
     }
-    set params(value) {
-        this.agInit(value);
-    }
-    #changeDetector;
-    #valueSubscription;
     ngOnDestroy() {
         this.#valueSubscription?.unsubscribe();
         this.valueObservable.complete();
@@ -2570,14 +2537,12 @@ class SkyAgGridCellRendererValidatorTooltipComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: SkyAgGridCellRendererValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  {{ valueObservable | async }}\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: SkyAgGridCellRendererValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-validator-tooltip", inputs: { params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  {{ valueObservable | async }}\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyAgGridCellValidatorTooltipComponent, AsyncPipe], template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  {{ valueObservable | async }}\n</sky-ag-grid-cell-validator-tooltip>\n" }]
-        }], propDecorators: { params: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }] } });
 
 /**
  * To display a help button beside the column group header, create a component containing
@@ -2640,10 +2605,10 @@ class SkyAgGridHeaderGroupComponent {
         }
         this.#subscriptions = new Subscription();
         this.#columnGroup = params.columnGroup.getProvidedColumnGroup();
-        this.#isExpandableSubject.next(this.#columnGroup.isExpandable());
+        this.#isExpandableSubject.next(!!this.#columnGroup?.isExpandable());
         if (this.#isExpandableSubject.getValue()) {
-            this.#subscriptions.add(fromEvent(params.api, 'columnGroupOpened')
-                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+            this.#subscriptions.add(fromGridEvent(params.api, 'columnGroupOpened')
+                .pipe(takeUntil(fromGridEvent(params.api, 'gridPreDestroyed')))
                 .subscribe((event) => {
                 if (this.#columnGroup &&
                     event.columnGroups.includes(this.#columnGroup)) {
@@ -2682,7 +2647,7 @@ class SkyAgGridHeaderGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridHeaderGroupComponent, isStandalone: true, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (params?.displayName) {\n  <span\n    class=\"header-group-text\"\n    role=\"presentation\"\n    [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n    >{{ params?.displayName }}</span\n  >\n}\n@if (isExpandable$ | async) {\n  @if (isExpanded$ | async) {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_collapse_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(false)\"\n    >\n      <sky-icon iconName=\"chevron-double-left\" />\n    </button>\n  } @else {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_expand_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(true)\"\n    >\n      <sky-icon iconName=\"chevron-double-right\" />\n    </button>\n  }\n}\n<span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n", styles: ["button:not(.sky-theme-modern *){--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-override-ag-grid-header-button-margin-left, var(--sky-space-gap-text_action-xs));flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridHeaderGroupComponent, isStandalone: true, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (params?.displayName) {\n  <span\n    class=\"header-group-text\"\n    role=\"presentation\"\n    [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n    >{{ params?.displayName }}</span\n  >\n}\n@if (isExpandable$ | async) {\n  @if (isExpanded$ | async) {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_collapse_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(false)\"\n    >\n      <sky-icon iconName=\"chevron-double-left\" />\n    </button>\n  } @else {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_expand_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(true)\"\n    >\n      <sky-icon iconName=\"chevron-double-right\" />\n    </button>\n  }\n}\n<span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n", styles: ["button:not(.sky-theme-modern *){--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-override-ag-grid-header-button-margin-left, var(--sky-space-gap-text_action-xs));flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
             type: Component,
@@ -2715,8 +2680,8 @@ class SkyAgGridHeaderRowSelectorComponent {
         this.multiSelect.set(rowSelection === 'multiple' ||
             (typeof rowSelection === 'object' && rowSelection?.mode === 'multiRow'));
         if (this.multiSelect()) {
-            fromEvent(params.api, 'selectionChanged')
-                .pipe(takeUntilDestroyed(this.#destroyRef), observeOn(asyncScheduler))
+            fromGridEvent(params.api, 'selectionChanged')
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe((change) => {
                 if (change.source.match(/selectall/i)) {
                     // Either select all or clear selection.
@@ -2728,7 +2693,7 @@ class SkyAgGridHeaderRowSelectorComponent {
                     this.checked.set(false);
                 }
             });
-            fromEvent(params.api, 'rowDataUpdated')
+            fromGridEvent(params.api, 'rowDataUpdated')
                 .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe(() => {
                 this.indeterminate.set(!!this.#api?.getSelectedNodes().length);
@@ -2840,36 +2805,28 @@ class SkyAgGridHeaderComponent {
         this.#leftPosition = params.column.getLeft() ?? 0;
         this.#subscriptions = new Subscription();
         if (params.column.isFilterAllowed()) {
-            this.#subscriptions.add(fromEvent(params.column, 'filterChanged')
-                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
-                .subscribe(() => {
+            const handler = () => {
                 const isFilterActive = params.column.isFilterActive();
                 if (isFilterActive !== this.filterEnabled$.getValue()) {
                     this.filterEnabled$.next(isFilterActive);
                 }
-            }));
+            };
+            params.column.addEventListener('filterChanged', handler);
+            this.#subscriptions.add(() => params.column.removeEventListener('filterChanged', handler));
         }
         if (params.enableSorting) {
             // Column sort state changes
-            this.#subscriptions.add(fromEvent(params.column, 'sortChanged')
-                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
-                .subscribe(() => {
-                this.#updateSort();
-            }));
+            const handler = () => this.#updateSort();
+            params.column.addEventListener('sortChanged', handler);
+            this.#subscriptions.add(() => params.column.removeEventListener('sortChanged', handler));
             // Other column sort state changes, for multi-column sorting
-            this.#subscriptions.add(fromEvent(params.api, 'sortChanged')
-                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
-                .subscribe(() => {
-                this.#updateSortIndex();
-            }));
+            this.#subscriptions.add(fromGridEvent(params.api, 'sortChanged').subscribe(() => this.#updateSortIndex()));
             this.#updateSort();
             this.#updateSortIndex();
         }
         // 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(fromEvent(params.api, 'columnMoved')
-            .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
-            .subscribe((event) => {
+        this.#subscriptions.add(fromGridEvent(params.api, 'columnMoved').subscribe((event) => {
             const left = event.column?.getLeft() ?? 0;
             const oldLeft = this.#leftPosition;
             if (event.column === params.column &&
@@ -2879,6 +2836,7 @@ class SkyAgGridHeaderComponent {
             }
             this.#leftPosition = left;
         }));
+        this.#subscriptions.add(fromGridEvent(params.api, 'gridPreDestroyed').subscribe(() => this.#subscriptions.unsubscribe()));
         this.#updateInlineHelp();
         this.#changeDetector.markForCheck();
     }
@@ -2941,7 +2899,7 @@ class SkyAgGridHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridHeaderComponent, isStandalone: true, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "accessibleHeaderText()", "attr.aria-label": "displayName() || accessibleHeaderText()", "attr.role": "\"note\"" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SkyAgGridHeaderComponent, isStandalone: true, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "accessibleHeaderText()", "attr.aria-label": "displayName() || accessibleHeaderText()", "attr.role": "\"note\"" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
@@ -3512,29 +3470,17 @@ let rowNodeId = -1;
 class SkyAgGridService {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     #keyMap = new WeakMap();
-    #ngUnsubscribe = new Subject();
-    #currentTheme = undefined;
-    #agGridAdapterService;
-    #resources;
+    #agGridAdapterService = inject(SkyAgGridAdapterService);
+    #resources = inject(SkyLibResourcesService, { optional: true });
     #dateService = inject(SkyDateService);
     #logService = inject(SkyLogService);
     #cspNonce = inject(CSP_NONCE, { optional: true });
-    constructor(agGridAdapterService, themeSvc, resources) {
-        this.#agGridAdapterService = agGridAdapterService;
-        this.#resources = resources;
-        /*istanbul ignore else*/
-        if (themeSvc) {
-            themeSvc.settingsChange
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((settingsChange) => {
-                this.#currentTheme = settingsChange.currentSettings;
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-    }
+    #doc = inject(DOCUMENT);
+    #currentTheme = toSignal(inject(SkyThemeService, { optional: true })?.settingsChange.pipe(map((settingsChange) => settingsChange.currentSettings)) ?? EMPTY, { initialValue: undefined });
+    #currencyValidatorMsg = toSignal(this.#resources?.getString('sky_ag_grid_cell_renderer_currency_validator_message') ?? of('Please enter a valid currency'), { initialValue: 'Please enter a valid currency' });
+    #numberValidatorMsg = toSignal(this.#resources?.getString('sky_ag_grid_cell_renderer_number_validator_message') ?? of('Please enter a valid number'), { initialValue: 'Please enter a valid number' });
+    #rowSelectorHeading = toSignal(this.#resources?.getString('sky_ag_grid_row_selector_column_heading') ??
+        of('Row selection'), { initialValue: 'Row selection' });
     /**
      * Returns [AG Grid `gridOptions`](https://www.ag-grid.com/angular-data-grid/grid-options/) with default SKY UX options, styling, and cell renderers registered for read-only grids.
      * @param args
@@ -3718,7 +3664,7 @@ class SkyAgGridService {
                     },
                     cellEditor: SkyAgGridCellEditorDatepickerComponent,
                     comparator: dateComparator,
-                    minWidth: this.#currentTheme?.theme?.name === 'modern' ? 180 : 160,
+                    minWidth: this.#currentTheme()?.theme?.name === 'modern' ? 180 : 160,
                     valueFormatter: (params) => {
                         try {
                             return (this.#dateService.format(params.value, args.locale, args.dateFormat || 'shortDate') || '');
@@ -3779,7 +3725,7 @@ class SkyAgGridService {
                     },
                     cellRenderer: SkyAgGridCellRendererRowSelectorComponent,
                     headerComponent: SkyAgGridHeaderRowSelectorComponent,
-                    headerName: 'Row selection',
+                    headerValueGetter: () => this.#rowSelectorHeading(),
                     minWidth: 55,
                     maxWidth: 55,
                     resizable: false,
@@ -3877,6 +3823,7 @@ class SkyAgGridService {
             styleNonce: this.#cspNonce ?? undefined,
             suppressDragLeaveHidesColumns: true,
             theme: getSkyAgGridTheme('data-grid'),
+            themeStyleContainer: this.#doc.head,
         };
         const columnTypes = defaultSkyGridOptions.columnTypes;
         columnTypes[SkyCellType.CurrencyValidator] = {
@@ -3886,19 +3833,10 @@ class SkyAgGridService {
                     validator: (value) => {
                         return !!`${value || ''}`.match(/^[^0-9]*(\d+[,.]?)+\d*[^0-9]*$/);
                     },
-                    validatorMessage: 'Please enter a valid currency',
+                    validatorMessage: this.#currencyValidatorMsg,
                 },
             },
         };
-        /*istanbul ignore else*/
-        if (this.#resources) {
-            this.#resources
-                .getString('sky_ag_grid_cell_renderer_currency_validator_message')
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((value) => {
-                columnTypes[SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
-            });
-        }
         columnTypes[SkyCellType.NumberValidator] = {
             ...columnTypes[SkyCellType.Validator],
             ...columnTypes[SkyCellType.Number],
@@ -3911,25 +3849,10 @@ class SkyAgGridService {
                     validator: (value) => {
                         return !!value && !isNaN(parseFloat(value));
                     },
-                    validatorMessage: 'Please enter a valid number',
+                    validatorMessage: this.#numberValidatorMsg,
                 },
             },
         };
-        /*istanbul ignore else*/
-        if (this.#resources) {
-            this.#resources
-                .getString('sky_ag_grid_cell_renderer_number_validator_message')
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((value) => {
-                columnTypes[SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
-            });
-            this.#resources
-                .getString('sky_ag_grid_row_selector_column_heading')
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((value) => {
-                columnTypes[SkyCellType.RowSelector].headerName = value;
-            });
-        }
         return defaultSkyGridOptions;
     }
     #onCellFocused(event) {
@@ -3985,7 +3908,7 @@ class SkyAgGridService {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i2$4.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyAgGridService, decorators: [{
@@ -3993,11 +3916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: SkyAgGridAdapterService }, { type: i2$4.SkyThemeService, decorators: [{
-                    type: Optional
-                }] }, { type: i3.SkyLibResourcesService, decorators: [{
-                    type: Optional
-                }] }] });
+        }] });
 
 // Export any types that should be included in the root.