@skyux/ag-grid 13.10.0 → 13.11.1

package/fesm2022/skyux-ag-grid.mjs

@@ -1,33 +1,33 @@
 import { NgClass, AsyncPipe, CommonModule, NgTemplateOutlet } 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, Directive, InjectionToken, computed, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, DestroyRef, CSP_NONCE, Optional } 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 { 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 * 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 { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, switchMap, fromEvent, Subscription, merge, startWith, map, scan, filter as filter$1, fromEventPattern, isObservable, observeOn, asyncScheduler } from 'rxjs';
-import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
+import { SkyDataManagerService } from '@skyux/data-manager';
+import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, switchMap, filter, fromEvent, Subscription, merge, startWith, map, scan, fromEventPattern, isObservable, observeOn, asyncScheduler } from 'rxjs';
 import * as i2$4 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { themeQuartz, colorSchemeLight, KeyCode } from 'ag-grid-community';
-import * as i1$1 from '@skyux/data-manager';
-import * as i1$2 from '@skyux/layout';
+import * as i1$1 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import * as i2$2 from '@skyux/datetime';
 import { SkyDatepickerModule, SkyDateService } from '@skyux/datetime';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import * as i2$1 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
-import * as i1$4 from '@skyux/forms';
+import { first } from 'rxjs/operators';
+import * as i1$3 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import * as i2$3 from '@skyux/indicators';
 import { SkyStatusIndicatorModule, SkyWaitModule } from '@skyux/indicators';
-import * as i1$5 from '@skyux/popovers';
+import * as i1$4 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 import * as i2$5 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
@@ -140,11 +140,11 @@ SkyLibResourcesService.addResources(RESOURCES);
  * Import into any component library module that needs to use resource strings.
  */
 class SkyAgGridResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridResourcesModule, imports: [SkyI18nModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridResourcesModule, imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -285,10 +285,10 @@ class SkyAgGridAdapterService {
             focusChild.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -674,10 +674,10 @@ class SkyAgGridWrapperComponent {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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" }]
         }], ctorParameters: () => [], propDecorators: { agGrid: [{
@@ -691,7 +691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], 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 }] }] } });
 
 function toColumnWidthName(breakpoint) {
     return breakpoint === 'xs' ? 'xs' : 'sm';
@@ -701,25 +701,55 @@ function toColumnWidthName(breakpoint) {
  */
 class SkyAgGridDataManagerAdapterDirective {
     #currentAgGrid;
+    #isAgGridReady;
+    #currentAgGridReady;
     #currentDataState;
     #currentSkyAgGridWrapper;
-    #dataStateSub;
-    #viewConfig;
     #ngUnsubscribe;
     #changeDetector;
     #dataManagerSvc;
+    #viewConfigs;
+    #viewConfig;
+    #activeView;
+    #isActiveView;
     #breakpoint;
-    constructor(changeDetector, dataManagerSvc) {
+    constructor() {
+        this.viewId = input(...(ngDevMode ? [undefined, { debugName: "viewId" }] : []));
         this.agGridList = contentChildren(AgGridAngular, ...(ngDevMode ? [{ debugName: "agGridList", descendants: true }] : [{
                 descendants: true,
             }]));
         this.skyAgGridWrapperList = contentChildren(SkyAgGridWrapperComponent, ...(ngDevMode ? [{ debugName: "skyAgGridWrapperList", descendants: true }] : [{
                 descendants: true,
             }]));
+        this.#currentAgGrid = signal(undefined, ...(ngDevMode ? [{ debugName: "#currentAgGrid" }] : []));
+        this.#isAgGridReady = linkedSignal(computed(() => {
+            this.#currentAgGrid();
+            return false;
+        }), ...(ngDevMode ? [{ debugName: "#isAgGridReady" }] : []));
+        this.#currentAgGridReady = computed(() => {
+            const agGrid = this.#currentAgGrid();
+            if (this.#isAgGridReady()) {
+                return agGrid;
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "#currentAgGridReady" }] : []));
         this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#dataManagerSvc = inject(SkyDataManagerService);
