@skyux/ag-grid 13.11.0 → 13.11.1

package/fesm2022/skyux-ag-grid.mjs

@@ -1,33 +1,33 @@
 import { NgClass, AsyncPipe, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, input, numberAttribute, viewChild, inject, ChangeDetectorRef, ElementRef, DOCUMENT, effect, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, Directive, InjectionToken, computed, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, DestroyRef, CSP_NONCE, Optional } from '@angular/core';
+import { NgModule, Injectable, input, numberAttribute, viewChild, inject, ChangeDetectorRef, ElementRef, DOCUMENT, effect, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, signal, linkedSignal, computed, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, isSignal, DestroyRef, CSP_NONCE, Optional } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/core';
 import { SkyMutationObserverService, SkyIdModule, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
-import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, switchMap, fromEvent, Subscription, merge, startWith, map, scan, filter as filter$1, fromEventPattern, isObservable, observeOn, asyncScheduler } from 'rxjs';
-import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
+import { SkyDataManagerService } from '@skyux/data-manager';
+import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, switchMap, filter, fromEvent, Subscription, merge, startWith, map, scan, fromEventPattern, isObservable, observeOn, asyncScheduler } from 'rxjs';
 import * as i2$4 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { themeQuartz, colorSchemeLight, KeyCode } from 'ag-grid-community';
-import * as i1$1 from '@skyux/data-manager';
-import * as i1$2 from '@skyux/layout';
+import * as i1$1 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import * as i2$2 from '@skyux/datetime';
 import { SkyDatepickerModule, SkyDateService } from '@skyux/datetime';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import * as i2$1 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
-import * as i1$4 from '@skyux/forms';
+import { first } from 'rxjs/operators';
+import * as i1$3 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import * as i2$3 from '@skyux/indicators';
 import { SkyStatusIndicatorModule, SkyWaitModule } from '@skyux/indicators';
-import * as i1$5 from '@skyux/popovers';
+import * as i1$4 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 import * as i2$5 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
@@ -701,25 +701,55 @@ function toColumnWidthName(breakpoint) {
  */
 class SkyAgGridDataManagerAdapterDirective {
     #currentAgGrid;
+    #isAgGridReady;
+    #currentAgGridReady;
     #currentDataState;
     #currentSkyAgGridWrapper;
-    #dataStateSub;
-    #viewConfig;
     #ngUnsubscribe;
     #changeDetector;
     #dataManagerSvc;
+    #viewConfigs;
+    #viewConfig;
+    #activeView;
+    #isActiveView;
     #breakpoint;
-    constructor(changeDetector, dataManagerSvc) {
+    constructor() {
+        this.viewId = input(...(ngDevMode ? [undefined, { debugName: "viewId" }] : []));
         this.agGridList = contentChildren(AgGridAngular, ...(ngDevMode ? [{ debugName: "agGridList", descendants: true }] : [{
                 descendants: true,
             }]));
         this.skyAgGridWrapperList = contentChildren(SkyAgGridWrapperComponent, ...(ngDevMode ? [{ debugName: "skyAgGridWrapperList", descendants: true }] : [{
                 descendants: true,
             }]));
+        this.#currentAgGrid = signal(undefined, ...(ngDevMode ? [{ debugName: "#currentAgGrid" }] : []));
+        this.#isAgGridReady = linkedSignal(computed(() => {
+            this.#currentAgGrid();
+            return false;
+        }), ...(ngDevMode ? [{ debugName: "#isAgGridReady" }] : []));
+        this.#currentAgGridReady = computed(() => {
+            const agGrid = this.#currentAgGrid();
+            if (this.#isAgGridReady()) {
+                return agGrid;
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "#currentAgGridReady" }] : []));
         this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#dataManagerSvc = inject(SkyDataManagerService);
+        this.#viewConfigs = toSignal(this.#dataManagerSvc.getDataViewsUpdates(), {
+            initialValue: [],
+        });
+        this.#viewConfig = computed(() => {
+            const viewId = this.viewId();
+            return this.#viewConfigs().find((vc) => vc.id === viewId);
+        }, ...(ngDevMode ? [{ debugName: "#viewConfig" }] : []));
+        this.#activeView = toSignal(this.#dataManagerSvc.getActiveViewIdUpdates());
+        this.#isActiveView = computed(() => {
+            const activeViewId = this.#activeView();
+            const viewId = this.viewId();
+            return activeViewId === viewId;
+        }, ...(ngDevMode ? [{ debugName: "#isActiveView" }] : []));
         this.#breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
