@coolon/angular-ui-powerups 16.1.0-aplpha.52 → 16.1.0-aplpha.53

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -17,7 +17,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i3$2 from '@angular/cdk/portal';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/scrolling';
-import { CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
+import { FixedSizeVirtualScrollStrategy, CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2 from '@angular/material/button';
@@ -38,8 +38,10 @@ import * as i2$6 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i4$5 from 'ng-table-virtual-scroll';
+import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import * as i1$3 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, DirtyTrackingForm, ProxyRegistry, DelegatingCommand, PagedListModel, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, DirtyTrackingForm, ProxyRegistry, TransactionObserver, DelegatingCommand, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
 import { __decorate, __param, __metadata } from 'tslib';
 import * as i1 from '@angular/platform-browser';
 import escapeStringRegexp from 'escape-string-regexp';
@@ -50,6 +52,8 @@ import { Enum } from 'typescript-string-enums';
 import { lang as lang$1, assert as assert$1, Stringy, Klass, Opts } from '@coolon/typescript-utilities';
 import * as i5 from '@angular/material/core';
 import { produce } from 'immer';
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject } from 'rxjs';
 import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction as isFunction$1, isNil as isNil$1, isEmpty as isEmpty$1, last, findLast } from 'lodash-es';
 import { generateKeyBetween } from 'fractional-indexing';
