@skyux/ag-grid 8.8.0 → 8.9.0

package/fesm2015/skyux-ag-grid.mjs

@@ -1,7 +1,7 @@
 import * as i1$3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, Optional, HostBinding, Input, inject, ChangeDetectorRef, ContentChild, Directive, ContentChildren, TemplateRef, ViewChildren, EventEmitter, Inject, Output, NgModule } from '@angular/core';
+import { Injectable, inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild, HostListener, ChangeDetectorRef, ViewEncapsulation, HostBinding, Input, Optional, ContentChild, Directive, ContentChildren, TemplateRef, ViewChildren, EventEmitter, Inject, Output, NgModule } from '@angular/core';
 import * as i1 from '@skyux/core';
 import { SkyDynamicComponentLocation, SkyMutationObserverService, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
 import * as i1$5 from '@skyux/data-manager';
@@ -10,9 +10,9 @@ import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3$2 from '@skyux/indicators';
 import { SkyStatusIndicatorModule, SkyIconModule } from '@skyux/indicators';
-import * as i2$3 from '@skyux/layout';
+import * as i2$2 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
-import * as i1$2 from '@skyux/theme';
+import * as i4 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
@@ -25,7 +25,7 @@ import * as i2 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import * as i2$1 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
-import * as i2$2 from '@skyux/datetime';
+import * as i1$2 from '@skyux/datetime';
 import { SkyDatepickerModule } from '@skyux/datetime';
 import * as i3$1 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
@@ -172,18 +172,24 @@ class SkyAgGridCellEditorUtils {
     }
 }
 
-var _SkyAgGridCellEditorAutocompleteComponent_triggerType, _SkyAgGridCellEditorAutocompleteComponent_params;
+var _SkyAgGridCellEditorAutocompleteComponent_instances, _SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen, _SkyAgGridCellEditorAutocompleteComponent_triggerType, _SkyAgGridCellEditorAutocompleteComponent_params, _SkyAgGridCellEditorAutocompleteComponent_elementRef, _SkyAgGridCellEditorAutocompleteComponent_stopEditingOnBlur;
 /**
  * @internal
  */
 class SkyAgGridCellEditorAutocompleteComponent {
     constructor() {
+        _SkyAgGridCellEditorAutocompleteComponent_instances.add(this);
         this.editorForm = new UntypedFormGroup({
             selection: new UntypedFormControl(),
         });
         this.skyComponentProperties = {};
+        _SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen.set(this, false);
         _SkyAgGridCellEditorAutocompleteComponent_triggerType.set(this, void 0);
         _SkyAgGridCellEditorAutocompleteComponent_params.set(this, void 0);
+        _SkyAgGridCellEditorAutocompleteComponent_elementRef.set(this, inject(ElementRef));
+    }
+    onBlur() {
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_instances, "m", _SkyAgGridCellEditorAutocompleteComponent_stopEditingOnBlur).call(this);
     }
     agInit(params) {
         __classPrivateFieldSet(this, _SkyAgGridCellEditorAutocompleteComponent_params, params, "f");
@@ -228,16 +234,30 @@ class SkyAgGridCellEditorAutocompleteComponent {
         const val = (_a = this.editorForm.get('selection')) === null || _a === void 0 ? void 0 : _a.value;
         return val !== undefined && val !== null ? val : undefined;
     }
+    onAutocompleteOpenChange($event) {
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen, $event, "f");
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_instances, "m", _SkyAgGridCellEditorAutocompleteComponent_stopEditingOnBlur).call(this);
+    }
 }
-_SkyAgGridCellEditorAutocompleteComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorAutocompleteComponent_params = new WeakMap();
+_SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen = new WeakMap(), _SkyAgGridCellEditorAutocompleteComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorAutocompleteComponent_params = new WeakMap(), _SkyAgGridCellEditorAutocompleteComponent_elementRef = new WeakMap(), _SkyAgGridCellEditorAutocompleteComponent_instances = new WeakSet(), _SkyAgGridCellEditorAutocompleteComponent_stopEditingOnBlur = function _SkyAgGridCellEditorAutocompleteComponent_stopEditingOnBlur() {
+    var _a, _b, _c, _d;
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen, "f") &&
+        ((_c = (_b = (_a = __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_params, "f")) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.stopEditingWhenCellsLoseFocus) &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        (_d = __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_params, "f")) === null || _d === void 0 ? void 0 : _d.api.stopEditing();
+    }
+};
 SkyAgGridCellEditorAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n  >\n    <input\n      formControlName=\"selection\"\n      skyAutocomplete\n      #skyCellEditorAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources : columnHeader : rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{border:none;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.λ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"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "blur": "onBlur()" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n    (openChange)=\"onAutocompleteOpenChange($event)\"\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"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.λ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", "openChange"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, 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    (openChange)=\"onAutocompleteOpenChange($event)\"\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"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorAutocomplete', { read: ElementRef }]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
             }] } });
 
 var _SkyAgGridCellEditorCurrencyComponent_triggerType, _SkyAgGridCellEditorCurrencyComponent_changeDetector;
@@ -333,23 +353,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['skyCellEditorCurrency', { read: ElementRef }]
             }] } });
 
-var _SkyAgGridCellEditorDatepickerComponent_params, _SkyAgGridCellEditorDatepickerComponent_triggerType, _SkyAgGridCellEditorDatepickerComponent_changeDetector, _SkyAgGridCellEditorDatepickerComponent_themeSvc;
+var _SkyAgGridCellEditorDatepickerComponent_instances, _SkyAgGridCellEditorDatepickerComponent_calendarOpen, _SkyAgGridCellEditorDatepickerComponent_params, _SkyAgGridCellEditorDatepickerComponent_triggerType, _SkyAgGridCellEditorDatepickerComponent_elementRef, _SkyAgGridCellEditorDatepickerComponent_changeDetector, _SkyAgGridCellEditorDatepickerComponent_themeSvc, _SkyAgGridCellEditorDatepickerComponent_stopEditingOnBlur;
 /**
  * @internal
  */
 class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
-    constructor(changeDetector, themeSvc) {
+    constructor() {
         super();
+        _SkyAgGridCellEditorDatepickerComponent_instances.add(this);
         this.editorForm = new UntypedFormGroup({
             date: new UntypedFormControl(),
         });
         this.skyComponentProperties = {};
+        _SkyAgGridCellEditorDatepickerComponent_calendarOpen.set(this, false);
         _SkyAgGridCellEditorDatepickerComponent_params.set(this, void 0);
         _SkyAgGridCellEditorDatepickerComponent_triggerType.set(this, void 0);
-        _SkyAgGridCellEditorDatepickerComponent_changeDetector.set(this, void 0);
-        _SkyAgGridCellEditorDatepickerComponent_themeSvc.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyAgGridCellEditorDatepickerComponent_changeDetector, changeDetector, "f");
-        __classPrivateFieldSet(this, _SkyAgGridCellEditorDatepickerComponent_themeSvc, themeSvc, "f");
+        _SkyAgGridCellEditorDatepickerComponent_elementRef.set(this, inject(ElementRef));
+        _SkyAgGridCellEditorDatepickerComponent_changeDetector.set(this, inject(ChangeDetectorRef));
+        _SkyAgGridCellEditorDatepickerComponent_themeSvc.set(this, inject(SkyThemeService, { optional: true }) || undefined);
+    }
+    onFocusOut(event) {
+        var _a;
+        if (event.target === ((_a = this.datepickerInput) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_instances, "m", _SkyAgGridCellEditorDatepickerComponent_stopEditingOnBlur).call(this);
+        }
+    }
+    onCalendarOpenChange(isOpen) {
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorDatepickerComponent_calendarOpen, isOpen, "f");
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_instances, "m", _SkyAgGridCellEditorDatepickerComponent_stopEditingOnBlur).call(this);
     }
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
@@ -434,22 +465,28 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
         return (_b = this.editorForm.get('date')) === null || _b === void 0 ? void 0 : _b.value;
     }
 }
