@coolon/angular-ui-powerups 13.5.2 → 13.6.0

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

@@ -1,3 +1,4 @@
+import { ObserversModule } from '@angular/cdk/observers';
 import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -40,7 +41,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$5 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$7 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, Functions, MultipleSelectionModel, AbstractComputedListModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, Functions, MultipleSelectionModel, AbstractComputedListModel, DelegatingSelectionModel, DirtyTrackingForm, TransactionObserver, PagedListModel, PageController, Trace, ComputedListModel, Deferred } from '@coolon/pectin';
 import { __decorate, __param, __metadata, __awaiter } from 'tslib';
 import * as _ from 'lodash';
 import { isEmpty, isString, isFunction, isNil, isInteger, isEqual, uniq, first, findLast, isObject, isNumber, isNaN as isNaN$1 } from 'lodash';
@@ -50,9 +51,10 @@ import { lang as lang$1, assert as assert$1, Stringy, Klass, Opts } from '@coolo
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Enum } from 'typescript-string-enums';
 import * as i3 from '@angular/material/core';
-import ResizeObserver from 'resize-observer-polyfill';
+import { isNil as isNil$1, isEmpty as isEmpty$1 } from 'lodash-es';
 import escapeStringRegexp from 'escape-string-regexp';
 import produce from 'immer';
+import ResizeObserver from 'resize-observer-polyfill';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i6$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -62,7 +64,6 @@ import * as i1$e from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import * as i1$c from '@angular/router';
 import { UrlSegment, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterModule, ActivatedRouteSnapshot } from '@angular/router';
-import { isEmpty as isEmpty$1 } from 'lodash-es';
 import * as i1$d from '@angular/cdk/overlay';
 import * as i2$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -2368,90 +2369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 args: [SwitchCaseOption]
             }] } });
 
