@skyux/ag-grid 5.10.0 → 5.11.0

package/bundles/skyux-ag-grid.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/core'), require('@skyux/data-manager'), require('@skyux/layout'), require('ag-grid-angular'), require('rxjs'), require('rxjs/operators'), require('@skyux/lookup'), require('@angular/forms'), require('@skyux/i18n'), require('@skyux/autonumeric'), require('ag-grid-community'), require('@skyux/theme'), require('@skyux/datetime'), require('@skyux/forms'), require('@skyux/popovers'), require('@skyux/indicators')) :
-    typeof define === 'function' && define.amd ? define('@skyux/ag-grid', ['exports', '@angular/common', '@angular/core', '@skyux/core', '@skyux/data-manager', '@skyux/layout', 'ag-grid-angular', 'rxjs', 'rxjs/operators', '@skyux/lookup', '@angular/forms', '@skyux/i18n', '@skyux/autonumeric', 'ag-grid-community', '@skyux/theme', '@skyux/datetime', '@skyux/forms', '@skyux/popovers', '@skyux/indicators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["ag-grid"] = {}), global.ng.common, global.ng.core, global.i1, global.i1$1, global.i1$2, global.agGridAngular, global.rxjs, global.rxjs.operators, global.i1$3, global.ng.forms, global.i3$1, global.i2, global.agGridCommunity, global.i1$5, global.i2$1, global.i1$6, global.i2$2, global.i1$7));
-})(this, (function (exports, i3, i0, i1, i1$1, i1$2, agGridAngular, rxjs, operators, i1$3, i1$4, i3$1, i2, agGridCommunity, i1$5, i2$1, i1$6, i2$2, i1$7) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/core'), require('@skyux/data-manager'), require('@skyux/layout'), require('ag-grid-angular'), require('rxjs'), require('rxjs/operators'), require('@angular/forms'), require('ag-grid-community'), require('@skyux/lookup'), require('@skyux/i18n'), require('@skyux/autonumeric'), require('@skyux/theme'), require('@skyux/datetime'), require('@skyux/forms'), require('@skyux/popovers'), require('@skyux/indicators')) :
+    typeof define === 'function' && define.amd ? define('@skyux/ag-grid', ['exports', '@angular/common', '@angular/core', '@skyux/core', '@skyux/data-manager', '@skyux/layout', 'ag-grid-angular', 'rxjs', 'rxjs/operators', '@angular/forms', 'ag-grid-community', '@skyux/lookup', '@skyux/i18n', '@skyux/autonumeric', '@skyux/theme', '@skyux/datetime', '@skyux/forms', '@skyux/popovers', '@skyux/indicators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["ag-grid"] = {}), global.ng.common, global.ng.core, global.i1, global.i1$1, global.i1$2, global.agGridAngular, global.rxjs, global.rxjs.operators, global.ng.forms, global.agGridCommunity, global.i1$4, global.i3$1, global.i2, global.i1$5, global.i2$1, global.i1$6, global.i2$2, global.i1$7));
+})(this, (function (exports, i3, i0, i1, i1$1, i1$2, agGridAngular, rxjs, operators, i1$3, agGridCommunity, i1$4, i3$1, i2, i1$5, i2$1, i1$6, i2$2, i1$7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -27,8 +27,8 @@
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
-    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
-    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$4);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
@@ -1003,35 +1003,109 @@
                     args: [agGridAngular.AgGridAngular]
                 }] } });
 