-_SkyAgGridCellEditorDatepickerComponent_params = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_changeDetector = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_themeSvc = new WeakMap();
-SkyAgGridCellEditorDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n  >\n    <input\n      formControlName=\"date\"\n      skyDatepickerInput\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n      #skyCellEditorDatepickerInput\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\n"], dependencies: [{ kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+_SkyAgGridCellEditorDatepickerComponent_calendarOpen = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_params = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_elementRef = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_changeDetector = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_themeSvc = new WeakMap(), _SkyAgGridCellEditorDatepickerComponent_instances = new WeakSet(), _SkyAgGridCellEditorDatepickerComponent_stopEditingOnBlur = function _SkyAgGridCellEditorDatepickerComponent_stopEditingOnBlur() {
+    var _a, _b;
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_calendarOpen, "f") &&
+        ((_a = __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_params, "f")) === null || _a === void 0 ? void 0 : _a.context.gridOptions.stopEditingWhenCellsLoseFocus) &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        (_b = __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_params, "f")) === null || _b === void 0 ? void 0 : _b.api.stopEditing();
+    }
+};
+SkyAgGridCellEditorDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n    (openChange)=\"onCalendarOpenChange($event)\"\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"], dependencies: [{ kind: "component", type: i1$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "openChange"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyThemeService, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { datepickerInput: [{
+            args: [{ selector: 'sky-ag-grid-cell-editor-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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    (openChange)=\"onCalendarOpenChange($event)\"\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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { datepickerInput: [{
                 type: ViewChild,
                 args: ['skyCellEditorDatepickerInput', { read: ElementRef }]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
             }] } });
 
-var _SkyAgGridCellEditorLookupComponent_instances, _SkyAgGridCellEditorLookupComponent_params, _SkyAgGridCellEditorLookupComponent_triggerType, _SkyAgGridCellEditorLookupComponent_changeDetector, _SkyAgGridCellEditorLookupComponent_elementRef, _SkyAgGridCellEditorLookupComponent_updateComponentProperties;
+var _SkyAgGridCellEditorLookupComponent_instances, _SkyAgGridCellEditorLookupComponent_lookupOpen, _SkyAgGridCellEditorLookupComponent_params, _SkyAgGridCellEditorLookupComponent_triggerType, _SkyAgGridCellEditorLookupComponent_changeDetector, _SkyAgGridCellEditorLookupComponent_elementRef, _SkyAgGridCellEditorLookupComponent_updateComponentProperties, _SkyAgGridCellEditorLookupComponent_stopEditingOnBlur;
 /**
  * @internal
  */
@@ -464,6 +501,8 @@ class SkyAgGridCellEditorLookupComponent {
             }),
         });
         this.useAsyncSearch = false;
+        this.ariaLabel = undefined;
+        _SkyAgGridCellEditorLookupComponent_lookupOpen.set(this, false);
         _SkyAgGridCellEditorLookupComponent_params.set(this, void 0);
         _SkyAgGridCellEditorLookupComponent_triggerType.set(this, void 0);
         _SkyAgGridCellEditorLookupComponent_changeDetector.set(this, void 0);
@@ -471,14 +510,24 @@ class SkyAgGridCellEditorLookupComponent {
         __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_elementRef, elementRef, "f");
     }
+    onBlur() {
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_instances, "m", _SkyAgGridCellEditorLookupComponent_stopEditingOnBlur).call(this);
+    }
     agInit(params) {
-        var _a;
+        var _a, _b, _c;
         __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_params, params, "f");
         if (!Array.isArray(__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f").value)) {
             throw new Error(`Lookup value must be an array`);
         }
         __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_triggerType, SkyAgGridCellEditorUtils.getEditorInitialAction(params), "f");
         const control = this.editorForm.get('selection');
