@skyux/ag-grid 5.9.7 → 5.11.1

package/fesm2015/skyux-ag-grid.js

@@ -9,18 +9,19 @@ import { SkyDataManagerModule } from '@skyux/data-manager';
 import * as i1$2 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
-import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil, filter, first } from 'rxjs/operators';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
+import * as i1$4 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { KeyCode, PopupComponent, Events, RowNode } from 'ag-grid-community';
 import * as i1$3 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
-import * as i1$4 from '@angular/forms';
-import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i3$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i2 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
 import * as i1$5 from '@skyux/theme';
-import { PopupComponent, Events, RowNode } from 'ag-grid-community';
 import * as i2$1 from '@skyux/datetime';
 import { SkyDatepickerModule } from '@skyux/datetime';
 import * as i1$6 from '@skyux/forms';
@@ -668,29 +669,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [AgGridAngular]
             }] } });
 
+/** The intiial action that a cell editor should take when initialized. */
+var SkyAgGridCellEditorInitialAction;
+(function (SkyAgGridCellEditorInitialAction) {
+    /** The cell should be cleared. */
+    SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Delete"] = 0] = "Delete";
+    /** The cell value should be highlighted. */
+    SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Highlighted"] = 1] = "Highlighted";
+    /** The cell value should be replaced with the initializing value. */
+    SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Replace"] = 2] = "Replace";
+    /** The cell should not be modified and the cursor is placed at the end of the value. */
+    SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Untouched"] = 3] = "Untouched";
+})(SkyAgGridCellEditorInitialAction || (SkyAgGridCellEditorInitialAction = {}));
+
+class SkyAgGridCellEditorUtils {
+    /**
+     * Gets the intiial action that a cell editor should take when initialized.
+     * @param params The editor's initializing parameters.
+     */
+    static getEditorInitialAction(params) {
+        if (params.cellStartedEdit) {
+            if (params.keyPress === KeyCode.BACKSPACE ||
+                params.keyPress === KeyCode.DELETE) {
+                return SkyAgGridCellEditorInitialAction.Delete;
+            }
+            else if (params.charPress) {
+                return SkyAgGridCellEditorInitialAction.Replace;
+            }
+            else {
+                if (params.keyPress !== KeyCode.F2) {
+                    return SkyAgGridCellEditorInitialAction.Highlighted;
+                }
+                else {
+                    return SkyAgGridCellEditorInitialAction.Untouched;
+                }
+            }
+        }
+        else {
+            return SkyAgGridCellEditorInitialAction.Untouched;
+        }
+    }
+}
+
+var _SkyAgGridCellEditorAutocompleteComponent_triggerType;
 /**
  * @internal
  */
 class SkyAgGridCellEditorAutocompleteComponent {
     constructor() {
+        this.editorForm = new FormGroup({
+            selection: new FormControl(),
+        });
         this.skyComponentProperties = {};
+        _SkyAgGridCellEditorAutocompleteComponent_triggerType.set(this, void 0);
     }
     agInit(params) {
         this.params = params;
-        this.currentSelection = this.params.value;
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+        const control = this.editorForm.get('selection');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue(undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(params.value);
+                break;
+        }
         this.columnHeader = this.params.colDef && this.params.colDef.headerName;
         this.rowNumber = this.params.rowIndex + 1;
         this.skyComponentProperties = this.params.skyComponentProperties || {};
     }
     afterGuiAttached() {
         this.input.nativeElement.focus();
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Replace) {
+            this.input.nativeElement.select();
+            this.input.nativeElement.setRangeText(this.params.charPress);
+            // Ensure the cursor is at the end of the text.
+            this.input.nativeElement.setSelectionRange(this.params.charPress.length, this.params.charPress.length);
+            this.input.nativeElement.dispatchEvent(new Event('input'));
+        }
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+            this.input.nativeElement.select();
+        }
     }
     getValue() {
-        return this.currentSelection;
+        const val = this.editorForm.get('selection').value;
+        return val !== undefined && val !== null ? val : undefined;
     }
 }
+_SkyAgGridCellEditorAutocompleteComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\">\n  <sky-autocomplete\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\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  >\n    <input\n      skyAutocomplete\n      #skyCellEditorAutocomplete\n      type=\"text\"\n      [(ngModel)]=\"currentSelection\"\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"], components: [{ type: i1$3.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }], directives: [{ type: i1$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", 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    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\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  >\n    <input\n      formControlName=\"selection\"\n      skyAutocomplete\n      #skyCellEditorAutocomplete\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"], components: [{ type: i1$3.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -775,23 +847,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyAgGridCellEditorAutocompleteModule {
 }
 SkyAgGridCellEditorAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridCellEditorAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, declarations: [SkyAgGridCellEditorAutocompleteComponent], imports: [FormsModule, SkyAgGridResourcesModule, SkyAutocompleteModule], exports: [SkyAgGridCellEditorAutocompleteComponent] });
-SkyAgGridCellEditorAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, imports: [[FormsModule, SkyAgGridResourcesModule, SkyAutocompleteModule]] });
+SkyAgGridCellEditorAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, declarations: [SkyAgGridCellEditorAutocompleteComponent], imports: [ReactiveFormsModule,
+        SkyAgGridResourcesModule,
+        SkyAutocompleteModule], exports: [SkyAgGridCellEditorAutocompleteComponent] });
+SkyAgGridCellEditorAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, imports: [[
+            ReactiveFormsModule,
+            SkyAgGridResourcesModule,
+            SkyAutocompleteModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [FormsModule, SkyAgGridResourcesModule, SkyAutocompleteModule],
+                    imports: [
+                        ReactiveFormsModule,
+                        SkyAgGridResourcesModule,
+                        SkyAutocompleteModule,
+                    ],
                     declarations: [SkyAgGridCellEditorAutocompleteComponent],
                     exports: [SkyAgGridCellEditorAutocompleteComponent],
                 }]
         }] });
 
