@progress/kendo-angular-pivotgrid 16.6.0-develop.2 → 16.6.0-develop.4

package/esm2020/rendering/pivotgrid-table.component.mjs

@@ -2,53 +2,207 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input, NgZone } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
 import { CellTemplateDirective } from './templates/pivotgrid-cell-template.directive';
 import { ValueCellTemplateDirective } from './templates/pivotgrid-value-cell-template.directive';
 import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-header-cell-template.directive';
 import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
+import { ScrollableTable } from '../virtual/scrollable-container';
 import { PivotGridCellDirective } from './pivotgrid-cell.directive';
-import { NgFor, NgIf } from '@angular/common';
+import { NgFor, NgIf, NgStyle } from '@angular/common';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PivotGridComponent } from '../pivotgrid.component';
+import { Keys, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isVisible, matchAriaAttributes } from '../util';
+import { PivotGridScrollService } from '../virtual/scroll.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../pivotgrid.component";
+import * as i4 from "../virtual/scroll.service";
 /**
  * @hidden
  */
 export class PivotGridTableComponent {
-    constructor(dataService) {
+    constructor(host, dataService, localization, pivotGrid, zone, scrollService) {
+        this.host = host;
         this.dataService = dataService;
-        this.dataChangeSubs = new Subscription();
+        this.localization = localization;
+        this.pivotGrid = pivotGrid;
+        this.zone = zone;
+        this.scrollService = scrollService;
+        this.startRowIndex = 0;
+        this.startColIndex = 0;
+        this.rtl = false;
+        this.subs = new Subscription();
+        this.colsUpdateCallback = (cols) => {
+            this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
+            this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
+            (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
+            this.headerItems = cols;
+            isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
+        };
+        this.initScrollable = () => {
+            this.scrollable = new ScrollableTable(this.host.nativeElement, {
+                onScroll: () => {
+                    this.startRowIndex = this.scrollable.startRow;
+                    this.startColIndex = this.scrollable.startCol;
+                    this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
+                    this.scrollable.renderedRows = this.renderedRows.length;
+                    this.scrollable.renderedCols = this.renderedCols;
+                },
+                onScrollEnd: () => {
+                    matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
+                }
+            }, {
+                itemHeight: this.scrollableSettings.rowHeight,
+                itemWidth: this.colWidth || 200,
+                total: this.totalRows,
+                totalCols: this.headerItems.length,
+                renderedRows: this.scrollableSettings.rows,
+                renderedCols: this.scrollableSettings.columns,
+                columnVirtualization: this.columnVirtualization,
+                rowVirtualization: this.rowVirtualization,
+                rtl: this.rtl
+            });
+        };
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.scrollable && (this.scrollable.rtl = rtl);
+        }));
     }
     get pivotGridId() {
         return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
     }
