@skyux/ag-grid 12.14.2 → 12.15.0

package/fesm2022/skyux-ag-grid.mjs

@@ -11,7 +11,7 @@ import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of,
 import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
 import * as i2$4 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
-import { themeQuartz, colorSchemeLight, colorSchemeDark, KeyCode, PopupComponent } from 'ag-grid-community';
+import { themeQuartz, colorSchemeLight, KeyCode, PopupComponent } from 'ag-grid-community';
 import * as i1$1 from '@skyux/data-manager';
 import * as i1$2 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
@@ -152,169 +152,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 const defaultsForAllThemes = {
-    backgroundColor: 'var(--sky-background-color-page-default)',
-    borderColor: 'var(--sky-border-color-neutral-medium)',
-    borderRadius: 'var(--sky-border-radius-s, 3px)',
+    backgroundColor: 'var(--sky-override-ag-grid-background-color, var(--sky-background-color-page-default))',
+    borderColor: 'var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
+    borderRadius: 'var(--sky-override-ag-grid-border-radius, var(--sky-border-radius-s))',
     cardShadow: 'none',
-    cellEditingBorder: 'none',
-    cellHorizontalPadding: 12,
-    checkboxCheckedBackgroundColor: 'var(--sky-color-background-selected-heavy, var(--sky-background-color-input-selected, transparent))',
+    cellHorizontalPadding: 'var(--sky-override-ag-grid-cell-horizontal-padding, var(--sky-space-inset-letterbox-2_3-left-m))',
+    cellEditingBorder: 'var(--sky-override-ag-grid-cell-focus-border-width, var(--sky-border-width-input-focus)) solid var(--sky-override-ag-grid-cell-focus-border-color, var(--sky-color-border-input-focus))',
+    checkboxCheckedBackgroundColor: 'var(--sky-override-ag-grid-checkbox-selected-background-color, var(--sky-color-background-selected-heavy))',
     checkboxCheckedBorderColor: { ref: 'checkboxCheckedShapeColor' },
     checkboxCheckedShapeColor: 'var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse, var(--sky-text-color-default)))',
     checkboxIndeterminateBackgroundColor: 'var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse, transparent))',
     checkboxUncheckedBackgroundColor: 'transparent',
     checkboxUncheckedBorderColor: `var(
-    --sky-border-color-neutral-medium-dark,
-    var(--sky-border-color-neutral-medium)
+    --sky-override-ag-grid-checkbox-unchecked-border-color,
+    var(--sky-color-border-input-base)
   )`,
     checkboxCheckedShapeImage: {
-        svg: `<svg width="18" height="18" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.5 16.586-3.793-3.793a1 1 0 0 0-1.414 1.414l4.5 4.5a1 1 0 0 0 1.414 0l11-11a1 1 0 0 0-1.414-1.414L8.5 16.586Z" fill="#212121"/></svg>`,
+        svg: `<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.9884 3.54756C13.6244 3.16685 13.0164 3.1491 12.6302 3.50792L5.62682 10.0157L3.64517 8.03282C3.27275 7.66016 2.66443 7.65572 2.28646 8.0229C1.90848 8.39007 1.90397 8.98983 2.2764 9.36248L4.85162 11.9393C5.25487 12.3428 5.91121 12.3548 6.32932 11.9663L13.9482 4.88659C14.3343 4.52777 14.3523 3.92827 13.9884 3.54756Z" fill="#212121"/></svg>`,
     },
-    // eslint-disable-next-line @cspell/spellchecker
-    fontFamily: ['BLKB Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
-    foregroundColor: 'var(--sky-text-color-default)',
+    fontFamily: 'var(--sky-override-ag-grid-font-family, var(--sky-font-family-primary))',
+    fontSize: 'var(--sky-override-ag-grid-font-size, var(--sky-font-size-body-m))',
+    foregroundColor: 'var(--sky-override-ag-grid-foreground-color, var(--sky-color-text-default))',
     headerBackgroundColor: 'var(--sky-background-color-page-default)',
-    headerColumnBorder: {
-        style: 'solid',
-        width: 1,
-        color: { ref: 'borderColor' },
-    },
+    headerColumnBorder: 'var(--sky-override-ag-grid-border-width, var(--sky-border-width-divider)) var(--sky-override-ag-grid-border-style, var(--sky-border-style-divider)) var(--sky-override-ag-grid-border-color, transparent)',
     headerColumnBorderHeight: '100%',
-    headerColumnResizeHandleColor: 'var(--sky-border-color-neutral-medium)',
-    headerColumnResizeHandleHeight: '100%',
-    headerColumnResizeHandleWidth: 1,
+    headerColumnResizeHandleColor: 'var(--sky-override-ag-grid-column-divider-color, var(--sky-color-border-column_divider))',
+    headerColumnResizeHandleHeight: 'var(--sky-override-ag-grid-header-resize-height, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)))',
+    headerColumnResizeHandleWidth: 'var(--sky-override-ag-grid-header-divider-width, var(--sky-border-width-divider))',
     headerFontFamily: { ref: 'fontFamily' },
+    headerHeight: 'var(--sky-override-ag-grid-header-height, calc(calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) + calc(var(--sky-space-inset-letterbox-2_3-top-m) + var(--sky-space-inset-letterbox-2_3-bottom-m))))',
+    headerRowBorder: 'var(--sky-override-ag-grid-row-border-width, var(--sky-border-width-separator-row)) var(--sky-override-ag-grid-header-row-border-style, var(--sky-border-style-separator-row)) var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
     iconSize: 12,
     inputDisabledBackgroundColor: 'transparent',
     inputFocusBorder: 'transparent',
     inputFocusShadow: 'none',
-    invalidColor: 'var(--sky-background-color-danger-dark)',
+    invalidColor: 'var(--sky-override-ag-grid-invalid-color, var(--sky-color-background-action-danger-base))',
     listItemHeight: { ref: 'rowHeight' },
     oddRowBackgroundColor: 'var(--sky-background-color-page-default)',
     pickerListBackgroundColor: { ref: 'backgroundColor' },
-    popupShadow: '5px 5px 10px rgba(0, 0, 0, 0.3)',
-    rowBorderColor: 'var(--sky-border-color-neutral-medium)',
+    popupShadow: 'var(--sky-override-ag-grid-popup-shadow, var(--sky-elevation-overlay-300))',
+    rangeSelectionBorderColor: 'var(--sky-override-ag-grid-range-selection-border-color, var(--sky-color-border-input-focus))',
+    rowBorder: 'var(--sky-override-ag-grid-row-border-width, var(--sky-border-width-separator-row)) var(--sky-override-ag-grid-row-border-style, var(--sky-border-style-separator-row)) var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
+    rowHeight: 'var(--sky-override-ag-grid-row-height, calc(calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) + calc(var(--sky-space-inset-letterbox-2_3-top-m) + var(--sky-space-inset-letterbox-2_3-bottom-m))))',
     rowHoverColor: 'transparent',
-    secondaryForegroundColor: 'var(--sky-text-color-deemphasized)',
-    selectedRowBackgroundColor: 'var(--sky-background-color-selected)',
+    selectedRowBackgroundColor: 'var(--sky-override-ag-grid-row-selected-color, var(--sky-color-background-selected-soft))',
+    // TODO: investigate removing this in 13. Does not appear to be impacting anything, but it could be used by features we have not tested so major version removal is safest.
     spacing: 4,
-    textColor: 'var(--sky-text-color-default)',
-    tooltipBackgroundColor: 'var(--sky-background-color-neutral-light)',
+    textColor: 'var(--sky-override-ag-grid-text-color, var(--sky-color-text-default))',
+    tooltipBackgroundColor: 'var(--sky-override-ag-grid-tooltip-background-color, var(--sky-color-background-container-base))',
     wrapperBorderRadius: 0,
 };
 const defaultsForDataEntryGrid = {
-    backgroundColor: 'var(--sky-background-color-page-default)',
-    columnBorder: true,
+    columnBorder: 'var(--sky-override-ag-grid-column-border, var(--sky-border-width-separator-row) solid var(--sky-color-border-separator-row))',
     popupShadow: 'none',
+    rowBorder: 'var(--sky-override-ag-grid-row-border-width, var(--sky-border-width-separator-row)) solid var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
+    headerRowBorder: 'var(--sky-override-ag-grid-row-border-width, var(--sky-border-width-emphasized)) solid var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
 };
-const defaultThemeBase = {
-    ...defaultsForAllThemes,
-    backgroundColor: '#fbfbfb', //SkyDefaultDesignTokens.color.gray['01'],
-    fontSize: 15,
-    headerHeight: 37,
-    inputFocusBorderColor: 'var(--sky-highlight-color-info)',
-    rowHeight: 38,
-    rangeSelectionBorderColor: 'var(--sky-highlight-color-info)',
-};
-const modernThemeBase = {
-    ...defaultsForAllThemes,
-    fontSize: 16,
-    headerColumnBorder: {
-        style: 'solid',
-        width: 1,
-        color: 'transparent',
-    },
-    headerColumnResizeHandleColor: { ref: 'headerBackgroundColor' },
-    headerColumnSeparatorColor: { ref: 'headerBackgroundColor' },
-    headerHeight: 60,
-    inputFocusBorderColor: '#1870B8', // SkyModernDesignTokens['border-color']['primary-dark'],
-    rowHeight: 60,
-    rangeSelectionBorderColor: { ref: 'inputFocusBorderColor' },
-};
-const modernCompactThemeBase = {
-    headerHeight: 32,
-    rowHeight: 32,
-};
-const modernThemeDarkBase = {
-    ...defaultsForAllThemes,
-    fontSize: 16,
-    headerHeight: 60,
-    rowHeight: 60,
-};
-const SkyAgGridDataGridDefault = themeQuartz
-    .withoutPart('iconSet')
-    .withPart(colorSchemeLight)
-    .withParams(defaultThemeBase);
-const SkyAgGridDataEntryGridDefault = SkyAgGridDataGridDefault.withParams(defaultsForDataEntryGrid).withParams({
-    cellHorizontalPadding: '11px',
-    columnBorder: {
-        style: 'solid',
-        width: 1,
-        color: { ref: 'borderColor' },
-    },
-});
-const SkyAgGridDataGridModernLight = themeQuartz
+const SkyAgGridDataGrid = themeQuartz
     .withoutPart('iconSet')
     .withPart(colorSchemeLight)
-    .withParams(modernThemeBase);
-const SkyAgGridDataGridModernLightCompact = SkyAgGridDataGridModernLight.withParams(modernCompactThemeBase);
-const SkyAgGridDataGridModernDark = themeQuartz
-    .withoutPart('iconSet')
-    .withPart(colorSchemeDark)
-    .withParams(modernThemeDarkBase);
-const SkyAgGridDataGridModernDarkCompact = SkyAgGridDataGridModernDark.withParams(modernCompactThemeBase);
-const SkyAgGridDataEntryGridModernLight = SkyAgGridDataGridModernLight.withParams(defaultsForDataEntryGrid).withParams({
-    backgroundColor: '#ffffff',
-});
-const SkyAgGridDataEntryGridModernLightCompact = SkyAgGridDataGridModernLightCompact.withParams(defaultsForDataEntryGrid);
-const SkyAgGridDataEntryGridModernDark = SkyAgGridDataGridModernDark.withParams(defaultsForDataEntryGrid);
-const SkyAgGridDataEntryGridModernDarkCompact = SkyAgGridDataGridModernDarkCompact.withParams(defaultsForDataEntryGrid);
-function getSkyAgGridTheme(grid, theme, mode, spacing) {
+    .withParams(defaultsForAllThemes);
+const SkyAgGridDataEntryGrid = SkyAgGridDataGrid.withParams(defaultsForDataEntryGrid);
+function getSkyAgGridTheme(grid) {
     if (grid === 'data-grid') {
-        if (theme === 'modern') {
-            if (mode === 'dark') {
-                if (spacing === 'compact') {
-                    return SkyAgGridDataGridModernDarkCompact;
-                }
-                else {
-                    return SkyAgGridDataGridModernDark;
-                }
-            }
-            else {
-                if (spacing === 'compact') {
-                    return SkyAgGridDataGridModernLightCompact;
-                }
-                else {
-                    return SkyAgGridDataGridModernLight;
-                }
-            }
-        }
-        else {
-            return SkyAgGridDataGridDefault;
-        }
+        return SkyAgGridDataGrid;
     }
     else {
-        if (theme === 'modern') {
-            if (mode === 'dark') {
-                if (spacing === 'compact') {
-                    return SkyAgGridDataEntryGridModernDarkCompact;
-                }
-                else {
-                    return SkyAgGridDataEntryGridModernDark;
-                }
-            }
-            else {
-                if (spacing === 'compact') {
-                    return SkyAgGridDataEntryGridModernLightCompact;
-                }
-                else {
-                    return SkyAgGridDataEntryGridModernLight;
-                }
-            }
-        }
-        else {
-            return SkyAgGridDataEntryGridDefault;
-        }
+        return SkyAgGridDataEntryGrid;
     }
 }
 function agGridThemeIsCompact(themeSettings, compactLayout) {
@@ -746,7 +650,7 @@ class SkyAgGridWrapperComponent {
         }
     }
     #updateGridTheme(hasEditableClass, isCompact, themeSettings) {
-        const skyAgGridTheme = getSkyAgGridTheme(hasEditableClass ? 'data-entry-grid' : 'data-grid', themeSettings?.theme?.name, themeSettings?.mode?.name, isCompact ? 'compact' : themeSettings?.spacing?.name);
+        const skyAgGridTheme = getSkyAgGridTheme(hasEditableClass ? 'data-entry-grid' : 'data-grid');
         this.agGrid?.api.setGridOption('theme', skyAgGridTheme);
         const skyAgGridThemeClassName = getSkyAgGridThemeClassName(hasEditableClass, themeSettings, isCompact);
         const previousValue = this.#wrapperClasses.getValue();
@@ -1509,7 +1413,7 @@ class SkyAgGridCellEditorAutocompleteComponent {
         }
     }
     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 }); }
