@skyux/ag-grid 14.2.2 → 14.3.1

package/fesm2022/skyux-ag-grid.mjs

@@ -1,6 +1,6 @@
 import { NgClass, CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, signal, input, booleanAttribute, numberAttribute, viewChild, inject, DestroyRef, ElementRef, DOCUMENT, computed, effect, ContentChild, ChangeDetectionStrategy, Component, contentChildren, linkedSignal, ChangeDetectorRef, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, HostBinding, isSignal, Input, CSP_NONCE } from '@angular/core';
+import { NgModule, Injectable, signal, input, booleanAttribute, numberAttribute, viewChild, inject, DestroyRef, ElementRef, DOCUMENT, computed, effect, ContentChild, ChangeDetectionStrategy, Component, contentChildren, linkedSignal, ChangeDetectorRef, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, afterNextRender, HostListener, ViewChild, ViewEncapsulation, HostBinding, isSignal, Input, RendererFactory2, CSP_NONCE } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
@@ -1227,41 +1227,39 @@ class SkyAgGridRowDeleteDirective {
             .subscribe((evt) => {
             this.rowDeleteIds.update((rowIds) => (rowIds ?? []).filter((id) => !!evt.api.getRowNode(id)));
         });
-    }
-    ngAfterContentInit() {
-        this.#overlay = this.#overlayService.create({
-            enableScroll: true,
-            environmentInjector: this.#environmentInjector,
-            showBackdrop: false,
-            closeOnNavigation: true,
-            enableClose: false,
-            enablePointerEvents: true,
-        });
-        this.#overlay.attachComponent(SkyAgGridRowDeleteComponent, [
-            {
-                provide: SKY_AG_GRID_ROW_DELETE_CONTEXT,
-                useValue: this.#rowDeleteSvc,
-            },
-        ]);
-        this.#zIndex
-            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(this.#overlay.closed), distinctUntilChanged())
-            .subscribe((zIndex) => {
-            if (this.#overlay) {
-                this.#overlay.componentRef.instance.zIndex = zIndex.toString(10);
-            }
-        });
-        this.#clipPath
-            .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(this.#overlay.closed), distinctUntilChanged())
-            .subscribe((clipPath) => {
-            this.#overlay?.componentRef.instance.updateClipPath(clipPath);
-        });
-    }
-    ngAfterViewInit() {
-        this.#scrollableHostService
-            .watchScrollableHostClipPathChanges(this.#elementRef, this.#agGridBodyClipElements.asObservable())
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((clipPath) => {
-            this.#clipPath.next(clipPath);
+        afterNextRender(() => {
+            this.#overlay = this.#overlayService.create({
+                enableScroll: true,
+                environmentInjector: this.#environmentInjector,
+                showBackdrop: false,
+                closeOnNavigation: false,
+                enableClose: false,
+                enablePointerEvents: true,
+            });
+            this.#overlay.attachComponent(SkyAgGridRowDeleteComponent, [
+                {
+                    provide: SKY_AG_GRID_ROW_DELETE_CONTEXT,
+                    useValue: this.#rowDeleteSvc,
+                },
+            ]);
+            this.#zIndex
+                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(this.#overlay.closed), distinctUntilChanged())
+                .subscribe((zIndex) => {
+                if (this.#overlay) {
+                    this.#overlay.componentRef.instance.zIndex = zIndex.toString(10);
+                }
+            });
+            this.#clipPath
+                .pipe(takeUntil(this.#ngUnsubscribe), takeUntil(this.#overlay.closed), distinctUntilChanged())
+                .subscribe((clipPath) => {
+                this.#overlay?.componentRef.instance.updateClipPath(clipPath);
+            });
+            this.#scrollableHostService
+                .watchScrollableHostClipPathChanges(this.#elementRef, this.#agGridBodyClipElements.asObservable())
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe((clipPath) => {
+                this.#clipPath.next(clipPath);
+            });
         });
     }
     ngOnDestroy() {
@@ -2275,8 +2273,8 @@ class SkyAgGridCellRendererCurrencyComponent {
         this.value = params.value;
         this.skyComponentProperties = params.skyComponentProperties || {};
         this.skyComponentProperties.format = 'currency';
-        this.skyComponentProperties.minDigits = 2;
-        this.skyComponentProperties.truncate = false;
+        this.skyComponentProperties.minDigits ??= 2;
+        this.skyComponentProperties.truncate ??= false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyAgGridCellRendererCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "{{\n  value === undefined ? undefined : (value | skyNumeric: skyComponentProperties)\n}}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2791,6 +2789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class SkyAgGridHeaderRowSelectorComponent {
+    #api;
+    #subscriptions;
+    #renderer;
     constructor() {
         this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
         this.indeterminate = signal(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
@@ -2800,22 +2801,22 @@ class SkyAgGridHeaderRowSelectorComponent {
             const params = this.params();
             return params?.displayName || params?.column.getColDef().field;
         }, ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.#destroyRef = inject(DestroyRef);
+        this.#subscriptions = new Subscription();
+        this.#renderer = inject(RendererFactory2).createRenderer(undefined, null);
+        inject(DestroyRef).onDestroy(() => this.#subscriptions.unsubscribe());
     }
-    #api;
-    #destroyRef;
     agInit(params) {
         this.params.set(params);
         this.#api = params.api;
+        this.#subscriptions.unsubscribe();
+        this.#subscriptions = new Subscription();
         // Row selection behavior can only be set when the grid is created.
         // It only changes if the grid is recreated.
         const rowSelection = params.api.getGridOption('rowSelection');
         this.multiSelect.set(rowSelection === 'multiple' ||
             (typeof rowSelection === 'object' && rowSelection?.mode === 'multiRow'));
         if (this.multiSelect()) {
-            fromGridEvent(params.api, 'selectionChanged')
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe((change) => {
+            this.#subscriptions.add(fromGridEvent(params.api, 'selectionChanged').subscribe((change) => {
                 if (change.source.match(/selectall/i)) {
                     // Either select all or clear selection.
                     this.indeterminate.set(false);
@@ -2825,13 +2826,29 @@ class SkyAgGridHeaderRowSelectorComponent {
                     this.indeterminate.set(!!change.selectedNodes?.length);
                     this.checked.set(false);
                 }
-            });
-            fromGridEvent(params.api, 'rowDataUpdated')
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe(() => {
+            }));
+            this.#subscriptions.add(fromGridEvent(params.api, 'rowDataUpdated').subscribe(() => {
                 this.indeterminate.set(!!this.#api?.getSelectedNodes().length);
                 this.checked.set(false);
-            });
+            }));
+            const el = params.eGridHeader;
+            if (el) {
+                this.#renderer.setAttribute(el, 'aria-keyshortcuts', 'Enter Space');
+                this.#subscriptions.add(this.#renderer.listen(el, 'keydown', (evt) => {
+                    if (!['Enter', ' '].includes(evt.key) || evt.repeat) {
+                        return;
+                    }
+                    if (evt.key === ' ') {
+                        evt.preventDefault();
+                    }
+                    if (this.checked()) {
+                        this.#api?.deselectAll();
+                    }
+                    else {
+                        this.#api?.selectAll();
+                    }
+                }));
+            }
         }
     }
     refresh() {
@@ -2854,7 +2871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[attr.title]': 'label()',
                         '[attr.role]': '"note"',
                     }, template: "@if (multiSelect()) {\n  <sky-checkbox\n    labelHidden\n    data-sky-id=\"header-row-selector\"\n    [checked]=\"checked()\"\n    [labelText]=\"label()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"toggleCheckbox($event)\"\n  />\n}\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 /**
  * To display a help button beside the column header, create a component containing