@coolon/angular-ui-powerups 1.12.0 → 1.13.0

package/fesm5/coolon-angular-ui-powerups.js

@@ -7,12 +7,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, Deferred, Trace, MutableListModel, FocusManager, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, Deferred, Trace, MutableListModel, FocusManager, Form, DelegatingFormListModel, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -1535,7 +1535,7 @@ var CardContainerComponent = /** @class */ (function (_super) {
         Component({
             selector: 'aup-card-container',
             template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
         }),
         __metadata("design:paramtypes", [])
     ], CardContainerComponent);
@@ -1791,18 +1791,6 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
         var _this = _super.call(this) || this;
-        /**
-         * A backing model for all our @Input() valueModel properties which should be defined as follows.
-         *
-         *    @Input() @TrackExternal({useExisting: "delegatingFormValueModel"})
-         *    valueModel: FormValueModel<string> | MutableValueModel<string>;
-         *
-         * This approach allows the input to accept plain or form models but all backed by a form
-         * friendly delegate.  We have to use an existing delegate for union types as pectin just
-         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
-         */
-        // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        _this.delegatingFormValueModel = _this.registerDisposable(new DelegatingFormValueModel());
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
         _this.focus = new EventEmitter();
@@ -1821,6 +1809,13 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(AbstractInputComponent.prototype, "inputModel", {
+        get: function () {
+            return lang$1.abstractMethod(this.constructor, "inputModel");
+        },
+        enumerable: true,
+        configurable: true
+    });
     AbstractInputComponent.prototype.notifyClick = function () {
         this.safelyInvoke(this.clickCommand);
     };
@@ -1852,7 +1847,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            return this.delegatingFormValueModel.enabled;
+            return this.inputModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -1862,7 +1857,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.delegatingFormValueModel.errorList;
+            return this.inputModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -1874,6 +1869,13 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
+        get: function () {
+            return this.inputModel.focusContext;
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -1955,6 +1957,54 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     return AbstractInputComponent;
 }(DisposableComponent));
 