+        this.ariaLabel = ((_a = params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.ariaLabelledBy)
+            ? undefined
+            : ((_b = params.skyComponentProperties) === null || _b === void 0 ? void 0 : _b.ariaLabel) ||
+                params.colDef.headerName ||
+                params.colDef.headerTooltip ||
+                params.colDef.field ||
+                params.colDef.colId;
         if (control) {
             switch (__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_triggerType, "f")) {
                 case SkyAgGridCellEditorInitialAction.Delete:
@@ -491,7 +540,7 @@ class SkyAgGridCellEditorLookupComponent {
                     control.setValue(params.value);
                     break;
             }
-            if ((_a = __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f").skyComponentProperties) === null || _a === void 0 ? void 0 : _a.disabled) {
+            if ((_c = __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f").skyComponentProperties) === null || _c === void 0 ? void 0 : _c.disabled) {
                 control.disable();
             }
         }
@@ -539,19 +588,33 @@ class SkyAgGridCellEditorLookupComponent {
             lookupInput.select();
         }
     }
+    onLookupOpenChange(isOpen) {
+        __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_lookupOpen, isOpen, "f");
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_instances, "m", _SkyAgGridCellEditorLookupComponent_stopEditingOnBlur).call(this);
+    }
 }
-_SkyAgGridCellEditorLookupComponent_params = new WeakMap(), _SkyAgGridCellEditorLookupComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorLookupComponent_changeDetector = new WeakMap(), _SkyAgGridCellEditorLookupComponent_elementRef = new WeakMap(), _SkyAgGridCellEditorLookupComponent_instances = new WeakSet(), _SkyAgGridCellEditorLookupComponent_updateComponentProperties = function _SkyAgGridCellEditorLookupComponent_updateComponentProperties(params) {
+_SkyAgGridCellEditorLookupComponent_lookupOpen = new WeakMap(), _SkyAgGridCellEditorLookupComponent_params = new WeakMap(), _SkyAgGridCellEditorLookupComponent_triggerType = new WeakMap(), _SkyAgGridCellEditorLookupComponent_changeDetector = new WeakMap(), _SkyAgGridCellEditorLookupComponent_elementRef = new WeakMap(), _SkyAgGridCellEditorLookupComponent_instances = new WeakSet(), _SkyAgGridCellEditorLookupComponent_updateComponentProperties = function _SkyAgGridCellEditorLookupComponent_updateComponentProperties(params) {
     const skyLookupProperties = params.skyComponentProperties;
     return applySkyLookupPropertiesDefaults(skyLookupProperties);
+}, _SkyAgGridCellEditorLookupComponent_stopEditingOnBlur = function _SkyAgGridCellEditorLookupComponent_stopEditingOnBlur() {
+    var _a, _b, _c, _d;
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_lookupOpen, "f") &&
+        ((_c = (_b = (_a = __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f")) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.stopEditingWhenCellsLoseFocus) &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        (_d = __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f")) === null || _d === void 0 ? void 0 : _d.api.stopEditing();
+    }
 };
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\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    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { listeners: { "blur": "onBlur()" }, properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n    (openChange)=\"onLookupOpenChange($event)\"\n  >\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]=\"ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n    (openChange)=\"onLookupOpenChange($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\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    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (searchAsync)=\"skyComponentProperties?.searchAsync?.($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n    (openChange)=\"onLookupOpenChange($event)\"\n  >\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]=\"ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\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    (addClick)=\"skyComponentProperties?.addClick?.($event)\"\n    (openChange)=\"onLookupOpenChange($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
                 type: HostBinding,
                 args: ['style.width.px']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
             }] } });
 
 var _SkyAgGridCellEditorNumberComponent_params, _SkyAgGridCellEditorNumberComponent_triggerType;
@@ -1104,7 +1167,7 @@ _SkyAgGridHeaderGroupComponent_columnGroup = new WeakMap(), _SkyAgGridHeaderGrou
     }
 };
 SkyAgGridHeaderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridHeaderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridHeaderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"] }]