+        this.#viewConfigs = toSignal(this.#dataManagerSvc.getDataViewsUpdates(), {
+            initialValue: [],
+        });
+        this.#viewConfig = computed(() => {
+            const viewId = this.viewId();
+            return this.#viewConfigs().find((vc) => vc.id === viewId);
+        }, ...(ngDevMode ? [{ debugName: "#viewConfig" }] : []));
+        this.#activeView = toSignal(this.#dataManagerSvc.getActiveViewIdUpdates());
+        this.#isActiveView = computed(() => {
+            const activeViewId = this.#activeView();
+            const viewId = this.viewId();
+            return activeViewId === viewId;
+        }, ...(ngDevMode ? [{ debugName: "#isActiveView" }] : []));
         this.#breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
-        this.#changeDetector = changeDetector;
-        this.#dataManagerSvc = dataManagerSvc;
         effect(() => {
             const list = this.agGridList();
             this.#checkForAgGrid(list);
@@ -734,12 +764,28 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#applyColumnWidths(breakpoint);
             }
         });
-    }
-    ngAfterContentInit() {
-        if (this.viewId) {
-            this.#dataManagerSvc.setViewkeeperClasses(this.viewId, ['.ag-header']);
-            this.#viewConfig = this.#dataManagerSvc.getViewById(this.viewId);
-        }
+        effect(() => {
+            const viewId = this.viewId();
+            const agGrid = this.#currentAgGridReady();
+            if (viewId && agGrid) {
+                if (agGrid.api.getGridOption('context')?.enableTopScroll) {
+                    this.#dataManagerSvc.setViewkeeperClasses(viewId, [
+                        '.ag-header',
+                        '.ag-body-horizontal-scroll',
+                    ]);
+                }
+                else {
+                    this.#dataManagerSvc.setViewkeeperClasses(viewId, ['.ag-header']);
+                }
+            }
+        });
+        effect(() => {
+            const isActiveView = this.#isActiveView();
+            const agGrid = untracked(this.#currentAgGridReady);
+            if (isActiveView && agGrid) {
+                agGrid.api.refreshCells();
+            }
+        });
     }
     ngOnDestroy() {
         this.#unregisterAgGrid();
@@ -749,7 +795,7 @@ class SkyAgGridDataManagerAdapterDirective {
         const agGrid = agGridList[0];
         const agGridCount = agGridList.length;
         if (agGrid) {
-            if (agGrid !== this.#currentAgGrid) {
+            if (agGrid !== this.#currentAgGrid()) {
                 this.#registerAgGrid(agGrid);
             }
             if (agGridCount > 1) {
@@ -770,11 +816,7 @@ class SkyAgGridDataManagerAdapterDirective {
     }
     #unregisterAgGrid() {
         this.#ngUnsubscribe.next();
-        this.#currentAgGrid = undefined;
-        /* istanbul ignore if */
-        if (this.#dataStateSub) {
-            this.#dataStateSub.unsubscribe();
-        }
+        this.#currentAgGrid.set(undefined);
     }
     #unregisterSkyAgGridWrapper() {
         this.#currentSkyAgGridWrapper = undefined;
@@ -790,22 +832,17 @@ class SkyAgGridDataManagerAdapterDirective {
     }
     #registerAgGrid(agGrid) {
         this.#unregisterAgGrid();
-        this.#currentAgGrid = agGrid;
+        this.#currentAgGrid.set(agGrid);
         if (agGrid) {
-            this.#dataStateSub = agGrid.gridReady
-                .pipe(takeUntil$1(this.#ngUnsubscribe), switchMap(() => {
-                if (this.#viewConfig && this.viewId) {
-                    this.#viewConfig.onSelectAllClick = () => agGrid.api.selectAll();
-                    this.#viewConfig.onClearAllClick = () => agGrid.api.deselectAll();
-                    this.#dataManagerSvc.updateViewConfig(this.#viewConfig);
-                    if (agGrid.gridOptions?.context?.enableTopScroll) {
-                        this.#dataManagerSvc.setViewkeeperClasses(this.viewId, [
-                            '.ag-header',
-                            '.ag-body-horizontal-scroll',
-                        ]);
-                    }
+            agGrid.gridReady
+                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => {
+                const viewConfig = this.#viewConfig();
+                if (viewConfig) {
+                    viewConfig.onSelectAllClick = () => agGrid.api.selectAll();
+                    viewConfig.onClearAllClick = () => agGrid.api.deselectAll();
+                    this.#dataManagerSvc.updateViewConfig(viewConfig);
                     this.#applyColumnWidths();
-                    return this.#dataManagerSvc.getDataStateUpdates(this.#viewConfig.id);
+                    return this.#dataManagerSvc.getDataStateUpdates(viewConfig.id);
                 }
                 /* istanbul ignore next */
                 return of(undefined);
@@ -814,14 +851,15 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#currentDataState = dataState;
                 this.#displayColumns(dataState);
                 this.#applySort(dataState);
+                this.#isAgGridReady.set(true);
             });
             agGrid.gridReady
-                .pipe(takeUntil$1(this.#ngUnsubscribe), switchMap(() => fromEvent(agGrid.api, 'gridPreDestroyed')))
+                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => fromEvent(agGrid.api, 'gridPreDestroyed')))
                 .subscribe(() => {
                 this.#unregisterAgGrid();
             });
             agGrid.columnMoved
-                .pipe(takeUntil$1(this.#ngUnsubscribe), filter((event) => ![
+                .pipe(takeUntil(this.#ngUnsubscribe), filter((event) => ![
                 'gridInitializing',
                 'uiColumnResized',
                 'uiColumnDragged',
@@ -831,7 +869,7 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#updateColumnsInCurrentDataState(value.api);
             });
             agGrid.columnResized
-                .pipe(takeUntil$1(this.#ngUnsubscribe), filter((event) => event.source === 'uiColumnResized'))
+                .pipe(takeUntil(this.#ngUnsubscribe), filter((event) => event.source === 'uiColumnResized'))
                 .subscribe((event) => {
                 const colId = event.column?.getColId();
                 const width = event.column?.getActualWidth();
@@ -841,14 +879,15 @@ class SkyAgGridDataManagerAdapterDirective {
                 }
             });
             agGrid.dragStopped
-                .pipe(takeUntil$1(this.#ngUnsubscribe))
+                .pipe(takeUntil(this.#ngUnsubscribe))
                 .subscribe((value) => {
                 this.#updateColumnsInCurrentDataState(value.api);
             });
             agGrid.rowSelected
-                .pipe(takeUntil$1(this.#ngUnsubscribe))
+                .pipe(takeUntil(this.#ngUnsubscribe))
                 .subscribe((event) => {
-                if (this.#viewConfig && this.#currentDataState) {
+                const viewConfig = this.#viewConfig();
+                if (viewConfig && this.#currentDataState) {
                     const row = event.node;
                     const selectedIds = this.#currentDataState.selectedIds || [];
                     const rowIndex = selectedIds.indexOf(row.data.id);
@@ -859,15 +898,16 @@ class SkyAgGridDataManagerAdapterDirective {
                         selectedIds.splice(rowIndex, 1);
                     }
                     this.#currentDataState.selectedIds = selectedIds;
-                    this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
+                    this.#dataManagerSvc.updateDataState(this.#currentDataState, viewConfig.id);
                     this.#changeDetector.markForCheck();
                 }
             });
-            agGrid.sortChanged.pipe(takeUntil$1(this.#ngUnsubscribe)).subscribe(() => {
+            agGrid.sortChanged.pipe(takeUntil(this.#ngUnsubscribe)).subscribe(() => {
                 const gridColumnStates = agGrid.api.getColumnState();
+                const viewConfig = this.#viewConfig();
                 const activeSortColumnState = gridColumnStates?.find((aGridColumnState) => aGridColumnState.sortIndex === 0) ??
                     gridColumnStates?.find((aGridColumnState) => aGridColumnState.sort);
-                if (this.#viewConfig && this.#currentDataState) {
+                if (viewConfig && this.#currentDataState) {
                     if (activeSortColumnState) {
                         const activeSortColumnDef = agGrid.api.getColumnDef(activeSortColumnState.colId);
                         this.#currentDataState.activeSortOption = {
@@ -880,20 +920,21 @@ class SkyAgGridDataManagerAdapterDirective {
                     else {
                         this.#currentDataState.activeSortOption = undefined;
                     }
-                    this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
+                    this.#dataManagerSvc.updateDataState(this.#currentDataState, viewConfig.id);
                 }
             });
         }
     }
     #updateColumnsInCurrentDataState(api) {
-        if (this.#viewConfig && this.#currentDataState) {
+        const viewConfig = this.#viewConfig();
+        if (viewConfig && this.#currentDataState) {
             const columnOrder = this.#getColumnOrder(api);
-            const viewState = this.#currentDataState.getViewStateById(this.#viewConfig.id);
+            const viewState = this.#currentDataState.getViewStateById(viewConfig.id);
             if (viewState &&
                 (viewState.displayedColumnIds.length !== columnOrder.length ||
                     viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i]))) {
                 viewState.displayedColumnIds = columnOrder;
-                this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.#viewConfig.id, viewState), this.#viewConfig.id);
+                this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewConfig.id, viewState), viewConfig.id);
             }
         }
     }
@@ -904,9 +945,10 @@ class SkyAgGridDataManagerAdapterDirective {
             .map((state) => state.colId);
     }
     #displayColumns(dataState) {
-        const agGrid = this.#currentAgGrid;
-        if (agGrid && this.#viewConfig) {
-            const viewState = dataState.getViewStateById(this.#viewConfig.id);
+        const agGrid = this.#currentAgGrid();
+        const viewConfig = this.#viewConfig();
+        if (agGrid && viewConfig) {
+            const viewState = dataState.getViewStateById(viewConfig.id);
             let displayedColumnIds = [];
             /*istanbul ignore else*/
             if (viewState?.displayedColumnIds) {
@@ -928,7 +970,7 @@ class SkyAgGridDataManagerAdapterDirective {
         }
     }
     #applySort(dataState) {
-        const agGrid = this.#currentAgGrid;
+        const agGrid = this.#currentAgGrid();
         const activeSort = dataState.activeSortOption;
         if (activeSort) {
             agGrid?.api.applyColumnState({
@@ -943,33 +985,37 @@ class SkyAgGridDataManagerAdapterDirective {
         }
     }
     #updateColumnWidth(colId, width, breakpoint) {
-        const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
-        if (viewState && this.viewId && this.#currentDataState) {
+        const viewId = this.viewId();
+        const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
+        if (viewState && viewId && this.#currentDataState) {
             const currentWidths = viewState?.columnWidths;
             currentWidths[toColumnWidthName(breakpoint)][colId] = width;
             viewState.columnWidths = currentWidths;
-            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.viewId, viewState), this.viewId);
+            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewId, viewState), viewId);
         }
     }
     #removeColumnWidths(colIds) {
-        const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
-        if (viewState && this.viewId && this.#currentDataState) {
+        const viewId = this.viewId();
+        const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
+        if (viewState && viewId && this.#currentDataState) {
             const currentWidths = viewState?.columnWidths;
             for (const colId of colIds) {
                 delete currentWidths['xs'][colId];
                 delete currentWidths['sm'][colId];
             }
             viewState.columnWidths = currentWidths;
-            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.viewId, viewState), this.viewId);
+            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewId, viewState), viewId);
         }
     }
     #applyColumnWidths(breakpoint) {
         breakpoint ??= this.#breakpoint();
+        const currentAgGrid = this.#currentAgGrid();
+        const viewId = this.viewId();
         if (breakpoint) {
-            const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
+            const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
             if (viewState && viewState.columnWidths && viewState.displayedColumnIds) {
                 const columnLimits = this.#getGridColumnLimits(viewState.displayedColumnIds, viewState.columnWidths, toColumnWidthName(breakpoint));
-                this.#currentAgGrid?.api.sizeColumnsToFit({ columnLimits });
+                currentAgGrid?.api.sizeColumnsToFit({ columnLimits });
             }
         }
     }
@@ -987,15 +1033,17 @@ class SkyAgGridDataManagerAdapterDirective {
         }
         return gridColumnLimits;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.0", type: SkyAgGridDataManagerAdapterDirective, isStandalone: true, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true, isSignal: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.15", type: SkyAgGridDataManagerAdapterDirective, isStandalone: true, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: { classPropertyName: "viewId", publicName: "viewId", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true, isSignal: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[skyAgGridDataManagerAdapter]' }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }], propDecorators: { viewId: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { viewId: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewId", required: false }] }], agGridList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AgGridAngular), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], skyAgGridWrapperList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyAgGridWrapperComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
 
 /**
  * @internal
@@ -1063,7 +1111,7 @@ class SkyAgGridRowDeleteComponent {
         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
+            .pipe(filter((el) => Array.isArray(el) && !!el[0]), switchMap((gridElement) => this.#resizeObserverSvc
             .observe(gridElement[0])
             .pipe(map(() => gridElement[0].nativeElement.offsetWidth))), takeUntilDestroyed())
             .subscribe((tableWidth) => {
@@ -1071,7 +1119,7 @@ class SkyAgGridRowDeleteComponent {
         });
         // 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())
+            .pipe(filter((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)));
         });
@@ -1083,10 +1131,10 @@ class SkyAgGridRowDeleteComponent {
         this.pending.update((pending) => pending.concat(rowId));
         this.service.confirmRowDelete.next(rowId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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$1.λ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: "20.3.0", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-row-delete', imports: [SkyInlineDeleteModule, SkyAffixModule], host: {
                         '[style]': '"--table-width: " + tableWidthStyle()',
@@ -1124,14 +1172,19 @@ class SkyAgGridRowDeleteDirective {
         this.#agGridBodyViewport = new BehaviorSubject([]);
         this.#agGridBodyClipElements = new BehaviorSubject([]);
         this.#ngUnsubscribe = new Subject();
-        this.#rowDeleteIdsInternal = linkedSignal({
-            source: this.rowDeleteIds,
-            computation: (value) => [...new Set(value)]
-                .filter(Boolean)
-                .map(String)
-                .sort((a, b) => a.localeCompare(b)),
-            equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]),
-        });
+        this.#rowDeleteIdsInternal = linkedSignal(...(ngDevMode ? [{ debugName: "#rowDeleteIdsInternal", source: this.rowDeleteIds,
+                computation: (value) => [...new Set(value)]
+                    .filter(Boolean)
+                    .map(String)
+                    .sort((a, b) => a.localeCompare(b)),
+                equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]) }] : [{
+                source: this.rowDeleteIds,
+                computation: (value) => [...new Set(value)]
+                    .filter(Boolean)
+                    .map(String)
+                    .sort((a, b) => a.localeCompare(b)),
+                equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]),
+            }]));
         this.#clipPath = new BehaviorSubject(undefined);
         this.#zIndex = new BehaviorSubject(998);
         this.#elementRef = inject((ElementRef));
@@ -1163,7 +1216,7 @@ class SkyAgGridRowDeleteDirective {
             }
         });
         const agGrid = toObservable(this.agGrid);
-        const agGridReady = agGrid.pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), take(1), takeUntil(this.#ngUnsubscribe));
+        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')),
@@ -1171,7 +1224,7 @@ class SkyAgGridRowDeleteDirective {
             this.#rowDeleteSvc.gridApi.set(ready.api);
         });
         agGrid
-            .pipe(filter$1((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) => {
+            .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();
             }
@@ -1185,7 +1238,7 @@ class SkyAgGridRowDeleteDirective {
             this.#agGridBodyClipElements.next(agGridBodyClipElements);
         });
         agGrid
-            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
+            .pipe(filter((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
             .subscribe((evt) => {
             this.rowDeleteIds.update((rowIds) => (rowIds ?? []).filter((id) => !!evt.api.getRowNode(id)));
         });
@@ -1234,19 +1287,19 @@ class SkyAgGridRowDeleteDirective {
             this.#overlayService.close(this.#overlay);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.0", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.15", 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: "20.3.0", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridRowDelete]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { rowDeleteIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDeleteIds", required: false }] }, { type: i0.Output, args: ["rowDeleteIdsChange"] }], rowDeleteCancel: [{ type: i0.Output, args: ["rowDeleteCancel"] }], rowDeleteConfirm: [{ type: i0.Output, args: ["rowDeleteConfirm"] }], agGrid: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AgGridAngular), { isSignal: true }] }] } });
 
 class SkyAgGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
             CommonModule,
             SkyAgGridDataManagerAdapterDirective,
             SkyAgGridResourcesModule,
@@ -1254,12 +1307,12 @@ class SkyAgGridModule {
             SkyAgGridWrapperComponent], exports: [SkyAgGridDataManagerAdapterDirective,
             SkyAgGridRowDeleteDirective,
             SkyAgGridWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
             CommonModule,
             SkyAgGridResourcesModule,
             SkyAgGridWrapperComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1445,10 +1498,10 @@ class SkyAgGridCellEditorAutocompleteComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellEditorAutocompleteComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "focusout": "onBlur($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n    (openChange)=\"onAutocompleteOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorAutocomplete\n      formControlName=\"selection\"\n      skyAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorAutocompleteComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "focusout": "onBlur($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n    (openChange)=\"onAutocompleteOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorAutocomplete\n      formControlName=\"selection\"\n      skyAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1485,6 +1538,9 @@ class SkyAgGridCellEditorCurrencyComponent {
             // This happens when the refreshCells API is called.
             this.afterGuiAttached();
         }
+        else if (event.target === this.input?.nativeElement) {
+            this.#stopEditingOnBlur();
+        }
     }
     #triggerType;
     #changeDetector;
@@ -1564,10 +1620,15 @@ class SkyAgGridCellEditorCurrencyComponent {
         }
         this.#initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellEditorCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-currency", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorCurrency\n    type=\"text\"\n    [formControl]=\"currency\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    #stopEditingOnBlur() {
+        if (this.params?.api.getGridOption('stopEditingWhenCellsLoseFocus')) {
+            this.params?.api.stopEditing();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-currency", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorCurrency\n    type=\"text\"\n    [formControl]=\"currency\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1719,10 +1780,10 @@ class SkyAgGridCellEditorDatepickerComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellEditorDatepickerComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n    (dateFormatChange)=\"onDateFormatChange($event)\"\n    (openChange)=\"onCalendarOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorDatepickerInput\n      formControlName=\"date\"\n      skyDatepickerInput\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_datepicker_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n      [attr.title]=\"\n        resolvedDateFormat\n          ? ('skyux_datepicker_format_hint_text'\n            | skyLibResources: resolvedDateFormat)\n          : null\n      \"\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorDatepickerComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n    (dateFormatChange)=\"onDateFormatChange($event)\"\n    (openChange)=\"onCalendarOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorDatepickerInput\n      formControlName=\"date\"\n      skyDatepickerInput\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_datepicker_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n      [attr.title]=\"\n        resolvedDateFormat\n          ? ('skyux_datepicker_format_hint_text'\n            | skyLibResources: resolvedDateFormat)\n          : null\n      \"\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         FormsModule,
@@ -1875,10 +1936,10 @@ class SkyAgGridCellEditorLookupComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAgGridCellEditorLookupComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-lookup", host: { listeners: { "focusout": "onBlur($event)" }, properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "@if (isAlive && useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n@if (isAlive && !useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n<div #screenReaderLabel=\"skyId\" class=\"sky-screen-reader-only\" skyId>\n  {{ labelText }}\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i1$4.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellEditorLookupComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-lookup", host: { listeners: { "focusout": "onBlur($event)" }, properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "@if (isAlive && useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n@if (isAlive && !useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n<div #screenReaderLabel=\"skyId\" class=\"sky-screen-reader-only\" skyId>\n  {{ labelText }}\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i1$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SkyInputBoxModule,
@@ -1911,6 +1972,9 @@ class SkyAgGridCellEditorNumberComponent {
             // This happens when the refreshCells API is called.
             this.afterGuiAttached();
         }
+        else if (event.target === this.input?.nativeElement) {
+            this.#stopEditingOnBlur();
+        }
     }
     #params;
     #triggerType;
@@ -1944,6 +2008,9 @@ class SkyAgGridCellEditorNumberComponent {
         this.columnWidth = this.#params.column.getActualWidth();
         this.rowHeightWithoutBorders = this.#params.node.rowHeight - 4;
     }
+    refresh(params) {
+        this.agInit(params);
+    }
     /**
      * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
      */
@@ -1965,10 +2032,15 @@ class SkyAgGridCellEditorNumberComponent {
         const val = this.editorForm.get('number')?.value;
         return val !== undefined && val !== null ? val : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellEditorNumberComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-number", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    #stopEditingOnBlur() {
+        if (this.#params?.api.getGridOption('stopEditingWhenCellsLoseFocus')) {
+            this.#params?.api.stopEditing();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorNumberComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-number", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"] }]
         }], propDecorators: { input: [{
@@ -1995,6 +2067,9 @@ class SkyAgGridCellEditorTextComponent {
             // This happens when the refreshCells API is called.
             this.afterGuiAttached();
         }
+        else if (event.target === this.input?.nativeElement) {
+            this.#stopEditingOnBlur();
+        }
     }
     #params;
     #triggerType;
@@ -2025,6 +2100,9 @@ class SkyAgGridCellEditorTextComponent {
         this.columnHeader = this.#params.api.getDisplayNameForColumn(this.#params.column, 'header');
         this.rowNumber = this.#params.rowIndex + 1;
     }
+    refresh(params) {
+        this.agInit(params);
+    }
     /**
      * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
      */
@@ -2045,10 +2123,15 @@ class SkyAgGridCellEditorTextComponent {
     getValue() {
         return this.editorForm.get('text')?.value || undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellEditorTextComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-text", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    #stopEditingOnBlur() {
+        if (this.#params?.api.getGridOption('stopEditingWhenCellsLoseFocus')) {
+            this.#params?.api.stopEditing();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorTextComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-text", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"] }]
         }], propDecorators: { input: [{
@@ -2151,10 +2234,10 @@ class SkyAgGridCellValidatorTooltipComponent {
         const editingCells = this.cellRendererParams?.api.getEditingCells() ?? [];
         return editingCells.length === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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$5.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$5.λ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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: [{
@@ -2192,10 +2275,10 @@ class SkyAgGridCellRendererCurrencyComponent {
         this.skyComponentProperties.minDigits = 2;
         this.skyComponentProperties.truncate = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellRendererCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellRendererCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyNumericModule], template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n" }]
         }], propDecorators: { params: [{
@@ -2229,10 +2312,10 @@ class SkyAgGridCellRendererCurrencyValidatorComponent {
     refresh(params) {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAgGridCellRendererCurrencyValidatorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellRendererCurrencyValidatorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SkyAgGridCellValidatorTooltipComponent,
@@ -2261,10 +2344,10 @@ class SkyAgGridCellRendererLookupComponent {
         this.agInit(params);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAgGridCellRendererLookupComponent, isStandalone: true, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "@if (summaryCount > 5) {\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n} @else {\n  {{ value }}\n}\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellRendererLookupComponent, isStandalone: true, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "@if (summaryCount > 5) {\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n} @else {\n  {{ value }}\n}\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-cell-renderer-lookup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyI18nModule], template: "@if (summaryCount > 5) {\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n} @else {\n  {{ value }}\n}\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
@@ -2365,10 +2448,10 @@ class SkyAgGridCellRendererRowSelectorComponent {
             this.rowNode.data[this.dataField] = this.checked.value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\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-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\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-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
             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  class=\"sky-ag-grid-row-selector\"\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-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"] }]
         }], ctorParameters: () => [] });
@@ -2386,11 +2469,10 @@ class SkyAgGridCellRendererTemplateComponent {
             'template' in params.colDef.cellRendererParams &&
             params.colDef.cellRendererParams.template);
         const template = hasTemplate
-            ? params.colDef?.cellRendererParams
-                .template
+            ? params.colDef?.cellRendererParams.template
             : undefined;
         this.state = {
-            hasTemplate,
+            hasTemplate: isSignal(template) ? 'signal' : hasTemplate,
             template,
             context: { value: params.value, row: params.data },
         };
@@ -2399,18 +2481,30 @@ class SkyAgGridCellRendererTemplateComponent {
         this.agInit(params);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAgGridCellRendererTemplateComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-template", ngImport: i0, template: `@if (state.hasTemplate) {
-    <ng-container *ngTemplateOutlet="state.template; context: state.context" />
-  }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellRendererTemplateComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-template", ngImport: i0, template: `@if (state.hasTemplate === 'signal') {
+      <ng-container
+        *ngTemplateOutlet="state.template(); context: state.context"
+      />
+    } @else if (state.hasTemplate) {
+      <ng-container
+        *ngTemplateOutlet="state.template; context: state.context"
+      />
+    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-ag-grid-cell-renderer-template',
-                    template: `@if (state.hasTemplate) {
-    <ng-container *ngTemplateOutlet="state.template; context: state.context" />
-  }`,
+                    template: `@if (state.hasTemplate === 'signal') {
+      <ng-container
+        *ngTemplateOutlet="state.template(); context: state.context"
+      />
+    } @else if (state.hasTemplate) {
+      <ng-container
+        *ngTemplateOutlet="state.template; context: state.context"
+      />
+    }`,
                     imports: [NgTemplateOutlet],
                 }]
         }] });
@@ -2453,10 +2547,10 @@ class SkyAgGridCellRendererValidatorTooltipComponent {
         this.agInit(params);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: [{
@@ -2473,10 +2567,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * @see SkyAgGridHeaderGroupParams
  */
 class SkyAgGridHeaderGroupInfo {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderGroupInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderGroupInfo }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderGroupInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderGroupInfo }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderGroupInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderGroupInfo, decorators: [{
             type: Injectable
         }] });
 
@@ -2565,10 +2659,10 @@ class SkyAgGridHeaderGroupComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyThemeModule, SkyIconModule, AsyncPipe, SkyI18nModule], 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"] }]
         }], ctorParameters: () => [], propDecorators: { inlineHelpContainer: [{
@@ -2631,16 +2725,16 @@ class SkyAgGridHeaderRowSelectorComponent {
             this.#api?.deselectAll();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAgGridHeaderRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-row-selector-header", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.title": "label()", "attr.role": "\"note\"" } }, ngImport: i0, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridHeaderRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-row-selector-header", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.title": "label()", "attr.role": "\"note\"" } }, ngImport: i0, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-row-selector-header', imports: [SkyCheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.title]': 'label()',
                         '[attr.role]': '"note"',
                     }, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n" }]
-        }] });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 /**
  * To display a help button beside the column header, create a component containing
@@ -2652,10 +2746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * @see SkyAgGridHeaderParams
  */
 class SkyAgGridHeaderInfo {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderInfo }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderInfo }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderInfo, decorators: [{
             type: Injectable
         }] });
 
@@ -2824,10 +2918,10 @@ class SkyAgGridHeaderComponent {
             this.sortIndexDisplay$.next('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.title]': 'accessibleHeaderText()',
@@ -3299,10 +3393,10 @@ class SkyAgGridLoadingComponent {
     refresh(_params) {
         // Do nothing.
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAgGridLoadingComponent, isStandalone: true, selector: "sky-ag-grid-loading", ngImport: i0, template: "<sky-wait [isWaiting]=\"true\" />\n", dependencies: [{ kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridLoadingComponent, isStandalone: true, selector: "sky-ag-grid-loading", ngImport: i0, template: "<sky-wait [isWaiting]=\"true\" />\n", dependencies: [{ kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-loading', imports: [SkyWaitModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-wait [isWaiting]=\"true\" />\n" }]
         }] });
@@ -3869,10 +3963,10 @@ class SkyAgGridService {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i2$4.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i2$4.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAgGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',