+    get columnVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
+    }
+    get rowVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
+    }
     ngOnInit() {
-        this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
-        this.dataChangeSubs.add(this.tableType === 'values' ?
-            this.dataService.columnHeaderCols.subscribe(cols => this.headerItems = cols) :
-            this.dataService[`${this.tableType}Cols`].subscribe(cols => this.headerItems = cols));
+        this.subs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => {
+            this.rows = rows;
+            this.renderedRows = this.scrollableSettings ? rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows) : rows;
+            this.totalRows && this.totalRows !== rows.length && this.scrollable && (this.scrollable.total = rows.length);
+            this.scrollable && this.scrollable.onNewData(this.totalRows && this.totalRows !== rows.length);
+            this.totalRows = rows.length;
+        }));
+        this.subs.add(this.tableType === 'values' ?
+            this.dataService.columnHeaderCols.subscribe(this.colsUpdateCallback) :
+            this.dataService[`${this.tableType}Cols`].subscribe(this.colsUpdateCallback));
+    }
+    ngAfterViewInit() {
+        if (isDocumentAvailable() && this.scrollService.virtualScrolling) {
+            this.initScrollableKeyboardNavigation();
+        }
     }
     ngOnDestroy() {
-        this.dataChangeSubs.unsubscribe();
+        this.subs.unsubscribe();
+        this.scrollable?.destroy();
+    }
+    initScrollableKeyboardNavigation() {
+        this.host.nativeElement.addEventListener('keydown', (e) => {
+            if (this.tableType === 'values' && e.target.tagName === 'TD') {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                if (e.keyCode === Keys.ArrowLeft) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[5] === '1') {
+                        const target = document.querySelector(`tr[aria-owns*="${id}"]`);
+                        this.pivotGrid.navigation.focusElement(target.lastElementChild, e.target);
+                    }
+                    else {
+                        this.pivotGrid.navigation.focusElement(e.target.previousElementSibling, e.target);
+                        if (!isVisible(e.target.previousElementSibling, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleX) {
+                            e.target.previousElementSibling.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowRight) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[5] !== this.headerItems.length.toString()) {
+                        this.pivotGrid.navigation.focusElement(e.target.nextElementSibling, e.target);
+                        if (!isVisible(e.target.nextElementSibling, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleX) {
+                            e.target.nextElementSibling.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowUp) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[4] === '1') {
+                        const target = document.getElementById(e.target.getAttribute('aria-describedby').split(' ').pop());
+                        this.pivotGrid.navigation.focusElement(target, e.target);
+                    }
+                    else {
+                        const index = Array.from(e.target.parentElement.children).findIndex(el => el === e.target);
+                        const elementToFocus = e.target.parentElement.previousElementSibling.children[index];
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                        if (!isVisible(elementToFocus, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleY) {
+                            elementToFocus.scrollIntoView();
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowDown) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[4] !== this.totalRows.toString()) {
+                        const index = Array.from(e.target.parentElement.children).findIndex(el => el === e.target);
+                        const elementToFocus = e.target.parentElement.nextElementSibling.children[index];
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                        if (!isVisible(elementToFocus, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleY) {
+                            elementToFocus.scrollIntoView(false);
+                        }
+                    }
+                }
+            }
+            if (this.tableType === 'rowHeader' && e.target.tagName === 'TH' && e.keyCode === Keys.ArrowRight) {
+                if (e.target.matches(':last-child')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    const valuesContainer = this.host.nativeElement.nextElementSibling;
+                    valuesContainer.scrollLeft = this.rtl ? valuesContainer.scrollWidth : 0;
+                    this.zone.runOutsideAngular(() => setTimeout(() => {
+                        const elementToFocusId = e.target.parentElement.getAttribute('aria-owns').split(' ')[0];
+                        const elementToFocus = document.getElementById(elementToFocusId);
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                    }));
+                }
+            }
+            if (this.tableType === 'columnHeader' && e.target.tagName === 'TH' && e.keyCode === Keys.ArrowDown) {
+                if (e.target.parentElement.matches(':last-child')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    const valuesContainer = this.host.nativeElement.nextElementSibling.nextElementSibling;
+                    valuesContainer.scrollTop = 0;
+                    this.zone.runOutsideAngular(() => setTimeout(() => {
+                        const elementToFocus = valuesContainer.querySelector(`td[aria-describedby*="${e.target.getAttribute('id')}"]`);
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                    }));
+                }
+            }
+        }, true);
     }
 }
-PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, ngImport: i0, template: `
+PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.PivotGridComponent }, { token: i0.NgZone }, { token: i4.PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate", scrollableSettings: "scrollableSettings" }, ngImport: i0, template: `
         <table
             class="k-pivotgrid-table"
-            role="presentation">
+            role="presentation"
+            [ngStyle]="{float: this.tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial'}">
             <colgroup>
+                <col *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
                 <col 
-                    *ngFor="let item of headerItems;"
+                    *ngFor="let item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems);"
                     [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
             <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
-                <tr *ngFor="let row of rows; index as rowIndex"
+                <tr *ngFor="let row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); index as rowIndex"
                     class="k-pivotgrid-row"
                     [attr.role]="tableType === 'values' ? 'none' : 'row'">
-                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                    <td *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" class="k-pivotgrid-cell"></td>
+                    <ng-container *ngFor="let cell of (tableType === 'values' && columnVirtualization ? row.cells.slice(startColIndex, (startColIndex + renderedCols)) : row.cells); index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
@@ -56,8 +210,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                             [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
                             [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
@@ -67,15 +221,15 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             role="gridcell"
-                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -83,17 +237,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <table
             class="k-pivotgrid-table"
-            role="presentation">
+            role="presentation"
+            [ngStyle]="{float: this.tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial'}">
             <colgroup>
+                <col *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
                 <col 
-                    *ngFor="let item of headerItems;"
+                    *ngFor="let item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems);"
                     [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
             <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
-                <tr *ngFor="let row of rows; index as rowIndex"
+                <tr *ngFor="let row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); index as rowIndex"
                     class="k-pivotgrid-row"
                     [attr.role]="tableType === 'values' ? 'none' : 'row'">
-                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                    <td *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" class="k-pivotgrid-cell"></td>
+                    <ng-container *ngFor="let cell of (tableType === 'values' && columnVirtualization ? row.cells.slice(startColIndex, (startColIndex + renderedCols)) : row.cells); index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
@@ -101,8 +258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                             [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
                             [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
@@ -112,19 +269,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             role="gridcell"
-                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
         </table>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, PivotGridCellDirective]
+                    imports: [NgFor, NgIf, PivotGridCellDirective, NgStyle]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }]; }, propDecorators: { tableType: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.PivotGridComponent }, { type: i0.NgZone }, { type: i4.PivotGridScrollService }]; }, propDecorators: { tableType: [{
                 type: Input
             }], colWidth: [{
                 type: Input
@@ -136,4 +293,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], columnHeaderCellTemplate: [{
                 type: Input
+            }], scrollableSettings: [{
+                type: Input
             }] } });