+var AbstractListInputComponent = /** @class */ (function (_super) {
+    __extends(AbstractListInputComponent, _super);
+    function AbstractListInputComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "inputModel"})
+         *    valueModel: FormListModel<string> | IMutableListModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        _this.inputModel = _this.registerDisposable(new DelegatingFormListModel());
+        return _this;
+    }
+    AbstractListInputComponent = __decorate([
+        Component({ template: '' })
+    ], AbstractListInputComponent);
+    return AbstractListInputComponent;
+}(AbstractInputComponent));
+
+var AbstractValueInputComponent = /** @class */ (function (_super) {
+    __extends(AbstractValueInputComponent, _super);
+    function AbstractValueInputComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "inputModel"})
+         *    valueModel: FormValueModel<string> | IMutableValueModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        _this.inputModel = _this.registerDisposable(new DelegatingFormValueModel());
+        return _this;
+    }
+    AbstractValueInputComponent = __decorate([
+        Component({ template: '' })
+    ], AbstractValueInputComponent);
+    return AbstractValueInputComponent;
+}(AbstractInputComponent));
+
 var CheckboxInputComponent = /** @class */ (function (_super) {
     __extends(CheckboxInputComponent, _super);
     function CheckboxInputComponent() {
@@ -1966,7 +2016,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     CheckboxInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], CheckboxInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -1986,7 +2036,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [])
     ], CheckboxInputComponent);
     return CheckboxInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var NumberInputComponent = /** @class */ (function (_super) {
     __extends(NumberInputComponent, _super);
@@ -1999,7 +2049,7 @@ var NumberInputComponent = /** @class */ (function (_super) {
     NumberInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], NumberInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -2013,13 +2063,13 @@ var NumberInputComponent = /** @class */ (function (_super) {
     NumberInputComponent = __decorate([
         Component({
             selector: 'aup-number-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel?.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
         }),
         __metadata("design:paramtypes", [])
     ], NumberInputComponent);
     return NumberInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var PasswordInputComponent = /** @class */ (function (_super) {
     __extends(PasswordInputComponent, _super);
@@ -2029,19 +2079,19 @@ var PasswordInputComponent = /** @class */ (function (_super) {
     PasswordInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+        Input(), TrackExternal({ delegateTo: "inputModel" }),
         __metadata("design:type", Object)
     ], PasswordInputComponent.prototype, "valueModel", void 0);
     PasswordInputComponent = __decorate([
         Component({
             selector: 'aup-password-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
         }),
         __metadata("design:paramtypes", [])
     ], PasswordInputComponent);
     return PasswordInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var SelectInputComponent = /** @class */ (function (_super) {
     __extends(SelectInputComponent, _super);
@@ -2053,7 +2103,7 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+        Input(), TrackExternal({ delegateTo: "inputModel" }),
         __metadata("design:type", Object)
     ], SelectInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -2087,13 +2137,13 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent = __decorate([
         Component({
             selector: 'aup-select-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [":host{display:inline-block}mat-form-field{width:100%}"]
         }),
         __metadata("design:paramtypes", [])
     ], SelectInputComponent);
     return SelectInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var StringInputActivity = /** @class */ (function (_super) {
     __extends(StringInputActivity, _super);
@@ -2123,7 +2173,7 @@ var StringInputComponent = /** @class */ (function (_super) {
     StringInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], StringInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -2137,13 +2187,13 @@ var StringInputComponent = /** @class */ (function (_super) {
     StringInputComponent = __decorate([
         Component({
             selector: 'aup-string-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n",
             styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}"]
         }),
         __metadata("design:paramtypes", [])
     ], StringInputComponent);
     return StringInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var TextInputComponent = /** @class */ (function (_super) {
     __extends(TextInputComponent, _super);
@@ -2156,7 +2206,7 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], TextInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -2170,13 +2220,13 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent = __decorate([
         Component({
             selector: 'aup-text-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
         }),
         __metadata("design:paramtypes", [])
     ], TextInputComponent);
     return TextInputComponent;
-}(AbstractInputComponent));
+}(AbstractValueInputComponent));
 
 var NoopComponent = /** @class */ (function () {
     function NoopComponent() {
@@ -2393,17 +2443,20 @@ var DefaultHeaderCellRendererComponent = /** @class */ (function () {
 
 var EditSession = /** @class */ (function (_super) {
     __extends(EditSession, _super);
-    function EditSession(rowId, row, saveCommand) {
+    function EditSession(rowId, row, form, saveCommand) {
         var _this = _super.call(this) || this;
         _this.rowId = rowId;
+        _this.form = form;
         _this.saveCommand = saveCommand;
-        _this._editorValue = new MutableValueModel();
-        _this.rowValueModel = _this._editorValue.readonly;
-        _this.form = new Form();
+        _this._liveRowValue = new MutableValueModel();
+        _this.liveRowValue = _this._liveRowValue.readonly;
         _this.form.load(row);
-        _this._editorValue.value = row;
+        _this._liveRowValue.value = row;
         _this.form.onEdit(function () {
-            _this._editorValue.value = produce(_this._editorValue.value, function (draft) {
+            // if (!this._liveRowValue.value[immerable]) {
+            //   console.warn()
+            // }
+            _this._liveRowValue.value = produce(_this._liveRowValue.value, function (draft) {
                 _this.form.writeDirtyStateTo(draft);
             });
         });
@@ -2472,28 +2525,13 @@ var SelectCellRendererComponent = /** @class */ (function (_super) {
         });
         return _this;
     }
-    Object.defineProperty(SelectCellRendererComponent.prototype, "row", {
-        get: function () {
-            return this._row;
-        },
-        set: function (value) {
-            this._row = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     SelectCellRendererComponent.prototype.isSelected = function () {
         return this.selectionModel.isSelected(this.row);
     };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], SelectCellRendererComponent.prototype, "row", null);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+    ], SelectCellRendererComponent.prototype, "row", void 0);
     SelectCellRendererComponent = __decorate([
         Component({
             selector: 'aup-select-cell-renderer',
@@ -2515,15 +2553,13 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
         return _this;
     }
     SelectHeaderCellRendererComponent.prototype.isSelected = function () {
-        return this.selectionModel.allSelected.value;
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.allSelected.value) || false;
     };
     SelectHeaderCellRendererComponent.prototype.isIntermediate = function () {
-        return this.selectionModel.someSelected.value;
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.someSelected.value) || false;
     };
-    __decorate([
-        Input(),
-        __metadata("design:type", MultipleSelectionModel)
-    ], SelectHeaderCellRendererComponent.prototype, "selectionModel", void 0);
     SelectHeaderCellRendererComponent = __decorate([
         Component({
             selector: 'aup-select-header-cell-renderer',
@@ -2535,197 +2571,6 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
     return SelectHeaderCellRendererComponent;
 }(DisposableComponent));
 
-var ColumnModel = /** @class */ (function () {
-    function ColumnModel(columnId, defaults) {
-        this.columnId = columnId;
-        this.defaults = defaults;
-        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
-            component.headerText = column.getHeaderText();
-        });
-    }
-    ColumnModel.prototype.getHeaderText = function () {
-        var _a;
-        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
-    };
-    ColumnModel.prototype.getDefaultHeaderText = function () {
-        return this.columnId;
-    };
-    ColumnModel.prototype.getColumnTextProperties = function () {
-        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
-    };
-    ColumnModel.prototype.textProperties = function (columnTextProperties) {
-        this._columnTextProperties = columnTextProperties;
-        return this;
-    };
-    ColumnModel.prototype.setCellRenderer = function (cellRenderer, initialiser) {
-        this._cellRendererConfig = {
-            portal: new ComponentPortal(cellRenderer),
-            pushState: initialiser
-        };
-    };
-    ColumnModel.prototype.cellHeaderRenderer = function (cellRenderer, initialiser) {
-        this._columnHeaderConfig = {
-            portal: new ComponentPortal(cellRenderer),
-            initialiseComponent: initialiser
-        };
-        return this;
-    };
-    ColumnModel.prototype.setCellEditor = function (cellEditor) {
-        this._cellEditorConfig = cellEditor;
-    };
-    Object.defineProperty(ColumnModel.prototype, "cellRendererPortal", {
-        get: function () {
-            return this._cellRendererConfig.portal;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColumnModel.prototype, "columnHeaderCellRendererPortal", {
-        get: function () {
-            return this._columnHeaderConfig.portal;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColumnModel.prototype, "cellEditorPortal", {
-        get: function () {
-            var _a;
-            return (_a = this._cellEditorConfig) === null || _a === void 0 ? void 0 : _a.portal;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColumnModel.prototype.hasEditor = function () {
-        return !!this._cellEditorConfig;
-    };
-    ColumnModel.prototype.updateCellRenderer = function (component, row, editRowCommand, editSession) {
-        this._cellRendererConfig.pushState(component, row, editRowCommand, editSession);
-    };
-    ColumnModel.prototype.initialiseHeader = function (component) {
-        this._columnHeaderConfig.initialiseComponent(component, this);
-    };
-    ColumnModel.prototype.initialiseEditor = function (component, editSession) {
-        this._cellEditorConfig.initialiseComponent(component, editSession);
-    };
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", String)
-    ], ColumnModel.prototype, "getHeaderText", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", Object)
-    ], ColumnModel.prototype, "getColumnTextProperties", null);
-    return ColumnModel;
-}());
-var PropertyColumnModel = /** @class */ (function (_super) {
-    __extends(PropertyColumnModel, _super);
-    function PropertyColumnModel(property, defaults) {
-        var _this = _super.call(this, property.toString(), defaults) || this;
-        _this.property = property;
-        _this._format = function (value) { return value; };
-        _this.cellRenderer(DefaultCellRendererComponent);
-        return _this;
-    }
-    PropertyColumnModel.prototype.cellRenderer = function (componentType) {
-        var _this = this;
-        this.setCellRenderer(componentType, function (component, row) {
-            component.value = _this._format(row[_this.property]);
-        });
-        return this;
-    };
-    PropertyColumnModel.prototype.cellEditor = function (editor, options) {
-        var _this = this;
-        this.setCellEditor({
-            portal: new ComponentPortal(editor),
-            initialiseComponent: function (component, editSession) {
-                var formValueModel = editSession.form.pluck(_this.property);
-                if (options === null || options === void 0 ? void 0 : options.validators) {
-                    formValueModel.validateUsing(options.validators);
-                }
-                component.valueModel = formValueModel;
-                if (options === null || options === void 0 ? void 0 : options.initialiseComponent) {
-                    options.initialiseComponent(component);
-                }
-            }
-        });
-        return this;
-    };
-    PropertyColumnModel.prototype.format = function (formatter) {
-        assert$1.isFunction(formatter);
-        this._format = formatter;
-        return this;
-    };
-    return PropertyColumnModel;
-}(ColumnModel));
-var CustomValueColumnModel = /** @class */ (function (_super) {
-    __extends(CustomValueColumnModel, _super);
-    function CustomValueColumnModel(columnId, defaults, getValue) {
-        var _this = _super.call(this, columnId, defaults) || this;
-        _this.getValue = getValue;
-        _this.cellRenderer(DefaultCellRendererComponent);
-        return _this;
-    }
-    CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
-        var _this = this;
-        this.setCellRenderer(componentType, function (component, row) {
-            component.value = _this.getValue(row);
-        });
-        return this;
-    };
-    return CustomValueColumnModel;
-}(ColumnModel));
-var EditorControlColumnModel = /** @class */ (function (_super) {
-    __extends(EditorControlColumnModel, _super);
-    function EditorControlColumnModel(columnId, saveCommand, defaults) {
-        var _this = _super.call(this, columnId, defaults) || this;
-        _this.cellRenderer(EditRowControls);
-        return _this;
-    }
-    EditorControlColumnModel.prototype.cellRenderer = function (componentType) {
-        this.setCellRenderer(componentType, function (component, row, editRowCommand, editSession) {
-            component.row = row;
-            component.editSession = editSession;
-            component.editRowCommand = editRowCommand;
-        });
-        return this;
-    };
-    EditorControlColumnModel.prototype.getDefaultHeaderText = function () {
-        return '';
-    };
-    return EditorControlColumnModel;
-}(ColumnModel));
-var CustomTemplateColumnModel = /** @class */ (function (_super) {
-    __extends(CustomTemplateColumnModel, _super);
-    function CustomTemplateColumnModel(columnId, defaults, component) {
-        return _super.call(this, columnId, defaults) || this;
-    }
-    return CustomTemplateColumnModel;
-}(ColumnModel));
-var SelectionColumnModel = /** @class */ (function (_super) {
-    __extends(SelectionColumnModel, _super);
-    function SelectionColumnModel(columnId, defaults, selectionModel) {
-        var _this = _super.call(this, columnId, defaults) || this;
-        if (selectionModel instanceof MultipleSelectionModel) {
-            _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
-                component.selectionModel = selectionModel;
-            });
-        }
-        _this.setCellRenderer(SelectCellRendererComponent, function (component, row, editRowCommand, editSession) {
-            component.row = row;
-            component.selectionModel = selectionModel;
-        });
-        return _this;
-    }
-    SelectionColumnModel.prototype.getDefaultHeaderText = function () {
-        return '';
-    };
-    return SelectionColumnModel;
-}(ColumnModel));
-
 // 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];
 /**
@@ -2804,6 +2649,7 @@ var TableModel = /** @class */ (function () {
         this._garbage = new GarbageCollector();
         this._columns = new MutableListModel();
         this._editorSessions = new MutableListModel();
+        this._createForm = function (row) { return new Form(); };
         this.identityOf = sourceOfTruth.identityOf;
         var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         this._columnsById = chain(this._columns).indexBy('columnId');
@@ -2843,6 +2689,9 @@ var TableModel = /** @class */ (function () {
     TableModel.prototype.pluck = function (property) {
         return this.addColumn(new PropertyColumnModel(property, this));
     };
+    TableModel.prototype.pluckList = function (property) {
+        return this.addColumn(new ListPropertyColumnModel(property, this));
+    };
     TableModel.prototype.addSelectionColumn = function (selectionModel) {
         return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
     };
@@ -2853,6 +2702,13 @@ var TableModel = /** @class */ (function () {
     TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
         return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     };
+    TableModel.prototype.addTemplateColumn = function (columnId) {
+        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    };
+    TableModel.prototype.useFormFactory = function (factory) {
+        this._createForm = factory;
+        return this;
+    };
     TableModel.prototype.addColumn = function (column) {
         if (this._columnsById.get(column.columnId)) {
             lang.illegalState("Column with id=" + column.columnId + " already exists");
@@ -2876,14 +2732,14 @@ var TableModel = /** @class */ (function () {
             return lang.illegalState("Row with id=" + rowId + " already being edited");
         }
         else {
-            var editSession_1 = new EditSession(rowId, row, this.saveCommand);
+            var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
             var when = Dsl.disposeWith(editSession_1).when;
-            when.valueOf(editSession_1.rowValueModel).changes(function (editedValue) {
+            when.valueOf(editSession_1.liveRowValue).changes(function (editedValue) {
                 _this._rowsBeingEdited.replaceOrPush(editedValue);
             }, { initialValue: 'triggerChangeUnlessNil' });
             this._editorSessions.push(editSession_1);
             editSession_1.onDispose(function () {
-                _this._rowsBeingEdited.remove(editSession_1.rowValueModel.value);
+                _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
                 _this._editorSessions.remove(editSession_1);
             });
             return editSession_1;
@@ -2911,46 +2767,481 @@ var TableModel = /** @class */ (function () {
     return TableModel;
 }());
 
-/**
- * Create your model:
- * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Create your table
- * @example
- * <aup-table [tableModel]="heroTableModel"></aup-table>
- *
- * Styling
- * @example
- * aup-table {
- *   --column-gap: 10px; // defaults to 24px
- *   aup-table-cell-renderer {
- *     &:first-column {
- *       // do stuff
- *     }
- *     &:last-column {
- *       // do stuff
- *     }
- *   }
- * }
- */
-var TableComponent = /** @class */ (function (_super) {
-    __extends(TableComponent, _super);
-    function TableComponent() {
-        return _super.call(this) || this;
+var TableCellRendererComponent = /** @class */ (function () {
+    function TableCellRendererComponent() {
+        var _this = this;
+        this.defaultClassNames = 'aup-cell-renderer';
+        this.fillCell = false;
+        this.padChild = false;
+        this.editRowCommand = Command.create(function () {
+            _this.tableModel.startEditSession(_this.row);
+        });
     }
-    TableComponent.prototype.ngOnInit = function () {
-        var _a = Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+    TableCellRendererComponent.prototype.ngOnInit = function () {
+        this.column.attachCell(this);
+    };
+    TableCellRendererComponent.prototype.hasActiveEditor = function () {
+        return !!this.editSession && !!this.column.hasEditorPortal();
+    };
+    TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
+        this.column.onRendererAttached(this, instance);
+    };
+    TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
+        this.column.onEditorAttached(this, instance);
+    };
+    // @Trace()
+    TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
+        this.column.updatePortalContent(this);
+    };
+    TableCellRendererComponent.prototype.getRendererPortal = function () {
+        return this[CELL_RENDERER_PORTAL];
+    };
+    TableCellRendererComponent.prototype.getEditorPortal = function () {
+        return this[CELL_EDITOR_PORTAL];
+    };
+    TableCellRendererComponent.prototype.getRowData = function () {
+        return {
+            row: this.row,
+            editSession: this.editSession,
+            editRowCommand: this.editRowCommand
+        };
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], TableCellRendererComponent.prototype, "row", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", ColumnModel)
+    ], TableCellRendererComponent.prototype, "column", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", EditSession)
+    ], TableCellRendererComponent.prototype, "editSession", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", TableModel)
+    ], TableCellRendererComponent.prototype, "tableModel", void 0);
+    __decorate([
+        HostBinding('class'),
+        __metadata("design:type", Object)
+    ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+    __decorate([
+        HostBinding('class.fillCell'),
+        __metadata("design:type", Object)
+    ], TableCellRendererComponent.prototype, "fillCell", void 0);
+    __decorate([
+        HostBinding('class.padChild'),
+        __metadata("design:type", Object)
+    ], TableCellRendererComponent.prototype, "padChild", void 0);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TableCellRendererComponent.prototype, "initialiseEditor", null);
+    TableCellRendererComponent = __decorate([
+        Component({
+            selector: 'aup-table-cell-renderer',
+            template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
+            styles: [""]
+        }),
+        __metadata("design:paramtypes", [])
+    ], TableCellRendererComponent);
+    return TableCellRendererComponent;
+}());
+
+var HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
+var CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
+var CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
+var PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
+var PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
+var noop = function () {
+};
+var ɵ0 = noop;
+var CellPortalRef = /** @class */ (function () {
+    function CellPortalRef() {
+    }
+    return CellPortalRef;
+}());
+var CellHeaderPortalRef = /** @class */ (function (_super) {
+    __extends(CellHeaderPortalRef, _super);
+    function CellHeaderPortalRef(componentType, initialiseHeader) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.initialiseHeader = initialiseHeader;
+        return _this;
+    }
+    CellHeaderPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
+        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
+    };
+    CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        this.initialiseHeader(portalComponent, host.column);
+    };
+    return CellHeaderPortalRef;
+}(CellPortalRef));
+var CellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(CellRendererPortalRef, _super);
+    function CellRendererPortalRef() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CellRendererPortalRef;
+}(CellPortalRef));
+var ComponentCellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(ComponentCellRendererPortalRef, _super);
+    function ComponentCellRendererPortalRef(componentType, updateComponent) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.updateComponent = updateComponent;
+        return _this;
+    }
+    ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
+    };
+    ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
+        this.updateComponent(portalComponent, host.getRowData());
+    };
+    ComponentCellRendererPortalRef.prototype.pushState = function (host) {
+        if (host[PORTAL_RENDERER_COMPONENT]) {
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+        }
+    };
+    return ComponentCellRendererPortalRef;
+}(CellRendererPortalRef));
+var CellEditorPortalRef = /** @class */ (function (_super) {
+    __extends(CellEditorPortalRef, _super);
+    function CellEditorPortalRef(componentType, initialiseEditorSession) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.initialiseEditorSession = initialiseEditorSession;
+        return _this;
+    }
+    CellEditorPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
+        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
+    };
+    CellEditorPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+        this.initialiseEditorSession(portalComponent, host.editSession);
+    };
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
+        __metadata("design:returntype", void 0)
+    ], CellEditorPortalRef.prototype, "onPortalAttached", null);
+    return CellEditorPortalRef;
+}(CellPortalRef));
+var TemplateCellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(TemplateCellRendererPortalRef, _super);
+    function TemplateCellRendererPortalRef() {
+        return _super.call(this) || this;
+    }
+    TemplateCellRendererPortalRef.prototype.registerPortal = function (templateRef, viewContainer, fillCell, padChild) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.fillCell = fillCell;
+        this.padChild = padChild;
+    };
+    TemplateCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
+    };
+    TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        //  don't care
+    };
+    TemplateCellRendererPortalRef.prototype.pushState = function (host) {
+        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
+        host.fillCell = this.fillCell;
+        host.padChild = this.padChild;
+    };
+    TemplateCellRendererPortalRef.prototype.createPortal = function (data) {
+        return new TemplatePortal(this.templateRef, this.viewContainer, __assign(__assign({}, (data)), { $implicit: data.row }));
+    };
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [TableCellRendererComponent, void 0]),
+        __metadata("design:returntype", void 0)
+    ], TemplateCellRendererPortalRef.prototype, "onPortalAttached", null);
+    return TemplateCellRendererPortalRef;
+}(CellRendererPortalRef));
+var ColumnModel = /** @class */ (function () {
+    function ColumnModel(columnId, defaults) {
+        this.columnId = columnId;
+        this.defaults = defaults;
+        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
+            component.headerText = column.getHeaderText();
+        });
+    }
+    ColumnModel.prototype.getHeaderText = function () {
+        var _a;
+        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
+    };
+    ColumnModel.prototype.getDefaultHeaderText = function () {
+        return this.columnId;
+    };
+    ColumnModel.prototype.getColumnTextProperties = function () {
+        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+    };
+    ColumnModel.prototype.textProperties = function (columnTextProperties) {
+        this._columnTextProperties = columnTextProperties;
+        return this;
+    };
+    ColumnModel.prototype.configureHeaderRenderer = function (config) {
+        this._columnHeaderPortalRef = config;
+    };
+    ColumnModel.prototype.configureCellRenderer = function (config) {
+        this._cellRendererPortalRef = config;
+    };
+    ColumnModel.prototype.configureCellEditor = function (cellEditor) {
+        this._cellEditorPortalRef = cellEditor;
+    };
+    ColumnModel.prototype.cellHeaderRenderer = function (componentType, initialiser) {
+        this.configureHeaderRenderer(new CellHeaderPortalRef(componentType, initialiser));
+        return this;
+    };
+    ColumnModel.prototype.hasEditorPortal = function () {
+        return !!this._cellEditorPortalRef;
+    };
+    ColumnModel.prototype.attachHeaderCell = function (host) {
+        this._columnHeaderPortalRef.initialiseHost(host, this);
+    };
+    ColumnModel.prototype.attachCell = function (host) {
+        this._cellRendererPortalRef.initialiseHost(host, this);
+        if (this.hasEditorPortal()) {
+            this._cellEditorPortalRef.initialiseHost(host, this);
+        }
+    };
+    ColumnModel.prototype.onHeaderAttached = function (host, component) {
+        this._columnHeaderPortalRef.onPortalAttached(host, component);
+    };
+    ColumnModel.prototype.onRendererAttached = function (host, component) {
+        this._cellRendererPortalRef.onPortalAttached(host, component);
+    };
+    ColumnModel.prototype.onEditorAttached = function (host, component) {
+        this._cellEditorPortalRef.onPortalAttached(host, component);
+    };
+    ColumnModel.prototype.updatePortalContent = function (host) {
+        this._cellRendererPortalRef.pushState(host);
+    };
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", String)
+    ], ColumnModel.prototype, "getHeaderText", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Object)
+    ], ColumnModel.prototype, "getColumnTextProperties", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
+        __metadata("design:returntype", void 0)
+    ], ColumnModel.prototype, "onEditorAttached", null);
+    return ColumnModel;
+}());
+var PropertyColumnModel = /** @class */ (function (_super) {
+    __extends(PropertyColumnModel, _super);
+    function PropertyColumnModel(property, defaults) {
+        var _this = _super.call(this, property.toString(), defaults) || this;
+        _this.property = property;
+        _this._format = function (value) { return value; };
+        _this.cellRenderer(DefaultCellRendererComponent);
+        return _this;
+    }
+    PropertyColumnModel.prototype.cellRenderer = function (componentType) {
+        var _this = this;
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            component.value = _this._format(rowData.row[_this.property]);
+        }));
+        return this;
+    };
+    PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
+        var _this = this;
+        var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
+            var formValueModel = editSession.form.pluck(_this.property);
+            if (validators) {
+                formValueModel.validateUsing(validators);
+            }
+            component.valueModel = formValueModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    };
+    PropertyColumnModel.prototype.format = function (formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    };
+    return PropertyColumnModel;
+}(ColumnModel));
+var ListPropertyColumnModel = /** @class */ (function (_super) {
+    __extends(ListPropertyColumnModel, _super);
+    function ListPropertyColumnModel(property, defaults) {
+        var _this = _super.call(this, property.toString(), defaults) || this;
+        _this.property = property;
+        _this._format = function (value) { return value.map(function (v) { return v === null || v === void 0 ? void 0 : v.toString(); }).join(', '); };
+        _this.cellRenderer(DefaultCellRendererComponent);
+        return _this;
+    }
+    ListPropertyColumnModel.prototype.cellRenderer = function (componentType) {
+        var _this = this;
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            component.value = _this._format(rowData.row[_this.property]);
+        }));
+        return this;
+    };
+    ListPropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
+        var _this = this;
+        var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
+            var formListModel = editSession.form.pluckList(_this.property);
+            if (validators) {
+                formListModel.validateUsing(validators);
+            }
+            component.listModel = formListModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    };
+    ListPropertyColumnModel.prototype.format = function (formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    };
+    return ListPropertyColumnModel;
+}(ColumnModel));
+var CustomValueColumnModel = /** @class */ (function (_super) {
+    __extends(CustomValueColumnModel, _super);
+    function CustomValueColumnModel(columnId, defaults, getValue) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        _this.getValue = getValue;
+        _this.cellRenderer(DefaultCellRendererComponent);
+        return _this;
+    }
+    CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
+        var _this = this;
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            component.value = _this.getValue(rowData.row);
+        }));
+        return this;
+    };
+    return CustomValueColumnModel;
+}(ColumnModel));
+var EditorControlColumnModel = /** @class */ (function (_super) {
+    __extends(EditorControlColumnModel, _super);
+    function EditorControlColumnModel(columnId, saveCommand, defaults) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        _this.cellRenderer(EditRowControls);
+        return _this;
+    }
+    EditorControlColumnModel.prototype.cellRenderer = function (componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            component.row = rowData.row;
+            component.editSession = rowData.editSession;
+            component.editRowCommand = rowData.editRowCommand;
+        }));
+        return this;
+    };
+    EditorControlColumnModel.prototype.getDefaultHeaderText = function () {
+        return '';
+    };
+    return EditorControlColumnModel;
+}(ColumnModel));
+var CustomTemplateColumnModel = /** @class */ (function (_super) {
+    __extends(CustomTemplateColumnModel, _super);
+    function CustomTemplateColumnModel(columnId, defaults) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        _this.config = new TemplateCellRendererPortalRef();
+        _this.configureCellRenderer(_this.config);
+        return _this;
+    }
+    CustomTemplateColumnModel.prototype.setTemplate = function (templateRef, viewContainer, fillCell, padChild) {
+        this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
+    };
+    return CustomTemplateColumnModel;
+}(ColumnModel));
+var SelectionColumnModel = /** @class */ (function (_super) {
+    __extends(SelectionColumnModel, _super);
+    function SelectionColumnModel(columnId, defaults, selectionModel) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        if (selectionModel instanceof MultipleSelectionModel) {
+            _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
+                component.selectionModel = selectionModel;
+            });
+        }
+        _this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, function (component, rowData) {
+            component.row = rowData.row;
+            component.selectionModel = selectionModel;
+        }));
+        return _this;
+    }
+    SelectionColumnModel.prototype.getDefaultHeaderText = function () {
+        return '';
+    };
+    return SelectionColumnModel;
+}(ColumnModel));
+
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Styling
+ * @example
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   aup-table-cell-renderer {
+ *     &:first-column {
+ *       // do stuff
+ *     }
+ *     &:last-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+var TableComponent = /** @class */ (function (_super) {
+    __extends(TableComponent, _super);
+    function TableComponent() {
+        return _super.call(this) || this;
+    }
+    TableComponent.prototype.ngOnInit = function () {
+        var _a = Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         this.columns = chain(this.tableModel.columns);
         this.columnIds = chain(this.columns).pluck('columnId');
+        this.columnsById = chain(this.columns).indexBy('columnId');
     };
     TableComponent.prototype.isEditing = function (row) {
         return !!this.tableModel.getEditSessionFor(row);
     };
+    TableComponent.prototype.registerColumnTemplate = function (columnId, templateRef, viewContainer, fillCell, padChild) {
+        var column = this.columnsById.get(columnId);
+        if (column instanceof CustomTemplateColumnModel) {
+            column.setTemplate(templateRef, viewContainer, fillCell, padChild);
+        }
+    };
     __decorate([
         Input(),
         TrackExternal(),
@@ -2969,94 +3260,62 @@ var TableComponent = /** @class */ (function (_super) {
 
 var ColumnTemplateDirective = /** @class */ (function () {
     function ColumnTemplateDirective(host, templateRef, viewContainer) {
+        this.host = host;
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
+        this.aupColumnTemplateFillCell = false;
+        this.aupColumnTemplateAutoPadChild = undefined;
     }
+    ColumnTemplateDirective.prototype.ngOnInit = function () {
+        var _a;
+        assert.isTruthy(this.aupColumnTemplateColumnId);
+        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
+    };
     ColumnTemplateDirective.ctorParameters = function () { return [
         { type: TableComponent },
         { type: TemplateRef },
         { type: ViewContainerRef }
     ]; };
-    ColumnTemplateDirective = __decorate([
-        Directive({
-            selector: '[aupColumnTemplate]'
-        }),
-        __metadata("design:paramtypes", [TableComponent,
-            TemplateRef,
-            ViewContainerRef])
-    ], ColumnTemplateDirective);
-    return ColumnTemplateDirective;
-}());
-
-var TableCellRendererComponent = /** @class */ (function () {
-    function TableCellRendererComponent() {
-        var _this = this;
-        this.defaultClassNames = "aup-header-cell-renderer";
-        this.editRowCommand = Command.create(function () {
-            _this.tableModel.startEditSession(_this.row);
-        });
-    }
-    TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
-        if (this.renderer !== instance) {
-            this.renderer = instance;
-            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
-        }
-    };
-    TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
-        if (this.editor !== instance) {
-            this.editor = instance;
-            this.column.initialiseEditor(this.editor, this.editSession);
-        }
-    };
-    TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
-        if (this.renderer) {
-            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
-            this.renderer.editSession = this.editSession;
-        }
-    };
-    TableCellRendererComponent.prototype.hasActiveEditor = function () {
-        return this.editSession && this.column.hasEditor();
-    };
     __decorate([
         Input(),
-        __metadata("design:type", Object)
-    ], TableCellRendererComponent.prototype, "row", void 0);
+        __metadata("design:type", String)
+    ], ColumnTemplateDirective.prototype, "aupColumnTemplate", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", ColumnModel)
-    ], TableCellRendererComponent.prototype, "column", void 0);
+        __metadata("design:type", String)
+    ], ColumnTemplateDirective.prototype, "aupColumnTemplateColumnId", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", EditSession)
-    ], TableCellRendererComponent.prototype, "editSession", void 0);
+        __metadata("design:type", Object)
+    ], ColumnTemplateDirective.prototype, "aupColumnTemplateFillCell", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", TableModel)
-    ], TableCellRendererComponent.prototype, "tableModel", void 0);
-    __decorate([
-        HostBinding('class'),
         __metadata("design:type", Object)
-    ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
-    TableCellRendererComponent = __decorate([
-        Component({
-            selector: 'aup-table-cell-renderer',
-            template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellRendererPortal\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellEditorPortal\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
-            styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
+    ], ColumnTemplateDirective.prototype, "aupColumnTemplateAutoPadChild", void 0);
+    ColumnTemplateDirective = __decorate([
+        Directive({
+            selector: '[aupColumnTemplate]'
         }),
-        __metadata("design:paramtypes", [])
-    ], TableCellRendererComponent);
-    return TableCellRendererComponent;
+        __metadata("design:paramtypes", [TableComponent,
+            TemplateRef,
+            ViewContainerRef])
+    ], ColumnTemplateDirective);
+    return ColumnTemplateDirective;
 }());
 
 var TableHeaderCellRendererComponent = /** @class */ (function () {
     function TableHeaderCellRendererComponent() {
-        this.defaultClassNames = "aup-header-cell-renderer";
+        this.defaultClassNames = 'aup-header-cell-renderer';
     }
+    TableHeaderCellRendererComponent.prototype.ngOnInit = function () {
+        this.column.attachHeaderCell(this);
+    };
+    // @Trace()
     TableHeaderCellRendererComponent.prototype.initialiseHeader = function (instance) {
-        if (this.renderer !== instance) {
-            this.renderer = instance;
-            this.column.initialiseHeader(this.renderer);
-        }
+        this.column.onHeaderAttached(this, instance);
+    };
+    TableHeaderCellRendererComponent.prototype.getPortal = function () {
+        return this[HEADER_CELL_RENDERER_PORTAL];
     };
     __decorate([
         Input(),
@@ -3069,8 +3328,8 @@ var TableHeaderCellRendererComponent = /** @class */ (function () {
     TableHeaderCellRendererComponent = __decorate([
         Component({
             selector: 'aup-table-header-cell-renderer',
-            template: "<ng-container [cdkPortalOutlet]=\"column.columnHeaderCellRendererPortal\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-            styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
+            template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+            styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
         }),
         __metadata("design:paramtypes", [])
     ], TableHeaderCellRendererComponent);
@@ -3162,6 +3421,58 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
     return VerticalFocusContainerComponent;
 }(FocusContainerComponent));
 
+var MultipleSelectInputComponent = /** @class */ (function (_super) {
+    __extends(MultipleSelectInputComponent, _super);
+    function MultipleSelectInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+        return _this;
+    }
+    MultipleSelectInputComponent.prototype.ngOnInit = function () {
+    };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], MultipleSelectInputComponent.prototype, "listModel", void 0);
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+    __decorate([
+        Input(), StoreInListModel('optionsModel'),
+        __metadata("design:type", Array)
+    ], MultipleSelectInputComponent.prototype, "options", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
+    __decorate([
+        ContentChild('optionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+    __decorate([
+        ContentChild('nilOptionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+    MultipleSelectInputComponent = __decorate([
+        Component({
+            selector: 'aup-multiple-select-input',
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], MultipleSelectInputComponent);
+    return MultipleSelectInputComponent;
+}(AbstractListInputComponent));
+
 var ComponentsModule = /** @class */ (function () {
     function ComponentsModule() {
     }
@@ -3169,6 +3480,8 @@ var ComponentsModule = /** @class */ (function () {
         NgModule({
             declarations: [
                 AbstractInputComponent,
+                AbstractValueInputComponent,
+                AbstractListInputComponent,
                 AbstractInputActivity,
                 NumberInputComponent,
                 StringInputComponent,
@@ -3194,7 +3507,8 @@ var ComponentsModule = /** @class */ (function () {
                 SelectCellRendererComponent,
                 SelectHeaderCellRendererComponent,
                 DefaultHeaderCellRendererComponent,
-                TableHeaderCellRendererComponent
+                TableHeaderCellRendererComponent,
+                MultipleSelectInputComponent
             ],
             imports: [
                 CommonModule,
@@ -3230,7 +3544,8 @@ var ComponentsModule = /** @class */ (function () {
                 CardContainerComponent,
                 TableComponent,
                 EditRowControls,
-                ColumnTemplateDirective
+                ColumnTemplateDirective,
+                MultipleSelectInputComponent
             ],
             providers: [
                 FocusBindingFactory,
@@ -6128,5 +6443,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, AddItemInteractionContextComponent as ɵby, ActivityActionsComponent as ɵbz, FocusBindingDirective as ɵc, PopupInteractionContextComponent as ɵca, InteractionContextTriggerFor as ɵcb, PlaceModule as ɵcc, EmptyStateComponent as ɵcd, BusyOverlayComponent as ɵce, PlaceOutletComponent as ɵcf, leftRightPlaceAnimation as ɵcg, LEFT_RIGHT_PLACE_ANIMATION as ɵch, AUP_PLACE_CONFIG as ɵci, PlaceRouter as ɵck, UrlService as ɵcl, PlaceHistory as ɵcm, TabbedPlaceNavigationComponent as ɵcn, AbstractPlaceNavigationComponent as ɵco, ListPlaceNavComponent as ɵcp, SidePlaceNavigationComponent as ɵcq, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractInputActivity as ɵh, Activity as ɵi, ACTIVITY_DATA as ɵj, NumberInputComponent as ɵk, StringInputComponent as ɵl, StringInputActivity as ɵm, TextInputComponent as ɵn, PasswordInputComponent as ɵo, SelectInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, VerticalFocusContainerComponent as ɵba, FocusableComponent as ɵbb, CardContainerComponent as ɵbc, TableComponent as ɵbd, EditRowControls as ɵbe, ColumnTemplateDirective as ɵbf, DefaultCellRendererComponent as ɵbg, TableCellRendererComponent as ɵbh, SelectCellRendererComponent as ɵbi, SelectHeaderCellRendererComponent as ɵbj, DefaultHeaderCellRendererComponent as ɵbk, TableHeaderCellRendererComponent as ɵbl, MultipleSelectInputComponent as ɵbm, InteractionModule as ɵbn, ActivityContainerComponent as ɵbo, AbstractInteractionContext as ɵbp, ActivityOutletComponent as ɵbq, ConfirmationDialogComponent as ɵbr, ACTIVITY_DATA as ɵbs, Activity as ɵbt, ConfirmThenDialogComponent as ɵbv, AlertDialogComponent as ɵbw, InPlaceInteractionContextComponent as ɵby, InteractionService as ɵbz, FocusBindingDirective as ɵc, ModalInteractionContextFactory as ɵca, AddItemInteractionContextComponent as ɵcb, ActivityActionsComponent as ɵcc, PopupInteractionContextComponent as ɵcd, InteractionContextTriggerFor as ɵce, PlaceModule as ɵcf, EmptyStateComponent as ɵcg, BusyOverlayComponent as ɵch, PlaceOutletComponent as ɵci, leftRightPlaceAnimation as ɵcj, LEFT_RIGHT_PLACE_ANIMATION as ɵck, AUP_PLACE_CONFIG as ɵcl, PlaceRouter as ɵcn, UrlService as ɵco, PlaceHistory as ɵcp, TabbedPlaceNavigationComponent as ɵcq, AbstractPlaceNavigationComponent as ɵcr, ListPlaceNavComponent as ɵcs, SidePlaceNavigationComponent as ɵct, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, AbstractInputActivity as ɵj, Activity as ɵk, ACTIVITY_DATA as ɵl, NumberInputComponent as ɵm, StringInputComponent as ɵn, StringInputActivity as ɵo, TextInputComponent as ɵp, PasswordInputComponent as ɵq, SelectInputComponent as ɵr, CheckboxInputComponent as ɵs, ScrollContainerComponent as ɵt, NoopComponent as ɵu, SwitchCaseOption as ɵv, SwitchCaseWhenDirective as ɵw, SwitchCaseDefaultDirective as ɵx, SwitchCaseComponent as ɵy, FocusContainerComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map