@skyux/ag-grid 6.14.0 → 6.17.0

package/fesm2015/skyux-ag-grid.mjs

@@ -1,4 +1,4 @@
-import * as i3 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, ContentChild, Directive, Input, ContentChildren, TemplateRef, ViewChildren, ViewChild, EventEmitter, Output, NgModule, ElementRef, ViewEncapsulation, Optional, HostBinding } from '@angular/core';
@@ -11,24 +11,24 @@ import { SkyInlineDeleteModule } from '@skyux/layout';
 import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, first } from 'rxjs/operators';
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i1$4 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$3 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
-import * as i3$1 from '@skyux/i18n';
+import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { KeyCode, PopupComponent, Events, RowNode } from 'ag-grid-community';
-import * as i2 from '@skyux/autonumeric';
+import * as i2$1 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
-import * as i2$1 from '@skyux/datetime';
+import * as i2$2 from '@skyux/datetime';
 import { SkyDatepickerModule } from '@skyux/datetime';
 import * as i1$5 from '@skyux/theme';
 import * as i1$6 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import * as i1$7 from '@skyux/indicators';
 import { SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i2$2 from '@skyux/popovers';
+import * as i2$3 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 
 class SkyAgGridAdapterService {
@@ -102,9 +102,15 @@ class SkyAgGridWrapperComponent {
         this.changeDetector.markForCheck();
     }
     ngAfterContentInit() {
+        var _a;
         if (this.agGrid.gridOptions &&
             this.agGrid.gridOptions.domLayout === 'autoHeight') {
-            this.viewkeeperClasses.push('.ag-header');
+            if ((_a = this.agGrid.gridOptions.context) === null || _a === void 0 ? void 0 : _a.enableTopScroll) {
+                this.viewkeeperClasses.push('.ag-header', '.ag-body-horizontal-scroll');
+            }
+            else {
+                this.viewkeeperClasses.push('.ag-header');
+            }
         }
     }
     /**
@@ -161,10 +167,10 @@ class SkyAgGridWrapperComponent {
     }
 }
 SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", directives: [{ type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  [ngClass]=\"{\n    'sky-ag-grid-top-scrollbar':\n      agGrid?.gridOptions?.context &&\n      agGrid?.gridOptions?.context['enableTopScroll']\n  }\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
+            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  [ngClass]=\"{\n    'sky-ag-grid-top-scrollbar':\n      agGrid?.gridOptions?.context &&\n      agGrid?.gridOptions?.context['enableTopScroll']\n  }\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
         }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
@@ -172,70 +178,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     }]
             }] } });
 
-var _SkyAgGridTopScrollService_mutationObserver, _SkyAgGridTopScrollService_mutationObserverSvc;
-// css class selectors
-const HEADER_SELECTOR = '.ag-header';
-const SCROLL_SELECTOR = '.ag-body-horizontal-scroll';
-const SCROLL_VIEWPORT_SELECTOR = '.ag-body-horizontal-scroll-viewport';
-const SCROLL_CONTAINER_SELECTOR = '.ag-body-horizontal-scroll-container';
-class SkyAgGridTopScrollService {
-    constructor(mutationObserverSvc) {
-        _SkyAgGridTopScrollService_mutationObserver.set(this, void 0);
-        _SkyAgGridTopScrollService_mutationObserverSvc.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyAgGridTopScrollService_mutationObserverSvc, mutationObserverSvc, "f");
-    }
-    ngOnDestroy() {
-        if (__classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f")) {
-            __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f").disconnect();
-        }
-    }
-    appendTopScrollbarToGrid(elementRef) {
-        // get scrollbar elements
-        const scrollElement = elementRef.nativeElement.querySelector(SCROLL_SELECTOR);
-        const scrollViewportElement = elementRef.nativeElement.querySelector(SCROLL_VIEWPORT_SELECTOR);
-        const scrollContainerElement = elementRef.nativeElement.querySelector(SCROLL_CONTAINER_SELECTOR);
-        // create scrollbar clones
-        const cloneElement = scrollElement.cloneNode(true);
-        const cloneViewportElement = cloneElement.querySelector(SCROLL_VIEWPORT_SELECTOR);
-        const cloneContainerElement = cloneElement.querySelector(SCROLL_CONTAINER_SELECTOR);
-        // insert scrollbar clone
-        const headerElement = elementRef.nativeElement.querySelector(HEADER_SELECTOR);
-        headerElement.insertAdjacentElement('afterend', cloneElement);
-        // add event listeners to keep scroll position synchronized
-        scrollViewportElement.addEventListener('scroll', () => cloneViewportElement.scrollTo({ left: scrollViewportElement.scrollLeft }));
-        cloneViewportElement.addEventListener('scroll', () => scrollViewportElement.scrollTo({ left: cloneViewportElement.scrollLeft }));
-        __classPrivateFieldSet(this, _SkyAgGridTopScrollService_mutationObserver, __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserverSvc, "f").create(() => {
-            // Maintain viewkeeper scroll position when the grid is resized, but update the scrollbar size
-            cloneElement.style.width = `${scrollElement.style.width}`;
-            cloneViewportElement.setAttribute('style', scrollViewportElement.getAttribute('style'));
-            cloneContainerElement.setAttribute('style', scrollContainerElement.getAttribute('style'));
-        }), "f");
-        // start observing the scroll elements for `style` attribute changes
-        __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f").observe(scrollElement, {
-            attributeFilter: ['style'],
-            subtree: true,
-        });
-    }
-}
-_SkyAgGridTopScrollService_mutationObserver = new WeakMap(), _SkyAgGridTopScrollService_mutationObserverSvc = new WeakMap();
-SkyAgGridTopScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, deps: [{ token: i1.MutationObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAgGridTopScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.MutationObserverService }]; } });
-
 /**
  * @internal
  */
 class SkyAgGridDataManagerAdapterDirective {
-    constructor(changeDetector, dataManagerSvc, elementRef, topScrollSvc) {
+    constructor(changeDetector, dataManagerSvc) {
         this.changeDetector = changeDetector;
         this.dataManagerSvc = dataManagerSvc;
-        this.elementRef = elementRef;
-        this.topScrollSvc = topScrollSvc;
         this.ngUnsubscribe = new Subject();
     }
     ngAfterContentInit() {
@@ -316,7 +265,6 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.displayColumns(dataState);
             });
             if ((_a = agGrid.gridOptions.context) === null || _a === void 0 ? void 0 : _a.enableTopScroll) {
-                this.topScrollSvc.appendTopScrollbarToGrid(this.elementRef);
                 this.dataManagerSvc.setViewkeeperClasses(this.viewId, [
                     '.ag-header',
                     '.ag-body-horizontal-scroll',
@@ -421,14 +369,14 @@ class SkyAgGridDataManagerAdapterDirective {
         agGrid.api.deselectAll();
     }
 }
-SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }, { token: i0.ElementRef }, { token: SkyAgGridTopScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
 SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridDataManagerAdapter]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }, { type: i0.ElementRef }, { type: SkyAgGridTopScrollService }]; }, propDecorators: { viewId: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }]; }, propDecorators: { viewId: [{
                 type: Input
             }], agGridList: [{
                 type: ContentChildren,
@@ -471,7 +419,7 @@ SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         ></sky-inline-delete>
       </div>
     </ng-template>
-  `, isInline: true, components: [{ type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+  `, isInline: true, components: [{ type: i1$2.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -885,7 +833,7 @@ class SkyAgGridCellEditorAutocompleteComponent {
 }
 _SkyAgGridCellEditorAutocompleteComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n  >\n    <input\n      formControlName=\"selection\"\n      skyAutocomplete\n      #skyCellEditorAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader:rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{border:none;box-shadow:none}\n"], components: [{ type: i1$3.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n  <sky-autocomplete\n    [data]=\"skyComponentProperties.data\"\n    [debounceTime]=\"skyComponentProperties.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n    [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n    [search]=\"skyComponentProperties.search\"\n    [searchFilters]=\"skyComponentProperties.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties.searchTextMinimumCharacters\n    \"\n    (selectionChange)=\"\n      skyComponentProperties.selectionChange &&\n        skyComponentProperties.selectionChange($event)\n    \"\n  >\n    <input\n      formControlName=\"selection\"\n      skyAutocomplete\n      #skyCellEditorAutocomplete\n      type=\"text\"\n      [attr.aria-label]=\"\n        'sky_ag_grid_cell_editor_autocomplete_aria_label'\n          | skyLibResources: columnHeader:rowNumber\n      \"\n    />\n  </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{border:none;box-shadow:none}\n"], components: [{ type: i1$3.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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"] }]
@@ -994,7 +942,7 @@ class SkyAgGridCellEditorCurrencyComponent {
 }
 _SkyAgGridCellEditorCurrencyComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"currency\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"!!params?.charPress\"\n    (keyup.escape)=\"onPressEscape()\"\n    #skyCellEditorCurrency\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"currency\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"!!params?.charPress\"\n    (keyup.escape)=\"onPressEscape()\"\n    #skyCellEditorCurrency\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"currency\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_currency_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [skyAutonumeric]=\"skyComponentProperties\"\n    [skyAutonumericFormChangesUnformatted]=\"!!params?.charPress\"\n    (keyup.escape)=\"onPressEscape()\"\n    #skyCellEditorCurrency\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
@@ -1121,7 +1069,7 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
 }
 _SkyAgGridCellEditorDatepickerComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n  >\n    <input\n      formControlName=\"date\"\n      skyDatepickerInput\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n      #skyCellEditorDatepickerInput\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\n"], components: [{ type: i2$1.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SkyAgGridCellEditorDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sky-ag-grid-cell-editor-datepicker\"\n  [formGroup]=\"editorForm\"\n  [style.width.px]=\"columnWidthWithoutBorders\"\n>\n  <sky-datepicker\n    data-sky-id=\"cell-datepicker\"\n    pickerClass=\"ag-custom-component-popup\"\n  >\n    <input\n      formControlName=\"date\"\n      skyDatepickerInput\n      [minDate]=\"skyComponentProperties.minDate\"\n      [maxDate]=\"skyComponentProperties.maxDate\"\n      [dateFormat]=\"skyComponentProperties.dateFormat\"\n      [startingDay]=\"skyComponentProperties.startingDay\"\n      [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n      [style.height.px]=\"rowHeightWithoutBorders\"\n      #skyCellEditorDatepickerInput\n    />\n  </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\n"], components: [{ type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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"] }]
@@ -1263,7 +1211,7 @@ class SkyAgGridCellEditorLookupComponent {
 }
 _SkyAgGridCellEditorLookupComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
@@ -1362,7 +1310,7 @@ class SkyAgGridCellEditorNumberComponent {
 }
 _SkyAgGridCellEditorNumberComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max\"\n    [min]=\"min\"\n    #skyCellEditorNumber\n  />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max\"\n    [min]=\"min\"\n    #skyCellEditorNumber\n  />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"number\"\n    type=\"number\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_number_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [max]=\"max\"\n    [min]=\"min\"\n    #skyCellEditorNumber\n  />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"] }]
@@ -1443,7 +1391,7 @@ class SkyAgGridCellEditorTextComponent {
 }
 _SkyAgGridCellEditorTextComponent_triggerType = new WeakMap();
 SkyAgGridCellEditorTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [maxlength]=\"maxlength\"\n    #skyCellEditorText\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [maxlength]=\"maxlength\"\n    #skyCellEditorText\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n  <input\n    formControlName=\"text\"\n    type=\"text\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_cell_editor_text_aria_label'\n        | skyLibResources: columnHeader:rowNumber\n    \"\n    [style.width.px]=\"columnWidth\"\n    [style.height.px]=\"rowHeightWithoutBorders\"\n    [maxlength]=\"maxlength\"\n    #skyCellEditorText\n  />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
@@ -1536,7 +1484,7 @@ class SkyAgGridCellValidatorTooltipComponent {
     }
 }
 SkyAgGridCellValidatorTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], components: [{ type: i1$7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i2$2.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }], directives: [{ type: i2$2.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], components: [{ type: i1$7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i2$3.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }], directives: [{ type: i2$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"] }]
@@ -1595,7 +1543,7 @@ class SkyAgGridCellRendererCurrencyComponent {
     }
 }
 SkyAgGridCellRendererCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "<span\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_renderer_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "<span\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_renderer_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], pipes: { "skyLibResources": i3.SkyLibResourcesPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_renderer_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
@@ -1629,7 +1577,7 @@ class SkyAgGridCellRendererCurrencyValidatorComponent {
     }
 }
 SkyAgGridCellRendererCurrencyValidatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererCurrencyValidatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n", components: [{ type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererCurrencyValidatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n", components: [{ type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n" }]
@@ -1696,7 +1644,7 @@ class SkyAgGridCellRendererLookupComponent {
     }
 }
 SkyAgGridCellRendererLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererLookupComponent, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererLookupComponent, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-cell-renderer-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources: summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
@@ -1766,7 +1714,7 @@ class SkyAgGridCellRendererRowSelectorComponent {
     }
 }
 SkyAgGridCellRendererRowSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererRowSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererRowSelectorComponent, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [tabindex]=\"-1\"\n  [label]=\"'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\n  \"\n  [(ngModel)]=\"checked\"\n  (change)=\"updateRow()\"\n>\n</sky-checkbox>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"], components: [{ type: i1$6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }], directives: [{ type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SkyAgGridCellRendererRowSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridCellRendererRowSelectorComponent, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [tabindex]=\"-1\"\n  [label]=\"'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\n  \"\n  [(ngModel)]=\"checked\"\n  (change)=\"updateRow()\"\n>\n</sky-checkbox>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"], components: [{ type: i1$6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }], directives: [{ type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<sky-checkbox\n  data-sky-id=\"row-checkbox\"\n  [tabindex]=\"-1\"\n  [label]=\"'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_row_selector_aria_label' | skyLibResources: rowNumber\n  \"\n  [(ngModel)]=\"checked\"\n  (change)=\"updateRow()\"\n>\n</sky-checkbox>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
@@ -2357,7 +2305,7 @@ class SkyAgGridService {
         return false;
     }
 }
-SkyAgGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i1$5.SkyThemeService, optional: true }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAgGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i1$5.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyAgGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridService, decorators: [{
             type: Injectable,
@@ -2367,7 +2315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }], ctorParameters: function () {
         return [{ type: SkyAgGridAdapterService }, { type: i1$5.SkyThemeService, decorators: [{
                         type: Optional
-                    }] }, { type: i3$1.SkyLibResourcesService, decorators: [{
+                    }] }, { type: i3.SkyLibResourcesService, decorators: [{
                         type: Optional
                     }] }];
     } });