@skyux/ag-grid 12.4.0 → 12.6.0

package/fesm2022/skyux-ag-grid.mjs

@@ -1,16 +1,16 @@
-import { DOCUMENT, AsyncPipe, NgClass, NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, AsyncPipe, NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, input, numberAttribute, computed, inject, ChangeDetectorRef, ElementRef, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, effect, Directive, viewChildren, viewChild, output, contentChild, linkedSignal, EnvironmentInjector, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, signal, Optional } from '@angular/core';
+import { NgModule, Injectable, input, numberAttribute, computed, inject, ChangeDetectorRef, ElementRef, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, effect, Directive, InjectionToken, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, Optional } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/core';
-import { SkyMutationObserverService, SkyViewkeeperModule, SkyMediaQueryService, SkyAffixService, SkyDynamicComponentService, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyIdModule, SkyNumericModule, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
-import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, filter as filter$1, switchMap, merge, delay, tap, observeOn, asapScheduler, sample, animationFrames, map, fromEvent, Subscription, fromEventPattern, isObservable } from 'rxjs';
+import { SkyMutationObserverService, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyIdModule, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
+import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, Subscription, switchMap, merge, fromEvent, startWith, map, scan, filter as filter$1, fromEventPattern, isObservable } from 'rxjs';
 import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
 import * as i2$4 from '@skyux/theme';
-import { SkyThemeService, SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
+import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { themeQuartz, colorSchemeLight, iconSetQuartz, colorSchemeDark, KeyCode, PopupComponent } from 'ag-grid-community';
 import * as i1$1 from '@skyux/data-manager';
 import * as i1$2 from '@skyux/layout';
@@ -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: "19.2.1", ngImport: i0, type: SkyAgGridResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridResourcesModule, imports: [SkyI18nModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridResourcesModule, imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -382,10 +382,10 @@ class SkyAgGridAdapterService {
             focusableChildren[0].focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -768,10 +768,10 @@ class SkyAgGridWrapperComponent {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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 }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\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  [style]=\"minHeightStyle()\"\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", 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 }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\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  [style]=\"minHeightStyle()\"\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgClass, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\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  [style]=\"minHeightStyle()\"\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: [{
@@ -1073,118 +1073,128 @@ class SkyAgGridDataManagerAdapterDirective {
         }
         return gridColumnLimits;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", 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: "19.2.7", 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: "19.2.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[skyAgGridDataManagerAdapter]' }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }], propDecorators: { viewId: [{
                 type: Input
             }] } });
 