+    /** The intiial action that a cell editor should take when initialized. */
+    exports.SkyAgGridCellEditorInitialAction = void 0;
+    (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";
+    })(exports.SkyAgGridCellEditorInitialAction || (exports.SkyAgGridCellEditorInitialAction = {}));
+
+    var SkyAgGridCellEditorUtils = /** @class */ (function () {
+        function SkyAgGridCellEditorUtils() {
+        }
+        /**
+         * Gets the intiial action that a cell editor should take when initialized.
+         * @param params The editor's initializing parameters.
+         */
+        SkyAgGridCellEditorUtils.getEditorInitialAction = function (params) {
+            if (params.cellStartedEdit) {
+                if (params.keyPress === agGridCommunity.KeyCode.BACKSPACE ||
+                    params.keyPress === agGridCommunity.KeyCode.DELETE) {
+                    return exports.SkyAgGridCellEditorInitialAction.Delete;
+                }
+                else if (params.charPress) {
+                    return exports.SkyAgGridCellEditorInitialAction.Replace;
+                }
+                else {
+                    if (params.keyPress !== agGridCommunity.KeyCode.F2) {
+                        return exports.SkyAgGridCellEditorInitialAction.Highlighted;
+                    }
+                    else {
+                        return exports.SkyAgGridCellEditorInitialAction.Untouched;
+                    }
+                }
+            }
+            else {
+                return exports.SkyAgGridCellEditorInitialAction.Untouched;
+            }
+        };
+        return SkyAgGridCellEditorUtils;
+    }());
+
+    var _SkyAgGridCellEditorAutocompleteComponent_triggerType;
     /**
      * @internal
      */
     var SkyAgGridCellEditorAutocompleteComponent = /** @class */ (function () {
         function SkyAgGridCellEditorAutocompleteComponent() {
+            this.editorForm = new i1$3.FormGroup({
+                selection: new i1$3.FormControl(),
+            });
             this.skyComponentProperties = {};
+            _SkyAgGridCellEditorAutocompleteComponent_triggerType.set(this, void 0);
         }
         SkyAgGridCellEditorAutocompleteComponent.prototype.agInit = function (params) {
             this.params = params;
-            this.currentSelection = this.params.value;
+            __classPrivateFieldSet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+            var control = this.editorForm.get('selection');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue(undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.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 || {};
         };
         SkyAgGridCellEditorAutocompleteComponent.prototype.afterGuiAttached = function () {
             this.input.nativeElement.focus();
+            if (__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_triggerType, "f") === exports.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") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                this.input.nativeElement.select();
+            }
         };
         SkyAgGridCellEditorAutocompleteComponent.prototype.getValue = function () {
-            return this.currentSelection;
+            var val = this.editorForm.get('selection').value;
+            return val !== undefined && val !== null ? val : undefined;
         };
         return SkyAgGridCellEditorAutocompleteComponent;
     }());
+    _SkyAgGridCellEditorAutocompleteComponent_triggerType = new WeakMap();
     SkyAgGridCellEditorAutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$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__namespace$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1__namespace$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__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$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__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$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__namespace$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-autocomplete',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1120,23 +1194,39 @@
         return SkyAgGridCellEditorAutocompleteModule;
     }());
     SkyAgGridCellEditorAutocompleteModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellEditorAutocompleteModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, declarations: [SkyAgGridCellEditorAutocompleteComponent], imports: [i1$4.FormsModule, SkyAgGridResourcesModule, i1$3.SkyAutocompleteModule], exports: [SkyAgGridCellEditorAutocompleteComponent] });
-    SkyAgGridCellEditorAutocompleteModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, imports: [[i1$4.FormsModule, SkyAgGridResourcesModule, i1$3.SkyAutocompleteModule]] });
+    SkyAgGridCellEditorAutocompleteModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, declarations: [SkyAgGridCellEditorAutocompleteComponent], imports: [i1$3.ReactiveFormsModule,
+            SkyAgGridResourcesModule,
+            i1$4.SkyAutocompleteModule], exports: [SkyAgGridCellEditorAutocompleteComponent] });
+    SkyAgGridCellEditorAutocompleteModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, imports: [[
+                i1$3.ReactiveFormsModule,
+                SkyAgGridResourcesModule,
+                i1$4.SkyAutocompleteModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorAutocompleteModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1$4.FormsModule, SkyAgGridResourcesModule, i1$3.SkyAutocompleteModule],
+                        imports: [
+                            i1$3.ReactiveFormsModule,
+                            SkyAgGridResourcesModule,
+                            i1$4.SkyAutocompleteModule,
+                        ],
                         declarations: [SkyAgGridCellEditorAutocompleteComponent],
                         exports: [SkyAgGridCellEditorAutocompleteComponent],
                     }]
             }] });
 
