@skyux/ag-grid 11.43.1 → 11.44.0

package/fesm2022/skyux-ag-grid.mjs

@@ -2105,79 +2105,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * @internal
  */
 class SkyAgGridCellValidatorTooltipComponent {
+    constructor() {
+        this.popoverMessageStream = new Subject();
+    }
     set params(value) {
         this.cellRendererParams = value;
-        /*istanbul ignore next*/
-        this.cellRendererParams?.api?.addEventListener('cellFocused', (eventParams) => {
+        value?.api?.addEventListener('cellFocused', (eventParams) => {
             // We want to close any popovers that are opened when other cells are focused, but open a popover if the current cell is focused.
-            if (eventParams.column.getColId() !==
-                this.cellRendererParams?.column?.getColId() ||
-                eventParams.rowIndex !== this.cellRendererParams?.node?.rowIndex) {
-                this.hidePopover();
-            }
-        });
-        /*istanbul ignore next*/
-        this.cellRendererParams?.eGridCell?.addEventListener('keyup', (event) => {
-            if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
+            if (eventParams.column.getColId() ===
+                value?.column?.getColId() &&
+                eventParams.rowIndex === value?.node?.rowIndex) {
                 this.showPopover();
             }
+            else {
+                this.hidePopover();
+            }
         });
-        this.cellRendererParams?.eGridCell?.addEventListener('mouseenter', () => {
-            this.#scheduleDelayedPopover();
-        });
-        this.cellRendererParams?.eGridCell?.addEventListener('mouseleave', () => {
-            this.hidePopover();
-        });
-        /*istanbul ignore next*/
-        this.cellRendererParams?.api?.addEventListener('cellEditingStarted', () => {
+        value?.api?.addEventListener('cellEditingStarted', () => {
             this.hidePopover();
         });
-        if (typeof this.cellRendererParams?.skyComponentProperties
-            ?.validatorMessage === 'function') {
-            this.validatorMessage =
-                this.cellRendererParams.skyComponentProperties.validatorMessage(this.cellRendererParams.value, this.cellRendererParams.data, this.cellRendererParams?.node?.rowIndex ?? undefined);
+        if (typeof value?.skyComponentProperties?.validatorMessage === 'function') {
+            this.validatorMessage = value.skyComponentProperties.validatorMessage(value.value, value.data, value?.node?.rowIndex);
         }
         else {
-            this.validatorMessage =
-                this.cellRendererParams?.skyComponentProperties?.validatorMessage;
+            this.validatorMessage = value?.skyComponentProperties?.validatorMessage;
         }
-        this.#changeDetector.markForCheck();
-    }
-    #hoverTimeout;
-    #changeDetector;
-    constructor(changeDetector) {
-        this.popoverMessageStream = new Subject();
-        this.#changeDetector = changeDetector;
     }
     hidePopover() {
-        this.#cancelDelayedPopover();
         this.popoverMessageStream.next({ type: SkyPopoverMessageType.Close });
     }
     showPopover() {
-        this.#cancelDelayedPopover();
-        this.popoverMessageStream.next({ type: SkyPopoverMessageType.Open });
-    }
-    #scheduleDelayedPopover() {
-        /* istanbul ignore else */
-        if (!this.#hoverTimeout) {
-            this.#hoverTimeout = window.setTimeout(() => {
-                this.showPopover();
-            }, 300);
+        if (this.#shouldShowPopover()) {
+            this.popoverMessageStream.next({ type: SkyPopoverMessageType.Open });
         }
     }
-    #cancelDelayedPopover() {
-        if (this.#hoverTimeout) {
-            window.clearTimeout(this.#hoverTimeout);
-            this.#hoverTimeout = undefined;
+    #shouldShowPopover() {
+        if (!this.validatorMessage) {
+            return false;
+        }
+        const editingCells = this.cellRendererParams?.api.getEditingCells() ?? [];
+        if (editingCells.length > 0) {
+            return false;
+        }
+        if (typeof this.cellRendererParams?.skyComponentProperties?.validator ===
+            'function') {
+            return !this.cellRendererParams.skyComponentProperties.validator(this.cellRendererParams.value, this.cellRendererParams.data, this.cellRendererParams.node?.rowIndex);
+        }
+        else {
+            return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  skyPopoverTrigger=\"mouseenter\"\n  class=\"sky-validator-cell\"\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n>\n  <ng-content />\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  />\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"], dependencies: [{ kind: "component", type: i1$5.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: i2$3.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  skyPopoverTrigger=\"mouseenter\"\n  class=\"sky-validator-cell\"\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n>\n  <ng-content />\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  />\n</div>\n<sky-popover\n  #validatorPopover\n  data-sky-id=\"validatorPopover\"\n  popoverType=\"danger\"\n>\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host{display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], dependencies: [{ kind: "component", type: i1$5.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: i2$3.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  skyPopoverTrigger=\"mouseenter\"\n  class=\"sky-validator-cell\"\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n>\n  <ng-content />\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  />\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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { params: [{
+            args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  skyPopoverTrigger=\"mouseenter\"\n  class=\"sky-validator-cell\"\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n>\n  <ng-content />\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  />\n</div>\n<sky-popover\n  #validatorPopover\n  data-sky-id=\"validatorPopover\"\n  popoverType=\"danger\"\n>\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host{display:contents}:host div.sky-validator-cell{height:100%;min-height:var(--ag-row-height);width:100%}:host div.sky-validator-cell:focus{outline:none}\n"] }]
+        }], propDecorators: { params: [{
                 type: Input
             }] } });
 
@@ -2207,34 +2191,31 @@ class SkyAgGridCellRendererCurrencyComponent {
         this.agInit(value);
     }
     /**
-     * agInit is called by agGrid once after the renderer is created and provides the renderer with the information it needs.
-     * @param params The cell renderer params that include data about the cell, column, row, and grid.
+     * agInit is called by AG Grid once after the renderer is created and provides the renderer with the information it needs.
      */
     agInit(params) {
         this.#updateProperties(params);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    /**
+     * refresh is called by AG Grid to update the cell without destroying and recreating the component.
+     */
     refresh(params) {
+        this.agInit(params);
         return false;
     }
     #updateProperties(params) {
         this.value = params.value;
-        this.columnWidth = params.column?.getActualWidth();
-        this.rowHeightWithoutBorders =
-            typeof params.node?.rowHeight === 'number'
-                ? params.node?.rowHeight - 4
-                : undefined;
         this.skyComponentProperties = params.skyComponentProperties || {};
         this.skyComponentProperties.format = 'currency';
         this.skyComponentProperties.minDigits = 2;
         this.skyComponentProperties.truncate = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "<span\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{\n    value === undefined\n      ? undefined\n      : (value | skyNumeric: skyComponentProperties)\n  }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n", styles: [":host{display:contents}input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{\n    value === undefined\n      ? undefined\n      : (value | skyNumeric: skyComponentProperties)\n  }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n", styles: [":host{display:contents}input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { params: [{
                 type: Input
             }] } });