package/esm2020/util.mjs

@@ -110,19 +110,19 @@ export const matchAriaAttributes = (wrapper) => {
     const firstColHeaderRowCellsIds = Array.from(firstColHeadersRow?.children).map(el => el.getAttribute('id')).join(' ');
     firstColHeadersRow.setAttribute('aria-owns', `${emptyCell.getAttribute('id')} ${firstColHeaderRowCellsIds}`);
     rowHeaderRows.forEach((row, index) => {
-        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id').split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
+        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id')?.split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
         row.setAttribute('aria-owns', valueCellsIds.join(' '));
     });
     valueTableCells.forEach(cell => {
-        const cellColIndex = +cell.getAttribute('id').split('-')[5];
+        const cellColIndex = +cell.getAttribute('id')?.split('-')[5];
         const colHeaderCellsIds = filterAndMap(Array.from(colHeaderCells), c => {
-            const headerCellColIndex = +c.getAttribute('id').split('-')[5];
+            const headerCellColIndex = +c.getAttribute('id')?.split('-')[5];
             const headerCellColspan = +c.getAttribute('colspan');
             const colIndexIsEqual = cellColIndex === headerCellColIndex;
-            const cellColIndexIsWithinHeaderCellRange = headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
+            const cellColIndexIsWithinHeaderCellRange = headerCellColIndex < cellColIndex && headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
             return colIndexIsEqual || cellColIndexIsWithinHeaderCellRange;
         }, c => c.getAttribute('id'));
-        cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
+        colHeaderCellsIds.length && cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
     });
 };
 /**
@@ -197,3 +197,28 @@ export const swapItems = (arr, i1, i2) => {
     arr[i1] = arr[i2];
     arr[i2] = temp;
 };
+/**
+ * @hidden
+ */
+export const isVisible = (el, container, offsetY, rtl) => {
+    const elTop = el.offsetTop;
+    const elBottom = elTop + el.clientHeight;
+    let rect;
+    let containerRect;
+    if (rtl) {
+        rect = el.getBoundingClientRect();
+        containerRect = container.getBoundingClientRect();
+    }
+    const elLeft = rtl ? rect.left : el.offsetLeft;
+    const elRight = rtl ? rect.right : elLeft + el.clientWidth;
+    const containerTop = container.scrollTop;
+    const containerBottom = containerTop + container.clientHeight;
+    const containerLeft = rtl ? containerRect.left : container.scrollLeft;
+    const containerRight = rtl ? containerRect.right : containerLeft + container.clientWidth;
+    const visibleY = elTop >= containerTop - offsetY && elBottom <= containerBottom - offsetY;
+    const visibleX = rtl ? elRight <= containerRight && elLeft >= containerLeft : elLeft >= containerLeft && elRight <= containerRight;
+    return {
+        visibleX,
+        visibleY
+    };
+};

package/esm2020/virtual/scroll.service.mjs

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class PivotGridScrollService {
+    constructor() {
+        this.virtualScrolling = false;
+    }
+}
+PivotGridScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, decorators: [{
+            type: Injectable
+        }] });

package/esm2020/virtual/scrollable-container.mjs

