@coolon/angular-ui-powerups 13.1.6 → 13.2.1

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

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, EventEmitter, ViewChild, Output, SkipSelf, Self, ContentChildren, ComponentRef, PLATFORM_ID, Injector } from '@angular/core';
+import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, EventEmitter, ViewChild, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$8 from '@angular/material/form-field';
@@ -40,17 +40,19 @@ 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, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Trace, Deferred, Functions } 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 { __decorate, __param, __metadata } from 'tslib';
 import * as i1$2 from '@angular/platform-browser';
+import * as _ from 'lodash';
 import { isEmpty, isString, isFunction, isNil, isInteger, isEqual, first, uniq, findLast, isObject, isNumber, isNaN as isNaN$1 } from 'lodash';
 import { marked } from 'marked';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Enum } from 'typescript-string-enums';
-import { lang as lang$1, assert as assert$1, Stringy, Opts, Klass } from '@coolon/typescript-utilities';
+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 { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i6$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -2510,25 +2512,6 @@ class TemplateCellRendererPortalRef extends CellRendererPortalRef {
     }
 }
 
-class DefaultCellRendererComponent {
-    constructor() {
-    }
-    set value(value) {
-        this._value = value;
-    }
-    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 } });
-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: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
-                type: Input
-            }] } });
-
 class DefaultHeaderCellRendererComponent {
     constructor() {
     }
@@ -2542,120 +2525,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-class EditSession extends GarbageCollector {
-    constructor(rowId, row, form, saveCommand) {
-        super();
-        this.rowId = rowId;
-        this.form = form;
-        this.saveCommand = saveCommand;
-        this._liveRowValue = new MutableValueModel();
-        this.liveRowValue = this._liveRowValue.readonly;
-        this.form.load(row);
-        this._liveRowValue.value = row;
-        this.form.onEdit(() => {
-            // if (!this._liveRowValue.value[immerable]) {
-            //   console.warn()
-            // }
-            this._liveRowValue.value = produce(this._liveRowValue.value, draft => {
-                this.form.writeDirtyStateTo(draft);
-            });
-        });
-    }
+class ColumnTextSearchFormatter {
 }
-
-class EditRowControls extends DisposableComponent {
-    constructor() {
-        super();
-        this.saveCommand = Command.create(async () => {
-            const finished = await this.editSession.saveCommand.execute();
-            if (finished) {
-                this.editSession.dispose();
-            }
-        });
-        this.cancelCommand = Command.create(() => {
-            this.editSession.dispose();
-        }).disableWhile(this.saveCommand.busy);
+(function (ColumnTextSearchFormatter) {
+    class Delegate extends ColumnTextSearchFormatter {
     }
-    set editSession(session) {
-        if (session) {
-            session.form.disableWhile(this.saveCommand.busy);
+    ColumnTextSearchFormatter.Delegate = Delegate;
+    class Delegating extends ColumnTextSearchFormatter.Delegate {
+        constructor(delegateClass) {
+            super();
+            this.delegateClass = delegateClass;
+        }
+        initialise(injector) {
+            this._delegate = injector.get(this.delegateClass);
+            if (this._delegate instanceof Delegating) {
+                this._delegate.initialise(injector);
+            }
+        }
+        format(row) {
+            return this._delegate ? this._delegate.format(row) : "";
         }
-        this._session = session;
-    }
-    get editSession() {
-        return this._session;
     }
-    ngOnInit() {
+    ColumnTextSearchFormatter.Delegating = Delegating;
+    function forFormatter(formatter) {
+        return new class extends ColumnTextSearchFormatter {
+            format(value) {
+                return formatter(value);
+            }
+        };
     }
-    get form() {
-        return this.editSession?.form;
+    ColumnTextSearchFormatter.forFormatter = forFormatter;
+    class Null extends ColumnTextSearchFormatter {
+        format(value) {
+            return "";
+        }
     }
-}
-EditRowControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditRowControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditRowControls, selector: "aup-row-editor-controls", inputs: { row: "row", editRowCommand: "editRowCommand", editSession: "editSession" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], EditRowControls.prototype, "editRowCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, decorators: [{
-            type: Component,
-            args: [{ selector: 'aup-row-editor-controls', template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
-                type: Input
-            }], editRowCommand: [{
-                type: Input
-            }], editSession: [{
-                type: Input
-            }] } });
-
-class SelectCellRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this.selectCommand = Command.create(() => {
-            this.selectionModel?.selectCommand.execute(this.row);
-        });
+    ColumnTextSearchFormatter.Null = Null;
+    class DefaultValueFormatter extends ColumnTextSearchFormatter {
+        format(value) {
+            let s = value?.toString() ?? "";
+            console.log("DefaultValueFormatter", { value, text: s });
+            return s;
+        }
     }
-    isSelected() {
-        return this.selectionModel?.isSelected(this.row);
+    ColumnTextSearchFormatter.DefaultValueFormatter = DefaultValueFormatter;
+    class DefaultArrayFormatter extends ColumnTextSearchFormatter {
+        format(value) {
+            return value ? value.map(it => it?.toString()).join(",") : "";
+        }
     }
-}
-SelectCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectCellRendererComponent, selector: "aup-select-cell-renderer", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'aup-select-cell-renderer', template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
-                type: Input
-            }] } });
+    ColumnTextSearchFormatter.DefaultArrayFormatter = DefaultArrayFormatter;
+})(ColumnTextSearchFormatter || (ColumnTextSearchFormatter = {}));
 
