@skyux/ag-grid 5.7.0 → 5.8.0

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

@@ -439,6 +439,13 @@
                 this.viewkeeperClasses.push('.ag-header');
             }
         };
+        /**
+         * Prevent closing a modal when focused in AG Grid.
+         */
+        SkyAgGridWrapperComponent.prototype.onKeyUpEscape = function ($event) {
+            $event.stopPropagation();
+            this.agGrid.api.stopEditing(true);
+        };
         SkyAgGridWrapperComponent.prototype.onGridKeydown = function (event) {
             if (this.agGrid && !this.isInEditMode && event.key === 'Tab') {
                 var idToFocus = event.shiftKey
@@ -491,12 +498,12 @@
         return SkyAgGridWrapperComponent;
     }());
     SkyAgGridWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridWrapperComponent, deps: [{ token: SkyAgGridAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: agGridAngular.AgGridAngular, descendants: true, static: true }], ngImport: i0__namespace, 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__namespace.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: agGridAngular.AgGridAngular, descendants: true, static: true }], ngImport: i0__namespace, 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__namespace.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-wrapper',
-                        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",
+                        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",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }]; }, propDecorators: { agGrid: [{
@@ -1179,15 +1186,22 @@
         SkyAgGridCellEditorCurrencyComponent.prototype.getValue = function () {
             return this.value;
         };
+        /**
+         * The autoNumeric library's event handler suppresses the escape key event. This additional handler re-enables AG Grid's default functionality.
+         */
+        SkyAgGridCellEditorCurrencyComponent.prototype.onPressEscape = function () {
+            this.params.api.stopEditing(true);
+            this.params.api.setFocusedCell(this.params.rowIndex, this.params.column);
+        };
         return SkyAgGridCellEditorCurrencyComponent;
     }());
     SkyAgGridCellEditorCurrencyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorCurrencyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  (keyup.escape)=\"onPressEscape()\"\n  #skyCellEditorCurrency\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-currency',