+    var _SkyAgGridCellEditorCurrencyComponent_triggerType;
     /**
      * @internal
      */
     var SkyAgGridCellEditorCurrencyComponent = /** @class */ (function () {
-        function SkyAgGridCellEditorCurrencyComponent() {
+        function SkyAgGridCellEditorCurrencyComponent(changeDetector) {
+            this.changeDetector = changeDetector;
             this.skyComponentProperties = {};
+            this.editorForm = new i1$3.FormGroup({
+                currency: new i1$3.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.
@@ -1144,7 +1234,6 @@
          */
         SkyAgGridCellEditorCurrencyComponent.prototype.agInit = function (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();
@@ -1159,13 +1248,39 @@
          * 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.
          */
         SkyAgGridCellEditorCurrencyComponent.prototype.afterGuiAttached = function () {
+            var _this = this;
             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");
+            var control = this.editorForm.get('currency');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorCurrencyComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue(undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                    control.setValue(parseFloat(this.params.charPress) || undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.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(function () {
+                if (__classPrivateFieldGet(_this, _SkyAgGridCellEditorCurrencyComponent_triggerType, "f") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                    _this.input.nativeElement.select();
+                }
+            }, 100);
         };
         /**
          * getValue is called by agGrid when editing is stopped to get the new value of the cell.
          */
         SkyAgGridCellEditorCurrencyComponent.prototype.getValue = function () {
-            return this.value;
+            var 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.
@@ -1176,17 +1291,18 @@
         };
         return SkyAgGridCellEditorCurrencyComponent;
     }());
-    SkyAgGridCellEditorCurrencyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$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__namespace.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    _SkyAgGridCellEditorCurrencyComponent_triggerType = new WeakMap();
+    SkyAgGridCellEditorCurrencyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$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__namespace.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-currency',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], propDecorators: { input: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { input: [{
                     type: i0.ViewChild,
                     args: ['skyCellEditorCurrency', { read: i0.ElementRef }]
                 }] } });
@@ -1197,26 +1313,42 @@
         return SkyAgGridCellEditorCurrencyModule;
     }());
     SkyAgGridCellEditorCurrencyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellEditorCurrencyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, declarations: [SkyAgGridCellEditorCurrencyComponent], imports: [SkyAgGridResourcesModule, i1$4.FormsModule, i2.SkyAutonumericModule], exports: [SkyAgGridCellEditorCurrencyComponent] });
-    SkyAgGridCellEditorCurrencyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, imports: [[SkyAgGridResourcesModule, i1$4.FormsModule, i2.SkyAutonumericModule]] });
+    SkyAgGridCellEditorCurrencyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, declarations: [SkyAgGridCellEditorCurrencyComponent], imports: [SkyAgGridResourcesModule,
+            i1$3.ReactiveFormsModule,
+            i2.SkyAutonumericModule], exports: [SkyAgGridCellEditorCurrencyComponent] });
+    SkyAgGridCellEditorCurrencyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, imports: [[
+                SkyAgGridResourcesModule,
+                i1$3.ReactiveFormsModule,
+                i2.SkyAutonumericModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [SkyAgGridResourcesModule, i1$4.FormsModule, i2.SkyAutonumericModule],
+                        imports: [
+                            SkyAgGridResourcesModule,
+                            i1$3.ReactiveFormsModule,
+                            i2.SkyAutonumericModule,
+                        ],
                         declarations: [SkyAgGridCellEditorCurrencyComponent],
                         exports: [SkyAgGridCellEditorCurrencyComponent],
                     }]
             }] });
 
