@skyux/ag-grid 6.0.0-beta.2 → 6.0.0-beta.3

package/fesm2020/skyux-ag-grid.mjs

@@ -1,7 +1,7 @@
 import * as i3 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 } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, ContentChild, Directive, Input, ContentChildren, TemplateRef, ViewChildren, ViewChild, EventEmitter, Output, NgModule, ElementRef, ViewEncapsulation, Optional, HostBinding } from '@angular/core';
 import * as i1 from '@skyux/core';
 import { SkyAffixAutoFitContext, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
 import * as i1$1 from '@skyux/data-manager';
@@ -82,9 +82,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
         }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
 
 let idIndex = 0;
-/**
- * @internal
- */
 class SkyAgGridWrapperComponent {
     constructor(adapterService, changeDetector, elementRef) {
         this.adapterService = adapterService;
@@ -109,6 +106,13 @@ class SkyAgGridWrapperComponent {
             this.viewkeeperClasses.push('.ag-header');
         }
     }
+    /**
+     * Prevent closing a modal when focused in AG Grid.
+     */
+    onKeyUpEscape($event) {
+        $event.stopPropagation();
+        this.agGrid.api.stopEditing(true);
+    }
     onGridKeydown(event) {
         if (this.agGrid && !this.isInEditMode && event.key === 'Tab') {
             const idToFocus = event.shiftKey
@@ -156,10 +160,10 @@ class SkyAgGridWrapperComponent {
     }
 }
 SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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.2.7", 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>\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.2.7", 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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>\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  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, {
@@ -443,9 +447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['inlineDeleteTemplateRef', { read: TemplateRef }]
             }] } });
 