-                        template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [skyAutonumeric]=\"skyComponentProperties\"\n  #skyCellEditorCurrency\n/>\n",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1443,8 +1457,11 @@
          * @param params The cell editor params that include data about the cell, column, row, and grid.
          */
         SkyAgGridCellEditorNumberComponent.prototype.agInit = function (params) {
+            var _a, _b;
             this.params = params;
             this.value = this.params.value;
+            this.max = (_a = params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.max;
+            this.min = (_b = params.skyComponentProperties) === null || _b === void 0 ? void 0 : _b.min;
             this.columnHeader = this.params.colDef.headerName;
             this.rowNumber = this.params.rowIndex + 1;
             this.columnWidth = this.params.column.getActualWidth();
@@ -1466,12 +1483,12 @@
         return SkyAgGridCellEditorNumberComponent;
     }());
     SkyAgGridCellEditorNumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorNumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorNumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [max]=\"max\"\n  [min]=\"min\"\n  #skyCellEditorNumber\n/>\n", styles: ["input{border:none;text-align:right}\n"], directives: [{ type: i1__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1__namespace$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorNumberComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-number',
-                        template: "<input\n  type=\"number\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_number_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorNumber\n/>\n",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1508,8 +1525,10 @@
          * @param params The cell editor params that include data about the cell, column, row, and grid.
          */
         SkyAgGridCellEditorTextComponent.prototype.agInit = function (params) {
+            var _a;
             this.params = params;
             this.value = this.params.charPress || this.params.value;
+            this.maxlength = (_a = params.skyComponentProperties) === null || _a === void 0 ? void 0 : _a.maxlength;
             this.columnHeader = this.params.colDef.headerName;
             this.rowNumber = this.params.rowIndex + 1;
             this.columnWidth = this.params.column.getActualWidth();
@@ -1531,12 +1550,12 @@
         return SkyAgGridCellEditorTextComponent;
     }());
     SkyAgGridCellEditorTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellEditorTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellEditorTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  [maxlength]=\"maxlength\"\n  #skyCellEditorText\n/>\n", styles: ["input{border:none;padding-left:11px}\n"], directives: [{ type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellEditorTextComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-editor-text',
-                        template: "<input\n  type=\"text\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_editor_text_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n  [(ngModel)]=\"value\"\n  #skyCellEditorText\n/>\n",
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1566,16 +1585,14 @@
      * @internal
      */
     var SkyAgGridCellValidatorTooltipComponent = /** @class */ (function () {
-        function SkyAgGridCellValidatorTooltipComponent(changeDetector, zone) {
+        function SkyAgGridCellValidatorTooltipComponent(changeDetector) {
             this.changeDetector = changeDetector;
-            this.zone = zone;
-            this.indicatorShouldShow = true;
             this.popoverMessageStream = new rxjs.Subject();
         }
         Object.defineProperty(SkyAgGridCellValidatorTooltipComponent.prototype, "params", {
             set: function (value) {
                 var _this = this;
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f, _g;
                 this.cellRendererParams = value;
                 /*istanbul ignore next*/
                 (_a = this.cellRendererParams.api) === null || _a === void 0 ? void 0 : _a.addEventListener(agGridCommunity.Events.EVENT_CELL_FOCUSED, function (eventParams) {
@@ -1592,56 +1609,65 @@
                         _this.showPopover();
                     }
                 });
+                (_c = this.cellRendererParams.eGridCell) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseenter', function () {
+                    _this.scheduleDelayedPopover();
+                });
+                (_d = this.cellRendererParams.eGridCell) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseleave', function () {
+                    _this.hidePopover();
+                });
                 /*istanbul ignore next*/
-                (_c = this.cellRendererParams.api) === null || _c === void 0 ? void 0 : _c.addEventListener(agGridCommunity.Events.EVENT_CELL_EDITING_STARTED, function () {
+                (_e = this.cellRendererParams.api) === null || _e === void 0 ? void 0 : _e.addEventListener(agGridCommunity.Events.EVENT_CELL_EDITING_STARTED, function () {
                     _this.hidePopover();
                 });
-                if (typeof ((_d = this.cellRendererParams.skyComponentProperties) === null || _d === void 0 ? void 0 : _d.validatorMessage) === 'function') {
+                if (typeof ((_f = this.cellRendererParams.skyComponentProperties) === null || _f === void 0 ? void 0 : _f.validatorMessage) === 'function') {
                     this.validatorMessage =
                         this.cellRendererParams.skyComponentProperties.validatorMessage(this.cellRendererParams.value, this.cellRendererParams.data, this.cellRendererParams.rowIndex);
                 }
                 else {
                     this.validatorMessage =
-                        (_e = this.cellRendererParams.skyComponentProperties) === null || _e === void 0 ? void 0 : _e.validatorMessage;
+                        (_g = this.cellRendererParams.skyComponentProperties) === null || _g === void 0 ? void 0 : _g.validatorMessage;
                 }
                 this.changeDetector.markForCheck();
             },
             enumerable: false,
             configurable: true
         });
-        SkyAgGridCellValidatorTooltipComponent.prototype.hideIndicator = function () {
-            var _this = this;
-            this.zone.run(function () {
-                _this.indicatorShouldShow = false;
-                _this.changeDetector.detectChanges();
-            });
-        };
         SkyAgGridCellValidatorTooltipComponent.prototype.hidePopover = function () {
+            this.cancelDelayedPopover();
             this.popoverMessageStream.next({ type: i2$2.SkyPopoverMessageType.Close });
         };
-        SkyAgGridCellValidatorTooltipComponent.prototype.showIndicator = function () {
-            var _this = this;
-            this.zone.run(function () {
-                _this.indicatorShouldShow = true;
-                _this.changeDetector.detectChanges();
-            });
-        };
         SkyAgGridCellValidatorTooltipComponent.prototype.showPopover = function () {
+            this.cancelDelayedPopover();
             this.popoverMessageStream.next({ type: i2$2.SkyPopoverMessageType.Open });
         };
+        SkyAgGridCellValidatorTooltipComponent.prototype.scheduleDelayedPopover = function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (!this._hoverTimeout) {
+                this._hoverTimeout = window.setTimeout(function () {
+                    _this.showPopover();
+                }, 300);
+            }
+        };
+        SkyAgGridCellValidatorTooltipComponent.prototype.cancelDelayedPopover = function () {
+            if (this._hoverTimeout) {
+                window.clearTimeout(this._hoverTimeout);
+                this._hoverTimeout = undefined;
+            }
+        };
         return SkyAgGridCellValidatorTooltipComponent;
     }());
-    SkyAgGridCellValidatorTooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0__namespace, 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__namespace$7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i2__namespace$2.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }], directives: [{ type: i2__namespace$2.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyAgGridCellValidatorTooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0__namespace, 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__namespace$7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i2__namespace$2.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }], directives: [{ type: i2__namespace$2.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-ag-grid-cell-validator-tooltip',
                         styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"],
-                        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",
+                        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",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { params: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { params: [{
                     type: i0.Input
                 }] } });
 
@@ -2373,7 +2399,8 @@
                         minWidth: 185,
                     },
                     _j[exports.SkyCellType.Number] = {
-                        cellClassRules: Object.assign((_p = {}, _p[exports.SkyCellClass.Number] = cellClassRuleTrueExpression, _p), editableCellClassRules),
+                        cellClassRules: Object.assign(Object.assign((_p = {}, _p[exports.SkyCellClass.Number] = cellClassRuleTrueExpression, _p), validatorCellClassRules), editableCellClassRules),
+                        cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
                         cellEditorFramework: SkyAgGridCellEditorNumberComponent,
                         headerClass: exports.SkyHeaderClass.RightAligned,
                     },
@@ -2390,8 +2417,9 @@
                         width: 55,
                     },
                     _j[exports.SkyCellType.Text] = {
-                        cellClassRules: Object.assign((_r = {}, _r[exports.SkyCellClass.Text] = cellClassRuleTrueExpression, _r), editableCellClassRules),
+                        cellClassRules: Object.assign(Object.assign((_r = {}, _r[exports.SkyCellClass.Text] = cellClassRuleTrueExpression, _r), validatorCellClassRules), editableCellClassRules),
                         cellEditorFramework: SkyAgGridCellEditorTextComponent,
+                        cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
                     },
                     _j[exports.SkyCellType.Validator] = {
                         cellClassRules: Object.assign(Object.assign({}, validatorCellClassRules), editableCellClassRules),