-class SelectHeaderCellRendererComponent extends DisposableComponent {
+const noop = () => {
+};
+class ColumnTextSearchWrapper extends ColumnTextSearchFormatter.Delegate {
     constructor() {
-        super();
-        this.selectCommand = Command.create(() => {
-            this.selectionModel.toggleAllCommand.execute();
-        });
+        super(...arguments);
+        this._map = Functions.identity;
     }
-    isSelected() {
-        return this.selectionModel?.allSelected.value || false;
+    initialise(injector) {
+        if (this._delegate instanceof ColumnTextSearchFormatter.Delegate) {
+            this._delegate.initialise(injector);
+        }
     }
-    isIntermediate() {
-        return this.selectionModel?.someSelected.value || false;
+    format(row) {
+        let value = this._map(row);
+        let result = this._delegate ? this._delegate.format(value) : "";
+        console.log({ format: row, value, text: result });
+        return result;
     }
-    isVisible() {
-        return this.enableHeaderControls && this.selectionModel.getDelegate() instanceof MultipleSelectionModel;
+    setDelegate(formatter, mapper) {
+        this._delegate = formatter;
+        this._map = mapper ?? Functions.identity;
     }
 }
-SelectHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectHeaderCellRendererComponent, selector: "aup-select-header-cell-renderer", usesInheritance: true, ngImport: i0, template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectHeaderCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'aup-select-header-cell-renderer', template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
-
-const noop = () => {
-};
-const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
-const DEFAULT_TEXT_SEARCH_PREDICATE = (row, text) => false;
 class ColumnModel extends GarbageCollector {
     constructor(columnId, textPropertiesProvider) {
         super();
@@ -2663,10 +2607,9 @@ class ColumnModel extends GarbageCollector {
         this.textPropertiesProvider = textPropertiesProvider;
         this._enableRowSelection = true;
         this._flex = false;
-        this._defaultVisibility = this.registerDisposable(new DelegatingValueModel().withDefault(true));
-        this._visible = this.registerDisposable(new DelegatingValueModel().withDefault(this._defaultVisibility));
-        this._columnModelTextSearchPredicate = undefined;
-        this._cellRendererTextSearchPredicate = undefined;
+        this._defaultVisibility$ = this.registerDisposable(new DelegatingValueModel().withDefault(true));
+        this._visible$ = this.registerDisposable(new DelegatingValueModel().withDefault(this._defaultVisibility$));
+        this.textSearchDelegate = new ColumnTextSearchWrapper();
         this.installHeaderRenderer();
         this.dasherisedColumnId = Stringy.from(columnId).dasherize().toString();
     }
@@ -2679,32 +2622,21 @@ class ColumnModel extends GarbageCollector {
         return this.getColumnTextProperties()?.headerText() || this.getDefaultHeaderText();
     }
     isVisible() {
-        return this.visible.value;
+        return this.visible$.value;
     }
-    get visible() {
-        return this._visible.readonly;
+    get visible$() {
+        return this._visible$.readonly;
     }
     visibleWhile(visible) {
-        this._visible.setDelegate(visible);
+        this._visible$.setDelegate(visible);
         return this;
     }
     setDefaultVisibility(visible) {
-        this._defaultVisibility.setDelegate(visible);
+        this._defaultVisibility$.setDelegate(visible);
     }
     getDefaultHeaderText() {
         return this.columnId;
     }
-    get isTextMatch() {
-        return this._cellRendererTextSearchPredicate ?? this._columnModelTextSearchPredicate ?? DEFAULT_TEXT_SEARCH_PREDICATE;
-    }
-    /**
-     * Sets the predicate to use when checking if the specified row is a text match for this column.
-     * @param predicate
-     */
-    useTextSearchPredicate(predicate) {
-        this._columnModelTextSearchPredicate = predicate;
-        return this;
-    }
     getColumnTextProperties() {
         return this._columnTextProperties || this.textPropertiesProvider();
     }
@@ -2719,6 +2651,14 @@ class ColumnModel extends GarbageCollector {
         this._columnTextProperties = columnTextProperties;
         return this;
     }
+    getSearchTextFor(row) {
+        return this.textSearchDelegate.format(row);
+    }
+    configureColumnTextSearch(formatter, mapper) {
+        assert$1.notNil(formatter);
+        console.log({ col: this.columnId, formatter });
+        this.textSearchDelegate.setDelegate(formatter, mapper);
+    }
     configureHeaderRenderer(config) {
         this._columnHeaderPortalRef = config;
     }
@@ -2757,15 +2697,6 @@ class ColumnModel extends GarbageCollector {
     onRendererAttached(host, ref) {
         const component = this.getComponentOrEmbeddedView(ref);
         this._cellRendererPortalRef.onPortalAttached(host, component);
-        if (ref instanceof CellRendererPortalRef && isFunction(component?.matches)) {
-            // we've had the case where we were calling matches on disposed components, so we have
-            // to make sure we only handle matches on components that we can track destroys.
-            this._cellRendererTextSearchPredicate = (row, text) => component.matches(row, text);
-            ref.onDestroy(() => this._cellRendererTextSearchPredicate = undefined);
-        }
-        else {
-            this._cellRendererTextSearchPredicate = undefined;
-        }
     }
     // @Trace()
     onEditorAttached(host, ref) {
@@ -2798,6 +2729,9 @@ class ColumnModel extends GarbageCollector {
             return ref;
         }
     }
+    initialise(injector) {
+        this.textSearchDelegate.initialise(injector);
+    }
 }
 __decorate([
     Memoize(),
@@ -2811,143 +2745,453 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Object)
 ], ColumnModel.prototype, "getColumnTextProperties", null);
-class PropertyColumnModel extends ColumnModel {
-    constructor(id, property, defaults) {
-        super(id, defaults);
-        this.property = property;
-        this._format = (value) => value?.toString();
-        this.cellRenderer(DefaultCellRendererComponent);
-        this.useTextSearchPredicate((row, regex) => {
-            return regex.test(this._format(row[this.property]));
-        });
-    }
-    cellRenderer(componentType, onComponentInitOrOptions) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
-            if (firstTime) {
-                if (isFunction(onComponentInitOrOptions)) {
-                    onComponentInitOrOptions(component);
-                }
-                else {
-                    if (isFunction(onComponentInitOrOptions?.onComponentInit)) {
-                        onComponentInitOrOptions.onComponentInit(component);
-                    }
-                }
-            }
-            component.value = this._format(rowData.row[this.property]);
-        }));
-        return this;
-    }
-    liveEditCellRenderer(componentType, options) {
-        return this.mutableCellRenderer(componentType, options);
-    }
-    /**
-     * Deprecated.  Use #liveEditCellRenderer instead.
-     * @param componentType
-     * @param options
-     */
-    mutableCellRenderer(componentType, options) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
-            // keep a local copy most recent row value so it's available to teh
-            // edit callback without having to add/remove subscribers all the time.
-            component[CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
-            let disableEditCallback = false;
-            if (firstTime) {
-                if (isFunction(options?.onComponentInit)) {
-                    options.onComponentInit(component);
-                }
-                // install our edit callback
-                component.onValueEdited((is, was) => {
-                    if (!disableEditCallback) {
-                        options.onValueEdit(component[CELL_RENDERER_COMPONENT_ROW_CACHE], is, was);
-                    }
-                });
-            }
-            // now push the value the component and disable the callback just incase the component misbehaves
-            // and fires a value change during the operation.
-            disableEditCallback = true;
-            component.value = rowData.row[this.property];
-            disableEditCallback = false;
-            if (!isFunction(options) && isFunction(options?.onRowUpdate)) {
-                options.onRowUpdate(component, rowData.row);
-            }
-        }));
-        return this;
-    }
-    cellEditor(editor, validatorsOrInitialiser, onComponentInit) {
-        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
-        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
-            const formValueModel = editSession.form.pluck(this.property);
-            if (validators) {
-                formValueModel.validateUsing(validators);
-            }
-            component.valueModel = formValueModel;
-            if (initialiser) {
-                initialiser(component);
-            }
-        }));
-        return this;
+(function (ColumnModel) {
+    ColumnModel.CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
+})(ColumnModel || (ColumnModel = {}));
+
+class CustomTemplateColumnModel extends ColumnModel {
+    constructor(columnId, defaults) {
+        super(columnId, defaults);
+        this.config = new TemplateCellRendererPortalRef();
+        this.configureCellRenderer(this.config);
     }
-    format(formatter) {
-        assert$1.isFunction(formatter);
-        this._format = formatter;
-        return this;
+    setTemplate(templateRef, viewContainer, fillCell, padChild) {
+        this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
     }
     selectRowOnClick(selectOnRowClick) {
         return this._selectRowOnClick(selectOnRowClick);
     }
 }
-class ListPropertyColumnModel extends ColumnModel {
-    constructor(id, property, defaults) {
-        super(id, defaults);
-        this.property = property;
-        this._format = (value) => value.map(v => v?.toString()).join(', ');
-        this.cellRenderer(DefaultCellRendererComponent);
-        this.useTextSearchPredicate((row, regex) => {
-            let rowElement = row[this.property];
-            // @ts-ignore Started complaining in ts 4.5.. but I think my logic is correct...
-            return regex.test(this._format(rowElement));
-        });
-    }
-    cellRenderer(componentType) {
-        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...
-            component.value = this._format(rowElement);
-        }));
-        return this;
-    }
-    cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
-        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
-        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
-            const formListModel = editSession.form.pluckList(this.property);
-            if (validators) {
-                formListModel.validateUsing(validators);
-            }
-            component.listModel = formListModel;
-            if (initialiser) {
-                initialiser(component);
-            }
-        }));
-        return this;
-    }
-    format(formatter) {
-        assert$1.isFunction(formatter);
-        this._format = formatter;
-        return this;
-    }
-    selectRowOnClick(selectRowOnClick) {
-        return this._selectRowOnClick(selectRowOnClick);
-    }
-}
-class CustomValueColumnModel extends ColumnModel {
-    constructor(columnId, defaults, getValue) {
+
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = new TableModel(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Column templates
+ * @example
+ * this.heroTableModel = new TableModel(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
+ * Styling
+ * @example
+ *  // global settings
+ * :root {
+ *   --aup-table-column-gap: 10px; // defaults to 24px
+ *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+ *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+ * }
+ *
+ * // per table settings.
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --first-column-padding-left: 18px // defaults to --column-gap
+ *   --last-column-padding-right: 18px // defaults to --column-gap
+ *
+ *   aup-table-header-cell-renderer,
+ *   aup-table-cell-renderer {
+ *     &.aup-col-my-dasherised-column-id {
+ *       // do stuff
+ *     }
+ *     &.first-visible-column {
+ *       // do stuff
+ *     }
+ *     &.last-visible-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+class AbstractTableComponent extends ResizeAwareComponent {
+    constructor(elementRef, ngZone, injector) {
+        super(elementRef, ngZone);
+        this.injector = injector;
+        /**
+         * 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.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');
+    }
+    isEditing(row) {
+        return !!this.getModel().getEditSessionFor(row);
+    }
+    registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
+        const column = this.columnsById.get(columnId);
+        if (column instanceof CustomTemplateColumnModel) {
+            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 });
+__decorate([
+    TrackExternal({ defaultValue: true }),
+    __metadata("design:type", ValueModel)
+], AbstractTableComponent.prototype, "showHeaderModel", void 0);
+__decorate([
+    StoreInValueModel('showHeaderModel'),
+    __metadata("design:type", Boolean)
+], AbstractTableComponent.prototype, "showHeader", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aup-abstract-table',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { showHeaderModel: [{
+                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 {
+    constructor(host, templateRef, viewContainer) {
+        this.host = host;
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.aupColumnTemplateFillCell = false;
+        this.aupColumnTemplateAutoPadChild = undefined;
+    }
+    ngOnInit() {
+        assert.isTruthy(this.aupColumnTemplateColumnId);
+        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, this.aupColumnTemplateAutoPadChild ?? this.aupColumnTemplateFillCell);
+    }
+}
+ColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, deps: [{ token: AbstractTableComponent }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ColumnTemplateDirective, selector: "[aupColumnTemplate]", inputs: { aupColumnTemplate: "aupColumnTemplate", aupColumnTemplateColumnId: "aupColumnTemplateColumnId", aupColumnTemplateFillCell: "aupColumnTemplateFillCell", aupColumnTemplateAutoPadChild: "aupColumnTemplateAutoPadChild" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[aupColumnTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: AbstractTableComponent }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { aupColumnTemplate: [{
+                type: Input
+            }], aupColumnTemplateColumnId: [{
+                type: Input
+            }], aupColumnTemplateFillCell: [{
+                type: Input
+            }], aupColumnTemplateAutoPadChild: [{
+                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) {
+        const options = Klass.get(renderer).getMetadata(TEXT_SEARCH_FORMATTER_KEY) ?? {};
+        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 {
+    constructor() {
+    }
+    set value(value) {
+        this._value = value;
+    }
+    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: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class EditSession extends GarbageCollector {
+    constructor(rowId, row, form, saveCommand) {
+        super();
+        this.rowId = rowId;
+        this.form = form;
+        this.saveCommand = saveCommand;
+        this._liveRowValue$ = new MutableValueModel();
+        this.liveRowValue$ = this._liveRowValue$.readonly;
+        this.form.load(row);
+        this._liveRowValue$.value = row;
+        this.form.onEdit(() => {
+            // if (!this._liveRowValue.value[immerable]) {
+            //   console.warn()
+            // }
+            this._liveRowValue$.value = produce(this._liveRowValue$.value, draft => {
+                this.form.writeDirtyStateTo(draft);
+            });
+        });
+    }
+}
+
+class EditRowControls extends DisposableComponent {
+    constructor() {
+        super();
+        this.saveCommand = Command.create(async () => {
+            const finished = await this.editSession.saveCommand.execute();
+            if (finished) {
+                this.editSession.dispose();
+            }
+        });
+        this.cancelCommand = Command.create(() => {
+            this.editSession.dispose();
+        }).disableWhile(this.saveCommand.busy);
+    }
+    set editSession(session) {
+        if (session) {
+            session.form.disableWhile(this.saveCommand.busy);
+        }
+        this._session = session;
+    }
+    get editSession() {
+        return this._session;
+    }
+    ngOnInit() {
+    }
+    get form() {
+        return this.editSession?.form;
+    }
+}
+EditRowControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EditRowControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditRowControls, selector: "aup-row-editor-controls", inputs: { row: "row", editRowCommand: "editRowCommand", editSession: "editSession" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], EditRowControls.prototype, "editRowCommand", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-row-editor-controls', template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
+                type: Input
+            }], editRowCommand: [{
+                type: Input
+            }], editSession: [{
+                type: Input
+            }] } });
+
+let formatter = (row) => row.map(e => 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();
+        this.selectCommand = Command.create(() => {
+            this.selectionModel?.selectCommand.execute(this.row);
+        });
+    }
+    isSelected() {
+        return this.selectionModel?.isSelected(this.row);
+    }
+}
+SelectionCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectionCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectionCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectionCellComponent, selector: "aup-selection-cell", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectionCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-selection-cell', template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
+                type: Input
+            }] } });
+
+class SelectionHeaderCellComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.selectCommand = Command.create(() => {
+            this.selectionModel.toggleAllCommand.execute();
+        });
+    }
+    isSelected() {
+        return this.selectionModel?.allSelected.value || false;
+    }
+    isIntermediate() {
+        return this.selectionModel?.someSelected.value || false;
+    }
+    isVisible() {
+        return this.enableHeaderControls && this.selectionModel.getDelegate() instanceof MultipleSelectionModel;
+    }
+}
+SelectionHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectionHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectionHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectionHeaderCellComponent, selector: "aup-selection-header-cell", usesInheritance: true, ngImport: i0, template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectionHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-selection-header-cell', template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class ColumnListModel extends AbstractComputedListModel {
+    constructor() {
+        super();
+        this._allColumns$ = new MutableListModel();
+        const { chain } = Dsl.disposeWith(this);
+        this.columnsById$ = chain(this._allColumns$).indexBy('columnId');
+    }
+    get allColumns$() {
+        return this._allColumns$.readonly;
+    }
+    getColumn(id) {
+        return this.columnsById$.get(id);
+    }
+    hasColumn(id) {
+        return !!this.columnsById$.get(id);
+    }
+    addColumn(column, index) {
+        if (this.hasColumn(column.columnId)) {
+            lang.illegalState(`Column with id=${column.columnId} already exists`);
+        }
+        this.registerDisposable(column);
+        this.runInTransaction(() => {
+            if (!isNil(index)) {
+                this._allColumns$.insert(index, column);
+            }
+            else {
+                this._allColumns$.push(column);
+            }
+            this.registerDisposable(this.trackSource(column.visible$));
+        });
+        return column;
+    }
+    doComputeValue() {
+        return this._allColumns$.value.filter(c => c.visible$.value);
+    }
+}
+
+class CustomValueColumnModel extends ColumnModel {
+    constructor(columnId, defaults, getValue) {
         super(columnId, defaults);
         this.getValue = getValue;
         this.cellRenderer(DefaultCellRendererComponent);
     }
     cellRenderer(componentType, onComponentInitOrOptions) {
+        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.Null()), row => this.getValue(row));
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
             if (firstTime) {
                 if (isFunction(onComponentInitOrOptions)) {
@@ -2970,6 +3214,7 @@ class CustomValueColumnModel extends ColumnModel {
         return this._selectRowOnClick(selectOnRowClick);
     }
 }
+
 class EditorControlColumnModel extends ColumnModel {
     constructor(columnId, saveCommandFactory, defaults) {
         super(columnId, defaults);
@@ -2983,34 +3228,148 @@ class EditorControlColumnModel extends ColumnModel {
         }));
         return this;
     }
-    getDefaultHeaderText() {
-        return '';
-    }
-}
-class CustomTemplateColumnModel extends ColumnModel {
-    constructor(columnId, defaults) {
-        super(columnId, defaults);
-        this.config = new TemplateCellRendererPortalRef();
-        this.configureCellRenderer(this.config);
-    }
-    setTemplate(templateRef, viewContainer, fillCell, padChild) {
-        this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+
+class ListPropertyColumnModel extends ColumnModel {
+    constructor(id, property, defaults) {
+        super(id, defaults);
+        this.property = property;
+        this._format = (value) => value.map(v => v?.toString()).join(", ");
+        this.cellRenderer(DefaultListCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.DefaultArrayFormatter()), 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...
+            component.value = this._format(rowElement);
+        }));
+        return this;
+    }
+    cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
+        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
+            const formListModel = editSession.form.pluckList(this.property);
+            if (validators) {
+                formListModel.validateUsing(validators);
+            }
+            component.listModel = formListModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    }
+    format(formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    }
+    selectRowOnClick(selectRowOnClick) {
+        return this._selectRowOnClick(selectRowOnClick);
+    }
+}
+
+class PropertyColumnModel extends ColumnModel {
+    constructor(id, property, defaults) {
+        super(id, defaults);
+        this.property = property;
+        this._format = (value) => value?.toString();
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType, onComponentInitOrOptions) {
+        this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.DefaultValueFormatter()), row => row[this.property]);
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
+            if (firstTime) {
+                if (isFunction(onComponentInitOrOptions)) {
+                    onComponentInitOrOptions(component);
+                }
+                else {
+                    if (isFunction(onComponentInitOrOptions?.onComponentInit)) {
+                        onComponentInitOrOptions.onComponentInit(component);
+                    }
+                }
+            }
+            component.value = this._format(rowData.row[this.property]);
+        }));
+        return this;
+    }
+    liveEditCellRenderer(componentType, options) {
+        return this.mutableCellRenderer(componentType, options);
+    }
+    /**
+     * Deprecated.  Use #liveEditCellRenderer instead.
+     * @param componentType
+     * @param options
+     */
+    mutableCellRenderer(componentType, options) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
+            // keep a local copy most recent row value so it's available to teh
+            // edit callback without having to add/remove subscribers all the time.
+            component[ColumnModel.CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
+            let disableEditCallback = false;
+            if (firstTime) {
+                if (isFunction(options?.onComponentInit)) {
+                    options.onComponentInit(component);
+                }
+                // install our edit callback
+                component.onValueEdited((is, was) => {
+                    if (!disableEditCallback) {
+                        options.onValueEdit(component[ColumnModel.CELL_RENDERER_COMPONENT_ROW_CACHE], is, was);
+                    }
+                });
+            }
+            // now push the value the component and disable the callback just incase the component misbehaves
+            // and fires a value change during the operation.
+            disableEditCallback = true;
+            component.value = rowData.row[this.property];
+            disableEditCallback = false;
+            if (!isFunction(options) && isFunction(options?.onRowUpdate)) {
+                options.onRowUpdate(component, rowData.row);
+            }
+        }));
+        return this;
+    }
+    cellEditor(editor, validatorsOrInitialiser, onComponentInit) {
+        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
+        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
+            const formValueModel = editSession.form.pluck(this.property);
+            if (validators) {
+                formValueModel.validateUsing(validators);
+            }
+            component.valueModel = formValueModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    }
+    format(formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
     }
     selectRowOnClick(selectOnRowClick) {
         return this._selectRowOnClick(selectOnRowClick);
     }
 }
+
 class SelectionColumnModel extends ColumnModel {
     constructor(columnId, defaults, selectionModel) {
         super(columnId, defaults);
         this._enableHeaderControls = true;
         this.selectionModel = DelegatingSelectionModel.createDelegate();
         this._selectRowOnClick(false);
-        this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
+        this.cellHeaderRenderer(SelectionHeaderCellComponent, (component) => {
             component.selectionModel = this.selectionModel;
             component.enableHeaderControls = this._enableHeaderControls;
         });
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, (component, rowData) => {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectionCellComponent, (component, rowData) => {
             component.row = rowData.row;
             component.selectionModel = this.selectionModel;
         }));
@@ -3035,234 +3394,8 @@ class SelectionColumnModel extends ColumnModel {
     }
 }
 
-/**
- * Create your model:
- * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Create your table
- * @example
- * <aup-table [tableModel]="heroTableModel"></aup-table>
- *
- * Column templates
- * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addTemplateColumn("specialColumn");
- * });
- * <aup-table [tableModel]="heroTableModel">
- *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
- *     {{hero.name}}
- *   </div>
- * </aup-table>
- *
- * Styling
- * @example
- *  // global settings
- * :root {
- *   --aup-table-column-gap: 10px; // defaults to 24px
- *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
- *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
- *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
- * }
- *
- * // per table settings.
- * aup-table {
- *   --column-gap: 10px; // defaults to 24px
- *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
- *   --row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --first-column-padding-left: 18px // defaults to --column-gap
- *   --last-column-padding-right: 18px // defaults to --column-gap
- *
- *   aup-table-header-cell-renderer,
- *   aup-table-cell-renderer {
- *     &.aup-col-my-dasherised-column-id {
- *       // do stuff
- *     }
- *     &.first-visible-column {
- *       // do stuff
- *     }
- *     &.last-visible-column {
- *       // do stuff
- *     }
- *   }
- * }
- */
-class AbstractTableComponent extends ResizeAwareComponent {
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
-        /**
-         * 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.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.columns = chain(this.getModel().columns);
-        this.columnIds = chain(this.columns).pluck('columnId');
-        this.columnsById = chain(this.columns).indexBy('columnId');
-    }
-    isEditing(row) {
-        return !!this.getModel().getEditSessionFor(row);
-    }
-    registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
-        const column = this.columnsById.get(columnId);
-        if (column instanceof CustomTemplateColumnModel) {
-            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 }], 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 });
-__decorate([
-    TrackExternal({ defaultValue: true }),
-    __metadata("design:type", ValueModel)
-], AbstractTableComponent.prototype, "showHeaderModel", void 0);
-__decorate([
-    StoreInValueModel('showHeaderModel'),
-    __metadata("design:type", Boolean)
-], AbstractTableComponent.prototype, "showHeader", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-abstract-table',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showHeaderModel: [{
-                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 {
-    constructor(host, templateRef, viewContainer) {
-        this.host = host;
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.aupColumnTemplateFillCell = false;
-        this.aupColumnTemplateAutoPadChild = undefined;
-    }
-    ngOnInit() {
-        assert.isTruthy(this.aupColumnTemplateColumnId);
-        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, this.aupColumnTemplateAutoPadChild ?? this.aupColumnTemplateFillCell);
-    }
-}
-ColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, deps: [{ token: AbstractTableComponent }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ColumnTemplateDirective, selector: "[aupColumnTemplate]", inputs: { aupColumnTemplate: "aupColumnTemplate", aupColumnTemplateColumnId: "aupColumnTemplateColumnId", aupColumnTemplateFillCell: "aupColumnTemplateFillCell", aupColumnTemplateAutoPadChild: "aupColumnTemplateAutoPadChild" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[aupColumnTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: AbstractTableComponent }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { aupColumnTemplate: [{
-                type: Input
-            }], aupColumnTemplateColumnId: [{
-                type: Input
-            }], aupColumnTemplateFillCell: [{
-                type: Input
-            }], aupColumnTemplateAutoPadChild: [{
-                type: Input
-            }] } });
-
-class ColumnListModel extends AbstractComputedListModel {
-    constructor() {
-        super();
-        this._allColumns = new MutableListModel();
-        const { chain } = Dsl.disposeWith(this);
-        this.columnsById = chain(this._allColumns).indexBy('columnId');
-    }
-    get allColumns() {
-        return this._allColumns.readonly;
-    }
-    getColumn(id) {
-        return this.columnsById.get(id);
-    }
-    hasColumn(id) {
-        return !!this.columnsById.get(id);
-    }
-    addColumn(column, index) {
-        if (this.hasColumn(column.columnId)) {
-            lang.illegalState(`Column with id=${column.columnId} already exists`);
-        }
-        this.registerDisposable(column);
-        this.runInTransaction(() => {
-            if (!isNil(index)) {
-                this._allColumns.insert(index, column);
-            }
-            else {
-                this._allColumns.push(column);
-            }
-            this.registerDisposable(this.trackSource(column.visible));
-        });
-        return column;
-    }
-    doComputeValue() {
-        return this._allColumns.value.filter(c => c.visible.value);
-    }
-}
-
+var DefaultValueFormatter = ColumnTextSearchFormatter.DefaultValueFormatter;
+var DefaultArrayFormatter = ColumnTextSearchFormatter.DefaultArrayFormatter;
 // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
 // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
 class RowClass {
@@ -3279,39 +3412,69 @@ class AbstractTableModel extends GarbageCollector {
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
         this.rowClickListeners = new EventListenerList();
+        this._searchText$ = new DelegatingValueModel();
         this._createForm = (row) => new DirtyTrackingForm();
         this.trackBy = (index, item) => {
             return this.identityOf ? this.identityOf(item) : index;
         };
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this._rowsBeingEdited = new MutableListModel([], {
+        this._rowsBeingEdited$ = new MutableListModel([], {
             identifiedWith: row => this.identityOf(row)
         });
-        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
-        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
-        this.dataSource = chain(this._dataSource).replaceAll(this.rowsBeingEdited);
-        this.firstEditableColumn = chain(this.columns).select(c => c.hasEditorPortal()).first();
-        this.firstVisibleColumn = chain(this._columnList).first();
-        this.lastVisibleColumn = chain(this._columnList).last();
-        this.rowSelectionDisabledOnAllColumns = chain(this._columnList).select(column => column.isRowSelectionEnabled()).count().equals(0);
+        this._editorSessionByRowId = chain(this._editorSessions).indexBy("rowId");
+        this.editing$ = chain(this._editorSessions).count().isGreaterThan(0);
+        this._textSearchPredicate$ = chain(this._searchText$).map(text => {
+            return _.isEmpty(text) ? Functions.identity : (rows) => {
+                const regex = new RegExp(escapeStringRegexp(text), "i");
+                return rows.filter(row => this.hasMatchingColumn(row, regex));
+            };
+        }, {
+            allowNil: true,
+            dependsOn: this.columns
+        });
+        this.dataSource = chain(this._dataSource)
+            .reduceToList(items => this._textSearchPredicate$.value(items), {
+            dependsOn: this._textSearchPredicate$
+        })
+            .replaceAll(this.rowsBeingEdited$);
+        this.firstEditableColumn$ = chain(this.columns).select(c => c.hasEditorPortal()).first();
+        this.firstVisibleColumn$ = chain(this._columnList).first();
+        this.lastVisibleColumn$ = chain(this._columnList).last();
+        this.rowSelectionDisabledOnAllColumns$ = chain(this._columnList).select(column => column.isRowSelectionEnabled()).count().equals(0);
     }
     findMatchingColumns(row, regex) {
-        return this.columns.value.filter(c => c.isTextMatch(row, regex));
+        return this.columns.value.filter(c => regex.test(c.getSearchTextFor(row)));
     }
+    // @Trace()
     hasMatchingColumn(row, regex) {
-        return !!this.columns.value.find(c => c.isTextMatch(row, regex));
+        return !!this.columns.value.find(c => regex.test(c.getSearchTextFor(row)));
+    }
+    initialise(injector) {
+        // not sure if I should define these at the module level or not...
+        const customInjector = Injector.create({
+            providers: [
+                { provide: DefaultValueFormatter },
+                { provide: DefaultArrayFormatter }
+            ],
+            parent: injector
+        });
+        this.columns.value.forEach(c => c.initialise(customInjector));
     }
     setDataSource(sourceOfTruth) {
         this._dataSource.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);
     }
-    get rowsBeingEdited() {
-        return this._rowsBeingEdited.readonly;
+    get rowsBeingEdited$() {
+        return this._rowsBeingEdited$.readonly;
     }
     get columns() {
-        return this._columnList.allColumns;
+        return this._columnList.allColumns$;
     }
     get visibleColumns() {
         return this._columnList.readonly;
@@ -3326,9 +3489,9 @@ class AbstractTableModel extends GarbageCollector {
     }
     _addSelectionColumn(selectionModel, visible) {
         assert.isNil(this.selectionColumnModel);
-        const columnId = 'selection-column';
+        const columnId = "selection-column";
         this.selectionColumnModel = new SelectionColumnModel(columnId, () => this.getColumnTextProperties(columnId), selectionModel);
-        this.addRowClass('aup-row-selected', row => this.selectionColumnModel.isSelected(row));
+        this.addRowClass("aup-row-selected", row => this.selectionColumnModel.isSelected(row));
         const selectionColumnModel = this.addColumn(this.selectionColumnModel, 0);
         if (!isNil(visible)) {
             selectionColumnModel.visibleWhile(visible instanceof ValueModel ? visible : ValueModel.constant(visible));
@@ -3340,7 +3503,7 @@ class AbstractTableModel extends GarbageCollector {
         if (isFunction(formFactory)) {
             this._createForm = formFactory;
         }
-        const columnId = 'editControls';
+        const columnId = "editControls";
         return this.addColumn(new EditorControlColumnModel(columnId, saveCommandFactory, () => this.getColumnTextProperties(columnId)));
     }
     addCustomColumn(columnId, dataAccessor) {
@@ -3382,7 +3545,7 @@ class AbstractTableModel extends GarbageCollector {
     }
     startEditSession(row) {
         const rowId = this.identityOf(row);
-        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+        if (this._rowsBeingEdited$.query().indexOf(row) > -1) {
             return lang.illegalState(`Row with id=${rowId} already being edited`);
         }
         // todo: pass the factories to the edit session so we can make the whole lot pluggable?
@@ -3390,12 +3553,12 @@ class AbstractTableModel extends GarbageCollector {
         const saveCommand = this.saveCommandFactory.create(form);
         const editSession = new EditSession(rowId, row, form, saveCommand);
         const { when } = Dsl.disposeWith(editSession);
-        when(editSession.liveRowValue).changes((editedValue) => {
-            this._rowsBeingEdited.replaceOrPush(editedValue);
-        }, { initialValue: 'triggerChangeUnlessNil' });
+        when(editSession.liveRowValue$).changes((editedValue) => {
+            this._rowsBeingEdited$.replaceOrPush(editedValue);
+        }, { initialValue: "triggerChangeUnlessNil" });
         this._editorSessions.push(editSession);
         editSession.onDispose(() => {
-            this._rowsBeingEdited.remove(editSession.liveRowValue.value);
+            this._rowsBeingEdited$.remove(editSession.liveRowValue$.value);
             this._editorSessions.remove(editSession);
         });
         return editSession;
@@ -3405,7 +3568,7 @@ class AbstractTableModel extends GarbageCollector {
     }
     cancelAllEditorSessions() {
         this._editorSessions.runInTransaction((draft) => {
-            this._rowsBeingEdited.runInTransaction(() => {
+            this._rowsBeingEdited$.runInTransaction(() => {
                 draft.value.forEach(session => session.dispose());
             });
         });
@@ -3414,7 +3577,7 @@ class AbstractTableModel extends GarbageCollector {
         return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
     }
     isRowSelectionEnabled() {
-        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns$.value;
     }
     hasUserSelectionModel() {
         return !!this.selectionColumnModel?.selectionModel.getDelegate();
@@ -3443,7 +3606,7 @@ class AbstractTableModel extends GarbageCollector {
 }
 TrackExternal.oneTimeBinding(AbstractTableModel);
 
-class TableCellRendererComponent extends DisposableComponent {
+class TableCellComponent extends DisposableComponent {
     constructor() {
         super();
         this.defaultClassNames = 'aup-cell-renderer';
@@ -3455,7 +3618,7 @@ class TableCellRendererComponent extends DisposableComponent {
     }
     ngOnInit() {
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
+        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn$).equals(this.column); // this would break if the column changed.
         this.column.attachCell(this);
     }
     hasActiveEditor() {
@@ -3502,11 +3665,11 @@ class TableCellRendererComponent extends DisposableComponent {
         };
     }
 }
-TableCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableCellRendererComponent, selector: "aup-table-cell-renderer", inputs: { row: "row", column: "column", editSession: "editSession", tableModel: "tableModel" }, host: { properties: { "class": "this.defaultClassNames", "class.fillCell": "this.fillCell", "class.padChild": "this.padChild" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TableCellRendererComponent, decorators: [{
+TableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableCellComponent, selector: "aup-table-cell", inputs: { row: "row", column: "column", editSession: "editSession", tableModel: "tableModel" }, host: { properties: { "class": "this.defaultClassNames", "class.fillCell": "this.fillCell", "class.padChild": "this.padChild" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TableCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-table-cell-renderer', template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""] }]
+            args: [{ selector: 'aup-table-cell', template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { row: [{
                 type: Input
             }], column: [{
@@ -3526,7 +3689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 args: ['class.padChild']
             }] } });
 
-class TableHeaderCellRendererComponent {
+class TableHeaderCellComponent {
     constructor() {
         this.defaultClassNames = 'aup-header-cell-renderer';
     }
@@ -3541,11 +3704,11 @@ class TableHeaderCellRendererComponent {
         return this[HEADER_CELL_RENDERER_PORTAL];
     }
 }
-TableHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", 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: TableHeaderCellRendererComponent, decorators: [{
+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-renderer', 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"] }]
+            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: [{
@@ -3631,7 +3794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 /**
  * Create your model:
  * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
+ * this.heroTableModel = new TableModel(heroList, table => {
  *   table.pluck("firstName");
  *   table.pluck("lastName");
  *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
@@ -3643,7 +3806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  *
  * Column templates
  * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
+ * this.heroTableModel = new TableModel(heroList, table => {
  *   table.pluck("firstName");
  *   table.pluck("lastName");
  *   table.addTemplateColumn("specialColumn");
@@ -3689,17 +3852,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * }
  */
 class TableComponent extends AbstractTableComponent {
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
+    constructor(elementRef, ngZone, injector) {
+        super(elementRef, ngZone, injector);
     }
     getModel() {
         return this.tableModel;
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+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.ɵ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-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\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-renderer [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-renderer>\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: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: ["column"] }, { type: TableCellRendererComponent, selector: "aup-table-cell-renderer", 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: "<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"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", AbstractTableModel)
@@ -3708,8 +3871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             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-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\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-renderer [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-renderer>\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 }]; }, propDecorators: { tableModel: [{
+                    ], 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: [{
                 type: Input
             }] } });
 
@@ -4288,17 +4451,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * }
  */
 class TreeTableComponent extends AbstractTableComponent {
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
+    constructor(elementRef, ngZone, injector) {
+        super(elementRef, ngZone, 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 }], target: i0.ɵɵFactoryTarget.Component });
+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.ɵ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-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\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-renderer [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-renderer>\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: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: ["column"] }, { type: TableCellRendererComponent, selector: "aup-table-cell-renderer", 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: "<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"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", TreeTableModel)
@@ -4307,8 +4470,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-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\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-renderer [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-renderer>\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 }]; }, propDecorators: { treeTableModel: [{
+                    ], 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: [{
                 type: Input
             }] } });
 