-/**
- * @internal
- */
 class SkyAgGridRowDeleteDirective {
     constructor(affixService, changeDetector, elementRef, resolver, overlayService, viewContainerRef) {
         this.affixService = affixService;
@@ -813,12 +814,19 @@ class SkyAgGridCellEditorCurrencyComponent {
     getValue() {
         return this.value;
     }
+    /**
+     * The autoNumeric library's event handler suppresses the escape key event. This additional handler re-enables AG Grid's default functionality.
+     */
+    onPressEscape() {
+        this.params.api.stopEditing(true);
+        this.params.api.setFocusedCell(this.params.rowIndex, this.params.column);
+    }
 }
 SkyAgGridCellEditorCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  (keyup.escape)=\"onPressEscape()\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  (keyup.escape)=\"onPressEscape()\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorCurrency', { read: ElementRef }]
@@ -915,6 +923,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ */
 function applySkyLookupPropertiesDefaults(skyLookupProperties) {
     return {
         addClick: skyLookupProperties.addClick || undefined,
@@ -941,6 +952,9 @@ function applySkyLookupPropertiesDefaults(skyLookupProperties) {
     };
 }
 
+/**
+ * @internal
+ */
 class SkyAgGridCellEditorLookupComponent {
     constructor(changeDetector, elementRef) {
         this.changeDetector = changeDetector;
@@ -968,6 +982,11 @@ class SkyAgGridCellEditorLookupComponent {
         this.useAsyncSearch =
             typeof this.skyComponentProperties.searchAsync === 'function';
         this.isAlive = true;
+        this.width = this.params.column.getActualWidth();
+        this.params.column.addEventListener('uiColumnResized', (event) => {
+            this.width = event.column.getActualWidth();
+            this.changeDetector.markForCheck();
+        });
         this.changeDetector.markForCheck();
     }
     isCancelAfterEnd() {
@@ -995,11 +1014,14 @@ class SkyAgGridCellEditorLookupComponent {
     }
 }
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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.2.7", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], components: [{ type: i1$6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$3.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }] } });
 
 class SkyAgGridCellEditorLookupModule {
 }
@@ -1042,6 +1064,8 @@ class SkyAgGridCellEditorNumberComponent {
     agInit(params) {
         this.params = params;
         this.value = this.params.value;
+        this.max = params.skyComponentProperties?.max;
+        this.min = params.skyComponentProperties?.min;
         this.columnHeader = this.params.colDef.headerName;
         this.rowNumber = this.params.rowIndex + 1;
         this.columnWidth = this.params.column.getActualWidth();
@@ -1062,10 +1086,10 @@ class SkyAgGridCellEditorNumberComponent {
     }
 }
 SkyAgGridCellEditorNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [max]=\"max\"\n  [min]=\"min\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [max]=\"max\"\n  [min]=\"min\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorNumber', { read: ElementRef }]
@@ -1096,6 +1120,7 @@ class SkyAgGridCellEditorTextComponent {
     agInit(params) {
         this.params = params;
         this.value = this.params.charPress || this.params.value;
+        this.maxlength = params.skyComponentProperties?.maxlength;
         this.columnHeader = this.params.colDef.headerName;
         this.rowNumber = this.params.rowIndex + 1;
         this.columnWidth = this.params.column.getActualWidth();
@@ -1116,10 +1141,10 @@ class SkyAgGridCellEditorTextComponent {
     }
 }
 SkyAgGridCellEditorTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [maxlength]=\"maxlength\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [maxlength]=\"maxlength\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['skyCellEditorText', { read: ElementRef }]
@@ -1143,10 +1168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * @internal
  */
 class SkyAgGridCellValidatorTooltipComponent {
-    constructor(changeDetector, zone) {
+    constructor(changeDetector) {
         this.changeDetector = changeDetector;
-        this.zone = zone;
-        this.indicatorShouldShow = true;
         this.popoverMessageStream = new Subject();
     }
     set params(value) {
@@ -1166,6 +1189,12 @@ class SkyAgGridCellValidatorTooltipComponent {
                 this.showPopover();
             }
         });
+        this.cellRendererParams.eGridCell?.addEventListener('mouseenter', () => {
+            this.scheduleDelayedPopover();
+        });
+        this.cellRendererParams.eGridCell?.addEventListener('mouseleave', () => {
+            this.hidePopover();
+        });
         /*istanbul ignore next*/
         this.cellRendererParams.api?.addEventListener(Events.EVENT_CELL_EDITING_STARTED, () => {
             this.hidePopover();
@@ -1181,31 +1210,35 @@ class SkyAgGridCellValidatorTooltipComponent {
         }
         this.changeDetector.markForCheck();
     }
-    hideIndicator() {
-        this.zone.run(() => {
-            this.indicatorShouldShow = false;
-            this.changeDetector.detectChanges();
-        });
-    }
     hidePopover() {
+        this.cancelDelayedPopover();
         this.popoverMessageStream.next({ type: SkyPopoverMessageType.Close });
     }
-    showIndicator() {
-        this.zone.run(() => {
-            this.indicatorShouldShow = true;
-            this.changeDetector.detectChanges();
-        });
-    }
     showPopover() {
+        this.cancelDelayedPopover();
         this.popoverMessageStream.next({ type: SkyPopoverMessageType.Open });
     }
+    scheduleDelayedPopover() {
+        /* istanbul ignore else */
+        if (!this._hoverTimeout) {
+            this._hoverTimeout = window.setTimeout(() => {
+                this.showPopover();
+            }, 300);
+        }
+    }
+    cancelDelayedPopover() {
+        if (this._hoverTimeout) {
+            window.clearTimeout(this._hoverTimeout);
+            this._hoverTimeout = undefined;
+        }
+    }
 }
-SkyAgGridCellValidatorTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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    *ngIf=\"indicatorShouldShow\"\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover\n  #validatorPopover\n  (popoverClosed)=\"showIndicator()\"\n  (popoverOpened)=\"hideIndicator()\"\n  popoverType=\"danger\"\n>\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"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellValidatorTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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    *ngIf=\"indicatorShouldShow\"\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover\n  #validatorPopover\n  (popoverClosed)=\"showIndicator()\"\n  (popoverOpened)=\"hideIndicator()\"\n  popoverType=\"danger\"\n>\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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { params: [{
+            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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { params: [{
                 type: Input
             }] } });
 
@@ -1339,6 +1372,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ */
 class SkyAgGridCellRendererLookupComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
@@ -1893,8 +1929,10 @@ class SkyAgGridService {
                 [SkyCellType.Number]: {
                     cellClassRules: {
                         [SkyCellClass.Number]: cellClassRuleTrueExpression,
+                        ...validatorCellClassRules,
                         ...editableCellClassRules,
                     },
+                    cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
                     cellEditorFramework: SkyAgGridCellEditorNumberComponent,
                     headerClass: SkyHeaderClass.RightAligned,
                 },
@@ -1913,9 +1951,11 @@ class SkyAgGridService {
                 [SkyCellType.Text]: {
                     cellClassRules: {
                         [SkyCellClass.Text]: cellClassRuleTrueExpression,
+                        ...validatorCellClassRules,
                         ...editableCellClassRules,
                     },
                     cellEditorFramework: SkyAgGridCellEditorTextComponent,
+                    cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
                 },
                 [SkyCellType.Validator]: {
                     cellClassRules: {
@@ -2080,5 +2120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridCellEditorAutocompleteComponent as λ1, SkyAgGridCellRendererValidatorTooltipComponent as λ10, SkyAgGridCellValidatorTooltipComponent as λ11, SkyAgGridWrapperComponent as λ12, SkyAgGridRowDeleteDirective as λ13, SkyAgGridDataManagerAdapterDirective as λ14, SkyAgGridCellEditorTextComponent as λ2, SkyAgGridCellEditorCurrencyComponent as λ3, SkyAgGridCellEditorNumberComponent as λ4, SkyAgGridCellEditorDatepickerComponent as λ5, SkyAgGridRowDeleteComponent as λ6, SkyAgGridCellRendererRowSelectorComponent as λ7, SkyAgGridCellRendererCurrencyValidatorComponent as λ8, SkyAgGridCellRendererCurrencyComponent as λ9 };
+export { SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridCellEditorAutocompleteComponent as λ1, SkyAgGridCellRendererValidatorTooltipComponent as λ10, SkyAgGridCellValidatorTooltipComponent as λ11, SkyAgGridWrapperComponent as λ12, SkyAgGridRowDeleteDirective as λ13, SkyAgGridDataManagerAdapterDirective as λ14, SkyAgGridCellEditorLookupComponent as λ15, SkyAgGridCellRendererLookupComponent as λ16, SkyAgGridCellEditorTextComponent as λ2, SkyAgGridCellEditorCurrencyComponent as λ3, SkyAgGridCellEditorNumberComponent as λ4, SkyAgGridCellEditorDatepickerComponent as λ5, SkyAgGridRowDeleteComponent as λ6, SkyAgGridCellRendererRowSelectorComponent as λ7, SkyAgGridCellRendererCurrencyValidatorComponent as λ8, SkyAgGridCellRendererCurrencyComponent as λ9 };
 //# sourceMappingURL=skyux-ag-grid.mjs.map