@coolon/angular-ui-powerups 13.5.3 → 13.6.0

package/fesm2020/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, Trace, Deferred } 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 } from 'tslib';
 import * as i1$2 from '@angular/platform-browser';
 import * as _ from 'lodash';
@@ -50,9 +51,10 @@ import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Enum } from 'typescript-string-enums';
 import { lang as lang$1, assert as assert$1, Stringy, Klass, Opts } from '@coolon/typescript-utilities';
 import * as i3 from '@angular/material/core';
-import ResizeObserver from 'resize-observer-polyfill';
 import produce from 'immer';
 import escapeStringRegexp from 'escape-string-regexp';
+import { isNil as isNil$1, isEmpty as isEmpty$1 } from 'lodash-es';
+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';
@@ -2343,90 +2344,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');
@@ -2827,9 +2744,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
@@ -2842,33 +2759,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);
@@ -2876,36 +2774,15 @@ class AbstractTableComponent extends ResizeAwareComponent {
             column.setTemplate(templateRef, viewContainer, fillCell, padChild);
         }
     }
-    notifyCellClicked(columnModel, row) {
-        this.getModel()._notifyCellClicked(columnModel, row);
-    }
-    // @Trace()
-    isFirstVisibleColumn(columnId) {
-        return this.getModel().firstVisibleColumn$.query().value?.columnId === columnId;
-    }
-    // @Trace()
-    isLastVisibleColumn(columnId) {
-        return this.getModel().lastVisibleColumn$.query().value?.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: [{
@@ -2914,21 +2791,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 {
@@ -3377,7 +3248,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 = [];
@@ -3402,11 +3274,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();
@@ -3430,15 +3303,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;
@@ -3667,98 +3543,425 @@ class TableHeaderCellComponent {
         this.column.attachHeaderCell(this);
     }
     // @Trace()
-    initialiseHeader(ref) {
-        this.column.onHeaderAttached(this, ref);
+    initialiseHeader(ref) {
+        this.column.onHeaderAttached(this, ref);
+    }
+    getPortal() {
+        return this[HEADER_CELL_RENDERER_PORTAL];
+    }
+}
+TableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: { column: "column" }, host: { properties: { "class": "this.defaultClassNames" } }, ngImport: i0, template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"], directives: [{ type: i2$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-table-header-cell', template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { column: [{
+                type: Input
+            }], defaultClassNames: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MenuItemData {
+    constructor(factory, face) {
+        this.factory = factory;
+        this.face = face;
+    }
+}
+/**
+ *
+ */
+class TableRowMenuComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.actions = [];
+        this.moreActions = [];
+    }
+    registerAction(commandFactory, properties) {
+        this.actions.push(new MenuItemData(commandFactory, properties));
+    }
+    registerMoreAction(commandFactory, properties) {
+        this.moreActions.push(new MenuItemData(commandFactory, properties));
+    }
+    createMoreMenuCommand(item, value) {
+        const { when } = Dsl.disposeWith(this);
+        const command = item.factory.create(value);
+        when(command.busy).becomesFalsey(() => {
+            this.closeMoreMenu();
+        });
+        return command;
+    }
+    closeMoreMenu() {
+        this.menu.closeMenu();
+    }
+}
+TableRowMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableRowMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableRowMenuComponent, selector: "aup-table-row-menu", inputs: { value: "value" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.face"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.face"></aup-command>
+          </aup-more-menu>
+      </ng-container>
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:row;align-items:center}\n"], components: [{ type: ToolBarComponent, selector: "aup-tool-bar" }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: MoreMenuComponent, selector: "aup-more-menu", inputs: ["tooltip"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aup-table-row-menu',
+                    template: `
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.face"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.face"></aup-command>
+          </aup-more-menu>
+      </ng-container>
+  `,
+                    styles: [`:host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+  }`]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], menu: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }] } });
+
+/**
+ * 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" });
+    }
+    get hideHeader() {
+        return !this.showHeader;
+    }
+    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');
+    }
+    isEditing(row) {
+        return !!this.tableModel.getEditSessionFor(row);
+    }
+    notifyCellClicked(columnModel, row) {
+        this.tableModel._notifyCellClicked(columnModel, row);
+    }
+    // @Trace()
+    isFirstVisibleColumn(columnId) {
+        return this.tableModel.firstVisibleColumn$.query().value?.columnId === columnId;
+    }
+    // @Trace()
+    isLastVisibleColumn(columnId) {
+        return this.tableModel.lastVisibleColumn$.query().value?.columnId === columnId;
     }
-    getPortal() {
-        return this[HEADER_CELL_RENDERER_PORTAL];
+    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;
     }
 }
-TableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: { column: "column" }, host: { properties: { "class": "this.defaultClassNames" } }, ngImport: i0, template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"], directives: [{ type: i2$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellComponent, decorators: [{
+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-header-cell', template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { column: [{
+            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
-            }], defaultClassNames: [{
+            }], showHeader$: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], visibleRowCount: [{
+                type: Output
+            }], enableScrolling: [{
+                type: Input
+            }, {
                 type: HostBinding,
-                args: ['class']
+                args: ["class.enable-scrolling"]
+            }], baseCssClass: [{
+                type: HostBinding,
+                args: ["class"]
+            }], hideHeader: [{
+                type: HostBinding,
+                args: ["class.hide-header"]
             }] } });
 
-class MenuItemData {
-    constructor(factory, face) {
-        this.factory = factory;
-        this.face = face;
-    }
-}
-/**
- *
- */
-class TableRowMenuComponent extends DisposableComponent {
+class PaginatorComponent extends DisposableComponent {
     constructor() {
         super();
-        this.actions = [];
-        this.moreActions = [];
     }
-    registerAction(commandFactory, properties) {
-        this.actions.push(new MenuItemData(commandFactory, properties));
+    ngOnInit() {
     }
-    registerMoreAction(commandFactory, properties) {
-        this.moreActions.push(new MenuItemData(commandFactory, properties));
+    get totalPages() {
+        return this.pageController.totalPages.value;
     }
-    createMoreMenuCommand(item, value) {
-        const { when } = Dsl.disposeWith(this);
-        const command = item.factory.create(value);
-        when(command.busy).becomesFalsey(() => {
-            this.closeMoreMenu();
-        });
-        return command;
+    get pageNumber() {
+        return this.pageController.pageNumber.value;
     }
-    closeMoreMenu() {
-        this.menu.closeMenu();
+    get previousCommand() {
+        return this.pageController.previousCommand;
+    }
+    get nextCommand() {
+        return this.pageController.nextCommand;
     }
 }
-TableRowMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableRowMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableRowMenuComponent, selector: "aup-table-row-menu", inputs: { value: "value" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-      <aup-tool-bar>
-          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
-                       [face]="action.face"></aup-command>
-      </aup-tool-bar>
-      <ng-container *ngIf="moreActions.length > 0">
-          <aup-more-menu>
-              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
-                           [face]="action.face"></aup-command>
-          </aup-more-menu>
-      </ng-container>
-  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:row;align-items:center}\n"], components: [{ type: ToolBarComponent, selector: "aup-tool-bar" }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: MoreMenuComponent, selector: "aup-more-menu", inputs: ["tooltip"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, decorators: [{
+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-table-row-menu',
-                    template: `
-      <aup-tool-bar>
-          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
-                       [face]="action.face"></aup-command>
-      </aup-tool-bar>
-      <ng-container *ngIf="moreActions.length > 0">
-          <aup-more-menu>
-              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
-                           [face]="action.face"></aup-command>
-          </aup-more-menu>
-      </ng-container>
-  `,
-                    styles: [`:host {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-  }`]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+            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
-            }], menu: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
             }] } });
 
 /**
@@ -3822,29 +4025,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * }
  */
 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 {
@@ -4421,17 +4638,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * }
  */
 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)