@@ -2267,11 +2248,11 @@ class SkyAgGridCellRendererCurrencyValidatorComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n", dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n" }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (cellRendererParams) {\n  <sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n    @if (isNumeric(cellRendererParams.value)) {\n      <sky-ag-grid-cell-renderer-currency [params]=\"cellRendererParams\" />\n    } @else {\n      {{ cellRendererParams.value }}\n    }\n  </sky-ag-grid-cell-validator-tooltip>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { parameters: [{
                 type: Input
             }] } });
@@ -3060,6 +3041,7 @@ var SkyCellClass;
     SkyCellClass["Template"] = "sky-ag-grid-cell-template";
     SkyCellClass["Text"] = "sky-ag-grid-cell-text";
     SkyCellClass["Uneditable"] = "sky-ag-grid-cell-uneditable";
+    SkyCellClass["Validator"] = "sky-ag-grid-cell-validator";
 })(SkyCellClass || (SkyCellClass = {}));
 
 /**
@@ -3113,7 +3095,8 @@ function getValidatorCellRendererSelector(component, fallback) {
         if (params.colDef &&
             typeof params.colDef.cellRendererParams?.skyComponentProperties
                 ?.validator === 'function') {
-            if (!params.colDef.cellRendererParams.skyComponentProperties.validator(params.value, params.data, params?.node?.rowIndex)) {
+            if (params.column?.isCellEditable(params.node) ||
+                !params.colDef.cellRendererParams.skyComponentProperties.validator(params.value, params.data, params?.node?.rowIndex)) {
                 return {
                     component,
                     params: {
@@ -3293,6 +3276,7 @@ class SkyAgGridService {
         }
         const validatorCellClassRules = {
             [SkyCellClass.Invalid]: getValidatorFn(),
+            [SkyCellClass.Validator]: cellClassRuleTrueExpression,
         };
         function getHeaderClass(...classNames) {
             return (params) => {