+    var _SkyAgGridCellEditorDatepickerComponent_triggerType;
     /**
      * @internal
      */
     var SkyAgGridCellEditorDatepickerComponent = /** @class */ (function (_super) {
         __extends(SkyAgGridCellEditorDatepickerComponent, _super);
-        function SkyAgGridCellEditorDatepickerComponent(themeSvc) {
+        function SkyAgGridCellEditorDatepickerComponent(changeDetector, themeSvc) {
             var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
             _this.themeSvc = themeSvc;
+            _this.editorForm = new i1$3.FormGroup({
+                date: new i1$3.FormControl(),
+            });
             _this.skyComponentProperties = {};
+            _SkyAgGridCellEditorDatepickerComponent_triggerType.set(_this, void 0);
             return _this;
         }
         /**
@@ -1225,15 +1357,33 @@
          */
         SkyAgGridCellEditorDatepickerComponent.prototype.agInit = function (params) {
             var _this = this;
-            var _a;
+            var _a, _b;
             this.params = params;
-            this.currentDate = this.params.value;
+            __classPrivateFieldSet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+            var control = this.editorForm.get('date');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue(undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                    control.setValue(params.charPress);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.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(function (themeSettings) {
+            (_b = this.themeSvc) === null || _b === void 0 ? void 0 : _b.settingsChange.subscribe(function (themeSettings) {
                 if (themeSettings.currentSettings.theme.name === 'modern') {
                     _this.columnWidthWithoutBorders = _this.columnWidth;
                     _this.rowHeightWithoutBorders =
@@ -1250,33 +1400,50 @@
          * 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.
          */
         SkyAgGridCellEditorDatepickerComponent.prototype.afterGuiAttached = function () {
-            this.focusOnDatepickerInput();
+            var 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") === exports.SkyAgGridCellEditorInitialAction.Replace) {
+                rxjs.fromEvent(datepickerInputEl, 'blur')
+                    .pipe(operators.first())
+                    .subscribe(function () {
+                    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") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                datepickerInputEl.select();
+            }
         };
         /**
          * getValue is called by agGrid when editing is stopped to get the new value of the cell.
          */
         SkyAgGridCellEditorDatepickerComponent.prototype.getValue = function () {
             this.datepickerInput.nativeElement.blur();
-            return this.currentDate;
-        };
-        SkyAgGridCellEditorDatepickerComponent.prototype.focusOnDatepickerInput = function () {
-            this.datepickerInput.nativeElement.focus();
+            return this.editorForm.get('date').value;
         };
         return SkyAgGridCellEditorDatepickerComponent;
     }(agGridCommunity.PopupComponent));
-    SkyAgGridCellEditorDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i1__namespace$5.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1__namespace$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__namespace$1.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    _SkyAgGridCellEditorDatepickerComponent_triggerType = new WeakMap();
+    SkyAgGridCellEditorDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$5.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$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__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$1.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-datepicker',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i1__namespace$5.SkyThemeService, decorators: [{
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$5.SkyThemeService, decorators: [{
                             type: i0.Optional
                         }] }];
         }, propDecorators: { datepickerInput: [{
@@ -1290,12 +1457,12 @@
         return SkyAgGridCellEditorDatepickerModule;
     }());
     SkyAgGridCellEditorDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellEditorDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, declarations: [SkyAgGridCellEditorDatepickerComponent], imports: [i2$1.SkyDatepickerModule, i1$4.FormsModule], exports: [SkyAgGridCellEditorDatepickerComponent] });
-    SkyAgGridCellEditorDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, imports: [[i2$1.SkyDatepickerModule, i1$4.FormsModule]] });
+    SkyAgGridCellEditorDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, declarations: [SkyAgGridCellEditorDatepickerComponent], imports: [i2$1.SkyDatepickerModule, i1$3.ReactiveFormsModule], exports: [SkyAgGridCellEditorDatepickerComponent] });
+    SkyAgGridCellEditorDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, imports: [[i2$1.SkyDatepickerModule, i1$3.ReactiveFormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorDatepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i2$1.SkyDatepickerModule, i1$4.FormsModule],
+                        imports: [i2$1.SkyDatepickerModule, i1$3.ReactiveFormsModule],
                         declarations: [SkyAgGridCellEditorDatepickerComponent],
                         exports: [SkyAgGridCellEditorDatepickerComponent],
                     }]
@@ -1330,6 +1497,7 @@
         };
     }
 
+    var _SkyAgGridCellEditorLookupComponent_triggerType;
     /**
      * @internal
      */
@@ -1338,13 +1506,14 @@
             this.changeDetector = changeDetector;
             this.elementRef = elementRef;
             this.isAlive = false;