@@ -4532,11 +4695,12 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         EditRowControls,
         ColumnTemplateDirective,
         DefaultCellRendererComponent,
-        TableCellRendererComponent,
-        SelectCellRendererComponent,
-        SelectHeaderCellRendererComponent,
+        DefaultListCellRendererComponent,
+        TableCellComponent,
+        SelectionCellComponent,
+        SelectionHeaderCellComponent,
         DefaultHeaderCellRendererComponent,
-        TableHeaderCellRendererComponent,
+        TableHeaderCellComponent,
         IconComponent,
         SectionHeaderComponent,
         TableRowMenuComponent,
@@ -4695,11 +4859,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         EditRowControls,
                         ColumnTemplateDirective,
                         DefaultCellRendererComponent,
-                        TableCellRendererComponent,
-                        SelectCellRendererComponent,
-                        SelectHeaderCellRendererComponent,
+                        DefaultListCellRendererComponent,
+                        TableCellComponent,
+                        SelectionCellComponent,
+                        SelectionHeaderCellComponent,
                         DefaultHeaderCellRendererComponent,
-                        TableHeaderCellRendererComponent,
+                        TableHeaderCellComponent,
                         IconComponent,
                         SectionHeaderComponent,
                         TableRowMenuComponent,
@@ -8045,14 +8210,6 @@ class TableModel extends AbstractTableModel {
         }
         this.setDataSource(sourceOfTruth);
     }
-    /**
-     * @deprecated use new TableModel(sourceOfTruth, table => {...}); instead.
-     * @param sourceOfTruth
-     * @param builder
-     */
-    static fromList(sourceOfTruth, builder) {
-        return new TableModel(sourceOfTruth, builder);
-    }
     addSelectionColumn(selectionModel, showSelectionColumn) {
         return this._addSelectionColumn(selectionModel, showSelectionColumn);
     }
@@ -9994,5 +10151,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, 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, 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, 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, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, 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, 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 };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map