+    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{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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
@@ -1518,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ReactiveFormsModule,
                         SkyAutocompleteModule,
                         SkyI18nModule,
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorAutocomplete', { read: ElementRef }]
@@ -1560,8 +1464,6 @@ class SkyAgGridCellEditorCurrencyComponent {
         this.params = params;
         this.columnHeader = this.params.api.getDisplayNameForColumn(this.params.column, 'header');
         this.rowNumber = this.params.rowIndex + 1;
-        this.columnWidth = this.params.column.getActualWidth();
-        this.rowHeightWithoutBorders = SkyAgGridCellEditorUtils.subtractOrZero(this.params.node?.rowHeight, 4);
         this.skyComponentProperties = {
             ...(this.params.skyComponentProperties || {
                 decimalPlaces: 2,
@@ -1630,7 +1532,7 @@ class SkyAgGridCellEditorCurrencyComponent {
         this.#initialized = true;
     }
     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 }); }
+    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    [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-context(.sky-theme-modern:not(.sky-theme-brand-base)) input{--sky-override-ag-grid-currency-editor-left-padding: 10px}: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-space-inset-letterbox-2_3-left-m) - 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
@@ -1639,7 +1541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ReactiveFormsModule,
                         SkyAutonumericModule,
                         SkyI18nModule,
-                    ], 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"] }]
+                    ], 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-context(.sky-theme-modern:not(.sky-theme-brand-base)) input{--sky-override-ag-grid-currency-editor-left-padding: 10px}: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-space-inset-letterbox-2_3-left-m) - var(--sky-border-width-input-focus)))}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorCurrency', { read: ElementRef }]
@@ -1783,7 +1685,7 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
         }
     }
     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 }); }
