@skyux/ag-grid 14.2.2 → 14.3.0

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, 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';
@@ -2791,6 +2791,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 +2803,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 +2828,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 +2873,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