+var _SkyAgGridCellEditorCurrencyComponent_triggerType;
 /**
  * @internal
  */
 class SkyAgGridCellEditorCurrencyComponent {
-    constructor() {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
         this.skyComponentProperties = {};
+        this.editorForm = new FormGroup({
+            currency: new FormControl(),
+        });
+        _SkyAgGridCellEditorCurrencyComponent_triggerType.set(this, void 0);
     }
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
@@ -799,7 +887,6 @@ class SkyAgGridCellEditorCurrencyComponent {
      */
     agInit(params) {
         this.params = params;
-        this.value = this.params.value;
         this.columnHeader = this.params.colDef.headerName;
         this.rowNumber = this.params.rowIndex + 1;
         this.columnWidth = this.params.column.getActualWidth();
@@ -815,12 +902,37 @@ class SkyAgGridCellEditorCurrencyComponent {
      */
     afterGuiAttached() {
         this.input.nativeElement.focus();
+        // This setup is in `afterGuiAttached` due to the lifecycle of autonumeric which will highlight the initial value if it is in place when it renders.
+        // Since we don't want that, we set the initial value after autonumeric initializes.
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorCurrencyComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(this.params), "f");
+        const control = this.editorForm.get('currency');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorCurrencyComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue(undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+                control.setValue(parseFloat(this.params.charPress) || undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(parseFloat(this.params.value));
+                break;
+        }
+        this.changeDetector.markForCheck();
+        // Without the `setTimeout` there is inconsistent behavior with the highlighting when no initial value is present.
+        setTimeout(() => {
+            if (__classPrivateFieldGet(this, _SkyAgGridCellEditorCurrencyComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+                this.input.nativeElement.select();
+            }
+        }, 100);
     }
     /**
      * getValue is called by agGrid when editing is stopped to get the new value of the cell.
      */
     getValue() {
-        return this.value;
+        const val = this.editorForm.get('currency').value;
+        return val !== undefined && val !== null ? val : undefined;
     }
     /**
      * The autoNumeric library's event handler suppresses the escape key event. This additional handler re-enables AG Grid's default functionality.
@@ -830,8 +942,9 @@ class SkyAgGridCellEditorCurrencyComponent {
         this.params.api.setFocusedCell(this.params.rowIndex, this.params.column);
     }
 }
-SkyAgGridCellEditorCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\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  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  (keyup.escape)=\"onPressEscape()\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+_SkyAgGridCellEditorCurrencyComponent_triggerType = new WeakMap();
+SkyAgGridCellEditorCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"currency\"\n    type=\"text\"\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?.charPress\"\n    (keyup.escape)=\"onPressEscape()\"\n    #skyCellEditorCurrency\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
             args: [{
@@ -840,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./cell-editor-currency.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { input: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorCurrency', { read: ElementRef }]
             }] } });
@@ -848,40 +961,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyAgGridCellEditorCurrencyModule {
 }
 SkyAgGridCellEditorCurrencyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridCellEditorCurrencyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, declarations: [SkyAgGridCellEditorCurrencyComponent], imports: [SkyAgGridResourcesModule, FormsModule, SkyAutonumericModule], exports: [SkyAgGridCellEditorCurrencyComponent] });
-SkyAgGridCellEditorCurrencyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, imports: [[SkyAgGridResourcesModule, FormsModule, SkyAutonumericModule]] });
+SkyAgGridCellEditorCurrencyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, declarations: [SkyAgGridCellEditorCurrencyComponent], imports: [SkyAgGridResourcesModule,
+        ReactiveFormsModule,
+        SkyAutonumericModule], exports: [SkyAgGridCellEditorCurrencyComponent] });
+SkyAgGridCellEditorCurrencyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, imports: [[
+            SkyAgGridResourcesModule,
+            ReactiveFormsModule,
+            SkyAutonumericModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyAgGridResourcesModule, FormsModule, SkyAutonumericModule],
+                    imports: [
+                        SkyAgGridResourcesModule,
+                        ReactiveFormsModule,
+                        SkyAutonumericModule,
+                    ],
                     declarations: [SkyAgGridCellEditorCurrencyComponent],
                     exports: [SkyAgGridCellEditorCurrencyComponent],
                 }]
         }] });
 
+var _SkyAgGridCellEditorDatepickerComponent_triggerType;
 /**
  * @internal
  */
 class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
-    constructor(themeSvc) {
+    constructor(changeDetector, themeSvc) {
         super();
+        this.changeDetector = changeDetector;
         this.themeSvc = themeSvc;
+        this.editorForm = new FormGroup({
+            date: new FormControl(),
+        });
         this.skyComponentProperties = {};
+        _SkyAgGridCellEditorDatepickerComponent_triggerType.set(this, void 0);
     }
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
      * @param params The cell editor params that include data about the cell, column, row, and grid.
      */
     agInit(params) {
-        var _a;
+        var _a, _b;
         this.params = params;
-        this.currentDate = this.params.value;
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+        const control = this.editorForm.get('date');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue(undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+                control.setValue(params.charPress);
+                break;
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(params.value);
+                break;
+        }
+        if ((_a = this.params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.disabled) {
+            control.disable();
+        }
+        this.changeDetector.markForCheck();
         this.skyComponentProperties = this.params.skyComponentProperties || {};
         this.columnWidth = this.params.column.getActualWidth();
         this.columnWidthWithoutBorders = this.columnWidth - 2;
         this.rowHeightWithoutBorders =
             this.params.node && this.params.node.rowHeight - 3;
-        (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.subscribe((themeSettings) => {
+        (_b = this.themeSvc) === null || _b === void 0 ? void 0 : _b.settingsChange.subscribe((themeSettings) => {
             if (themeSettings.currentSettings.theme.name === 'modern') {
                 this.columnWidthWithoutBorders = this.columnWidth;
                 this.rowHeightWithoutBorders =
@@ -898,21 +1045,38 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
      * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
      */
     afterGuiAttached() {
-        this.focusOnDatepickerInput();
+        const datepickerInputEl = this.datepickerInput
+            .nativeElement;
+        datepickerInputEl.focus();
+        // Programatically set the value of in the input; however, do not do this via the form control so that the value is not formatted when editing starts.
+        // Watch for the first blur and fire a 'change' event as programatic changes won't queue a change event, but we need to do this so that formatting happens if the user tabs to the calendar button.
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Replace) {
+            fromEvent(datepickerInputEl, 'blur')
+                .pipe(first())
+                .subscribe(() => {
+                datepickerInputEl.dispatchEvent(new Event('change'));
+            });
+            datepickerInputEl.select();
+            datepickerInputEl.setRangeText(this.params.charPress);
+            // Ensure the cursor is at the end of the text.
+            datepickerInputEl.setSelectionRange(this.params.charPress.length, this.params.charPress.length);
+        }
+        // this.changeDetector.markForCheck();
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+            datepickerInputEl.select();
+        }
     }
     /**
      * getValue is called by agGrid when editing is stopped to get the new value of the cell.
      */
     getValue() {
         this.datepickerInput.nativeElement.blur();
-        return this.currentDate;
-    }
-    focusOnDatepickerInput() {
-        this.datepickerInput.nativeElement.focus();
+        return this.editorForm.get('date').value;
     }
 }
-SkyAgGridCellEditorDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i1$5.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", 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  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n  >\n    <input\n      skyDatepickerInput\n      [disabled]=\"skyComponentProperties.disabled\"\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      [(ngModel)]=\"currentDate\"\n      #skyCellEditorDatepickerInput\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"], components: [{ type: i2$1.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+_SkyAgGridCellEditorDatepickerComponent_triggerType = new WeakMap();
+SkyAgGridCellEditorDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", 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  >\n    <input\n      formControlName=\"date\"\n      skyDatepickerInput\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      #skyCellEditorDatepickerInput\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"], components: [{ type: i2$1.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -922,7 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.SkyThemeService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { datepickerInput: [{
                 type: ViewChild,
@@ -932,12 +1096,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyAgGridCellEditorDatepickerModule {
 }
 SkyAgGridCellEditorDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridCellEditorDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, declarations: [SkyAgGridCellEditorDatepickerComponent], imports: [SkyDatepickerModule, FormsModule], exports: [SkyAgGridCellEditorDatepickerComponent] });
-SkyAgGridCellEditorDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, imports: [[SkyDatepickerModule, FormsModule]] });
+SkyAgGridCellEditorDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, declarations: [SkyAgGridCellEditorDatepickerComponent], imports: [SkyDatepickerModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorDatepickerComponent] });
+SkyAgGridCellEditorDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, imports: [[SkyDatepickerModule, ReactiveFormsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyDatepickerModule, FormsModule],
+                    imports: [SkyDatepickerModule, ReactiveFormsModule],
                     declarations: [SkyAgGridCellEditorDatepickerComponent],
                     exports: [SkyAgGridCellEditorDatepickerComponent],
                 }]
@@ -972,6 +1136,7 @@ function applySkyLookupPropertiesDefaults(skyLookupProperties) {
     };
 }
 
+var _SkyAgGridCellEditorLookupComponent_triggerType;
 /**
  * @internal
  */
@@ -980,21 +1145,33 @@ class SkyAgGridCellEditorLookupComponent {
         this.changeDetector = changeDetector;
         this.elementRef = elementRef;
         this.isAlive = false;
-        this.lookupForm = new FormGroup({
-            currentSelection: new FormControl({
+        this.editorForm = new FormGroup({
+            selection: new FormControl({
                 value: [],
                 disabled: false,
             }),
         });
         this.useAsyncSearch = false;
+        _SkyAgGridCellEditorLookupComponent_triggerType.set(this, void 0);
     }
     agInit(params) {
         this.params = params;
         if (!Array.isArray(this.params.value)) {
             throw new Error(`Lookup value must be an array`);
         }
-        const control = this.lookupForm.get('currentSelection');
-        control.setValue(this.params.value);
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+        const control = this.editorForm.get('selection');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue([]);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(params.value);
+                break;
+        }
         if (this.params.skyComponentProperties.disabled) {
             control.disable();
         }
@@ -1019,23 +1196,33 @@ class SkyAgGridCellEditorLookupComponent {
         return this.elementRef.nativeElement;
     }
     getValue() {
-        return this.lookupForm.get('currentSelection').value;
+        return this.editorForm.get('selection').value;
     }
     isPopup() {
         return true;
     }
-    /*istanbul ignore next*/
     afterGuiAttached() {
-        var _a;
-        (_a = this.elementRef.nativeElement.querySelector('.sky-lookup-input')) === null || _a === void 0 ? void 0 : _a.focus();
+        const lookupInput = this.elementRef.nativeElement.querySelector('.sky-lookup-input');
+        lookupInput.focus();
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Replace) {
+            lookupInput.select();
+            lookupInput.setRangeText(this.params.charPress);
+            // Ensure the cursor is at the end of the text.
+            lookupInput.setSelectionRange(lookupInput.value.length, lookupInput.value.length);
+            lookupInput.dispatchEvent(new Event('input'));
+        }
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+            lookupInput.select();
+        }
     }
     updateComponentProperties(params) {
         const skyLookupProperties = params.skyComponentProperties;
         return applySkyLookupPropertiesDefaults(skyLookupProperties);
     }
 }
+_SkyAgGridCellEditorLookupComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\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  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\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  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1079,10 +1266,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+var _SkyAgGridCellEditorNumberComponent_triggerType;
 /**
  * @internal
  */
 class SkyAgGridCellEditorNumberComponent {
+    constructor() {
+        this.editorForm = new FormGroup({
+            number: new FormControl(),
+        });
+        _SkyAgGridCellEditorNumberComponent_triggerType.set(this, void 0);
+    }
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
      * @param params The cell editor params that include data about the cell, column, row, and grid.
@@ -1090,7 +1284,21 @@ class SkyAgGridCellEditorNumberComponent {
     agInit(params) {
         var _a, _b;
         this.params = params;
-        this.value = this.params.value;
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorNumberComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+        const control = this.editorForm.get('number');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorNumberComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue(undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+                control.setValue(parseFloat(this.params.charPress) || undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(params.value);
+                break;
+        }
         this.max = (_a = params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.max;
         this.min = (_b = params.skyComponentProperties) === null || _b === void 0 ? void 0 : _b.min;
         this.columnHeader = this.params.colDef.headerName;
@@ -1104,16 +1312,21 @@ class SkyAgGridCellEditorNumberComponent {
      */
     afterGuiAttached() {
         this.input.nativeElement.focus();
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorNumberComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+            this.input.nativeElement.select();
+        }
     }
     /**
      * getValue is called by agGrid when editing is stopped to get the new value of the cell.
      */
     getValue() {
-        return this.value;
+        const val = this.editorForm.get('number').value;
+        return val !== undefined && val !== null ? val : undefined;
     }
 }
+_SkyAgGridCellEditorNumberComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\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  [(ngModel)]=\"value\"\n  [max]=\"max\"\n  [min]=\"min\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\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\"\n    [min]=\"min\"\n    #skyCellEditorNumber\n  />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
             type: Component,
             args: [{
@@ -1130,21 +1343,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyAgGridCellEditorNumberModule {
 }
 SkyAgGridCellEditorNumberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridCellEditorNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, declarations: [SkyAgGridCellEditorNumberComponent], imports: [SkyAgGridResourcesModule, FormsModule], exports: [SkyAgGridCellEditorNumberComponent] });
-SkyAgGridCellEditorNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, imports: [[SkyAgGridResourcesModule, FormsModule]] });
+SkyAgGridCellEditorNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, declarations: [SkyAgGridCellEditorNumberComponent], imports: [SkyAgGridResourcesModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorNumberComponent] });
+SkyAgGridCellEditorNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, imports: [[SkyAgGridResourcesModule, ReactiveFormsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorNumberModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyAgGridResourcesModule, FormsModule],
+                    imports: [SkyAgGridResourcesModule, ReactiveFormsModule],
                     declarations: [SkyAgGridCellEditorNumberComponent],
                     exports: [SkyAgGridCellEditorNumberComponent],
                 }]
         }] });
 
+var _SkyAgGridCellEditorTextComponent_triggerType;
 /**
  * @internal
  */
 class SkyAgGridCellEditorTextComponent {
+    constructor() {
+        this.editorForm = new FormGroup({
+            text: new FormControl(),
+        });
+        _SkyAgGridCellEditorTextComponent_triggerType.set(this, void 0);
+    }
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
      * @param params The cell editor params that include data about the cell, column, row, and grid.
@@ -1152,7 +1372,21 @@ class SkyAgGridCellEditorTextComponent {
     agInit(params) {
         var _a;
         this.params = params;
-        this.value = this.params.charPress || this.params.value;
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorTextComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+        const control = this.editorForm.get('text');
+        switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorTextComponent_triggerType, "f")) {
+            case SkyAgGridCellEditorInitialAction.Delete:
+                control.setValue(undefined);
+                break;
+            case SkyAgGridCellEditorInitialAction.Replace:
+                control.setValue(params.charPress);
+                break;
+            case SkyAgGridCellEditorInitialAction.Highlighted:
+            case SkyAgGridCellEditorInitialAction.Untouched:
+            default:
+                control.setValue(params.value);
+                break;
+        }
         this.maxlength = (_a = params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.maxlength;
         this.columnHeader = this.params.colDef.headerName;
         this.rowNumber = this.params.rowIndex + 1;
@@ -1165,16 +1399,20 @@ class SkyAgGridCellEditorTextComponent {
      */
     afterGuiAttached() {
         this.input.nativeElement.focus();
+        if (__classPrivateFieldGet(this, _SkyAgGridCellEditorTextComponent_triggerType, "f") === SkyAgGridCellEditorInitialAction.Highlighted) {
+            this.input.nativeElement.select();
+        }
     }
     /**
      * getValue is called by agGrid when editing is stopped to get the new value of the cell.
      */
     getValue() {
-        return this.value;
+        return this.editorForm.get('text').value || undefined;
     }
 }
+_SkyAgGridCellEditorTextComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [maxlength]=\"maxlength\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\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.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [maxlength]=\"maxlength\"\n    #skyCellEditorText\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
             args: [{
@@ -1191,12 +1429,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyAgGridCellEditorTextModule {
 }
 SkyAgGridCellEditorTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAgGridCellEditorTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, declarations: [SkyAgGridCellEditorTextComponent], imports: [SkyAgGridResourcesModule, FormsModule], exports: [SkyAgGridCellEditorTextComponent] });
-SkyAgGridCellEditorTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, imports: [[SkyAgGridResourcesModule, FormsModule]] });
+SkyAgGridCellEditorTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, declarations: [SkyAgGridCellEditorTextComponent], imports: [SkyAgGridResourcesModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorTextComponent] });
+SkyAgGridCellEditorTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, imports: [[SkyAgGridResourcesModule, ReactiveFormsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridCellEditorTextModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SkyAgGridResourcesModule, FormsModule],
+                    imports: [SkyAgGridResourcesModule, ReactiveFormsModule],
                     declarations: [SkyAgGridCellEditorTextComponent],
                     exports: [SkyAgGridCellEditorTextComponent],
                 }]
@@ -1909,7 +2147,7 @@ class SkyAgGridService {
     getDefaultGridOptions(args) {
         var _a, _b, _c, _d, _e, _f;
         // cellClassRules can be functions or string expressions
-        const cellClassRuleTrueExpression = 'true';
+        const cellClassRuleTrueExpression = () => true;
         function getEditableFn(isUneditable) {
             return function (params) {
                 let isEditable = params.colDef.editable;
@@ -2147,5 +2385,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridCellEditorAutocompleteComponent as λ1, SkyAgGridCellRendererValidatorTooltipComponent as λ10, SkyAgGridCellValidatorTooltipComponent as λ11, SkyAgGridWrapperComponent as λ12, SkyAgGridRowDeleteDirective as λ13, SkyAgGridDataManagerAdapterDirective as λ14, SkyAgGridCellEditorLookupComponent as λ15, SkyAgGridCellRendererLookupComponent as λ16, SkyAgGridCellEditorTextComponent as λ2, SkyAgGridCellEditorCurrencyComponent as λ3, SkyAgGridCellEditorNumberComponent as λ4, SkyAgGridCellEditorDatepickerComponent as λ5, SkyAgGridRowDeleteComponent as λ6, SkyAgGridCellRendererRowSelectorComponent as λ7, SkyAgGridCellRendererCurrencyValidatorComponent as λ8, SkyAgGridCellRendererCurrencyComponent as λ9 };
+export { SkyAgGridCellEditorInitialAction, SkyAgGridCellEditorUtils, SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridCellEditorAutocompleteComponent as λ1, SkyAgGridCellRendererValidatorTooltipComponent as λ10, SkyAgGridCellValidatorTooltipComponent as λ11, SkyAgGridWrapperComponent as λ12, SkyAgGridRowDeleteDirective as λ13, SkyAgGridDataManagerAdapterDirective as λ14, SkyAgGridCellEditorLookupComponent as λ15, SkyAgGridCellRendererLookupComponent as λ16, SkyAgGridCellEditorTextComponent as λ2, SkyAgGridCellEditorCurrencyComponent as λ3, SkyAgGridCellEditorNumberComponent as λ4, SkyAgGridCellEditorDatepickerComponent as λ5, SkyAgGridRowDeleteComponent as λ6, SkyAgGridCellRendererRowSelectorComponent as λ7, SkyAgGridCellRendererCurrencyValidatorComponent as λ8, SkyAgGridCellRendererCurrencyComponent as λ9 };
 //# sourceMappingURL=skyux-ag-grid.js.map