@@ -4440,8 +4657,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
             }] } });
 
@@ -4516,38 +4733,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();
@@ -4693,7 +4878,8 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         CardStackComponent,
         LabelledValueComponent,
         LoadingContainerComponent,
-        MarkdownComponent], imports: [CommonModule,
+        MarkdownComponent,
+        TableBodyComponent], imports: [CommonModule,
         BrowserAnimationsModule,
         FormsModule,
         MatInputModule,
@@ -4856,7 +5042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         CardStackComponent,
                         LabelledValueComponent,
                         LoadingContainerComponent,
-                        MarkdownComponent
+                        MarkdownComponent,
+                        TableBodyComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -8133,98 +8320,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.
  */
@@ -9634,7 +9729,8 @@ AngularUiPowerupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DirectivesModule,
         ComponentsModule,
         PlaceModule,
-        InteractionModule], exports: [InteractionModule,
+        InteractionModule,
+        ObserversModule], exports: [InteractionModule,
         PlaceModule,
         DirectivesModule,
         ComponentsModule,
@@ -9651,7 +9747,8 @@ AngularUiPowerupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             DirectivesModule,
             ComponentsModule,
             PlaceModule,
-            InteractionModule
+            InteractionModule,
+            ObserversModule
         ], InteractionModule,
         PlaceModule,
         DirectivesModule,
@@ -9671,7 +9768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         DirectivesModule,
                         ComponentsModule,
                         PlaceModule,
-                        InteractionModule
+                        InteractionModule,
+                        ObserversModule
                     ],
                     exports: [
                         InteractionModule,
@@ -10161,5 +10259,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, 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