+    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: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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
@@ -1792,7 +1694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ReactiveFormsModule,
                         SkyDatepickerModule,
                         SkyI18nModule,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { datepickerInput: [{
                 type: ViewChild,
                 args: ['skyCellEditorDatepickerInput', { read: ElementRef }]
@@ -1939,7 +1841,7 @@ class SkyAgGridCellEditorLookupComponent {
         }
     }
     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      (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: "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      (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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
@@ -1949,7 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ReactiveFormsModule,
                         SkyLookupModule,
                         SkyIdModule,
-                    ], 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      (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"] }]
+                    ], 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"] }]
         }], propDecorators: { width: [{
                 type: HostBinding,
                 args: ['style.width.px']
@@ -2029,11 +1931,11 @@ class SkyAgGridCellEditorNumberComponent {
         return val !== undefined && val !== null ? val : undefined;
     }
     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 }); }
+    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{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 }); }
 }
 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"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorNumber\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max ?? null\"\n    [min]=\"min ?? null\"\n  />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorNumber', { read: ElementRef }]
@@ -2109,11 +2011,11 @@ class SkyAgGridCellEditorTextComponent {
         return this.editorForm.get('text')?.value || undefined;
     }
     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 }); }
+    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    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) input{--sky-override-ag-grid-text-editor-left-padding: 10px}: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-space-inset-letterbox-2_3-left-m) - 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 }); }
 }
 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"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) input{--sky-override-ag-grid-text-editor-left-padding: 10px}: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-space-inset-letterbox-2_3-left-m) - var(--sky-border-width-input-focus)))}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorText', { read: ElementRef }]