-            this.lookupForm = new i1$4.FormGroup({
-                currentSelection: new i1$4.FormControl({
+            this.editorForm = new i1$3.FormGroup({
+                selection: new i1$3.FormControl({
                     value: [],
                     disabled: false,
                 }),
             });
             this.useAsyncSearch = false;
+            _SkyAgGridCellEditorLookupComponent_triggerType.set(this, void 0);
         }
         SkyAgGridCellEditorLookupComponent.prototype.agInit = function (params) {
             var _this = this;
@@ -1352,8 +1521,19 @@
             if (!Array.isArray(this.params.value)) {
                 throw new Error("Lookup value must be an array");
             }
-            var control = this.lookupForm.get('currentSelection');
-            control.setValue(this.params.value);
+            __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+            var control = this.editorForm.get('selection');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue([]);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.SkyAgGridCellEditorInitialAction.Untouched:
+                default:
+                    control.setValue(params.value);
+                    break;
+            }
             if (this.params.skyComponentProperties.disabled) {
                 control.disable();
             }
@@ -1378,15 +1558,24 @@
             return this.elementRef.nativeElement;
         };
         SkyAgGridCellEditorLookupComponent.prototype.getValue = function () {
-            return this.lookupForm.get('currentSelection').value;
+            return this.editorForm.get('selection').value;
         };
         SkyAgGridCellEditorLookupComponent.prototype.isPopup = function () {
             return true;
         };
-        /*istanbul ignore next*/
         SkyAgGridCellEditorLookupComponent.prototype.afterGuiAttached = function () {
-            var _a;
-            (_a = this.elementRef.nativeElement.querySelector('.sky-lookup-input')) === null || _a === void 0 ? void 0 : _a.focus();
+            var lookupInput = this.elementRef.nativeElement.querySelector('.sky-lookup-input');
+            lookupInput.focus();
+            if (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f") === exports.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") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                lookupInput.select();
+            }
         };
         SkyAgGridCellEditorLookupComponent.prototype.updateComponentProperties = function (params) {
             var skyLookupProperties = params.skyComponentProperties;
@@ -1394,13 +1583,14 @@
         };
         return SkyAgGridCellEditorLookupComponent;
     }());
+    _SkyAgGridCellEditorLookupComponent_triggerType = new WeakMap();
     SkyAgGridCellEditorLookupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorLookupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1__namespace$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorLookupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1__namespace$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-lookup',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1416,16 +1606,16 @@
     }());
     SkyAgGridCellEditorLookupModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     SkyAgGridCellEditorLookupModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupModule, declarations: [SkyAgGridCellEditorLookupComponent], imports: [i3.CommonModule,
-            i1$4.ReactiveFormsModule,
+            i1$3.ReactiveFormsModule,
             i3$1.SkyI18nModule,
             i1$6.SkyInputBoxModule,
-            i1$3.SkyLookupModule], exports: [SkyAgGridCellEditorLookupComponent] });
+            i1$4.SkyLookupModule], exports: [SkyAgGridCellEditorLookupComponent] });
     SkyAgGridCellEditorLookupModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupModule, imports: [[
                 i3.CommonModule,
-                i1$4.ReactiveFormsModule,
+                i1$3.ReactiveFormsModule,
                 i3$1.SkyI18nModule,
                 i1$6.SkyInputBoxModule,
-                i1$3.SkyLookupModule,
+                i1$4.SkyLookupModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorLookupModule, decorators: [{
                 type: i0.NgModule,
@@ -1434,19 +1624,24 @@
                         exports: [SkyAgGridCellEditorLookupComponent],
                         imports: [
                             i3.CommonModule,
-                            i1$4.ReactiveFormsModule,
+                            i1$3.ReactiveFormsModule,
                             i3$1.SkyI18nModule,
                             i1$6.SkyInputBoxModule,
-                            i1$3.SkyLookupModule,
+                            i1$4.SkyLookupModule,
                         ],
                     }]
             }] });
 
