@skyux/ag-grid 12.29.0 → 12.31.0

package/css/sky-ag-grid.css

@@ -394,7 +394,10 @@
 
 .ag-theme-sky-data-grid-modern-light,
 .ag-theme-sky-data-grid-modern-light-compact {
-  --ag-header-background-color: var(--sky-background-color-page-default);
+  --ag-header-background-color: var(
+    --sky-comp-override-list-header-background-color,
+    var(--sky-background-color-page-default)
+  );
   --ag-header-column-separator-color: var(--sky-background-color-page-default);
 }
 
@@ -426,7 +429,7 @@
   z-index: 1;
   --ag-cell-horizontal-padding: var(
     --sky-override-ag-grid-cell-focus-horizontal-padding,
-    var(--sky-space-inset-letterbox-2_3-left-m)
+    var(--sky-comp-grid-cell-space-inset-left)
   );
 }
 .ag-theme-sky-data-entry-grid-default .ag-cell.ag-cell-focus.ag-cell-inline-editing,
@@ -678,8 +681,8 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
 .ag-theme-sky-data-grid-modern-light-compact .ag-cell.ag-cell-wrap-text span.ag-cell-value,
 .ag-theme-sky-data-entry-grid-modern-light-compact .ag-cell.ag-cell-wrap-text span.ag-cell-value {
   line-height: var(--sky-font-line_height-body-m);
-  padding-top: var(--sky-override-ag-grid-cell-padding-vertical, var(--sky-space-inset-letterbox-2_3-top-m));
-  padding-bottom: var(--sky-override-ag-grid-cell-padding-vertical, var(--sky-space-inset-letterbox-2_3-bottom-m));
+  padding-top: var(--sky-override-ag-grid-cell-padding-vertical, var(--sky-comp-grid-cell-space-inset-top));
+  padding-bottom: var(--sky-override-ag-grid-cell-padding-vertical, var(--sky-comp-grid-cell-space-inset-bottom));
   min-height: calc(var(--ag-row-height) - 2px);
 }
 .ag-theme-sky-data-grid-modern-light .ag-header .ag-header-cell .ag-header-cell-label-sortable,
@@ -3048,7 +3051,7 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
 }
 .ag-theme-sky-data-entry-grid-modern-light .ag-row .ag-cell.ag-cell-focus .ag-select .ag-picker-field-wrapper,
 .ag-theme-sky-data-entry-grid-modern-light-compact .ag-row .ag-cell.ag-cell-focus .ag-select .ag-picker-field-wrapper {
-  padding-left: var(--sky-override-ag-grid-cell-focus-horizontal-padding, calc(var(--sky-space-inset-letterbox-2_3-left-m) - var(--sky-border-width-input-focus)));
+  padding-left: var(--sky-override-ag-grid-cell-focus-horizontal-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)));
 }
 
 .sky-ag-grid:not(.sky-theme-modern *) {

package/fesm2022/skyux-ag-grid.mjs

@@ -156,7 +156,7 @@ const defaultsForAllThemes = {
     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',
-    cellHorizontalPadding: 'var(--sky-override-ag-grid-cell-horizontal-padding, var(--sky-space-inset-letterbox-2_3-left-m))',
+    cellHorizontalPadding: 'var(--sky-override-ag-grid-cell-horizontal-padding, var(--sky-comp-grid-cell-space-inset-left))',
     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' },
@@ -173,14 +173,14 @@ const defaultsForAllThemes = {
     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)',
+    headerBackgroundColor: 'var(--sky-comp-override-list-header-background-color, var(--sky-background-color-page-default))',
     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-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))))',
+    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-comp-grid-cell-space-inset-top) + var(--sky-comp-grid-cell-space-inset-bottom))))',
     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',
@@ -193,7 +193,7 @@ const defaultsForAllThemes = {
     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))))',
+    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-comp-grid-cell-space-inset-top) + var(--sky-comp-grid-cell-space-inset-bottom))))',
     rowHoverColor: 'transparent',
     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.
@@ -1548,7 +1548,7 @@ class SkyAgGridCellEditorCurrencyComponent {
         this.#initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
@@ -1557,7 +1557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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    [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"] }]
+                    ], 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-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorCurrency', { read: ElementRef }]
@@ -2027,11 +2027,11 @@ class SkyAgGridCellEditorTextComponent {
         return this.editorForm.get('text')?.value || undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    #skyCellEditorText\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader : rowNumber\n    \"\n    [maxlength]=\"maxlength ?? null\"\n  />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host-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"] }]
+            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-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorText', { read: ElementRef }]
@@ -2347,11 +2347,11 @@ class SkyAgGridCellRendererRowSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SkyAgGridCellRendererRowSelectorComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: ["sky-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-comp-grid-cell-space-inset-top))}\n"], dependencies: [{ kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "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.14", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyCheckboxModule, AsyncPipe], template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  class=\"sky-ag-grid-row-selector\"\n  [disabled]=\"(disabled | async) || false\"\n  [tabindex]=\"0\"\n  [labelHidden]=\"true\"\n  [labelText]=\"(label | async) || ''\"\n  [checked]=\"(checked | async) || false\"\n  (change)=\"updateRow(!!$event.checked)\"\n/>\n", styles: ["sky-checkbox.sky-ag-grid-row-selector{display:block!important;margin-top:var(--sky-override-ag-grid-row-selector-margin-top, var(--sky-space-inset-letterbox-2_3-top-m))}\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-comp-grid-cell-space-inset-top))}\n"] }]
         }], ctorParameters: () => [] });
 
 class SkyAgGridCellRendererTemplateComponent {