+/**
+ * @internal
+ */
+const SKY_AG_GRID_ROW_DELETE_CONTEXT = new InjectionToken('SkyAgGridRowDeleteContext');
+/**
+ * Used to provide dependencies to the `SkyAgGridRowDeleteComponent` overlay.
+ * @internal
+ */
+class SkyAgGridRowDeleteContext {
+    constructor(rows, gridElement, gridApi) {
+        this.rows = rows;
+        this.gridElement = gridElement;
+        this.gridApi = gridApi;
+        this.cancelRowDelete = new Subject();
+        this.confirmRowDelete = new Subject();
+        this.subscription = new Subscription();
+        this.subscription.add(() => {
+            this.cancelRowDelete.complete();
+            this.confirmRowDelete.complete();
+        });
+    }
+}
+
 /**
  * Component for rendering the inline delete template in the overlay.
  * @internal
  */
 class SkyAgGridRowDeleteComponent {
+    #resizeObserverSvc;
     constructor() {
-        this.inlineDeleteRefs = viewChildren('inlineDeleteRef');
-        this.inlineDeleteTemplateRef = viewChild('inlineDeleteTemplateRef');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", viewQueries: [{ propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true, isSignal: true }, { propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template
-      #inlineDeleteTemplateRef
-      let-row
-      let-tableWidth="tableWidth()"
-      let-getRowDeleteItem="getRowDeleteItem"
-      let-cancelRowDelete="cancelRowDelete"
-      let-confirmRowDelete="confirmRowDelete"
-    >
-      <div
-        #inlineDeleteRef
-        class="sky-ag-grid-row-delete"
-        [id]="'row-delete-ref-' + row.id"
-        [ngStyle]="{
-          height: row.rowHeight + 'px',
-          position: 'fixed',
-          top: '-100vh',
-          width: tableWidth + 'px',
-        }"
-      >
-        <sky-inline-delete
-          [pending]="getRowDeleteItem(row).pending"
-          (cancelTriggered)="cancelRowDelete(row)"
-          (deleteTriggered)="confirmRowDelete(row)"
-        />
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
+        this.service = inject(SKY_AG_GRID_ROW_DELETE_CONTEXT);
+        this.tableWidthStyle = computed(() => {
+            const tableWidth = this.tableWidth();
+            if (tableWidth > 0) {
+                return `${tableWidth}px`;
+            }
+            return 'auto';
+        });
+        this.rowsWithElements = computed(() => {
+            const rows = this.service.rows();
+            const gridElement = this.service.gridElement();
+            const gridApi = this.service.gridApi();
+            const increment = this.gridChanges();
+            if (!gridElement || !gridApi) {
+                return [];
+            }
+            return rows
+                .filter((rowId) => !!rowId && !!gridApi.getRowNode(rowId))
+                .map((rowId) => {
+                const element = gridElement[0]?.nativeElement
+                    .querySelector(`
+          [row-id="${rowId}"] div[aria-colindex],
+          .ag-row.sky-ag-grid-row-${rowId} div[aria-colindex]
+        `);
+                return { rowId, element, increment: `${rowId}-${increment}` };
+            });
+        });
+        this.pending = signal([]);
+        this.tableWidth = signal(0);
+        // Force redrawing overlays when the grid changes by incrementing a number.
+        this.gridChanges = toSignal(toObservable(this.service.gridApi).pipe(switchMap((gridApi) => gridApi
+            ? merge(fromEvent(gridApi, 'componentStateChanged'), fromEvent(gridApi, 'firstDataRendered'), fromEvent(gridApi, 'gridSizeChanged'), fromEvent(gridApi, 'modelUpdated'), fromEvent(gridApi, 'rowDataUpdated')).pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')))
+            : of(undefined)), startWith(1), map(() => 1), scan((acc, val) => acc + val)), { initialValue: 0 });
+        this.#resizeObserverSvc = inject(SkyResizeObserverService);
+        // Maintain table width when the grid is resized.
+        toObservable(this.service.gridElement)
+            .pipe(filter$1((el) => Array.isArray(el) && !!el[0]), switchMap((gridElement) => this.#resizeObserverSvc
+            .observe(gridElement[0])
+            .pipe(map(() => gridElement[0].nativeElement.offsetWidth))), takeUntilDestroyed())
+            .subscribe((tableWidth) => {
+            this.tableWidth.set(tableWidth);
+        });
+        // Clean up pending rows when the grid data is updated.
+        toObservable(this.service.gridApi)
+            .pipe(filter$1((gridApi) => !!gridApi), switchMap((gridApi) => fromEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
+            .subscribe((gridApi) => {
+            this.pending.update((pending) => pending.filter((rowId) => !!gridApi.getRowNode(rowId)));
+        });
+    }
+    cancelDelete(rowId) {
+        this.service.cancelRowDelete.next(rowId);
+    }
+    confirmDelete(rowId) {
+        this.pending.update((pending) => pending.concat(rowId));
+        this.service.confirmRowDelete.next(rowId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", host: { properties: { "style": "\"--table-width: \" + tableWidthStyle()" } }, ngImport: i0, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"], dependencies: [{ kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyAffixModule }, { kind: "directive", type: i1.λ1, selector: "[skyAffixTo]", inputs: ["skyAffixTo", "affixAutoFitContext", "affixAutoFitOverflowOffset", "affixEnableAutoFit", "affixHorizontalAlignment", "affixIsSticky", "affixPlacement", "affixPosition", "affixVerticalAlignment"], outputs: ["affixOffsetChange", "affixOverflowScroll", "affixPlacementChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sky-ag-grid-row-delete',
-                    template: `
-    <ng-template
-      #inlineDeleteTemplateRef
-      let-row
-      let-tableWidth="tableWidth()"
-      let-getRowDeleteItem="getRowDeleteItem"
-      let-cancelRowDelete="cancelRowDelete"
-      let-confirmRowDelete="confirmRowDelete"
-    >
-      <div
-        #inlineDeleteRef
-        class="sky-ag-grid-row-delete"
-        [id]="'row-delete-ref-' + row.id"
-        [ngStyle]="{
-          height: row.rowHeight + 'px',
-          position: 'fixed',
-          top: '-100vh',
-          width: tableWidth + 'px',
-        }"
-      >
-        <sky-inline-delete
-          [pending]="getRowDeleteItem(row).pending"
-          (cancelTriggered)="cancelRowDelete(row)"
-          (deleteTriggered)="confirmRowDelete(row)"
-        />
-      </div>
-    </ng-template>
-  `,
-                    imports: [NgStyle, SkyInlineDeleteModule],
-                }]
-        }] });
+            args: [{ selector: 'sky-ag-grid-row-delete', imports: [SkyInlineDeleteModule, SkyAffixModule], host: {
+                        '[style]': '"--table-width: " + tableWidthStyle()',
+                    }, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"] }]
+        }], ctorParameters: () => [] });
 
 class SkyAgGridRowDeleteDirective {
     #ngUnsubscribe;
-    #rowDeleteComponent;
-    #rowDeleteConfigs;
-    #rowDeleteContents;
-    #rowDeleteContentsQueue;
-    #rowDeleteContentsQueued;
     #rowDeleteIdsInternal;
     #clipPath;
     #zIndex;
-    #affixService;
-    #dynamicComponentSvc;
     #elementRef;
     #environmentInjector;
     #overlayService;
+    #rowDeleteSvc;
     #scrollableHostService;
     #stackingContext;
-    #viewContainerRef;
-    #viewUpdate;
     constructor() {
         /**
          * The IDs of the data in the rows where the inline delete appears.
          */
-        this.rowDeleteIds = input([], {
-            transform: (value) => (Array.isArray(value) ? value.map(String) : []),
-        });
-        this.rowDeleteIdsChange = output();
+        this.rowDeleteIds = model([]);
         /**
          * Emits a `SkyAgGridRowDeleteCancelArgs` object when a row's inline delete is cancelled.
          */
@@ -1194,11 +1204,8 @@ class SkyAgGridRowDeleteDirective {
          */
         this.rowDeleteConfirm = output();
         this.agGrid = contentChild(AgGridAngular);
+        this.agGridBodyViewport = new BehaviorSubject([]);
         this.#ngUnsubscribe = new Subject();
-        this.#rowDeleteConfigs = [];
-        this.#rowDeleteContents = [];
-        this.#rowDeleteContentsQueue = [];
-        this.#rowDeleteContentsQueued = new Subject();
         this.#rowDeleteIdsInternal = linkedSignal({
             source: this.rowDeleteIds,
             computation: (value) => [...new Set(value)]
@@ -1209,15 +1216,11 @@ class SkyAgGridRowDeleteDirective {
         });
         this.#clipPath = new BehaviorSubject(undefined);
         this.#zIndex = new BehaviorSubject(998);
-        this.#affixService = inject(SkyAffixService);
-        this.#dynamicComponentSvc = inject(SkyDynamicComponentService);
         this.#elementRef = inject((ElementRef));
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#overlayService = inject(SkyOverlayService);
         this.#scrollableHostService = inject(SkyScrollableHostService);
         this.#stackingContext = inject(SKY_STACKING_CONTEXT, { optional: true });
-        this.#viewContainerRef = inject(ViewContainerRef);
-        this.#viewUpdate = new Subject();
         if (this.#stackingContext) {
             this.#stackingContext.zIndex
                 .pipe(takeUntil(this.#ngUnsubscribe))
@@ -1225,203 +1228,90 @@ class SkyAgGridRowDeleteDirective {
                 this.#zIndex.next(zIndex);
             });
         }
-        const rowDeleteIds = toObservable(this.#rowDeleteIdsInternal);
-        toObservable(this.agGrid)
-            .pipe(takeUntil(this.#ngUnsubscribe), filter$1((agGrid) => !!agGrid), switchMap((agGrid) => merge(agGrid.componentStateChanged, agGrid.filterChanged, agGrid.firstDataRendered, agGrid.gridReady, agGrid.gridSizeChanged.pipe(delay(500)), agGrid.rowDataUpdated.pipe(takeUntil(this.#ngUnsubscribe), tap((evt) => {
-            const ids = this.#rowDeleteIdsInternal();
-            this.#rowDeleteIdsInternal.set(ids.filter((id) => evt.api.getRowNode(id)));
-        })), agGrid.sortChanged, this.#viewUpdate.pipe(delay(200)), rowDeleteIds.pipe(takeUntil(this.#ngUnsubscribe), tap((value) => {
-            this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter((config) => value.includes(config.id));
-            for (const id of value) {
-                if (!this.#rowDeleteConfigs.some((config) => config.id === id)) {
-                    this.#rowDeleteConfigs.push({
-                        id,
-                        pending: false,
-                    });
-                }
+        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.agGridBodyViewport), signal(undefined));
+        this.#rowDeleteSvc.cancelRowDelete
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((rowId) => {
+            if (rowId) {
+                this.rowDeleteIds.update((rowIds) => rowIds.filter((id) => id !== rowId));
+                this.rowDeleteCancel.emit({ id: rowId });
+            }
+        });
+        this.#rowDeleteSvc.confirmRowDelete
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((rowId) => {
+            if (rowId) {
+                this.rowDeleteConfirm.emit({ id: rowId });
             }
-            this.rowDeleteIdsChange.emit(value);
-        }))).pipe(takeUntil(this.#ngUnsubscribe), 
-        // After change detection.
-        observeOn(asapScheduler), 
-        // Wait for a render cycle.
-        sample(animationFrames()), map(() => undefined))))
-            .subscribe(() => {
-            this.#updateRowDeleteStates();
         });
