@skyux/ag-grid 12.15.0 → 12.17.0

package/fesm2022/skyux-ag-grid.mjs

@@ -676,11 +676,11 @@ class SkyAgGridWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], viewQueries: [{ propertyName: "skyAgGridDiv", first: true, predicate: ["skyAgGridDiv"], descendants: true, isSignal: 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  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], viewQueries: [{ propertyName: "skyAgGridDiv", first: true, predicate: ["skyAgGridDiv"], descendants: true, isSignal: 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  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgClass, SkyIdModule, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <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, imports: [AsyncPipe, NgClass, SkyIdModule, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <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: () => [], propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
@@ -1087,6 +1087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class SkyAgGridRowDeleteDirective {
+    #agGridBodyViewport;
+    #agGridBodyClipElements;
     #ngUnsubscribe;
     #rowDeleteIdsInternal;
     #clipPath;
@@ -1111,7 +1113,8 @@ class SkyAgGridRowDeleteDirective {
          */
         this.rowDeleteConfirm = output();
         this.agGrid = contentChild(AgGridAngular);
-        this.agGridBodyViewport = new BehaviorSubject([]);
+        this.#agGridBodyViewport = new BehaviorSubject([]);
+        this.#agGridBodyClipElements = new BehaviorSubject([]);
         this.#ngUnsubscribe = new Subject();
         this.#rowDeleteIdsInternal = linkedSignal({
             source: this.rowDeleteIds,
@@ -1135,7 +1138,7 @@ class SkyAgGridRowDeleteDirective {
                 this.#zIndex.next(zIndex);
             });
         }
-        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.agGridBodyViewport), signal(undefined));
+        this.#rowDeleteSvc = new SkyAgGridRowDeleteContext(this.#rowDeleteIdsInternal.asReadonly(), toSignal(this.#agGridBodyViewport), signal(undefined));
         this.#rowDeleteSvc.cancelRowDelete
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((rowId) => {
@@ -1152,13 +1155,26 @@ class SkyAgGridRowDeleteDirective {
             }
         });
         const agGrid = toObservable(this.agGrid);
-        agGrid
-            .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), takeUntil(this.#ngUnsubscribe))
-            .subscribe(() => {
-            this.agGridBodyViewport.next([
+        const agGridReady = agGrid.pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.gridReady), take(1), takeUntil(this.#ngUnsubscribe));
+        agGridReady.subscribe((ready) => {
+            this.#agGridBodyViewport.next([
                 new ElementRef(this.#elementRef.nativeElement.querySelector('div.ag-root-wrapper')),
             ]);
-            this.#rowDeleteSvc.gridApi.set(this.agGrid()?.api);
+            this.#rowDeleteSvc.gridApi.set(ready.api);
+        });
+        agGrid
+            .pipe(filter$1((grid) => !!grid), switchMap((grid) => merge(grid.firstDataRendered.asObservable(), grid.rowDataUpdated.asObservable(), agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridOptionsChanged')))).pipe(takeUntil(this.#ngUnsubscribe), takeUntil(agGridReady.pipe(switchMap(() => fromEvent(grid.api, 'gridPreDestroyed').pipe(take(1))))), startWith(grid.api?.getGridOption('domLayout')), map(() => grid.api?.getGridOption('domLayout')), switchMap((domLayout) => {
+            if (domLayout === 'normal') {
+                return this.#agGridBodyViewport.asObservable();
+            }
+            return of([]);
+        }))))
+            .subscribe((agGridBodyClipElements) => {
+            // When using AG Grid's `domLayout: 'autoHeight'` option,
+            // the grid's body viewport is clipped by the scrollable host.
+            // But when using `domLayout: 'normal'`, the grid's body viewport
+            // should be used as the scrollable host for the row delete overlay.
+            this.#agGridBodyClipElements.next(agGridBodyClipElements);
         });
         agGrid
             .pipe(filter$1((agGrid) => !!agGrid), switchMap((agGrid) => agGrid.rowDataUpdated), takeUntil(this.#ngUnsubscribe))
@@ -1194,7 +1210,7 @@ class SkyAgGridRowDeleteDirective {
     }
     ngAfterViewInit() {
         this.#scrollableHostService
-            .watchScrollableHostClipPathChanges(this.#elementRef, this.agGridBodyViewport.asObservable())
+            .watchScrollableHostClipPathChanges(this.#elementRef, this.#agGridBodyClipElements.asObservable())
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((clipPath) => {
             this.#clipPath.next(clipPath);