-class Dimension {
-    constructor(width, height) {
-        this.width = width;
-        this.height = height;
-    }
-}
-
-class Point {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    static from(data) {
-        return new Point(data.x, data.y);
-    }
-    translate(x, y) {
-        return new Point(this.x + x, this.y + y);
-    }
-}
-
-class Bounds extends Dimension {
-    constructor(top, left, width, height) {
-        super(width, height);
-        this.top = top;
-        this.left = left;
-        this.width = width;
-        this.height = height;
-    }
-    relativePositionOf(point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
-        }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
-        }
-    }
-}
-(function (Bounds) {
-    function ofElement(element) {
-        const rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
-
-class ResizeAwareComponent extends DisposableComponent {
-    constructor(elementRef, ngZone) {
-        super();
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
-    }
-    ngAfterViewInit() {
-        const element = this.elementRef.nativeElement;
-        const ro = new ResizeObserver((entries, observer) => {
-            this.ngZone.run(() => this._updateBounds());
-        });
-        ro.observe(element);
-        this.onDispose(() => ro.disconnect());
-        setTimeout(() => this._updateBounds());
-    }
-    get boundsModel() {
-        return this._boundsModel.readonly;
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    // TODO: Make this handle body scroll
-    relativePositionOf(point) {
-        return this.bounds.relativePositionOf(point);
-    }
-    get bounds() {
-        return this._boundsModel.value;
-    }
-    _updateBounds() {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
-    }
-}
-ResizeAwareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ResizeAwareComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
 const HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
 const CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
 const CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
@@ -2854,9 +2771,9 @@ class CustomTemplateColumnModel extends ColumnModel {
  *   }
  * }
  */
-class AbstractTableComponent extends ResizeAwareComponent {
-    constructor(elementRef, ngZone, injector) {
-        super(elementRef, ngZone);
+class AbstractTableComponent extends DisposableComponent {
+    constructor(injector) {
+        super();
         this.injector = injector;
         /**
          * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
@@ -2869,33 +2786,14 @@ class AbstractTableComponent extends ResizeAwareComponent {
         this.rowHeight = new MutableValueModel(48);
         this.baseCssClass = 'aup-table-component';
         const { chain, when } = Dsl.disposeWith(this);
-        const actualHeaderHeight = chain(this.showHeaderModel).map(show => {
-            return show ? this.headerHeight.value : 0;
-        }, { dependsOn: this.headerHeight });
-        this.visibleRowCount = chain(this.boundsModel).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.boundsModel).pluckNumeric('height').isLessThan(1)
-        });
-    }
-    get hideHeader() {
-        return !this.showHeader;
-    }
-    getModel() {
-        return lang$1.abstractMethod(this.constructor);
     }
     ngOnInit() {
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.getModel().initialise(this.injector);
-        this.columns = chain(this.getModel().columns);
-        this.columnIds = chain(this.columns).pluck('columnId');
-        this.columnsById = chain(this.columns).indexBy('columnId');
+        this.columnsById = chain(this.getModel().columns).indexBy('columnId');
     }
-    isEditing(row) {
-        return !!this.getModel().getEditSessionFor(row);
+    getModel() {
+        return lang$1.abstractMethod(this.constructor);
     }
     registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
         const column = this.columnsById.get(columnId);
@@ -2903,38 +2801,15 @@ class AbstractTableComponent extends ResizeAwareComponent {
             column.setTemplate(templateRef, viewContainer, fillCell, padChild);
         }
     }
-    notifyCellClicked(columnModel, row) {
-        this.getModel()._notifyCellClicked(columnModel, row);
-    }
-    // @Trace()
-    isFirstVisibleColumn(columnId) {
-        var _a;
-        return ((_a = this.getModel().firstVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
-    }
-    // @Trace()
-    isLastVisibleColumn(columnId) {
-        var _a;
-        return ((_a = this.getModel().lastVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
-    }
-    getColumnClasses(columnId) {
-        const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
-        if (this.isFirstVisibleColumn(columnId)) {
-            classes.push('first-visible-column');
-        }
-        if (this.isLastVisibleColumn(columnId)) {
-            classes.push('last-visible-column');
-        }
-        return classes;
-    }
 }
-AbstractTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AbstractTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeaderModel: "showHeaderModel", showHeader: "showHeader", enableScrolling: "enableScrolling" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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 });
 __decorate([
     TrackExternal({ defaultValue: true }),
     __metadata("design:type", ValueModel)
-], AbstractTableComponent.prototype, "showHeaderModel", void 0);
+], AbstractTableComponent.prototype, "showHeader$", void 0);
 __decorate([
-    StoreInValueModel('showHeaderModel'),
+    StoreInValueModel("showHeader$"),
     __metadata("design:type", Boolean)
 ], AbstractTableComponent.prototype, "showHeader", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, decorators: [{
@@ -2943,21 +2818,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                     selector: 'aup-abstract-table',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { showHeaderModel: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { showHeader$: [{
                 type: Input
             }], showHeader: [{
                 type: Input
             }], enableScrolling: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.enable-scrolling']
             }], baseCssClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], hideHeader: [{
-                type: HostBinding,
-                args: ['class.hide-header']
             }] } });
 
 class ColumnTemplateDirective {
@@ -2991,35 +2860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-const TEXT_SEARCH_FORMATTER_KEY = `aup:table:textSearchFormatter`;
-const Keys = Enum("useFunction", "useInstance", "useClass");
-function EnableCellTextSearch(options) {
-    assert$1.notNil(options);
-    return (constructor) => {
-        const klass = Klass.get(constructor);
-        assert$1.isFalsey(klass.hasOwnMetadata(TEXT_SEARCH_FORMATTER_KEY), "class already decorated with @EnableCellTextSearch");
-        klass.defineMetadata(TEXT_SEARCH_FORMATTER_KEY, options);
-    };
-}
-(function (EnableCellTextSearch) {
-    function getFormatter(renderer, useDefault) {
-        var _a;
-        const options = (_a = Klass.get(renderer).getMetadata(TEXT_SEARCH_FORMATTER_KEY)) !== null && _a !== void 0 ? _a : {};
-        if (options[Keys.useFunction]) {
-            return ColumnTextSearchFormatter.forFormatter(options[Keys.useFunction]);
-        }
-        if (options[Keys.useInstance]) {
-            return options[Keys.useInstance];
-        }
-        if (options[Keys.useClass]) {
-            return new ColumnTextSearchFormatter.Delegating(options[Keys.useClass]);
-        }
-        return useDefault();
-    }
-    EnableCellTextSearch.getFormatter = getFormatter;
-})(EnableCellTextSearch || (EnableCellTextSearch = {}));
-
-let DefaultCellRendererComponent = class DefaultCellRendererComponent {
+class DefaultCellRendererComponent {
     constructor() {
     }
     set value(value) {
@@ -3028,13 +2869,9 @@ let DefaultCellRendererComponent = class DefaultCellRendererComponent {
     get value() {
         return this._value;
     }
-};
+}
 DefaultCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DefaultCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DefaultCellRendererComponent, selector: "aup-default-cell-renderer", inputs: { value: "value" }, ngImport: i0, template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""], pipes: { "aupHighlight": HighlightPipe } });
-DefaultCellRendererComponent = __decorate([
-    EnableCellTextSearch({ useClass: ColumnTextSearchFormatter.DefaultValueFormatter }),
-    __metadata("design:paramtypes", [])
-], DefaultCellRendererComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: "aup-default-cell-renderer", template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""] }]
@@ -3088,37 +2925,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-let formatter = (row) => row.map(e => e === null || e === void 0 ? void 0 : e.toString()).join(", ");
-let DefaultListCellRendererComponent = class DefaultListCellRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        const { chain } = Dsl.disposeWith(this);
-        this.text$ = chain(this.value$).reduce(formatter);
-    }
-};
-DefaultListCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultListCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultListCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DefaultListCellRendererComponent, selector: "aup-default-list-cell-renderer", inputs: { value$: "value$", value: "value" }, usesInheritance: true, ngImport: i0, template: "<span [innerHTML]=\"text$.value| aupHighlight\"></span>\n", styles: [""], pipes: { "aupHighlight": HighlightPipe } });
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", ListModel)
-], DefaultListCellRendererComponent.prototype, "value$", void 0);
-__decorate([
-    StoreInListModel("value$"),
-    __metadata("design:type", Array)
-], DefaultListCellRendererComponent.prototype, "value", void 0);
-DefaultListCellRendererComponent = __decorate([
-    EnableCellTextSearch({ useClass: ColumnTextSearchFormatter.DefaultArrayFormatter }),
-    __metadata("design:paramtypes", [])
-], DefaultListCellRendererComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultListCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "aup-default-list-cell-renderer", template: "<span [innerHTML]=\"text$.value| aupHighlight\"></span>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value$: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
-
 class SelectionCellComponent extends DisposableComponent {
     constructor() {
         super();
@@ -3390,6 +3196,34 @@ class ColumnListModel extends AbstractComputedListModel {
     }
 }
 
+const TEXT_SEARCH_FORMATTER_KEY = `aup:table:textSearchFormatter`;
+const Keys = Enum("useFunction", "useInstance", "useClass");
+function EnableCellTextSearch(options) {
+    assert$1.notNil(options);
+    return (constructor) => {
+        const klass = Klass.get(constructor);
+        assert$1.isFalsey(klass.hasOwnMetadata(TEXT_SEARCH_FORMATTER_KEY), "class already decorated with @EnableCellTextSearch");
+        klass.defineMetadata(TEXT_SEARCH_FORMATTER_KEY, options);
+    };
+}
+(function (EnableCellTextSearch) {
+    function getFormatter(renderer, useDefault) {
+        var _a;
+        const options = (_a = Klass.get(renderer).getMetadata(TEXT_SEARCH_FORMATTER_KEY)) !== null && _a !== void 0 ? _a : {};
+        if (options[Keys.useFunction]) {
+            return ColumnTextSearchFormatter.forFormatter(options[Keys.useFunction]);
+        }
+        if (options[Keys.useInstance]) {
+            return options[Keys.useInstance];
+        }
+        if (options[Keys.useClass]) {
+            return new ColumnTextSearchFormatter.Delegating(options[Keys.useClass]);
+        }
+        return useDefault();
+    }
+    EnableCellTextSearch.getFormatter = getFormatter;
+})(EnableCellTextSearch || (EnableCellTextSearch = {}));
+
 class CustomValueColumnModel extends ColumnModel {
     constructor(columnId, defaults, getValue) {
         super(columnId, defaults);
@@ -3443,11 +3277,11 @@ class ListPropertyColumnModel extends ColumnModel {
     constructor(id, property, defaults) {
         super(id, defaults);
         this.property = property;
-        this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(", ");
-        this.cellRenderer(DefaultListCellRendererComponent);
+        this._format = (value) => value === null || value === void 0 ? void 0 : value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(", ");
+        this.cellRenderer(DefaultCellRendererComponent);
     }
     cellRenderer(componentType) {
-        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.DefaultArrayFormatter()), row => row[this.property]);
+        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => ColumnTextSearchFormatter.forFormatter(value => this._format(value))), row => row[this.property]);
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
             let rowElement = rowData.row[this.property];
             // @ts-ignore Started complaining in ts 4.5.. but I think my logic is correct...
@@ -3488,7 +3322,7 @@ class PropertyColumnModel extends ColumnModel {
         this.cellRenderer(DefaultCellRendererComponent);
     }
     cellRenderer(componentType, onComponentInitOrOptions) {
-        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.DefaultValueFormatter()), row => row[this.property]);
+        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => ColumnTextSearchFormatter.forFormatter(value => this._format(value))), row => row[this.property]);
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
             if (firstTime) {
                 if (isFunction(onComponentInitOrOptions)) {
@@ -3634,7 +3468,8 @@ class RowClass {
 class AbstractTableModel extends GarbageCollector {
     constructor() {
         super();
-        this._dataSource = this.registerDisposable(new DelegatingListModel());
+        this._rawDataSource = this.registerDisposable(new DelegatingListModel());
+        this._visibleRows$ = this.registerDisposable(new DelegatingListModel());
         this._columnList = this.registerDisposable(new ColumnListModel());
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
@@ -3659,11 +3494,12 @@ class AbstractTableModel extends GarbageCollector {
             allowNil: true,
             dependsOn: this.columns
         });
-        this.dataSource = chain(this._dataSource)
+        this._filteredRows$ = chain(this._rawDataSource)
             .reduceToList(items => this._textSearchPredicate$.value(items), {
             dependsOn: this._textSearchPredicate$
         })
             .replaceAll(this.rowsBeingEdited$);
+        this._visibleRows$.setDelegate(this._filteredRows$);
         this.firstEditableColumn$ = chain(this.columns).select(c => c.hasEditorPortal()).first();
         this.firstVisibleColumn$ = chain(this._columnList).first();
         this.lastVisibleColumn$ = chain(this._columnList).last();
@@ -3687,15 +3523,18 @@ class AbstractTableModel extends GarbageCollector {
         });
         this.columns.value.forEach(c => c.initialise(customInjector));
     }
+    get visibleRows$() {
+        return this._visibleRows$.readonly;
+    }
     setDataSource(sourceOfTruth) {
-        this._dataSource.setDelegate(sourceOfTruth);
+        this._rawDataSource.setDelegate(sourceOfTruth);
     }
     setTextSearch(searchText$, throttleDelayMilliseconds = 100) {
         const { chain } = Dsl.disposeWith(this);
         this._searchText$.setDelegate(chain(searchText$).throttle(throttleDelayMilliseconds));
     }
     identityOf(row) {
-        return this._dataSource.identityOf(row);
+        return this._rawDataSource.identityOf(row);
     }
     get rowsBeingEdited$() {
         return this._rowsBeingEdited$.readonly;
@@ -3788,53 +3627,382 @@ class AbstractTableModel extends GarbageCollector {
             this._rowsBeingEdited$.remove(editSession.liveRowValue$.value);
             this._editorSessions.remove(editSession);
         });
-        return editSession;
+        return editSession;
+    }
+    getEditSessionFor(row) {
+        return this._editorSessionByRowId.get(this.identityOf(row));
+    }
+    cancelAllEditorSessions() {
+        this._editorSessions.runInTransaction((draft) => {
+            this._rowsBeingEdited$.runInTransaction(() => {
+                draft.value.forEach(session => session.dispose());
+            });
+        });
+    }
+    isRowSelectionEnabledFor(column) {
+        return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
+    }
+    isRowSelectionEnabled() {
+        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns$.value;
+    }
+    hasUserSelectionModel() {
+        var _a;
+        return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
+    }
+    getSelectionModel() {
+        var _a;
+        return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+    }
+    isHoverEnabled() {
+        return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
+    }
+    isCursorEnabled(column) {
+        return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
+    }
+    selectRow(row) {
+        var _a;
+        (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
+    }
+    onRowClicked(callback) {
+        return this.rowClickListeners.add(callback);
+    }
+    _notifyCellClicked(columnModel, row) {
+        if (this.isRowSelectionEnabledFor(columnModel)) {
+            this.selectRow(row);
+        }
+        this.rowClickListeners.fire(l => l(row));
+    }
+}
+TrackExternal.oneTimeBinding(AbstractTableModel);
+
+/**
+ * Example:
+ * @example
+ * const model = new TableModel(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Editable tables
+ * @example
+ * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+ *   if (form.validate()) {
+ *     // normal form save stuff
+ *     return true; // finish editing
+ *   }
+ *   return false; // continue editiing
+ * }
+ * const colorsNames: ListModel<string> = ...;
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
+ *   table.pluck("lastName").cellEditor(StringInputComponent, {
+ *     validators: [Validator.present("We need a last name")]
+ *   });
+ *   table.pluck("age").cellEditor(NumberInputComponent);
+ *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+ *     initialiseComponent(component: SelectInputComponent) {
+ *       selectInput.optionsModel = colorsNames; // <- initialise our component
+ *     }
+ *   });
+ *   table.addEditControls(saveCommand); // <- required to enable editing
+ * });
+ *
+ * Selection models
+ * @example
+ * const model = new TableModel(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ * });
+ *
+ * Custom cell renderers and editors
+ * @example
+ * const model = new TableModel(heroList, table => {
+ *   table.pluck("favoriteColor")
+ *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+ *        // configure your component with what ever you need.
+ *      });
+ *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Template columns
+ * @example
+ * const model = new TableModel(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.addTemplateColumn("myTemplate");
+ * });
+ *
+ * <div *aupColumnTemplate="let hero; columnId: 'myTemplate'">{{hero.age}}</div>
+ *
+ * I18n
+ * @example
+ * [table.yml]
+ * table:
+ *   columns(ColumnTextProperties[]):
+ *      firstName:
+ *         headerText: "First Name"
+ *      fullName:
+ *         headerText: "Full Name"
+ *
+ * const model = new TableModel(heroList, table => {
+ *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *
+ *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+ * });
+ */
+class TableModel extends AbstractTableModel {
+    constructor(sourceOfTruth, builder) {
+        super();
+        this._pageSize = new MutableValueModel();
+        if (builder) {
+            builder(this);
+        }
+        this.setDataSource(sourceOfTruth);
+        const txo = new TransactionObserver({ verbose: true }).onEvent(e => console.log(e.name, e.payload));
+        txo.observe("this.visibleRows$", this.visibleRows$);
+    }
+    get pageController() {
+        return this._pageController;
+    }
+    enablePaging() {
+        if (isNil$1(this.pageController)) {
+            const pagedListModel = this.registerDisposable(PagedListModel.wrap(this._visibleRows$.getDelegate()));
+            this._visibleRows$.setDelegate(pagedListModel);
+            this._pageController = pagedListModel.pageController;
+            this._pageController.setPageSize(this._pageSize);
+        }
+    }
+    addSelectionColumn(selectionModel, showSelectionColumn) {
+        return this._addSelectionColumn(selectionModel, showSelectionColumn);
+    }
+    updatePageSize(count) {
+        this._pageSize.value = count;
+    }
+}
+
+class Dimension {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+}
+
+class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    static from(data) {
+        return new Point(data.x, data.y);
+    }
+    translate(x, y) {
+        return new Point(this.x + x, this.y + y);
+    }
+}
+
+class Bounds extends Dimension {
+    constructor(top, left, width, height) {
+        super(width, height);
+        this.top = top;
+        this.left = left;
+        this.width = width;
+        this.height = height;
+    }
+    relativePositionOf(point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
+        }
+    }
+}
+(function (Bounds) {
+    function ofElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+class ResizeAwareComponent extends DisposableComponent {
+    constructor(elementRef, ngZone) {
+        super();
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+    }
+    ngAfterViewInit() {
+        const element = this.elementRef.nativeElement;
+        const ro = new ResizeObserver((entries, observer) => {
+            this.ngZone.run(() => this._updateBounds());
+        });
+        ro.observe(element);
+        this.onDispose(() => ro.disconnect());
+        setTimeout(() => this._updateBounds());
+    }
+    get boundsModel() {
+        return this._boundsModel.readonly;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    // TODO: Make this handle body scroll
+    relativePositionOf(point) {
+        return this.bounds.relativePositionOf(point);
+    }
+    get bounds() {
+        return this._boundsModel.value;
+    }
+    _updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+}
+ResizeAwareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ResizeAwareComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
+
+class TableBodyComponent extends ResizeAwareComponent {
+    constructor(elementRef, ngZone) {
+        super(elementRef, ngZone);
+        this.visibleRowCount = new EventEmitter();
+        /**
+         * 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.
+         */
+        this.enableScrolling = false;
+        // TODO: support user defined header and row heights via css vars.
+        this.headerHeight = new MutableValueModel(56);
+        this.rowHeight = new MutableValueModel(48);
+        this.baseCssClass = "aup-table-component";
+        const { chain, when } = Dsl.disposeWith(this);
+        const actualHeaderHeight = chain(this.showHeader$).map(show => {
+            return show ? this.headerHeight.value : 0;
+        }, { dependsOn: this.headerHeight });
+        this._visibleRowCount = chain(this.boundsModel).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.boundsModel).pluckNumeric("height").isLessThan(1)
+        });
+        when(this._visibleRowCount).changes(visibleRows => {
+            this.visibleRowCount.emit(visibleRows);
+        }, { initialValue: "triggerChangeUnlessNil" });
     }
-    getEditSessionFor(row) {
-        return this._editorSessionByRowId.get(this.identityOf(row));
+    get hideHeader() {
+        return !this.showHeader;
     }
-    cancelAllEditorSessions() {
-        this._editorSessions.runInTransaction((draft) => {
-            this._rowsBeingEdited$.runInTransaction(() => {
-                draft.value.forEach(session => session.dispose());
-            });
-        });
+    ngOnInit() {
+        const { chain } = Dsl.disposeWith(this);
+        this.columns = chain(this.tableModel.columns);
+        this.columnIds = chain(this.columns).pluck("columnId");
+        this.columnsById = chain(this.columns).indexBy('columnId');
     }
-    isRowSelectionEnabledFor(column) {
-        return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
+    isEditing(row) {
+        return !!this.tableModel.getEditSessionFor(row);
     }
-    isRowSelectionEnabled() {
-        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns$.value;
+    notifyCellClicked(columnModel, row) {
+        this.tableModel._notifyCellClicked(columnModel, row);
     }
-    hasUserSelectionModel() {
+    // @Trace()
+    isFirstVisibleColumn(columnId) {
         var _a;
-        return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
+        return ((_a = this.tableModel.firstVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
-    getSelectionModel() {
+    // @Trace()
+    isLastVisibleColumn(columnId) {
         var _a;
-        return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+        return ((_a = this.tableModel.lastVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
-    isHoverEnabled() {
-        return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
+    getColumnClasses(columnId) {
+        const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
+        if (this.isFirstVisibleColumn(columnId)) {
+            classes.push("first-visible-column");
+        }
+        if (this.isLastVisibleColumn(columnId)) {
+            classes.push("last-visible-column");
+        }
+        return classes;
     }
-    isCursorEnabled(column) {
-        return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
+}
+TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableBodyComponent, selector: "aup-table-body", inputs: { tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", 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]=\"tableModel.visibleRows$.value\" [trackBy]=\"tableModel.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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"tableModel.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"], components: [{ type: i1$b.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }, { type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { type: i1$b.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$b.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$b.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$b.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$b.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$b.MatCellDef, selector: "[matCellDef]" }, { type: i1$b.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$b.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$b.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", AbstractTableModel)
+], TableBodyComponent.prototype, "tableModel", void 0);
+__decorate([
+    TrackExternal({ defaultValue: true }),
+    __metadata("design:type", ValueModel)
+], TableBodyComponent.prototype, "showHeader$", void 0);
+__decorate([
+    StoreInValueModel("showHeader$"),
+    __metadata("design:type", Boolean)
+], TableBodyComponent.prototype, "showHeader", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aup-table-body", template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.visibleRows$.value\" [trackBy]=\"tableModel.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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"tableModel.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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { tableModel: [{
+                type: Input
+            }], showHeader$: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], visibleRowCount: [{
+                type: Output
+            }], enableScrolling: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ["class.enable-scrolling"]
+            }], baseCssClass: [{
+                type: HostBinding,
+                args: ["class"]
+            }], hideHeader: [{
+                type: HostBinding,
+                args: ["class.hide-header"]
+            }] } });
+
+class PaginatorComponent extends DisposableComponent {
+    constructor() {
+        super();
     }
-    selectRow(row) {
-        var _a;
-        (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
+    ngOnInit() {
     }
-    onRowClicked(callback) {
-        return this.rowClickListeners.add(callback);
+    get totalPages() {
+        return this.pageController.totalPages.value;
     }
-    _notifyCellClicked(columnModel, row) {
-        if (this.isRowSelectionEnabledFor(columnModel)) {
-            this.selectRow(row);
-        }
-        this.rowClickListeners.fire(l => l(row));
+    get pageNumber() {
+        return this.pageController.pageNumber.value;
+    }
+    get previousCommand() {
+        return this.pageController.previousCommand;
+    }
+    get nextCommand() {
+        return this.pageController.nextCommand;
     }
 }
-TrackExternal.oneTimeBinding(AbstractTableModel);
+PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin:0 8px 0 0}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", PageController)
+], PaginatorComponent.prototype, "pageController", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-paginator', template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin:0 8px 0 0}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pageController: [{
+                type: Input
+            }] } });
 
 /**
  * Create your model:
@@ -3897,29 +4065,43 @@ TrackExternal.oneTimeBinding(AbstractTableModel);
  * }
  */
 class TableComponent extends AbstractTableComponent {
-    constructor(elementRef, ngZone, injector) {
-        super(elementRef, ngZone, injector);
+    constructor() {
+        super(...arguments);
+        this._footerContentAdded = false;
     }
     getModel() {
         return this.tableModel;
     }
+    footerContentChanged($event) {
+        console.log($event);
+        this._footerContentAdded = true;
+    }
+    updatePageSize(count) {
+        this.tableModel.updatePageSize(count);
+    }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel" }, providers: [
         { provide: AbstractTableComponent, useExisting: TableComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().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]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"getModel()\"\n                        [editSession]=\"getModel().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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\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"], components: [{ type: i1$b.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }, { type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { type: i1$b.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$b.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$b.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$b.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$b.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$b.MatCellDef, selector: "[matCellDef]" }, { type: i1$b.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$b.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$b.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                (visibleRowCount)=\"updatePageSize($event)\"\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=\"tableModel.pageController\" [pageController]=\"tableModel.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"], components: [{ type: TableBodyComponent, selector: "aup-table-body", inputs: ["tableModel", "showHeader$", "showHeader", "enableScrolling"], outputs: ["visibleRowCount"] }, { type: PaginatorComponent, selector: "aup-paginator", inputs: ["pageController"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
-    __metadata("design:type", AbstractTableModel)
+    __metadata("design:type", TableModel)
 ], TableComponent.prototype, "tableModel", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number]),
+    __metadata("design:returntype", void 0)
+], TableComponent.prototype, "updatePageSize", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TableComponent }
-                    ], template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().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]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"getModel()\"\n                        [editSession]=\"getModel().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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { tableModel: [{
+                    ], template: "<aup-table-body [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                (visibleRowCount)=\"updatePageSize($event)\"\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=\"tableModel.pageController\" [pageController]=\"tableModel.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"] }]
+        }], propDecorators: { tableModel: [{
                 type: Input
-            }] } });
+            }], updatePageSize: [] } });
 
 const SVG_HEIGHT = 60;
 class TreeInheritanceIconComponent {
@@ -4497,17 +4679,17 @@ class TreeTableModel extends AbstractTableModel {
  * }
  */
 class TreeTableComponent extends AbstractTableComponent {
-    constructor(elementRef, ngZone, injector) {
-        super(elementRef, ngZone, injector);
+    constructor(injector) {
+        super(injector);
     }
     getModel() {
         return this.treeTableModel;
     }
 }
-TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TreeTableComponent, selector: "aup-tree-table", inputs: { treeTableModel: "treeTableModel" }, providers: [
         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().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]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"getModel()\"\n                        [editSession]=\"getModel().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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\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", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label,td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}\n"], components: [{ type: i1$b.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }, { type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { type: i1$b.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$b.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$b.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$b.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$b.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$b.MatCellDef, selector: "[matCellDef]" }, { type: i1$b.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$b.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$b.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label,: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}\n"], components: [{ type: TableBodyComponent, selector: "aup-table-body", inputs: ["tableModel", "showHeader$", "showHeader", "enableScrolling"], outputs: ["visibleRowCount"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", TreeTableModel)
@@ -4516,8 +4698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             type: Component,
             args: [{ selector: 'aup-tree-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-                    ], template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().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]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell [column]=\"column\"\n                        [row]=\"row\"\n                        [tableModel]=\"getModel()\"\n                        [editSession]=\"getModel().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\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\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", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label,td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { treeTableModel: [{
+                    ], template: "<aup-table-body [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label,: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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { treeTableModel: [{
                 type: Input
             }] } });
 