-        this.#rowDeleteContentsQueued
-            .pipe(takeUntil(this.#ngUnsubscribe), 
-        // After change detection.
-        observeOn(asapScheduler), 
-        // Wait for a render cycle.
-        sample(animationFrames()))
+        const agGrid = toObservable(this.agGrid);
+        agGrid
+            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), takeUntil(this.#ngUnsubscribe))
             .subscribe(() => {
-            const queue = [...this.#rowDeleteContentsQueue];
-            this.#rowDeleteContentsQueue = [];
-            queue.forEach(({ id, overlay }) => {
-                if (this.#rowDeleteContents.findIndex((content) => content.id === id) === -1 &&
-                    this.#rowDeleteIdsInternal().includes(id)) {
-                    const inlineDeleteRef = this.#rowDeleteComponent
-                        ?.inlineDeleteRefs()
-                        .find((elRef) => elRef.nativeElement.id === 'row-delete-ref-' + id);
-                    const rowNode = this.agGrid()?.api.getRowNode(id);
-                    if (rowNode && inlineDeleteRef) {
-                        const affixer = this.#affixService.createAffixer(inlineDeleteRef);
-                        this.#affixToRow(affixer, id);
-                        this.#rowDeleteContents.push({ id, affixer, overlay });
-                        return;
-                    }
-                }
-                this.#overlayService.close(overlay);
-            });
+            this.agGridBodyViewport.next([
+                new ElementRef(this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper')),
+            ]);
+            this.#rowDeleteSvc.gridApi.set(this.agGrid()?.api);
+        });
+        agGrid
+            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
+            .subscribe((evt) => {
+            this.rowDeleteIds.update((rowIds) => (rowIds ?? []).filter((id) => !!evt.api.getRowNode(id)));
         });
     }
     ngAfterContentInit() {
-        this.#rowDeleteComponent = this.#dynamicComponentSvc.createComponent(SkyAgGridRowDeleteComponent, {
+        const overlay = this.#overlayService.create({
+            enableScroll: true,
             environmentInjector: this.#environmentInjector,
-            viewContainerRef: this.#viewContainerRef,
-        }).instance;
+            showBackdrop: false,
+            closeOnNavigation: true,
+            enableClose: false,
+            enablePointerEvents: true,
+        });
+        overlay.attachComponent(SkyAgGridRowDeleteComponent, [
+            {
+                provide: SKY_AG_GRID_ROW_DELETE_CONTEXT,
+                useValue: this.#rowDeleteSvc,
+            },
+        ]);
+        this.#zIndex
+            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed), distinctUntilChanged())
+            .subscribe((zIndex) => {
+            overlay.componentRef.instance.zIndex = zIndex.toString(10);
+        });
+        this.#clipPath
+            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed), distinctUntilChanged())
+            .subscribe((clipPath) => {
+            overlay.componentRef.instance.updateClipPath(clipPath);
+        });
     }
     ngAfterViewInit() {
-        if (this.#stackingContext) {
-            this.#scrollableHostService
-                .watchScrollableHostClipPathChanges(this.#elementRef)
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((clipPath) => {
-                this.#clipPath.next(clipPath);
-            });
-        }
-        this.#viewUpdate.next();
+        this.#scrollableHostService
+            .watchScrollableHostClipPathChanges(this.#elementRef, this.agGridBodyViewport.asObservable())
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((clipPath) => {
+            this.#clipPath.next(clipPath);
+        });
     }
     ngOnDestroy() {
-        this.#viewUpdate.complete();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
-        this.#rowDeleteContents.forEach(({ id }) => {
-            this.#destroyRowDelete(id);
-        });
-    }
-    cancelRowDelete(row) {
-        if (row.id) {
-            this.#rowDeleteIdsInternal.set(this.#rowDeleteIdsInternal().filter((id) => id !== row.id));
-            this.rowDeleteCancel.emit({ id: row.id });
-        }
-    }
-    confirmRowDelete(row) {
-        const rowConfig = this.#rowDeleteConfigs.find((config) => config.id === row.id);
-        if (row.id && rowConfig) {
-            rowConfig.pending = true;
-            this.rowDeleteConfirm.emit({ id: row.id });
-        }
+        this.#rowDeleteSvc.subscription.unsubscribe();
+        this.#overlayService.closeAll();
     }