@@ -570,7 +574,7 @@ const markdownPillExtension = (renderPill) => {
             return index;
         },
         tokenizer: function (src) {
-            const rule = /^(\(\((([^)])+)\)\))/; // Regex for the complete tok`en
+            const rule = /^(\(\((([^)])+)\)\))/; // Regex for the complete token
             const match = rule.exec(src);
             if (match) {
                 const token = {
@@ -3104,12 +3108,17 @@ class AbstractTableComponent extends DisposableComponent {
     #showHeader_accessor_storage = true;
     get showHeader() { return this.#showHeader_accessor_storage; }
     set showHeader(value) { this.#showHeader_accessor_storage = value; }
+    #enableScrolling$_accessor_storage = proxify((ValueModel));
     /**
      * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
      * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
      * containment area.
      */
-    enableScrolling = false;
+    get enableScrolling$() { return this.#enableScrolling$_accessor_storage; }
+    set enableScrolling$(value) { this.#enableScrolling$_accessor_storage = value; }
+    #enableScrolling_accessor_storage = false;
+    get enableScrolling() { return this.#enableScrolling_accessor_storage; }
+    set enableScrolling(value) { this.#enableScrolling_accessor_storage = value; }
     columns;
     columnIds;
     columnsById;
@@ -3164,7 +3173,7 @@ class AbstractTableComponent extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeader$: "showHeader$", showHeader: "showHeader", enableScrolling: "enableScrolling" }, host: { properties: { "class": "this.baseCssClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeader$: "showHeader$", showHeader: "showHeader", enableScrolling$: "enableScrolling$", enableScrolling: "enableScrolling" }, host: { properties: { "class": "this.baseCssClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 __decorate([
     Proxify(),
@@ -3174,6 +3183,14 @@ __decorate([
     StoreInValueModel(),
     __metadata("design:type", Object)
 ], AbstractTableComponent.prototype, "showHeader", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], AbstractTableComponent.prototype, "enableScrolling$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Boolean)
+], AbstractTableComponent.prototype, "enableScrolling", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -3184,6 +3201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], showHeader: [{
                 type: Input
+            }], enableScrolling$: [{
+                type: Input
             }], enableScrolling: [{
                 type: Input
             }], baseCssClass: [{
@@ -4348,6 +4367,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * Virtual Scroll Strategy
+ */
+class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
+    garbage = new GarbageCollector();
+    constructor(rowHeight$, minBufferPx, maxBufferPx) {
+        super(rowHeight$.value, minBufferPx, maxBufferPx);
+        const { chain, when } = Dsl.disposeWith(this.garbage);
+        when(rowHeight$).changes(h => {
+            this.updateItemAndBufferSize(h, minBufferPx, maxBufferPx);
+        }, { initialValue: "triggerChangeUnlessNil" });
+    }
+}
+class VirtualScrollDataSource extends DataSource {
+    viewport;
+    rowHeight$;
+    garbage = new GarbageCollector();
+    virtualScrollRowRange$;
+    virtualScrollSpacerSize$;
+    totalContentSize$;
+    showVirtualScrollOffset;
+    virtualRowsObservable$ = new BehaviorSubject([]);
+    virtualScrollPixelOffset$ = new MutableValueModel(0);
+    constructor(viewport, data$, rowHeight$, pageSize$) {
+        super();
+        this.viewport = viewport;
+        this.rowHeight$ = rowHeight$;
+        const { chain, when, observe } = Dsl.disposeWith(this);
+        observe.valuesFrom(viewport.elementScrolled()).subscribe((ev) => {
+            this.virtualScrollPixelOffset$.value = ev.currentTarget.scrollTop;
+        });
+        this.virtualScrollRowRange$ = chain(this.virtualScrollPixelOffset$).map(rawPixelOffset => {
+            const startIndex = Math.floor(rawPixelOffset / this.rowHeight$.value);
+            console.log(rawPixelOffset, startIndex);
+            // const prevExtraData = startIndex > 5 ? 5 : 0;
+            const prevExtraData = 0;
+            // return rows.slice(startIndex - prevExtraData, startIndex + (pageSize$.value - prevExtraData));
+            return {
+                start: startIndex - prevExtraData,
+                end: startIndex + (pageSize$.value - prevExtraData)
+            };
+        }, {
+            dependsOn: [this.rowHeight$, pageSize$],
+            postponeWhile: chain.numericValue(pageSize$).isLessThan(1),
+            changed: (is, was) => {
+                return was?.start !== is?.start || was?.end !== is?.end;
+            }
+        });
+        this.virtualScrollSpacerSize$ = chain(this.virtualScrollRowRange$).map(range => {
+            const pixelOffset = this.rowHeight$.value * range.start;
+            return pixelOffset;
+        }, { dependsOn: this.rowHeight$ });
+        this.totalContentSize$ = chain(data$).count().map(rowCount => {
+            return this.rowHeight$.value * rowCount;
+        }, { dependsOn: rowHeight$ });
+        chain(this.virtualScrollRowRange$).mapToList(range => {
+            return data$.value.slice(range.start, range.end);
+        }, {
+            dependsOn: data$
+        }).subscribe(visibleRows => {
+            console.log(visibleRows);
+            this.virtualRowsObservable$.next(visibleRows);
+        });
+        when(this.virtualScrollSpacerSize$).changes(scrollTop => {
+            viewport.setRenderedContentOffset(scrollTop, "to-start");
+        }, { initialValue: "triggerChangeUnlessNil" });
+        when(this.totalContentSize$).changes(totalSize => {
+            viewport.setTotalContentSize(totalSize);
+        }, { initialValue: "triggerChangeUnlessNil" });
+        this.showVirtualScrollOffset = (index, rowData) => {
+            const haveScrolled = this.virtualScrollSpacerSize$.value > 0;
+            const firstRow = index === 0;
+            return index === 0 && haveScrolled;
+        };
+    }
+    dispose() {
+        this.garbage.dispose();
+    }
+    registerDisposable(disposable) {
+        return this.garbage.registerDisposable(disposable);
+    }
+    connect(collectionViewer) {
+        return this.virtualRowsObservable$;
+    }
+    disconnect(collectionViewer) {
+        // noop
+    }
+}
 class TableBodyComponent extends ResizeAwareComponent {
     #data$_accessor_storage = proxify((ListModel));
     get data$() { return this.#data$_accessor_storage; }
@@ -4361,44 +4468,51 @@ class TableBodyComponent extends ResizeAwareComponent {
     #showHeader_accessor_storage = true;
     get showHeader() { return this.#showHeader_accessor_storage; }
     set showHeader(value) { this.#showHeader_accessor_storage = value; }
-    visibleRowCount = new EventEmitter();
     trackBy;
-    /**
-     * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-     * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-     * containment area.
-     */
-    enableScrolling = false;
+    #scrollMode$_accessor_storage = proxify((ValueModel));
+    get scrollMode$() { return this.#scrollMode$_accessor_storage; }
+    set scrollMode$(value) { this.#scrollMode$_accessor_storage = value; }
+    #scrollMode_accessor_storage = "none";
+    get scrollMode() { return this.#scrollMode_accessor_storage; }
+    set scrollMode(value) { this.#scrollMode_accessor_storage = value; }
     columns$;
     columnIds$;
     columnsById$;
-    _visibleRowCount$;
     // TODO: support user defined header and row heights via css vars.
     headerHeight$ = new MutableValueModel(29);
     rowHeight$ = new MutableValueModel(40);
     baseCssClass = "aup-table-component";
+    virtualScrollDataSource = new TableVirtualScrollDataSource();
     constructor() {
         super();
-        const { chain, when } = Dsl.disposeWith(this);
+        const { chain, when, observe } = Dsl.disposeWith(this);
         const actualHeaderHeight$ = chain(this.showHeader$).map(show => {
             return show ? this.headerHeight$.value : 0;
         }, { dependsOn: this.headerHeight$ });
-        this._visibleRowCount$ = chain(this.bounds$).map(bounds => {
-            // TODO: this doesn't take into account any css styling adjustments etc.  Will investigate if it's an issue.
-            const rawRowCount = (bounds.height - actualHeaderHeight$.value) / this.rowHeight$.value;
-            return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
-        }, {
-            dependsOn: [actualHeaderHeight$, this.rowHeight$],
-            postponeWhile: chain(this.bounds$).pluckNumeric("height").isLessThan(1)
+        // const visibleRowCount$ = chain(this.bounds$).map(bounds => {
+        //   // TODO: this doesn't take into account any css styling adjustments etc.  Will investigate if it's an issue.
+        //   const rawRowCount = (bounds.height - actualHeaderHeight$.value) / this.rowHeight$.value;
+        //   return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+        // }, {
+        //   dependsOn: [actualHeaderHeight$, this.rowHeight$],
+        //   postponeWhile: chain(this.bounds$).pluckNumeric("height").isLessThan(1)
+        // });
+        //
+        // // const pageSize$ = chain(visibleRowCount$)
+        // //   .map(count => 2 * count).otherwise(0)
+        // const pageSize$ = ValueModel.constant(12)
+        when(this.data$).changes(is => {
+            this.virtualScrollDataSource.data = is;
         });
-        when(this._visibleRowCount$).changes(visibleRows => {
-            this.visibleRowCount.emit(visibleRows);
-        }, { initialValue: "triggerChangeUnlessNil" });
         this.onInit(() => {
             this.columns$ = chain(this.tableModel.columns);
             this.columnIds$ = chain(this.columns$).pluck("columnId");
             this.columnsById$ = chain(this.columns$).indexBy('columnId');
         });
+        const txo = new TransactionObserver({ verbose: false }).onEvent(e => console.log(e.name, e.payload));
+        // txo.observe('this.virtualScrollRowRange$', this.virtualScrollRowRange$);
+        // txo.observe('this.virtualScrollSpacerSize$', this.virtualScrollSpacerSize$);
+        // txo.observe('this.virtualRows$', this.virtualRows$);
     }
     get hideHeader() {
         return !this.showHeader;
@@ -4428,7 +4542,7 @@ class TableBodyComponent extends ResizeAwareComponent {
         return classes;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", enableScrolling: "enableScrolling" }, outputs: { visibleRowCount: "visibleRowCount" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\">\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"tableModel\"\n                        [editSession]=\"tableModel.getEditSessionFor(row)\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", scrollMode$: "scrollMode$", scrollMode: "scrollMode" }, host: { properties: { "attr.scrollMode": "this.scrollMode", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n<cdk-virtual-scroll-viewport  *ngIf=\"scrollMode$.value === 'virtual'\" class=\"virtual-scroll-container\" [tvsItemSize]=\"rowHeight$.value\" [headerHeight]=\"headerHeight$.value\">\n  <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"trackBy\">\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i4$5.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
 }
 __decorate([
     Proxify(),
@@ -4446,9 +4560,17 @@ __decorate([
     StoreInValueModel(),
     __metadata("design:type", Object)
 ], TableBodyComponent.prototype, "showHeader", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], TableBodyComponent.prototype, "scrollMode$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", String)
+], TableBodyComponent.prototype, "scrollMode", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-table-body", template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\">\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"tableModel\"\n                        [editSession]=\"tableModel.getEditSessionFor(row)\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
+            args: [{ selector: "aup-table-body", template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n<cdk-virtual-scroll-viewport  *ngIf=\"scrollMode$.value === 'virtual'\" class=\"virtual-scroll-container\" [tvsItemSize]=\"rowHeight$.value\" [headerHeight]=\"headerHeight$.value\">\n  <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"trackBy\">\n\n    <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data$: [{
                 type: Input
             }], tableModel: [{
@@ -4457,15 +4579,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], showHeader: [{
                 type: Input
-            }], visibleRowCount: [{
-                type: Output
             }], trackBy: [{
                 type: Input
-            }], enableScrolling: [{
+            }], scrollMode$: [{
+                type: Input
+            }], scrollMode: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ["class.enable-scrolling"]
+                args: ["attr.scrollMode"]
             }], baseCssClass: [{
                 type: HostBinding,
                 args: ["class"]
@@ -4801,28 +4923,13 @@ class TableComponent extends AbstractTableComponent {
     #filterModel_accessor_storage = proxify((TableFilterModel));
     get filterModel() { return this.#filterModel_accessor_storage; }
     set filterModel(value) { this.#filterModel_accessor_storage = value; }
-    #enablePaging$_accessor_storage = proxify((ValueModel));
-    get enablePaging$() { return this.#enablePaging$_accessor_storage; }
-    set enablePaging$(value) { this.#enablePaging$_accessor_storage = value; }
-    #enablePaging_accessor_storage = false;
-    get enablePaging() { return this.#enablePaging_accessor_storage; }
-    set enablePaging(value) { this.#enablePaging_accessor_storage = value; }
-    // enablePaging() {
-    //   if (isNil(this.pageController)) {
-    //     const pagedListModel = this.registerDisposable(PagedListModel.create(this._visibleRows$.getDelegate(), this._pageSize));
-    //     this._visibleRows$.setDelegate(pagedListModel);
-    //     this._pageController = pagedListModel.pageController;
-    //   }
-    // }
     _footerContentAdded = false;
     _filteredRows$ = this.registerDisposable(new DelegatingListModel());
-    _pageSize = new MutableValueModel();
-    pagedListModel;
+    scrollMode$;
     constructor(injector) {
         super(injector);
-        const { when } = Dsl.disposeWith(this);
-        this.onDispose(() => this.disposeOfPagedListModel());
-        when(this.enablePaging$).changes(enabled => this.configurePaging(enabled));
+        const { chain, when } = Dsl.disposeWith(this);
+        this.scrollMode$ = chain(this.enableScrolling$).map(enabled => enabled ? "virtual" : "none");
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4834,76 +4941,37 @@ class TableComponent extends AbstractTableComponent {
         else {
             this._filteredRows$.setDelegate(this._dataSource$);
         }
-        this.configurePaging(this.enablePaging$.value);
         this.tableModel.bindToTable(this._filteredRows$, this._visibleRows$);
     }
     getModel() {
         return this.tableModel;
     }
-    get pageController() {
-        // TODO: need to support external page controllers if the paging occurs to our primary data source.
-        return this.pagedListModel.pageController;
-    }
-    configurePaging(enable) {
-        if (enable) {
-            if (!this.pagedListModel) {
-                this.pagedListModel = PagedListModel.create(this._filteredRows$, this._pageSize);
-            }
-            this._visibleRows$.setDelegate(this.pagedListModel);
-        }
-        else {
-            this.disposeOfPagedListModel();
-            this._visibleRows$.setDelegate(this._filteredRows$);
-        }
-    }
-    disposeOfPagedListModel() {
-        if (this.pagedListModel) {
-            this.pagedListModel.dispose();
-            this.pagedListModel = null;
-        }
-    }
     footerContentChanged($event) {
         // console.log($event);
         this._footerContentAdded = true;
     }
-    //@Trace()
-    updatePageSize(count) {
-        this._pageSize.value = count;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel", enablePaging$: "enablePaging$", enablePaging: "enablePaging" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel" }, providers: [
             { provide: AbstractTableComponent, useExisting: TableComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [trackBy]=\"trackBy\"\n                (visibleRowCount)=\"updatePageSize($event)\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n  <aup-paginator *ngIf=\"enablePaging$.value\" [pageController]=\"pageController\"></aup-paginator>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: PaginatorComponent, selector: "aup-paginator", inputs: ["pageController"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "enableScrolling"], outputs: ["visibleRowCount"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [trackBy]=\"trackBy\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
 }
 __decorate([
     Proxify(),
-    __metadata("design:type", Object)
+    __metadata("design:type", TableModel)
 ], TableComponent.prototype, "tableModel", null);
 __decorate([
     Proxify(),
     __metadata("design:type", Object)
 ], TableComponent.prototype, "filterModel", null);
-__decorate([
-    Proxify(),
-    __metadata("design:type", Object)
-], TableComponent.prototype, "enablePaging$", null);
-__decorate([
-    StoreInValueModel(),
-    __metadata("design:type", Object)
-], TableComponent.prototype, "enablePaging", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TableComponent }
-                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [trackBy]=\"trackBy\"\n                (visibleRowCount)=\"updatePageSize($event)\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n  <aup-paginator *ngIf=\"enablePaging$.value\" [pageController]=\"pageController\"></aup-paginator>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"] }]
+                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [trackBy]=\"trackBy\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { tableModel: [{
                 type: Input
             }], filterModel: [{
                 type: Input
-            }], enablePaging$: [{
-                type: Input
-            }], enablePaging: [{
-                type: Input
             }] } });
 
 const SVG_HEIGHT = 60;
@@ -5543,8 +5611,11 @@ class TreeTableComponent extends AbstractTableComponent {
     #expansionModel_accessor_storage = proxify((TreeExpansionModel));
     get expansionModel() { return this.#expansionModel_accessor_storage; }
     set expansionModel(value) { this.#expansionModel_accessor_storage = value; }
+    scrollMode$;
     constructor(injector) {
         super(injector);
+        const { chain } = Dsl.disposeWith(this);
+        this.scrollMode$ = chain(this.enableScrolling$).map(enabled => enabled ? "virtual" : "none");
     }
     ngOnInit() {
         super.ngOnInit();
@@ -5564,7 +5635,7 @@ class TreeTableComponent extends AbstractTableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TreeTableComponent, selector: "aup-tree-table", inputs: { treeTableModel: "treeTableModel", expansionModel: "expansionModel" }, providers: [
             { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "enableScrolling"], outputs: ["visibleRowCount"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
 }
 __decorate([
     Proxify(),
@@ -5578,7 +5649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             type: Component,
             args: [{ selector: 'aup-tree-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"] }]
+                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { treeTableModel: [{
                 type: Input
             }], expansionModel: [{
@@ -5814,7 +5885,8 @@ class ComponentsModule {
             MatDividerModule,
             MatProgressSpinnerModule,
             MatProgressBarModule,
-            ScrollingModule], exports: [NumberInputComponent,
+            ScrollingModule,
+            TableVirtualScrollModule], exports: [NumberInputComponent,
             StringInputComponent,
             TextInputComponent,
             PasswordInputComponent,
@@ -5877,7 +5949,8 @@ class ComponentsModule {
             MatDividerModule,
             MatProgressSpinnerModule,
             MatProgressBarModule,
-            ScrollingModule] });
+            ScrollingModule,
+            TableVirtualScrollModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
@@ -5903,7 +5976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         MatDividerModule,
                         MatProgressSpinnerModule,
                         MatProgressBarModule,
-                        ScrollingModule
+                        ScrollingModule,
+                        TableVirtualScrollModule
                     ],
                     declarations: [
                         AbstractInputComponent,
@@ -6150,7 +6224,7 @@ class ActivityActionsComponent extends DisposableComponent {
         this.cancelCommandComponent.requestFocus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
 }
 __decorate([
     Proxify(),
@@ -6162,7 +6236,7 @@ __decorate([
 ], ActivityActionsComponent.prototype, "cancelCommand", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommandComponent: [{
                 type: ViewChild,
                 args: ["confirmCommandComponent"]
@@ -11987,5 +12061,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
+export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, CustomVirtualScrollStrategy, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VirtualScrollDataSource, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map