@skyux/ag-grid 8.8.0 → 8.8.1

package/fesm2020/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");
@@ -226,16 +232,29 @@ class SkyAgGridCellEditorAutocompleteComponent {
         const val = this.editorForm.get('selection')?.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() {
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_autocompleteOpen, "f") &&
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_params, "f")?.context?.gridOptions?.stopEditingWhenCellsLoseFocus &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorAutocompleteComponent_params, "f")?.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;
@@ -327,23 +346,33 @@ 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) {
+        if (event.target === this.datepickerInput?.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.
@@ -424,20 +453,27 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
         return this.editorForm.get('date')?.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() {
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_calendarOpen, "f") &&
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_params, "f")?.context.gridOptions.stopEditingWhenCellsLoseFocus &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorDatepickerComponent_params, "f")?.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
  */
@@ -452,6 +488,7 @@ class SkyAgGridCellEditorLookupComponent {
             }),
         });
         this.useAsyncSearch = false;
+        _SkyAgGridCellEditorLookupComponent_lookupOpen.set(this, false);
         _SkyAgGridCellEditorLookupComponent_params.set(this, void 0);
         _SkyAgGridCellEditorLookupComponent_triggerType.set(this, void 0);
         _SkyAgGridCellEditorLookupComponent_changeDetector.set(this, void 0);
@@ -459,6 +496,9 @@ 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) {
         __classPrivateFieldSet(this, _SkyAgGridCellEditorLookupComponent_params, params, "f");
         if (!Array.isArray(__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f").value)) {
@@ -523,19 +563,32 @@ 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() {
+    if (!__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_lookupOpen, "f") &&
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f")?.context?.gridOptions?.stopEditingWhenCellsLoseFocus &&
+        !__classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+        __classPrivateFieldGet(this, _SkyAgGridCellEditorLookupComponent_params, "f")?.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]=\"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    (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]=\"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    (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]=\"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    (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]=\"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    (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;
@@ -1076,7 +1129,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"] }]
@@ -1217,7 +1270,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"] }]
@@ -1518,6 +1571,10 @@ 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 = {
+            ...mergedGridOptions,
+        };
         return mergedGridOptions;
     }
     getHeaderHeight() {
@@ -1831,14 +1888,14 @@ _SkyAgGridService_keyMap = new WeakMap(), _SkyAgGridService_ngUnsubscribe = new
 }, _SkyAgGridService_getRowHeight = function _SkyAgGridService_getRowHeight() {
     return __classPrivateFieldGet(this, _SkyAgGridService_currentTheme, "f")?.theme?.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,
             args: [{
                     providedIn: 'any',
                 }]
-        }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i1$2.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i4.SkyThemeService, decorators: [{
                     type: Optional
                 }] }, { type: i3.SkyLibResourcesService, decorators: [{
                     type: Optional
@@ -2336,7 +2393,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: [{