-    getRowDeleteItem(row) {
-        return (this.#rowDeleteConfigs.find((config) => config.id === row.id) ?? {
-            id: `${row.id}`,
-            pending: false,
-        });
-    }
-    #affixToRow(affixer, id) {
-        const rowElement = this.#elementRef.nativeElement.querySelector(`
-      [row-id="${id}"] div[aria-colindex],
-      .ag-row.sky-ag-grid-row-${id} div[aria-colindex]
-    `);
-        const values = this.#rowDeleteIdsInternal();
-        if (rowElement && values.includes(id)) {
-            affixer.affixTo(rowElement, {
-                autoFitContext: SkyAffixAutoFitContext.Viewport,
-                isSticky: true,
-                placement: 'above',
-                verticalAlignment: 'top',
-                horizontalAlignment: 'left',
-                enableAutoFit: false,
-            });
-        }
-    }
-    #destroyRowDelete(id) {
-        const idx = this.#rowDeleteContents.findIndex((content) => content.id === id);
-        if (idx > -1 && this.#rowDeleteContents[idx].overlay) {
-            this.#rowDeleteContents[idx].affixer.destroy();
-            this.#overlayService.close(this.#rowDeleteContents[idx].overlay);
-            this.#rowDeleteContents.splice(idx, 1);
-        }
-    }
-    #updateRowDeleteStates() {
-        const deleteTemplateRef = this.#rowDeleteComponent?.inlineDeleteTemplateRef();
-        const agGrid = this.agGrid();
-        const value = this.#rowDeleteIdsInternal();
-        const contentIds = this.#rowDeleteContents.map((content) => content.id);
-        for (const id of contentIds) {
-            if (!value.includes(id)) {
-                this.#destroyRowDelete(id);
-            }
-        }
-        if (deleteTemplateRef && agGrid) {
-            for (const id of value) {
-                this.#updateOneRowDeleteState(id, agGrid, deleteTemplateRef);
-            }
-        }
-    }
-    #updateOneRowDeleteState(id, agGrid, deleteTemplateRef) {
-        const rowNode = agGrid.api.getRowNode(id);
-        const idx = this.#rowDeleteContents.findIndex((content) => content.id === id);
-        if (idx > -1) {
-            if (rowNode?.displayed) {
-                // We must reaffix things when the data changes because the rows rerender and the previous element that the delete was affixed
-                // to is destroyed.
-                this.#affixToRow(this.#rowDeleteContents[idx].affixer, id);
-            }
-            else {
-                this.#destroyRowDelete(id);
-            }
-        }
-        else if (rowNode) {
-            const overlay = this.#overlayService.create({
-                enableScroll: true,
-                environmentInjector: this.#environmentInjector,
-                showBackdrop: false,
-                closeOnNavigation: true,
-                enableClose: false,
-                enablePointerEvents: true,
-            });
-            overlay.attachTemplate(deleteTemplateRef, {
-                $implicit: rowNode,
-                tableWidth: () => this.#elementRef.nativeElement.querySelector('.sky-ag-grid')
-                    .offsetWidth,
-                getRowDeleteItem: (row) => this.getRowDeleteItem(row),
-                cancelRowDelete: (row) => this.cancelRowDelete(row),
-                confirmRowDelete: (row) => this.confirmRowDelete(row),
-            });
-            /**
-             * We are manually setting the z-index here because overlays will always be on top of
-             * the omnibar. The default manual setting is 2 less than the omnibar's z-index of 1000 and one less than
-             * the header row's viewkeeper which is 999. We discussed changing the overlay service to allow for this
-             * but decided against that change at this time due to its niche nature.
-             */
-            this.#zIndex
-                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed))
-                .subscribe((zIndex) => {
-                overlay.componentRef.instance.zIndex = zIndex.toString(10);
-            });
-            this.#clipPath
-                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(overlay.closed))
-                .subscribe((clipPath) => {
-                overlay.componentRef.instance.updateClipPath(clipPath);
-            });
-            this.#rowDeleteContentsQueue.push({ id, overlay });
-            this.#rowDeleteContentsQueued.next();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.1", type: SkyAgGridRowDeleteDirective, isStandalone: true, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: { classPropertyName: "rowDeleteIds", publicName: "rowDeleteIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleteIdsChange: "rowDeleteIdsChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridRowDeleteDirective, isStandalone: true, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: { classPropertyName: "rowDeleteIds", publicName: "rowDeleteIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleteIds: "rowDeleteIdsChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[skyAgGridRowDelete]' }]
+            args: [{
+                    selector: '[skyAgGridRowDelete]',
+                }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
             CommonModule,
             SkyAgGridDataManagerAdapterDirective,
             SkyAgGridResourcesModule,
@@ -1429,12 +1319,12 @@ class SkyAgGridModule {
             SkyAgGridWrapperComponent], exports: [SkyAgGridDataManagerAdapterDirective,
             SkyAgGridRowDeleteDirective,
             SkyAgGridWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridModule, imports: [AgGridAngular,
             CommonModule,
             SkyAgGridResourcesModule,
             SkyAgGridWrapperComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1615,10 +1505,10 @@ class SkyAgGridCellEditorAutocompleteComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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{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: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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{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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1736,10 +1626,10 @@ class SkyAgGridCellEditorCurrencyComponent {
         }
         this.#initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1889,10 +1779,10 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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 }], usesInheritance: true, 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{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\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: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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 }], usesInheritance: true, 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{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         FormsModule,
@@ -2038,10 +1928,10 @@ class SkyAgGridCellEditorLookupComponent {
             this.#params?.api.stopEditing();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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    />\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    />\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"] }, { 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: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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    />\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    />\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"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SkyInputBoxModule,
@@ -2128,10 +2018,10 @@ 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: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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{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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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{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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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{border:none;text-align:right}\n"] }]
         }], propDecorators: { input: [{
@@ -2208,10 +2098,10 @@ class SkyAgGridCellEditorTextComponent {
     getValue() {
         return this.editorForm.get('text')?.value || undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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    [style.width]=\"'100%'\"\n    [style.height]=\"'100%'\"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: [":host{height:100%;width:100%;display:flex}input{border:none;padding-left:11px}\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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    [style.width]=\"'100%'\"\n    [style.height]=\"'100%'\"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: [":host{height:100%;width:100%;display:flex}input{border:none;padding-left:11px}\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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    [style.width]=\"'100%'\"\n    [style.height]=\"'100%'\"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: [":host{height:100%;width:100%;display:flex}input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { input: [{
@@ -2289,10 +2179,10 @@ class SkyAgGridCellValidatorTooltipComponent {
         const editingCells = this.cellRendererParams?.api.getEditingCells() ?? [];
         return editingCells.length === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: [":host{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}\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: "19.2.7", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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: [":host{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}\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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: [":host{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}\n"] }]
         }], propDecorators: { params: [{
@@ -2330,10 +2220,10 @@ class SkyAgGridCellRendererCurrencyComponent {
         this.skyComponentProperties.minDigits = 2;
         this.skyComponentProperties.truncate = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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: [":host{display:contents}input{border:none;padding-left:11px}\n"], 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: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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: [":host{display:contents}input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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", styles: [":host{display:contents}input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { params: [{
@@ -2367,10 +2257,10 @@ class SkyAgGridCellRendererCurrencyValidatorComponent {
     refresh(params) {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SkyAgGridCellValidatorTooltipComponent,
@@ -2399,10 +2289,10 @@ class SkyAgGridCellRendererLookupComponent {
         this.agInit(params);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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 }] });
@@ -2503,12 +2393,12 @@ class SkyAgGridCellRendererRowSelectorComponent {
             this.rowNode.data[this.dataField] = this.checked.value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "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: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "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: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyThemeComponentClassDirective, SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridCellRendererTemplateComponent {
@@ -2537,12 +2427,12 @@ class SkyAgGridCellRendererTemplateComponent {
         this.agInit(params);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyAgGridCellRendererTemplateComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-template", ngImport: i0, template: `@if (state.hasTemplate) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-ag-grid-cell-renderer-template',