@@ -2190,11 +2092,11 @@ class SkyAgGridCellValidatorTooltipComponent {
         return editingCells.length === 0;
     }
     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 }); }
+    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: [".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 }); }
 }
 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"] }]
+            args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SkyPopoverModule, SkyStatusIndicatorModule], template: "<ng-template #displayValue>\n  <ng-content />\n</ng-template>\n\n@if (showValidatorMessage()) {\n  <div\n    skyPopoverTrigger=\"mouseenter\"\n    class=\"sky-validator-cell\"\n    [skyPopover]=\"validatorPopover\"\n    [skyPopoverMessageStream]=\"popoverMessageStream\"\n  >\n    <ng-container *ngTemplateOutlet=\"displayValue\" />\n    <sky-status-indicator\n      descriptionType=\"none\"\n      indicatorType=\"danger\"\n      class=\"sky-pull-right\"\n    />\n  </div>\n  <sky-popover\n    #validatorPopover\n    data-sky-id=\"validatorPopover\"\n    popoverType=\"danger\"\n  >\n    {{ validatorMessage }}\n  </sky-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"displayValue\" />\n}\n", styles: [".sky-validator-cell:not(.sky-theme-modern *){--sky-override-cell-validator-space: 5px}:host{--sky-staus-indicator-padding-right: 0;display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}sky-status-indicator{margin-left:var(--sky-override-cell-validator-space, var(--sky-space-gap-icon-s))}\n"] }]
         }], propDecorators: { params: [{
                 type: Input
             }] } });