@@ -4594,38 +4776,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 args: ['keyup.arrowUp', ['$event']]
             }] } });
 
-class PaginatorComponent extends DisposableComponent {
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-    }
-    get totalPages() {
-        return this.pageController.totalPages.value;
-    }
-    get pageNumber() {
-        return this.pageController.pageNumber.value;
-    }
-    get previousCommand() {
-        return this.pageController.previousCommand;
-    }
-    get nextCommand() {
-        return this.pageController.nextCommand;
-    }
-}
-PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", PageController)
-], PaginatorComponent.prototype, "pageController", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'aup-paginator', template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { pageController: [{
-                type: Input
-            }] } });
-
 class LabelledValueComponent extends DisposableComponent {
     constructor() {
         super();
@@ -4745,7 +4895,6 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         EditRowControls,
         ColumnTemplateDirective,
         DefaultCellRendererComponent,
-        DefaultListCellRendererComponent,
         TableCellComponent,
         SelectionCellComponent,
         SelectionHeaderCellComponent,
@@ -4774,7 +4923,8 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         CardStackComponent,
         LabelledValueComponent,
         LoadingContainerComponent,
-        MarkdownComponent], imports: [CommonModule,
+        MarkdownComponent,
+        TableBodyComponent], imports: [CommonModule,
         BrowserAnimationsModule,
         FormsModule,
         MatInputModule,
@@ -4909,7 +5059,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         EditRowControls,
                         ColumnTemplateDirective,
                         DefaultCellRendererComponent,
-                        DefaultListCellRendererComponent,
                         TableCellComponent,
                         SelectionCellComponent,
                         SelectionHeaderCellComponent,
@@ -4938,7 +5087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         CardStackComponent,
                         LabelledValueComponent,
                         LoadingContainerComponent,
-                        MarkdownComponent
+                        MarkdownComponent,
+                        TableBodyComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -8274,98 +8424,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 }]
         }] });
 