+    var _SkyAgGridCellEditorNumberComponent_triggerType;
     /**
      * @internal
      */
     var SkyAgGridCellEditorNumberComponent = /** @class */ (function () {
         function SkyAgGridCellEditorNumberComponent() {
+            this.editorForm = new i1$3.FormGroup({
+                number: new i1$3.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.
@@ -1455,7 +1650,21 @@
         SkyAgGridCellEditorNumberComponent.prototype.agInit = function (params) {
             var _a, _b;
             this.params = params;
-            this.value = this.params.value;
+            __classPrivateFieldSet(this, _SkyAgGridCellEditorNumberComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+            var control = this.editorForm.get('number');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorNumberComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue(undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                    control.setValue(parseFloat(this.params.charPress) || undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.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;
@@ -1469,22 +1678,27 @@
          */
         SkyAgGridCellEditorNumberComponent.prototype.afterGuiAttached = function () {
             this.input.nativeElement.focus();
+            if (__classPrivateFieldGet(this, _SkyAgGridCellEditorNumberComponent_triggerType, "f") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                this.input.nativeElement.select();
+            }
         };
         /**
          * getValue is called by agGrid when editing is stopped to get the new value of the cell.
          */
         SkyAgGridCellEditorNumberComponent.prototype.getValue = function () {
-            return this.value;
+            var val = this.editorForm.get('number').value;
+            return val !== undefined && val !== null ? val : undefined;
         };
         return SkyAgGridCellEditorNumberComponent;
     }());
+    _SkyAgGridCellEditorNumberComponent_triggerType = new WeakMap();
     SkyAgGridCellEditorNumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorNumberComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1__namespace$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$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__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorNumberComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$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__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1__namespace$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-number',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1499,22 +1713,27 @@
         return SkyAgGridCellEditorNumberModule;
     }());
     SkyAgGridCellEditorNumberModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellEditorNumberModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, declarations: [SkyAgGridCellEditorNumberComponent], imports: [SkyAgGridResourcesModule, i1$4.FormsModule], exports: [SkyAgGridCellEditorNumberComponent] });
-    SkyAgGridCellEditorNumberModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, imports: [[SkyAgGridResourcesModule, i1$4.FormsModule]] });
+    SkyAgGridCellEditorNumberModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, declarations: [SkyAgGridCellEditorNumberComponent], imports: [SkyAgGridResourcesModule, i1$3.ReactiveFormsModule], exports: [SkyAgGridCellEditorNumberComponent] });
+    SkyAgGridCellEditorNumberModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, imports: [[SkyAgGridResourcesModule, i1$3.ReactiveFormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [SkyAgGridResourcesModule, i1$4.FormsModule],
+                        imports: [SkyAgGridResourcesModule, i1$3.ReactiveFormsModule],
                         declarations: [SkyAgGridCellEditorNumberComponent],
                         exports: [SkyAgGridCellEditorNumberComponent],
                     }]
             }] });
 
+    var _SkyAgGridCellEditorTextComponent_triggerType;
     /**
      * @internal
      */
     var SkyAgGridCellEditorTextComponent = /** @class */ (function () {
         function SkyAgGridCellEditorTextComponent() {
+            this.editorForm = new i1$3.FormGroup({
+                text: new i1$3.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.
@@ -1523,7 +1742,21 @@
         SkyAgGridCellEditorTextComponent.prototype.agInit = function (params) {
             var _a;
             this.params = params;
-            this.value = this.params.charPress || this.params.value;
+            __classPrivateFieldSet(this, _SkyAgGridCellEditorTextComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
+            var control = this.editorForm.get('text');
+            switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorTextComponent_triggerType, "f")) {
+                case exports.SkyAgGridCellEditorInitialAction.Delete:
+                    control.setValue(undefined);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Replace:
+                    control.setValue(params.charPress);
+                    break;
+                case exports.SkyAgGridCellEditorInitialAction.Highlighted:
+                case exports.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;
@@ -1536,22 +1769,26 @@
          */
         SkyAgGridCellEditorTextComponent.prototype.afterGuiAttached = function () {
             this.input.nativeElement.focus();
+            if (__classPrivateFieldGet(this, _SkyAgGridCellEditorTextComponent_triggerType, "f") === exports.SkyAgGridCellEditorInitialAction.Highlighted) {
+                this.input.nativeElement.select();
+            }
         };
         /**
          * getValue is called by agGrid when editing is stopped to get the new value of the cell.
          */
         SkyAgGridCellEditorTextComponent.prototype.getValue = function () {
-            return this.value;
+            return this.editorForm.get('text').value || undefined;
         };
         return SkyAgGridCellEditorTextComponent;
     }());
+    _SkyAgGridCellEditorTextComponent_triggerType = new WeakMap();
     SkyAgGridCellEditorTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorTextComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$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__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorTextComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }], ngImport: i0__namespace, 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__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$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__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-text',
-                        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",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1566,12 +1803,12 @@
         return SkyAgGridCellEditorTextModule;
     }());
     SkyAgGridCellEditorTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellEditorTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, declarations: [SkyAgGridCellEditorTextComponent], imports: [SkyAgGridResourcesModule, i1$4.FormsModule], exports: [SkyAgGridCellEditorTextComponent] });
-    SkyAgGridCellEditorTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, imports: [[SkyAgGridResourcesModule, i1$4.FormsModule]] });
+    SkyAgGridCellEditorTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, declarations: [SkyAgGridCellEditorTextComponent], imports: [SkyAgGridResourcesModule, i1$3.ReactiveFormsModule], exports: [SkyAgGridCellEditorTextComponent] });
+    SkyAgGridCellEditorTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, imports: [[SkyAgGridResourcesModule, i1$3.ReactiveFormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [SkyAgGridResourcesModule, i1$4.FormsModule],
+                        imports: [SkyAgGridResourcesModule, i1$3.ReactiveFormsModule],
                         declarations: [SkyAgGridCellEditorTextComponent],
                         exports: [SkyAgGridCellEditorTextComponent],
                     }]
@@ -1792,14 +2029,14 @@
             SkyAgGridCellRendererCurrencyValidatorComponent], imports: [i3.CommonModule,
             SkyAgGridResourcesModule,
             SkyAgGridCellValidatorModule,
-            i1$4.FormsModule,
+            i1$3.FormsModule,
             i1.SkyNumericModule], exports: [SkyAgGridCellRendererCurrencyComponent,
             SkyAgGridCellRendererCurrencyValidatorComponent] });
     SkyAgGridCellRendererCurrencyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererCurrencyModule, imports: [[
                 i3.CommonModule,
                 SkyAgGridResourcesModule,
                 SkyAgGridCellValidatorModule,
-                i1$4.FormsModule,
+                i1$3.FormsModule,
                 i1.SkyNumericModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererCurrencyModule, decorators: [{
@@ -1809,7 +2046,7 @@
                             i3.CommonModule,
                             SkyAgGridResourcesModule,
                             SkyAgGridCellValidatorModule,
-                            i1$4.FormsModule,
+                            i1$3.FormsModule,
                             i1.SkyNumericModule,
                         ],
                         declarations: [
@@ -1944,12 +2181,12 @@
         return SkyAgGridCellRendererRowSelectorModule;
     }());
     SkyAgGridCellRendererRowSelectorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyAgGridCellRendererRowSelectorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, declarations: [SkyAgGridCellRendererRowSelectorComponent], imports: [SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$4.FormsModule], exports: [SkyAgGridCellRendererRowSelectorComponent] });
-    SkyAgGridCellRendererRowSelectorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, imports: [[SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$4.FormsModule]] });
+    SkyAgGridCellRendererRowSelectorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, declarations: [SkyAgGridCellRendererRowSelectorComponent], imports: [SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$3.FormsModule], exports: [SkyAgGridCellRendererRowSelectorComponent] });
+    SkyAgGridCellRendererRowSelectorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, imports: [[SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$3.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellRendererRowSelectorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$4.FormsModule],
+                        imports: [SkyAgGridResourcesModule, i1$6.SkyCheckboxModule, i1$3.FormsModule],
                         declarations: [SkyAgGridCellRendererRowSelectorComponent],
                         exports: [SkyAgGridCellRendererRowSelectorComponent],
                     }]
@@ -2331,7 +2568,7 @@
             var _this = this;
             var _a, _b, _c, _d, _e, _f;
             // cellClassRules can be functions or string expressions
-            var cellClassRuleTrueExpression = 'true';
+            var cellClassRuleTrueExpression = function () { return true; };
             function getEditableFn(isUneditable) {
                 return function (params) {
                     var isEditable = params.colDef.editable;
@@ -2573,6 +2810,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.SkyAgGridCellEditorUtils = SkyAgGridCellEditorUtils;
     exports.SkyAgGridModule = SkyAgGridModule;
     exports.SkyAgGridService = SkyAgGridService;
     exports["λ1"] = SkyAgGridCellEditorAutocompleteComponent;