@@ -2231,11 +2133,11 @@ class SkyAgGridCellRendererCurrencyComponent {
         this.skyComponentProperties.truncate = false;
     }
     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 }); }
+    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: [""], 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.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"] }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyNumericModule], template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n" }]
         }], propDecorators: { params: [{
                 type: Input
             }] } });
@@ -2404,11 +2306,11 @@ class SkyAgGridCellRendererRowSelectorComponent {
         }
     }
     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 }); }
+    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  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-space-inset-letterbox-2_3-top-m))}\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.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [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  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-space-inset-letterbox-2_3-top-m))}\n"] }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridCellRendererTemplateComponent {
@@ -2604,11 +2506,11 @@ class SkyAgGridHeaderGroupComponent {
         }
     }
     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 }); }
+    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: ["button:not(.sky-theme-modern *){--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) button{--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-override-ag-grid-header-button-margin-left, var(--sky-space-gap-text_action-xs));flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["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.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"] }]
+            args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyThemeModule, SkyIconModule, AsyncPipe, SkyI18nModule], template: "@if (params?.displayName) {\n  <span\n    class=\"header-group-text\"\n    role=\"presentation\"\n    [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n    >{{ params?.displayName }}</span\n  >\n}\n@if (isExpandable$ | async) {\n  @if (isExpanded$ | async) {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_collapse_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(false)\"\n    >\n      <sky-icon iconName=\"chevron-double-left\" />\n    </button>\n  } @else {\n    <button\n      class=\"sky-btn sky-btn-icon-borderless\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_column_group_header_expand_aria_label'\n          | skyLibResources: params?.displayName\n      \"\n      (click)=\"setExpanded(true)\"\n    >\n      <sky-icon iconName=\"chevron-double-right\" />\n    </button>\n  }\n}\n<span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n", styles: ["button:not(.sky-theme-modern *){--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) button{--sky-override-ag-grid-header-button-margin-left: var(--sky-margin-inline-sm)}:host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-override-ag-grid-header-button-margin-left, var(--sky-space-gap-text_action-xs));flex-grow:0;flex-shrink:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
@@ -2797,7 +2699,7 @@ class SkyAgGridHeaderComponent {
         }
     }
     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 }); }
+    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-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["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.7", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
@@ -2805,7 +2707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         '[attr.title]': 'accessibleHeaderText()',
                         '[attr.aria-label]': 'displayName() || accessibleHeaderText()',
                         '[attr.role]': '"note"',
-                    }, imports: [SkyIconModule, SkyThemeModule, AsyncPipe, SkyI18nModule], 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"] }]
+                    }, imports: [SkyIconModule, SkyThemeModule, AsyncPipe, SkyI18nModule], 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-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"] }]
         }], propDecorators: { inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
@@ -3734,7 +3636,7 @@ class SkyAgGridService {
             singleClickEdit: true,
             styleNonce: this.#cspNonce ?? undefined,
             suppressDragLeaveHidesColumns: true,
-            theme: getSkyAgGridTheme('data-grid', this.#currentTheme?.theme?.name, this.#currentTheme?.mode?.name, this.#currentTheme?.spacing?.name),
+            theme: getSkyAgGridTheme('data-grid'),
         };
         const columnTypes = defaultSkyGridOptions.columnTypes;
         columnTypes[SkyCellType.CurrencyValidator] = {
@@ -3813,7 +3715,7 @@ class SkyAgGridService {
     #getDefaultEditableGridOptions(args) {
         const defaultGridOptions = this.#getDefaultGridOptions(args);
         defaultGridOptions.rowSelection = undefined;
-        defaultGridOptions.theme = getSkyAgGridTheme('data-entry-grid', this.#currentTheme?.theme?.name, this.#currentTheme?.mode?.name, this.#currentTheme?.spacing?.name);
+        defaultGridOptions.theme = getSkyAgGridTheme('data-entry-grid');
         return defaultGridOptions;
     }
     #getIconTemplate(iconKey) {