@@ -1251,7 +1314,7 @@ _SkyAgGridHeaderComponent_subscriptions = new WeakMap(), _SkyAgGridHeaderCompone
     }
 };
 SkyAgGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "this.columnLabel" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"ellipsis\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </span>\n  <ng-template #notSortingHeader>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n  </ng-template>\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeader\"\n        class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n        type=\"button\"\n        [innerText]=\"params?.displayName\"\n        (click)=\"onSortRequested($event)\"\n      ></button>\n      <span\n        *ngIf=\"filterEnabled$ | async\"\n        class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n        aria-hidden=\"true\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"filter\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </span>\n      <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"caret-down\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"caret-up\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <ng-container *skyThemeIf=\"'modern'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"chevron-down\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"chevron-up\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <span\n          *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n          class=\"ag-sort-indicator-icon ag-sort-order\"\n          aria-hidden=\"true\"\n          >{{ sortIndexDisplay }}</span\n        >\n      </span>\n    </span>\n    <span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "this.columnLabel" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"ellipsis\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </span>\n  <ng-template #notSortingHeader>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n  </ng-template>\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeader\"\n        class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n        type=\"button\"\n        [innerText]=\"params?.displayName\"\n        (click)=\"onSortRequested($event)\"\n      ></button>\n      <span\n        *ngIf=\"filterEnabled$ | async\"\n        class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n        aria-hidden=\"true\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"filter\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </span>\n      <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"caret-down\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"caret-up\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <ng-container *skyThemeIf=\"'modern'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"chevron-down\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"chevron-up\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <span\n          *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n          class=\"ag-sort-indicator-icon ag-sort-order\"\n          aria-hidden=\"true\"\n          >{{ sortIndexDisplay }}</span\n        >\n      </span>\n    </span>\n    <span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"ellipsis\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </span>\n  <ng-template #notSortingHeader>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n  </ng-template>\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeader\"\n        class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n        type=\"button\"\n        [innerText]=\"params?.displayName\"\n        (click)=\"onSortRequested($event)\"\n      ></button>\n      <span\n        *ngIf=\"filterEnabled$ | async\"\n        class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n        aria-hidden=\"true\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"filter\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </span>\n      <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"caret-down\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"caret-up\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <ng-container *skyThemeIf=\"'modern'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"chevron-down\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"chevron-up\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <span\n          *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n          class=\"ag-sort-indicator-icon ag-sort-order\"\n          aria-hidden=\"true\"\n          >{{ sortIndexDisplay }}</span\n        >\n      </span>\n    </span>\n    <span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"] }]
@@ -1550,6 +1613,8 @@ class SkyAgGridService {
     getEditableGridOptions(args) {
         const defaultGridOptions = __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getDefaultEditableGridOptions).call(this, args);
         const mergedGridOptions = __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_mergeGridOptions).call(this, defaultGridOptions, args.gridOptions);
+        mergedGridOptions.context || (mergedGridOptions.context = {});
+        mergedGridOptions.context.gridOptions = Object.assign({}, mergedGridOptions);
         return mergedGridOptions;
     }
     getHeaderHeight() {
@@ -1805,7 +1870,7 @@ _SkyAgGridService_keyMap = new WeakMap(), _SkyAgGridService_ngUnsubscribe = new
     var _a, _b;
     return ((_b = (_a = __classPrivateFieldGet(this, _SkyAgGridService_currentTheme, "f")) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name) === 'modern' ? 60 : 38;
 };
-SkyAgGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i1$2.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAgGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i4.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyAgGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridService, decorators: [{
             type: Injectable,
@@ -1813,7 +1878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     providedIn: 'any',
                 }]
         }], ctorParameters: function () {
-        return [{ type: SkyAgGridAdapterService }, { type: i1$2.SkyThemeService, decorators: [{
+        return [{ type: SkyAgGridAdapterService }, { type: i4.SkyThemeService, decorators: [{
                         type: Optional
                     }] }, { type: i3.SkyLibResourcesService, decorators: [{
                         type: Optional
@@ -2317,7 +2382,7 @@ SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
         ></sky-inline-delete>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
             args: [{