@@ -0,0 +1,114 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export class ScrollableTable {
+    constructor(element, handlers, options) {
+        this.element = element;
+        this.handlers = handlers;
+        this.options = options;
+        this.startRow = 0;
+        this.startCol = 0;
+        this.lastKnownScrollPosition = { top: 0, left: 0 };
+        this.offsetFirst = 0;
+        this.scrollHandler = (e) => {
+            const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
+            const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
+            if (this.options.rowVirtualization) {
+                if (verticalDir > 0) {
+                    if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
+                        this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
+                        this.rowVirtualizationUpdate();
+                    }
+                }
+                else {
+                    if (this.element.scrollTop <= this.offsetFirst) {
+                        this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
+                        this.rowVirtualizationUpdate();
+                    }
+                }
+            }
+            if (this.options.columnVirtualization) {
+                if (horizontalDir > 0) {
+                    if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
+                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                        this.handlers.onScroll();
+                    }
+                }
+                else {
+                    if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
+                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                        this.handlers.onScroll();
+                    }
+                }
+            }
+            this.lastKnownScrollPosition = {
+                top: this.element.scrollTop,
+                left: Math.abs(this.element.scrollLeft)
+            };
+        };
+        this.scrollEndHandler = () => {
+            this.handlers.onScrollEnd();
+        };
+        this.initialize();
+    }
+    onNewData(recalculateSize = false) {
+        this.offsetFirst = this.startRow * this.options.itemHeight;
+        this.renderedRows = Math.min(this.options.renderedRows || Math.ceil(this.visibleRows * 3), this.total);
+        this.endRow = this.startRow + this.renderedRows;
+        this.renderedCols = Math.min(this.options.renderedCols || Math.ceil(this.visibleCols * 1.3), this.totalCols);
+        this.element.querySelector('table').style.transform = `translateY(${this.offsetFirst}px)`;
+        recalculateSize && this.recalculateSize();
+    }
+    destroy() {
+        this.element.removeEventListener('scroll', this.scrollHandler);
+        this.element.removeEventListener('scrollend', this.scrollEndHandler);
+        this.element.removeChild(this.stretcher);
+    }
+    initialize() {
+        this.rtl = this.options.rtl;
+        this.rect = this.element.getBoundingClientRect();
+        // visible rows and cols
+        this.visibleRows = Math.ceil(this.rect.height / this.options.itemHeight);
+        this.visibleCols = Math.ceil(this.rect.width / this.options.itemWidth);
+        // current totals
+        this.total = this.options.total;
+        this.totalCols = this.options.totalCols;
+        const totalHeight = this.total * this.options.itemHeight;
+        const totalWidth = this.totalCols * this.options.itemWidth;
+        // "page" size (rows and cols)
+        this.renderedRows = Math.min(this.options.renderedRows || Math.ceil(this.visibleRows * 3), this.total);
+        this.renderedCols = Math.min(this.options.renderedCols || Math.ceil(this.visibleCols * 1.3), this.totalCols);
+        // start and end row/col
+        this.startRow = 0;
+        this.startCol = 0;
+        this.endRow = this.startRow + this.renderedRows;
+        this.endCol = this.startCol + this.renderedCols;
+        // element that ensures correct scrolling dimensions of the container
+        this.stretcher = document.createElement('DIV');
+        this.stretcher.style.height = `${totalHeight}px`;
+        this.stretcher.style.width = `${totalWidth}px`;
+        this.element.appendChild(this.stretcher);
+        this.element.addEventListener('scroll', this.scrollHandler);
+        this.element.addEventListener('scrollend', this.scrollEndHandler);
+    }
+    recalculateSize() {
+        const totalHeight = this.total * this.options.itemHeight;
+        const totalWidth = this.totalCols * this.options.itemWidth;
+        this.stretcher.style.height = `${totalHeight}px`;
+        this.stretcher.style.width = `${totalWidth}px`;
+        this.rect = this.element.getBoundingClientRect();
+        // visible rows and cols
+        this.visibleRows = Math.ceil(this.rect.height / this.options.itemHeight);
+        this.visibleCols = Math.ceil(this.rect.width / this.options.itemWidth);
+    }
+    rowVirtualizationUpdate() {
+        this.endRow = Math.min(this.startRow + this.renderedRows, this.total);
+        this.offsetFirst = this.startRow * this.options.itemHeight;
+        this.element.querySelector('table').style.transform = `translateY(${this.offsetFirst}px)`;
+        this.handlers.onScroll();
+    }
+}