-/**
- * Example:
- * @example
- * const model = new TableModel(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Editable tables
- * @example
- * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
- *   if (form.validate()) {
- *     // normal form save stuff
- *     return true; // finish editing
- *   }
- *   return false; // continue editiing
- * }
- * const colorsNames: ListModel<string> = ...;
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
- *   table.pluck("lastName").cellEditor(StringInputComponent, {
- *     validators: [Validator.present("We need a last name")]
- *   });
- *   table.pluck("age").cellEditor(NumberInputComponent);
- *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
- *     initialiseComponent(component: SelectInputComponent) {
- *       selectInput.optionsModel = colorsNames; // <- initialise our component
- *     }
- *   });
- *   table.addEditControls(saveCommand); // <- required to enable editing
- * });
- *
- * Selection models
- * @example
- * const model = new TableModel(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- * });
- *
- * Custom cell renderers and editors
- * @example
- * const model = new TableModel(heroList, table => {
- *   table.pluck("favoriteColor")
- *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
- *        // configure your component with what ever you need.
- *      });
- *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
- *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Template columns
- * @example
- * const model = new TableModel(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.addTemplateColumn("myTemplate");
- * });
- *
- * <div *aupColumnTemplate="let hero; columnId: 'myTemplate'">{{hero.age}}</div>
- *
- * I18n
- * @example
- * [table.yml]
- * table:
- *   columns(ColumnTextProperties[]):
- *      firstName:
- *         headerText: "First Name"
- *      fullName:
- *         headerText: "Full Name"
- *
- * const model = new TableModel(heroList, table => {
- *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- *
- *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
- * });
- */
-class TableModel extends AbstractTableModel {
-    constructor(sourceOfTruth, builder) {
-        super();
-        if (builder) {
-            builder(this);
-        }
-        this.setDataSource(sourceOfTruth);
-    }
-    addSelectionColumn(selectionModel, showSelectionColumn) {
-        return this._addSelectionColumn(selectionModel, showSelectionColumn);
-    }
-}
-
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -9788,7 +9846,8 @@ AngularUiPowerupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DirectivesModule,
         ComponentsModule,
         PlaceModule,
-        InteractionModule], exports: [InteractionModule,
+        InteractionModule,
+        ObserversModule], exports: [InteractionModule,
         PlaceModule,
         DirectivesModule,
         ComponentsModule,
@@ -9805,7 +9864,8 @@ AngularUiPowerupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             DirectivesModule,
             ComponentsModule,
             PlaceModule,
-            InteractionModule
+            InteractionModule,
+            ObserversModule
         ], InteractionModule,
         PlaceModule,
         DirectivesModule,
@@ -9825,7 +9885,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         DirectivesModule,
                         ComponentsModule,
                         PlaceModule,
-                        InteractionModule
+                        InteractionModule,
+                        ObserversModule
                     ],
                     exports: [
                         InteractionModule,
@@ -10321,5 +10382,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", 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, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, 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, DefaultListCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, 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, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellComponent, TableComponent, TableHeaderCellComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, 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, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, 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, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, 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, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableHeaderCellComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map