@@ -2591,10 +2481,10 @@ class SkyAgGridCellRendererValidatorTooltipComponent {
         this.agInit(params);
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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: "19.2.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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: "19.2.1", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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: [{
@@ -2611,10 +2501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  * @see SkyAgGridHeaderGroupParams
  */
 class SkyAgGridHeaderGroupInfo {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderGroupInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderGroupInfo }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderGroupInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo, decorators: [{
             type: Injectable
         }] });
 
@@ -2664,7 +2554,9 @@ class SkyAgGridHeaderGroupComponent {
         this.#columnGroup = params.columnGroup.getProvidedColumnGroup();
         this.#isExpandableSubject.next(this.#columnGroup.isExpandable());
         if (this.#isExpandableSubject.getValue()) {
-            this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('columnGroupOpened', handler), (handler) => params.api.removeEventListener('columnGroupOpened', handler)).subscribe((event) => {
+            this.#subscriptions.add(fromEvent(params.api, 'columnGroupOpened')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe((event) => {
                 if (this.#columnGroup &&
                     event.columnGroups.includes(this.#columnGroup)) {
                     this.#isExpandedSubject.next(this.#columnGroup.isExpanded());
@@ -2701,10 +2593,10 @@ class SkyAgGridHeaderGroupComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: [":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-margin-inline-sm);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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: "19.2.7", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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: [":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-margin-inline-sm);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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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: [":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-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inlineHelpContainer: [{
@@ -2722,10 +2614,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  * @see SkyAgGridHeaderParams
  */
 class SkyAgGridHeaderInfo {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderInfo }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderInfo }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderInfo, decorators: [{
             type: Injectable
         }] });
 
@@ -2794,7 +2686,9 @@ class SkyAgGridHeaderComponent {
         this.#leftPosition = params.column.getLeft() ?? 0;
         this.#subscriptions = new Subscription();
         if (params.column.isFilterAllowed()) {
-            this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener('filterChanged', handler), (handler) => params.column.removeEventListener('filterChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.column, 'filterChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 const isFilterActive = params.column.isFilterActive();
                 if (isFilterActive !== this.filterEnabled$.getValue()) {
                     this.filterEnabled$.next(isFilterActive);
@@ -2803,11 +2697,15 @@ class SkyAgGridHeaderComponent {
         }
         if (params.enableSorting) {
             // Column sort state changes
-            this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener('sortChanged', handler), (handler) => params.column.removeEventListener('sortChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.column, 'sortChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 this.#updateSort();
             }));
             // Other column sort state changes, for multi-column sorting
-            this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('sortChanged', handler), (handler) => params.api.removeEventListener('sortChanged', handler)).subscribe(() => {
+            this.#subscriptions.add(fromEvent(params.api, 'sortChanged')
+                .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+                .subscribe(() => {
                 this.#updateSortIndex();
             }));
             this.#updateSort();
@@ -2815,7 +2713,9 @@ class SkyAgGridHeaderComponent {
         }
         // When the column is moved left via the keyboard, the element is detached
         // and reattached to the DOM to maintain DOM order, and its focus is lost.
-        this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener('columnMoved', handler), (handler) => params.api.removeEventListener('columnMoved', handler)).subscribe((event) => {
+        this.#subscriptions.add(fromEvent(params.api, 'columnMoved')
+            .pipe(takeUntil(fromEvent(params.api, 'gridPreDestroyed')))
+            .subscribe((event) => {
             const left = event.column?.getLeft() ?? 0;
             const oldLeft = this.#leftPosition;
             if (event.column === params.column &&
@@ -2886,10 +2786,10 @@ class SkyAgGridHeaderComponent {
             this.sortIndexDisplay$.next('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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\" />\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\" />\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-margin-inline-sm)}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-margin-inline-sm)}.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-margin-inline-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(--ag-header-foreground-color);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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: "19.2.7", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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\" />\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\" />\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-margin-inline-sm)}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-margin-inline-sm)}.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-margin-inline-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(--ag-header-foreground-color);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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.title]': 'accessibleHeaderText()',
@@ -2939,10 +2839,10 @@ class SkyAgGridLoadingComponent {
     refresh(_params) {
         // Do nothing.
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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: "19.2.7", ngImport: i0, type: SkyAgGridLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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: "19.2.1", ngImport: i0, type: SkyAgGridLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-loading', imports: [SkyWaitModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-wait [isWaiting]=\"true\" />\n" }]
         }] });
@@ -3498,10 +3398,10 @@ class SkyAgGridService {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", ngImport: i0, type: SkyAgGridService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", 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: "19.2.7", ngImport: i0, type: SkyAgGridService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAgGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',