-        this.#changeDetector = changeDetector;
-        this.#dataManagerSvc = dataManagerSvc;
         effect(() => {
             const list = this.agGridList();
             this.#checkForAgGrid(list);
@@ -734,12 +764,28 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#applyColumnWidths(breakpoint);
             }
         });
-    }
-    ngAfterContentInit() {
-        if (this.viewId) {
-            this.#dataManagerSvc.setViewkeeperClasses(this.viewId, ['.ag-header']);
-            this.#viewConfig = this.#dataManagerSvc.getViewById(this.viewId);
-        }
+        effect(() => {
+            const viewId = this.viewId();
+            const agGrid = this.#currentAgGridReady();
+            if (viewId && agGrid) {
+                if (agGrid.api.getGridOption('context')?.enableTopScroll) {
+                    this.#dataManagerSvc.setViewkeeperClasses(viewId, [
+                        '.ag-header',
+                        '.ag-body-horizontal-scroll',
+                    ]);
+                }
+                else {
+                    this.#dataManagerSvc.setViewkeeperClasses(viewId, ['.ag-header']);
+                }
+            }
+        });
+        effect(() => {
+            const isActiveView = this.#isActiveView();
+            const agGrid = untracked(this.#currentAgGridReady);
+            if (isActiveView && agGrid) {
+                agGrid.api.refreshCells();
+            }
+        });
     }
     ngOnDestroy() {
         this.#unregisterAgGrid();
@@ -749,7 +795,7 @@ class SkyAgGridDataManagerAdapterDirective {
         const agGrid = agGridList[0];
         const agGridCount = agGridList.length;
         if (agGrid) {
-            if (agGrid !== this.#currentAgGrid) {
+            if (agGrid !== this.#currentAgGrid()) {
                 this.#registerAgGrid(agGrid);
             }
             if (agGridCount > 1) {
@@ -770,11 +816,7 @@ class SkyAgGridDataManagerAdapterDirective {
     }
     #unregisterAgGrid() {
         this.#ngUnsubscribe.next();
-        this.#currentAgGrid = undefined;
-        /* istanbul ignore if */
-        if (this.#dataStateSub) {
-            this.#dataStateSub.unsubscribe();
-        }
+        this.#currentAgGrid.set(undefined);
     }
     #unregisterSkyAgGridWrapper() {
         this.#currentSkyAgGridWrapper = undefined;
@@ -790,22 +832,17 @@ class SkyAgGridDataManagerAdapterDirective {
     }
     #registerAgGrid(agGrid) {
         this.#unregisterAgGrid();
-        this.#currentAgGrid = agGrid;
+        this.#currentAgGrid.set(agGrid);
         if (agGrid) {
-            this.#dataStateSub = agGrid.gridReady
-                .pipe(takeUntil$1(this.#ngUnsubscribe), switchMap(() => {
-                if (this.#viewConfig && this.viewId) {
-                    this.#viewConfig.onSelectAllClick = () => agGrid.api.selectAll();
-                    this.#viewConfig.onClearAllClick = () => agGrid.api.deselectAll();
-                    this.#dataManagerSvc.updateViewConfig(this.#viewConfig);
-                    if (agGrid.gridOptions?.context?.enableTopScroll) {
-                        this.#dataManagerSvc.setViewkeeperClasses(this.viewId, [
-                            '.ag-header',
-                            '.ag-body-horizontal-scroll',
-                        ]);
-                    }
+            agGrid.gridReady
+                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => {
+                const viewConfig = this.#viewConfig();
+                if (viewConfig) {
+                    viewConfig.onSelectAllClick = () => agGrid.api.selectAll();
+                    viewConfig.onClearAllClick = () => agGrid.api.deselectAll();
+                    this.#dataManagerSvc.updateViewConfig(viewConfig);
                     this.#applyColumnWidths();
-                    return this.#dataManagerSvc.getDataStateUpdates(this.#viewConfig.id);
+                    return this.#dataManagerSvc.getDataStateUpdates(viewConfig.id);
                 }
                 /* istanbul ignore next */
                 return of(undefined);
@@ -814,14 +851,15 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#currentDataState = dataState;
                 this.#displayColumns(dataState);
                 this.#applySort(dataState);
+                this.#isAgGridReady.set(true);
             });
             agGrid.gridReady
-                .pipe(takeUntil$1(this.#ngUnsubscribe), switchMap(() => fromEvent(agGrid.api, 'gridPreDestroyed')))
+                .pipe(takeUntil(this.#ngUnsubscribe), switchMap(() => fromEvent(agGrid.api, 'gridPreDestroyed')))
                 .subscribe(() => {
                 this.#unregisterAgGrid();
             });
             agGrid.columnMoved
-                .pipe(takeUntil$1(this.#ngUnsubscribe), filter((event) => ![
+                .pipe(takeUntil(this.#ngUnsubscribe), filter((event) => ![
                 'gridInitializing',
                 'uiColumnResized',
                 'uiColumnDragged',
@@ -831,7 +869,7 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.#updateColumnsInCurrentDataState(value.api);
             });
             agGrid.columnResized
-                .pipe(takeUntil$1(this.#ngUnsubscribe), filter((event) => event.source === 'uiColumnResized'))
+                .pipe(takeUntil(this.#ngUnsubscribe), filter((event) => event.source === 'uiColumnResized'))
                 .subscribe((event) => {
                 const colId = event.column?.getColId();
                 const width = event.column?.getActualWidth();
@@ -841,14 +879,15 @@ class SkyAgGridDataManagerAdapterDirective {
                 }
             });
             agGrid.dragStopped
-                .pipe(takeUntil$1(this.#ngUnsubscribe))
+                .pipe(takeUntil(this.#ngUnsubscribe))
                 .subscribe((value) => {
                 this.#updateColumnsInCurrentDataState(value.api);
             });
             agGrid.rowSelected
-                .pipe(takeUntil$1(this.#ngUnsubscribe))
+                .pipe(takeUntil(this.#ngUnsubscribe))
                 .subscribe((event) => {
-                if (this.#viewConfig && this.#currentDataState) {
+                const viewConfig = this.#viewConfig();
+                if (viewConfig && this.#currentDataState) {
                     const row = event.node;
                     const selectedIds = this.#currentDataState.selectedIds || [];
                     const rowIndex = selectedIds.indexOf(row.data.id);
@@ -859,15 +898,16 @@ class SkyAgGridDataManagerAdapterDirective {
                         selectedIds.splice(rowIndex, 1);
                     }
                     this.#currentDataState.selectedIds = selectedIds;
-                    this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
+                    this.#dataManagerSvc.updateDataState(this.#currentDataState, viewConfig.id);
                     this.#changeDetector.markForCheck();
                 }
             });
-            agGrid.sortChanged.pipe(takeUntil$1(this.#ngUnsubscribe)).subscribe(() => {
+            agGrid.sortChanged.pipe(takeUntil(this.#ngUnsubscribe)).subscribe(() => {
                 const gridColumnStates = agGrid.api.getColumnState();
+                const viewConfig = this.#viewConfig();
                 const activeSortColumnState = gridColumnStates?.find((aGridColumnState) => aGridColumnState.sortIndex === 0) ??
                     gridColumnStates?.find((aGridColumnState) => aGridColumnState.sort);
-                if (this.#viewConfig && this.#currentDataState) {
+                if (viewConfig && this.#currentDataState) {
                     if (activeSortColumnState) {
                         const activeSortColumnDef = agGrid.api.getColumnDef(activeSortColumnState.colId);
                         this.#currentDataState.activeSortOption = {
@@ -880,20 +920,21 @@ class SkyAgGridDataManagerAdapterDirective {
                     else {
                         this.#currentDataState.activeSortOption = undefined;
                     }
-                    this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
+                    this.#dataManagerSvc.updateDataState(this.#currentDataState, viewConfig.id);
                 }
             });
         }
     }
     #updateColumnsInCurrentDataState(api) {
-        if (this.#viewConfig && this.#currentDataState) {
+        const viewConfig = this.#viewConfig();
+        if (viewConfig && this.#currentDataState) {
             const columnOrder = this.#getColumnOrder(api);
-            const viewState = this.#currentDataState.getViewStateById(this.#viewConfig.id);
+            const viewState = this.#currentDataState.getViewStateById(viewConfig.id);
             if (viewState &&
                 (viewState.displayedColumnIds.length !== columnOrder.length ||
                     viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i]))) {
                 viewState.displayedColumnIds = columnOrder;
-                this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.#viewConfig.id, viewState), this.#viewConfig.id);
+                this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewConfig.id, viewState), viewConfig.id);
             }
         }
     }
@@ -904,9 +945,10 @@ class SkyAgGridDataManagerAdapterDirective {
             .map((state) => state.colId);
     }
     #displayColumns(dataState) {
-        const agGrid = this.#currentAgGrid;
-        if (agGrid && this.#viewConfig) {
-            const viewState = dataState.getViewStateById(this.#viewConfig.id);
+        const agGrid = this.#currentAgGrid();
+        const viewConfig = this.#viewConfig();
+        if (agGrid && viewConfig) {
+            const viewState = dataState.getViewStateById(viewConfig.id);
             let displayedColumnIds = [];
             /*istanbul ignore else*/
             if (viewState?.displayedColumnIds) {
@@ -928,7 +970,7 @@ class SkyAgGridDataManagerAdapterDirective {
         }
     }
     #applySort(dataState) {
-        const agGrid = this.#currentAgGrid;
+        const agGrid = this.#currentAgGrid();
         const activeSort = dataState.activeSortOption;
         if (activeSort) {
             agGrid?.api.applyColumnState({
@@ -943,33 +985,37 @@ class SkyAgGridDataManagerAdapterDirective {
         }
     }
     #updateColumnWidth(colId, width, breakpoint) {
-        const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
-        if (viewState && this.viewId && this.#currentDataState) {
+        const viewId = this.viewId();
+        const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
+        if (viewState && viewId && this.#currentDataState) {
             const currentWidths = viewState?.columnWidths;
             currentWidths[toColumnWidthName(breakpoint)][colId] = width;
             viewState.columnWidths = currentWidths;
-            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.viewId, viewState), this.viewId);
+            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewId, viewState), viewId);
         }
     }
     #removeColumnWidths(colIds) {
-        const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
-        if (viewState && this.viewId && this.#currentDataState) {
+        const viewId = this.viewId();
+        const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
+        if (viewState && viewId && this.#currentDataState) {
             const currentWidths = viewState?.columnWidths;
             for (const colId of colIds) {
                 delete currentWidths['xs'][colId];
                 delete currentWidths['sm'][colId];
             }
             viewState.columnWidths = currentWidths;
-            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.viewId, viewState), this.viewId);
+            this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(viewId, viewState), viewId);
         }
     }
     #applyColumnWidths(breakpoint) {
         breakpoint ??= this.#breakpoint();
+        const currentAgGrid = this.#currentAgGrid();
+        const viewId = this.viewId();
         if (breakpoint) {
-            const viewState = this.viewId && this.#currentDataState?.getViewStateById(this.viewId);
+            const viewState = viewId && this.#currentDataState?.getViewStateById(viewId);
             if (viewState && viewState.columnWidths && viewState.displayedColumnIds) {
                 const columnLimits = this.#getGridColumnLimits(viewState.displayedColumnIds, viewState.columnWidths, toColumnWidthName(breakpoint));
-                this.#currentAgGrid?.api.sizeColumnsToFit({ columnLimits });
+                currentAgGrid?.api.sizeColumnsToFit({ columnLimits });
             }
         }
     }
@@ -987,15 +1033,13 @@ class SkyAgGridDataManagerAdapterDirective {
         }
         return gridColumnLimits;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.15", type: SkyAgGridDataManagerAdapterDirective, isStandalone: true, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true, isSignal: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.15", type: SkyAgGridDataManagerAdapterDirective, isStandalone: true, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: { classPropertyName: "viewId", publicName: "viewId", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true, isSignal: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[skyAgGridDataManagerAdapter]' }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }], propDecorators: { viewId: [{
-                type: Input
-            }], agGridList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AgGridAngular), { ...{
+        }], ctorParameters: () => [], propDecorators: { viewId: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewId", required: false }] }], agGridList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AgGridAngular), { ...{
                             descendants: true,
                         }, isSignal: true }] }], skyAgGridWrapperList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyAgGridWrapperComponent), { ...{
                             descendants: true,
@@ -1067,7 +1111,7 @@ class SkyAgGridRowDeleteComponent {
         this.#resizeObserverSvc = inject(SkyResizeObserverService);
         // Maintain table width when the grid is resized.
         toObservable(this.service.gridElement)
-            .pipe(filter$1((el) => Array.isArray(el) && !!el[0]), switchMap((gridElement) => this.#resizeObserverSvc
+            .pipe(filter((el) => Array.isArray(el) && !!el[0]), switchMap((gridElement) => this.#resizeObserverSvc
             .observe(gridElement[0])
             .pipe(map(() => gridElement[0].nativeElement.offsetWidth))), takeUntilDestroyed())
             .subscribe((tableWidth) => {
@@ -1075,7 +1119,7 @@ class SkyAgGridRowDeleteComponent {
         });
         // Clean up pending rows when the grid data is updated.
         toObservable(this.service.gridApi)
-            .pipe(filter$1((gridApi) => !!gridApi), switchMap((gridApi) => fromEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
+            .pipe(filter((gridApi) => !!gridApi), switchMap((gridApi) => fromEvent(gridApi, 'rowDataUpdated').pipe(takeUntil(fromEvent(gridApi, 'gridPreDestroyed')), map(() => gridApi))), takeUntilDestroyed())
             .subscribe((gridApi) => {
             this.pending.update((pending) => pending.filter((rowId) => !!gridApi.getRowNode(rowId)));
         });
@@ -1088,7 +1132,7 @@ class SkyAgGridRowDeleteComponent {
         this.service.confirmRowDelete.next(rowId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", host: { properties: { "style": "\"--table-width: \" + tableWidthStyle()" } }, ngImport: i0, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"], dependencies: [{ kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyAffixModule }, { kind: "directive", type: i1.λ1, selector: "[skyAffixTo]", inputs: ["skyAffixTo", "affixAutoFitContext", "affixAutoFitOverflowOffset", "affixEnableAutoFit", "affixHorizontalAlignment", "affixIsSticky", "affixPlacement", "affixPosition", "affixVerticalAlignment"], outputs: ["affixOffsetChange", "affixOverflowScroll", "affixPlacementChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridRowDeleteComponent, isStandalone: true, selector: "sky-ag-grid-row-delete", host: { properties: { "style": "\"--table-width: \" + tableWidthStyle()" } }, ngImport: i0, template: "@for (row of rowsWithElements(); track row.increment) {\n  @if (row.element?.offsetParent && row.element; as element) {\n    <div\n      class=\"sky-ag-grid-row-delete\"\n      affixPlacement=\"above\"\n      affixVerticalAlignment=\"top\"\n      affixHorizontalAlignment=\"left\"\n      [id]=\"'row-delete-ref-' + row.rowId\"\n      [style.height]=\"element.offsetHeight + 'px'\"\n      [skyAffixTo]=\"element\"\n      [affixIsSticky]=\"true\"\n    >\n      <sky-inline-delete\n        [pending]=\"pending().includes(row.rowId ?? '')\"\n        (cancelTriggered)=\"cancelDelete(row.rowId)\"\n        (deleteTriggered)=\"confirmDelete(row.rowId)\"\n      />\n    </div>\n  }\n}\n", styles: [":host{display:block}.sky-ag-grid-row-delete{position:fixed;top:-100vh;width:var(--table-width, 100%)}\n"], dependencies: [{ kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$1.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyAffixModule }, { kind: "directive", type: i1.λ1, selector: "[skyAffixTo]", inputs: ["skyAffixTo", "affixAutoFitContext", "affixAutoFitOverflowOffset", "affixEnableAutoFit", "affixHorizontalAlignment", "affixIsSticky", "affixPlacement", "affixPosition", "affixVerticalAlignment"], outputs: ["affixOffsetChange", "affixOverflowScroll", "affixPlacementChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
@@ -1172,7 +1216,7 @@ class SkyAgGridRowDeleteDirective {
             }
         });
         const agGrid = toObservable(this.agGrid);
-        const agGridReady = agGrid.pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), take(1), takeUntil(this.#ngUnsubscribe));
+        const agGridReady = agGrid.pipe(filter((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), take(1), takeUntil(this.#ngUnsubscribe));
         agGridReady.subscribe((ready) => {
             this.#agGridBodyViewport.next([
                 new ElementRef(this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper')),
@@ -1180,7 +1224,7 @@ class SkyAgGridRowDeleteDirective {
             this.#rowDeleteSvc.gridApi.set(ready.api);
         });
         agGrid
-            .pipe(filter$1((grid) => !!grid), switchMap((grid) => merge(grid.firstDataRendered.asObservable(), grid.rowDataUpdated.asObservable(), agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridOptionsChanged')))).pipe(takeUntil(this.#ngUnsubscribe), takeUntil(agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridPreDestroyed').pipe(take(1))))), startWith(grid.api?.getGridOption('domLayout')), map(() => grid.api?.getGridOption('domLayout')), switchMap((domLayout) => {
+            .pipe(filter((grid) => !!grid), switchMap((grid) => merge(grid.firstDataRendered.asObservable(), grid.rowDataUpdated.asObservable(), agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridOptionsChanged')))).pipe(takeUntil(this.#ngUnsubscribe), takeUntil(agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridPreDestroyed').pipe(take(1))))), startWith(grid.api?.getGridOption('domLayout')), map(() => grid.api?.getGridOption('domLayout')), switchMap((domLayout) => {
             if (domLayout === 'normal') {
                 return this.#agGridBodyViewport.asObservable();
             }
@@ -1194,7 +1238,7 @@ class SkyAgGridRowDeleteDirective {
             this.#agGridBodyClipElements.next(agGridBodyClipElements);
         });
         agGrid
-            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
+            .pipe(filter((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
             .subscribe((evt) => {
             this.rowDeleteIds.update((rowIds) => (rowIds ?? []).filter((id) => !!evt.api.getRowNode(id)));
         });
@@ -1455,7 +1499,7 @@ class SkyAgGridCellEditorAutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorAutocompleteComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "focusout": "onBlur($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n    (openChange)=\"onAutocompleteOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorAutocomplete\n      formControlName=\"selection\"\n      skyAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorAutocompleteComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "focusout": "onBlur($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n    (openChange)=\"onAutocompleteOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorAutocomplete\n      formControlName=\"selection\"\n      skyAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
@@ -1582,7 +1626,7 @@ class SkyAgGridCellEditorCurrencyComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-currency", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorCurrency\n    type=\"text\"\n    [formControl]=\"currency\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-currency", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorCurrency\n    type=\"text\"\n    [formControl]=\"currency\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n    (keyup.enter)=\"onPressEnter()\"\n    (keyup.escape)=\"onPressEscape()\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
@@ -1737,7 +1781,7 @@ class SkyAgGridCellEditorDatepickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorDatepickerComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n    (dateFormatChange)=\"onDateFormatChange($event)\"\n    (openChange)=\"onCalendarOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorDatepickerInput\n      formControlName=\"date\"\n      skyDatepickerInput\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_datepicker_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n      [attr.title]=\"\n        resolvedDateFormat\n          ? ('skyux_datepicker_format_hint_text'\n            | skyLibResources: resolvedDateFormat)\n          : null\n      \"\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorDatepickerComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n    (dateFormatChange)=\"onDateFormatChange($event)\"\n    (openChange)=\"onCalendarOpenChange($event)\"\n  >\n    <input\n      #skyCellEditorDatepickerInput\n      formControlName=\"date\"\n      skyDatepickerInput\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_datepicker_aria_label'\n          | skyLibResources: columnHeader : rowNumber\n      \"\n      [attr.title]=\"\n        resolvedDateFormat\n          ? ('skyux_datepicker_format_hint_text'\n            | skyLibResources: resolvedDateFormat)\n          : null\n      \"\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
@@ -1893,7 +1937,7 @@ class SkyAgGridCellEditorLookupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellEditorLookupComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-lookup", host: { listeners: { "focusout": "onBlur($event)" }, properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "@if (isAlive && useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n@if (isAlive && !useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n<div #screenReaderLabel=\"skyId\" class=\"sky-screen-reader-only\" skyId>\n  {{ labelText }}\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i1$4.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellEditorLookupComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-lookup", host: { listeners: { "focusout": "onBlur($event)" }, properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "@if (isAlive && useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n@if (isAlive && !useAsyncSearch) {\n  <sky-input-box\n    [disabled]=\"skyComponentProperties?.disabled\"\n    [formGroup]=\"editorForm\"\n  >\n    <sky-lookup\n      formControlName=\"selection\"\n      [ariaLabelledBy]=\"\n        skyComponentProperties?.ariaLabelledBy ?? screenReaderLabel.id\n      \"\n      [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n      [data]=\"skyComponentProperties?.data\"\n      [debounceTime]=\"skyComponentProperties?.debounceTime\"\n      [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n      [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n      [idProperty]=\"skyComponentProperties?.idProperty\"\n      [placeholderText]=\"skyComponentProperties?.placeholderText\"\n      [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n      [search]=\"skyComponentProperties?.search\"\n      [searchFilters]=\"skyComponentProperties?.searchFilters\"\n      [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n      [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"\n        skyComponentProperties?.searchTextMinimumCharacters\n      \"\n      [selectMode]=\"skyComponentProperties?.selectMode\"\n      [showAddButton]=\"skyComponentProperties?.showAddButton\"\n      [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n      [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n      (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n      (openChange)=\"onLookupOpenChange($event)\"\n      (selectionModalOpenChange)=\"onSelectionModalOpenChange($event)\"\n    />\n  </sky-input-box>\n}\n<div #screenReaderLabel=\"skyId\" class=\"sky-screen-reader-only\" skyId>\n  {{ labelText }}\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i1$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
@@ -1994,7 +2038,7 @@ class SkyAgGridCellEditorNumberComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorNumberComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-number", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorNumberComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-number", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
             type: Component,
@@ -2085,7 +2129,7 @@ class SkyAgGridCellEditorTextComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorTextComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-text", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellEditorTextComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-text", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
@@ -2191,7 +2235,7 @@ class SkyAgGridCellValidatorTooltipComponent {
         return editingCells.length === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellValidatorTooltipComponent, isStandalone: true, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$3.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
             type: Component,
@@ -2405,7 +2449,7 @@ class SkyAgGridCellRendererRowSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: ["sky-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: ["sky-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
@@ -2425,11 +2469,10 @@ class SkyAgGridCellRendererTemplateComponent {
             'template' in params.colDef.cellRendererParams &&
             params.colDef.cellRendererParams.template);
         const template = hasTemplate
-            ? params.colDef?.cellRendererParams
-                .template
+            ? params.colDef?.cellRendererParams.template
             : undefined;
         this.state = {
-            hasTemplate,
+            hasTemplate: isSignal(template) ? 'signal' : hasTemplate,
             template,
             context: { value: params.value, row: params.data },
         };
@@ -2439,17 +2482,29 @@ class SkyAgGridCellRendererTemplateComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellRendererTemplateComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-template", ngImport: i0, template: `@if (state.hasTemplate) {
-    <ng-container *ngTemplateOutlet="state.template; context: state.context" />
-  }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridCellRendererTemplateComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-template", ngImport: i0, template: `@if (state.hasTemplate === 'signal') {
+      <ng-container
+        *ngTemplateOutlet="state.template(); context: state.context"
+      />
+    } @else if (state.hasTemplate) {
+      <ng-container
+        *ngTemplateOutlet="state.template; context: state.context"
+      />
+    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridCellRendererTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-ag-grid-cell-renderer-template',
-                    template: `@if (state.hasTemplate) {
-    <ng-container *ngTemplateOutlet="state.template; context: state.context" />
-  }`,
+                    template: `@if (state.hasTemplate === 'signal') {
+      <ng-container
+        *ngTemplateOutlet="state.template(); context: state.context"
+      />
+    } @else if (state.hasTemplate) {
+      <ng-container
+        *ngTemplateOutlet="state.template; context: state.context"
+      />
+    }`,
                     imports: [NgTemplateOutlet],
                 }]
         }] });
@@ -2671,7 +2726,7 @@ class SkyAgGridHeaderRowSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridHeaderRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-row-selector-header", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.title": "label()", "attr.role": "\"note\"" } }, ngImport: i0, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyAgGridHeaderRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-row-selector-header", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.title": "label()", "attr.role": "\"note\"" } }, ngImport: i0, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAgGridHeaderRowSelectorComponent, decorators: [{
             type: Component,