@coolon/angular-ui-powerups 13.1.7 → 13.3.0

package/fesm2015/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, ViewChild, ViewChildren, EventEmitter, 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';
@@ -20,7 +20,7 @@ import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
 import * as i1$9 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/material/divider';
@@ -40,16 +40,18 @@ 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, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Trace, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, Functions, MultipleSelectionModel, AbstractComputedListModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred } from '@coolon/pectin';
 import { __decorate, __param, __metadata, __awaiter } from 'tslib';
+import * as _ from 'lodash';
 import { isEmpty, isString, isFunction, isNil, isInteger, isEqual, uniq, first, findLast, isObject, isNumber, isNaN as isNaN$1 } from 'lodash';
 import * as i1$2 from '@angular/platform-browser';
 import { marked } from 'marked';
-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 { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Enum } from 'typescript-string-enums';
 import * as i3 from '@angular/material/core';
 import ResizeObserver from 'resize-observer-polyfill';
+import escapeStringRegexp from 'escape-string-regexp';
 import produce from 'immer';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i6$1 from '@angular/cdk/a11y';
@@ -1083,9 +1085,12 @@ class CommandComponent extends PopupAwareComponent {
     getFace() {
         return this.face;
     }
+    tryAndFocus() {
+        this.button.focus();
+    }
 }
 CommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\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: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, viewQueries: [{ propertyName: "button", first: true, predicate: MatButton, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\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: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -1106,6 +1111,12 @@ __decorate([
     StoreInValueModel('busyFaceModel'),
     __metadata("design:type", Object)
 ], CommandComponent.prototype, "busyFace", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CommandComponent.prototype, "tryAndFocus", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-command', template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"] }]
@@ -1131,7 +1142,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }, {
                 type: HostBinding,
                 args: ["class"]
-            }] } });
+            }], button: [{
+                type: ViewChild,
+                args: [MatButton]
+            }], tryAndFocus: [] } });
 
 /**
  *
@@ -2535,25 +2549,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() {
     }
@@ -2567,104 +2562,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-class EditRowControls extends DisposableComponent {
-    constructor() {
-        super();
-        this.saveCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
-            const finished = yield this.editSession.saveCommand.execute();
-            if (finished) {
-                this.editSession.dispose();
-            }
-        }));
-        this.cancelCommand = Command.create(() => {
-            this.editSession.dispose();
-        }).disableWhile(this.saveCommand.busy);
+class ColumnTextSearchFormatter {
+}
+(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() {
-        var _a;
-        return (_a = this.editSession) === null || _a === void 0 ? void 0 : _a.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(() => {
+    ColumnTextSearchFormatter.Null = Null;
+    class DefaultValueFormatter extends ColumnTextSearchFormatter {
+        format(value) {
             var _a;
-            (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selectCommand.execute(this.row);
-        });
+            let s = (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : "";
+            console.log("DefaultValueFormatter", { value, text: s });
+            return s;
+        }
     }
-    isSelected() {
-        var _a;
-        return (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.isSelected(this.row);
+    ColumnTextSearchFormatter.DefaultValueFormatter = DefaultValueFormatter;
+    class DefaultArrayFormatter extends ColumnTextSearchFormatter {
+        format(value) {
+            return value ? value.map(it => it === null || it === void 0 ? void 0 : 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() {
-        var _a;
-        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.allSelected.value) || false;
+    initialise(injector) {
+        if (this._delegate instanceof ColumnTextSearchFormatter.Delegate) {
+            this._delegate.initialise(injector);
+        }
     }
-    isIntermediate() {
-        var _a;
-        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.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 !== null && mapper !== void 0 ? 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();
@@ -2672,10 +2645,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();
     }
@@ -2689,32 +2661,21 @@ class ColumnModel extends GarbageCollector {
         return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.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._columnModelTextSearchPredicate || this._cellRendererTextSearchPredicate || 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();
     }
@@ -2729,6 +2690,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;
     }
@@ -2767,12 +2736,6 @@ class ColumnModel extends GarbageCollector {
     onRendererAttached(host, ref) {
         const component = this.getComponentOrEmbeddedView(ref);
         this._cellRendererPortalRef.onPortalAttached(host, component);
-        if (isFunction(component === null || component === void 0 ? void 0 : component.matches)) {
-            this._cellRendererTextSearchPredicate = (row, text) => component.matches(row, text);
-        }
-        else {
-            this._cellRendererTextSearchPredicate = undefined;
-        }
     }
     // @Trace()
     onEditorAttached(host, ref) {
@@ -2805,6 +2768,9 @@ class ColumnModel extends GarbageCollector {
             return ref;
         }
     }
+    initialise(injector) {
+        this.textSearchDelegate.initialise(injector);
+    }
 }
 __decorate([
     Memoize(),
@@ -2818,182 +2784,10 @@ __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 === null || value === void 0 ? void 0 : 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 === null || onComponentInitOrOptions === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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 ListPropertyColumnModel extends ColumnModel {
-    constructor(id, property, defaults) {
-        super(id, defaults);
-        this.property = property;
-        this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(', ');
-        this.cellRenderer(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) {
-        super(columnId, defaults);
-        this.getValue = getValue;
-        this.cellRenderer(DefaultCellRendererComponent);
-    }
-    cellRenderer(componentType, onComponentInitOrOptions) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
-            if (firstTime) {
-                if (isFunction(onComponentInitOrOptions)) {
-                    onComponentInitOrOptions(component);
-                }
-                else {
-                    if (isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
-                        onComponentInitOrOptions.onComponentInit(component);
-                    }
-                }
-            }
-            component.value = this.getValue(rowData.row);
-            if (!isFunction(onComponentInitOrOptions) && isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
-                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
-            }
-        }));
-        return this;
-    }
-    selectRowOnClick(selectOnRowClick) {
-        return this._selectRowOnClick(selectOnRowClick);
-    }
-}
-class EditorControlColumnModel extends ColumnModel {
-    constructor(columnId, saveCommandFactory, defaults) {
-        super(columnId, defaults);
-        this.cellRenderer(EditRowControls);
-    }
-    cellRenderer(componentType) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
-            component.row = rowData.row;
-            component.editSession = rowData.editSession;
-            component.editRowCommand = rowData.editRowCommand;
-        }));
-        return this;
-    }
-    getDefaultHeaderText() {
-        return '';
-    }
-}
+(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);
@@ -3007,45 +2801,11 @@ class CustomTemplateColumnModel extends ColumnModel {
         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) => {
-            component.selectionModel = this.selectionModel;
-            component.enableHeaderControls = this._enableHeaderControls;
-        });
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, (component, rowData) => {
-            component.row = rowData.row;
-            component.selectionModel = this.selectionModel;
-        }));
-        this.setSelectionModel(selectionModel);
-    }
-    setSelectionModel(selectionModel) {
-        this.selectionModel.setDelegate(selectionModel);
-        this.setDefaultVisibility(selectionModel instanceof MultipleSelectionModel ? ValueModel.TRUE : ValueModel.FALSE);
-    }
-    getDefaultHeaderText() {
-        return '';
-    }
-    enableHeaderControls(enable) {
-        this._enableHeaderControls = enable;
-        return this;
-    }
-    selectRow(row) {
-        this.selectionModel.selectCommand.execute(row);
-    }
-    isSelected(row) {
-        return this.selectionModel.isSelected(row);
-    }
-}
 
 /**
  * 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}`);
@@ -3057,7 +2817,7 @@ class SelectionColumnModel extends ColumnModel {
  *
  * Column templates
  * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
+ * this.heroTableModel = new TableModel(heroList, table => {
  *   table.pluck("firstName");
  *   table.pluck("lastName");
  *   table.addTemplateColumn("specialColumn");
@@ -3102,8 +2862,9 @@ class SelectionColumnModel extends ColumnModel {
  * }
  */
 class AbstractTableComponent extends ResizeAwareComponent {
-    constructor(elementRef, ngZone) {
+    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
@@ -3135,6 +2896,7 @@ class AbstractTableComponent extends ResizeAwareComponent {
     }
     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');
@@ -3154,12 +2916,12 @@ class AbstractTableComponent extends ResizeAwareComponent {
     // @Trace()
     isFirstVisibleColumn(columnId) {
         var _a;
-        return ((_a = this.getModel().firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+        return ((_a = this.getModel().firstVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
     // @Trace()
     isLastVisibleColumn(columnId) {
         var _a;
-        return ((_a = this.getModel().lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+        return ((_a = this.getModel().lastVisibleColumn$.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
     getColumnClasses(columnId) {
         const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
@@ -3172,7 +2934,7 @@ class AbstractTableComponent extends ResizeAwareComponent {
         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.ɵ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 }),
@@ -3188,7 +2950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                     selector: 'aup-abstract-table',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showHeaderModel: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { showHeaderModel: [{
                 type: Input
             }], showHeader: [{
                 type: Input
@@ -3236,7 +2998,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-class TableCellRendererComponent extends DisposableComponent {
+const TEXT_SEARCH_FORMATTER_KEY = `aup:table:textSearchFormatter`;
+const Keys = Enum("useFunction", "useInstance", "useClass");
+function EnableCellTextSearch(options) {
+    assert$1.notNil(options);
+    return (constructor) => {
+        const klass = Klass.get(constructor);
+        assert$1.isFalsey(klass.hasOwnMetadata(TEXT_SEARCH_FORMATTER_KEY), "class already decorated with @EnableCellTextSearch");
+        klass.defineMetadata(TEXT_SEARCH_FORMATTER_KEY, options);
+    };
+}
+(function (EnableCellTextSearch) {
+    function getFormatter(renderer, useDefault) {
+        var _a;
+        const options = (_a = Klass.get(renderer).getMetadata(TEXT_SEARCH_FORMATTER_KEY)) !== null && _a !== void 0 ? _a : {};
+        if (options[Keys.useFunction]) {
+            return ColumnTextSearchFormatter.forFormatter(options[Keys.useFunction]);
+        }
+        if (options[Keys.useInstance]) {
+            return options[Keys.useInstance];
+        }
+        if (options[Keys.useClass]) {
+            return new ColumnTextSearchFormatter.Delegating(options[Keys.useClass]);
+        }
+        return useDefault();
+    }
+    EnableCellTextSearch.getFormatter = getFormatter;
+})(EnableCellTextSearch || (EnableCellTextSearch = {}));
+
+let DefaultCellRendererComponent = class DefaultCellRendererComponent {
+    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 EditRowControls extends DisposableComponent {
+    constructor() {
+        super();
+        this.saveCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
+            const finished = yield 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() {
+        var _a;
+        return (_a = this.editSession) === null || _a === void 0 ? void 0 : _a.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 === null || e === void 0 ? void 0 : e.toString()).join(", ");
+let DefaultListCellRendererComponent = class DefaultListCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        const { chain } = Dsl.disposeWith(this);
+        this.text$ = chain(this.value$).reduce(formatter);
+    }
+};
+DefaultListCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultListCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultListCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DefaultListCellRendererComponent, selector: "aup-default-list-cell-renderer", inputs: { value$: "value$", value: "value" }, usesInheritance: true, ngImport: i0, template: "<span [innerHTML]=\"text$.value| aupHighlight\"></span>\n", styles: [""], pipes: { "aupHighlight": HighlightPipe } });
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ListModel)
+], DefaultListCellRendererComponent.prototype, "value$", void 0);
+__decorate([
+    StoreInListModel("value$"),
+    __metadata("design:type", Array)
+], DefaultListCellRendererComponent.prototype, "value", void 0);
+DefaultListCellRendererComponent = __decorate([
+    EnableCellTextSearch({ useClass: ColumnTextSearchFormatter.DefaultArrayFormatter }),
+    __metadata("design:paramtypes", [])
+], DefaultListCellRendererComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultListCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aup-default-list-cell-renderer", template: "<span [innerHTML]=\"text$.value| aupHighlight\"></span>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value$: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class SelectionCellComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.selectCommand = Command.create(() => {
+            var _a;
+            (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selectCommand.execute(this.row);
+        });
+    }
+    isSelected() {
+        var _a;
+        return (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.allSelected.value) || false;
+    }
+    isIntermediate() {
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.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 TableCellComponent extends DisposableComponent {
     constructor() {
         super();
         this.defaultClassNames = 'aup-cell-renderer';
@@ -3248,7 +3186,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() {
@@ -3296,11 +3234,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: [{
@@ -3320,7 +3258,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';
     }
@@ -3335,11 +3273,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: [{
@@ -3425,18 +3363,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class ColumnListModel extends AbstractComputedListModel {
     constructor() {
         super();
-        this._allColumns = new MutableListModel();
+        this._allColumns$ = new MutableListModel();
         const { chain } = Dsl.disposeWith(this);
-        this.columnsById = chain(this._allColumns).indexBy('columnId');
+        this.columnsById$ = chain(this._allColumns$).indexBy('columnId');
     }
-    get allColumns() {
-        return this._allColumns.readonly;
+    get allColumns$() {
+        return this._allColumns$.readonly;
     }
     getColumn(id) {
-        return this.columnsById.get(id);
+        return this.columnsById$.get(id);
     }
     hasColumn(id) {
-        return !!this.columnsById.get(id);
+        return !!this.columnsById$.get(id);
     }
     addColumn(column, index) {
         if (this.hasColumn(column.columnId)) {
@@ -3445,17 +3383,227 @@ class ColumnListModel extends AbstractComputedListModel {
         this.registerDisposable(column);
         this.runInTransaction(() => {
             if (!isNil(index)) {
-                this._allColumns.insert(index, column);
+                this._allColumns$.insert(index, column);
             }
             else {
-                this._allColumns.push(column);
+                this._allColumns$.push(column);
             }
-            this.registerDisposable(this.trackSource(column.visible));
+            this.registerDisposable(this.trackSource(column.visible$));
         });
         return column;
     }
     doComputeValue() {
-        return this._allColumns.value.filter(c => c.visible.value);
+        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)) {
+                    onComponentInitOrOptions(component);
+                }
+                else {
+                    if (isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        onComponentInitOrOptions.onComponentInit(component);
+                    }
+                }
+            }
+            component.value = this.getValue(rowData.row);
+            if (!isFunction(onComponentInitOrOptions) && isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+            }
+        }));
+        return this;
+    }
+    selectRowOnClick(selectOnRowClick) {
+        return this._selectRowOnClick(selectOnRowClick);
+    }
+}
+
+class EditorControlColumnModel extends ColumnModel {
+    constructor(columnId, saveCommandFactory, defaults) {
+        super(columnId, defaults);
+        this.cellRenderer(EditRowControls);
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+            component.row = rowData.row;
+            component.editSession = rowData.editSession;
+            component.editRowCommand = rowData.editRowCommand;
+        }));
+        return this;
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+
+class ListPropertyColumnModel extends ColumnModel {
+    constructor(id, property, defaults) {
+        super(id, defaults);
+        this.property = property;
+        this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(", ");
+        this.cellRenderer(DefaultListCellRendererComponent);
+    }
+    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 === null || value === void 0 ? void 0 : 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 === null || onComponentInitOrOptions === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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(SelectionHeaderCellComponent, (component) => {
+            component.selectionModel = this.selectionModel;
+            component.enableHeaderControls = this._enableHeaderControls;
+        });
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectionCellComponent, (component, rowData) => {
+            component.row = rowData.row;
+            component.selectionModel = this.selectionModel;
+        }));
+        this.setSelectionModel(selectionModel);
+    }
+    setSelectionModel(selectionModel) {
+        this.selectionModel.setDelegate(selectionModel);
+        this.setDefaultVisibility(selectionModel instanceof MultipleSelectionModel ? ValueModel.TRUE : ValueModel.FALSE);
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+    enableHeaderControls(enable) {
+        this._enableHeaderControls = enable;
+        return this;
+    }
+    selectRow(row) {
+        this.selectionModel.selectCommand.execute(row);
+    }
+    isSelected(row) {
+        return this.selectionModel.isSelected(row);
     }
 }
 
@@ -3465,21 +3613,23 @@ class EditSession extends GarbageCollector {
         this.rowId = rowId;
         this.form = form;
         this.saveCommand = saveCommand;
-        this._liveRowValue = new MutableValueModel();
-        this.liveRowValue = this._liveRowValue.readonly;
+        this._liveRowValue$ = new MutableValueModel();
+        this.liveRowValue$ = this._liveRowValue$.readonly;
         this.form.load(row);
-        this._liveRowValue.value = row;
+        this._liveRowValue$.value = row;
         this.form.onEdit(() => {
             // if (!this._liveRowValue.value[immerable]) {
             //   console.warn()
             // }
-            this._liveRowValue.value = produce(this._liveRowValue.value, draft => {
+            this._liveRowValue$.value = produce(this._liveRowValue$.value, draft => {
                 this.form.writeDirtyStateTo(draft);
             });
         });
     }
 }
 
+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 {
@@ -3496,39 +3646,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;
@@ -3543,9 +3723,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));
@@ -3557,7 +3737,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) {
@@ -3599,7 +3779,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?
@@ -3607,12 +3787,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;
@@ -3622,7 +3802,7 @@ class AbstractTableModel extends GarbageCollector {
     }
     cancelAllEditorSessions() {
         this._editorSessions.runInTransaction((draft) => {
-            this._rowsBeingEdited.runInTransaction(() => {
+            this._rowsBeingEdited$.runInTransaction(() => {
                 draft.value.forEach(session => session.dispose());
             });
         });
@@ -3631,7 +3811,7 @@ class AbstractTableModel extends GarbageCollector {
         return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
     }
     isRowSelectionEnabled() {
-        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns$.value;
     }
     hasUserSelectionModel() {
         var _a;
@@ -3666,7 +3846,7 @@ TrackExternal.oneTimeBinding(AbstractTableModel);
 /**
  * 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}`);
@@ -3678,7 +3858,7 @@ TrackExternal.oneTimeBinding(AbstractTableModel);
  *
  * Column templates
  * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
+ * this.heroTableModel = new TableModel(heroList, table => {
  *   table.pluck("firstName");
  *   table.pluck("lastName");
  *   table.addTemplateColumn("specialColumn");
@@ -3724,17 +3904,17 @@ TrackExternal.oneTimeBinding(AbstractTableModel);
  * }
  */
 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)
@@ -3743,8 +3923,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
             }] } });
 
@@ -4324,17 +4504,17 @@ class TreeTableModel extends AbstractTableModel {
  * }
  */
 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)
@@ -4343,8 +4523,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
             }] } });
 
@@ -4572,11 +4752,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,
@@ -4735,11 +4916,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,
@@ -4863,9 +5045,15 @@ class ActivityActionsComponent extends DisposableComponent {
         this.cancelCommand = activity.cancelCommand;
         this.cdr.detectChanges();
     }
+    focusConfirm() {
+        this.confirmCommandComponent.tryAndFocus();
+    }
+    focusCancel() {
+        this.cancelCommandComponent.tryAndFocus();
+    }
 }
 ActivityActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -4876,8 +5064,14 @@ __decorate([
 ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommand: [{
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommandComponent: [{
+                type: ViewChild,
+                args: ["confirmCommandComponent"]
+            }], cancelCommandComponent: [{
+                type: ViewChild,
+                args: ["cancelCommandComponent"]
+            }], confirmCommand: [{
                 type: Input
             }], cancelCommand: [{
                 type: Input
@@ -4912,31 +5106,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
     });
 })(ActivityActionsComponent || (ActivityActionsComponent = {}));
 
-const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
+const ACTIVITY_DATA = new InjectionToken("InteractionActivityData");
 class Activity extends DisposableComponent {
     constructor() {
         super();
-        this._busyModel = this.registerDisposable(new DelegatingValueModel().withDefault(false));
-        this._focusedModel = this.registerDisposable(new DelegatingValueModel());
-        this.class = 'aup-activity';
+        this.activityReadyListeners = new EventListenerList();
+        this._busy$ = this.registerDisposable(new DelegatingValueModel().withDefault(false));
+        this._focused$ = this.registerDisposable(new DelegatingValueModel());
+        this.class = "aup-activity";
         this.busyWhile(this.confirmCommand.busy);
     }
     get isFocused() {
-        return this._focusedModel.value;
+        return this._focused$.value;
     }
     initialise(nestedInteractionContext, activityContext) {
         const { chain, when } = Dsl.disposeWith(this);
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
-        this._focusedModel.setDelegate(activityContext.focused);
-        when(this._focusedModel).becomesTruthy(() => {
-            this.onActivityReady();
+        this._focused$.setDelegate(activityContext.focused);
+        when(this._focused$).becomesTruthy(() => {
+            this.notifyActivityReady();
         });
     }
     ngAfterViewInit() {
-        var _a;
-        (_a = this.activityActions) === null || _a === void 0 ? void 0 : _a.initCommands(this);
+        if (this.activityActions) {
+            this.initialiseActivityAction(this.activityActions);
+        }
+    }
+    initialiseActivityAction(activityActions) {
+        activityActions.initCommands(this);
     }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
@@ -4948,27 +5147,30 @@ class Activity extends DisposableComponent {
     cancel(error) {
         this._activityContext.onCancel(error);
     }
-    // @Trace()
-    onActivityReady() {
+    notifyActivityReady() {
+        this.activityReadyListeners.fire(l => l(this));
     }
-    get busy() {
-        return this._busyModel.readonly;
+    onActivityReady(callback) {
+        return this.activityReadyListeners.add(callback);
     }
-    get focused() {
-        return this._focusedModel.readonly;
+    get busy$() {
+        return this._busy$.readonly;
+    }
+    get focused$() {
+        return this._focused$.readonly;
     }
     busyWhile(busyModel) {
-        this._busyModel.setDelegate(busyModel);
+        this._busy$.setDelegate(busyModel);
     }
     isBusy() {
-        return this._busyModel.value;
+        return this._busy$.value;
     }
     isInitialised() {
         return !!this._activityContext;
     }
 }
 Activity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -4980,17 +5182,17 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: ""
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { activityActions: [{
                 type: ViewChild,
                 args: [ActivityActionsComponent]
             }], confirmCommand: [], cancelCommand: [], class: [{
                 type: HostBinding,
-                args: ['class']
+                args: ["class"]
             }], isFocused: [{
                 type: HostBinding,
-                args: ['attr.focused']
+                args: ["attr.focused"]
             }] } });
 
 var Alert;
@@ -5024,6 +5226,11 @@ class AbstractDialogComponent extends Activity {
             color: () => this.color || 'primary',
             style: () => 'raised'
         };
+        this.onActivityReady(() => {
+            if (this.activityActions) {
+                this.isDestructive() ? this.activityActions.focusCancel() : this.activityActions.focusConfirm();
+            }
+        });
     }
     getConfig() {
         return lang$1.abstractMethod(this.constructor);
@@ -5309,7 +5516,7 @@ class ActivityRef {
             },
             focused: this.focusedModel.readonly
         });
-        this._activityBusy.setDelegate(this._activity.busy);
+        this._activityBusy.setDelegate(this._activity.busy$);
     }
     finishActivity(resolveOrReject) {
         assert.isFalsey(this.isComplete());
@@ -5361,7 +5568,10 @@ class ActivityOutletComponent {
     loadActivity(activityRef) {
         const injector = Injector.create({
             providers: [
-                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
+                {
+                    provide: ACTIVITY_DATA,
+                    useValue: activityRef.activityData
+                }
             ],
             parent: this.injector
         });
@@ -7920,14 +8130,12 @@ class InputActivity extends Activity {
             this.cancel();
         });
         this.busyWhile(this.confirmCommand.busy);
+        this.onActivityReady(() => this.valueModel.focusContext.requestFocus());
     }
     get layout() {
         var _a, _b;
         return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : InputActivity.Layout.BLOCK;
     }
-    onActivityReady() {
-        this.valueModel.focusContext.requestFocus();
-    }
     get additionalCssClassName() {
         var _a;
         return (_a = this.data.cssClassName) !== null && _a !== void 0 ? _a : '';
@@ -8145,14 +8353,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);
     }
@@ -10113,5 +10313,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