@coolon/angular-ui-powerups 1.12.0 → 1.13.0

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1148,7 +1148,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbw = /** @class */ (function () {
+    exports.ɵbz = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -1293,7 +1293,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbw || (exports.ɵbw = {}));
+    })(exports.ɵbz || (exports.ɵbz = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -1351,7 +1351,7 @@
             return this.activityContainerComponent.startActivity(activityType, data);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbw },
+            { type: exports.ɵbz },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -1369,7 +1369,7 @@
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵbw, Object])
+            __metadata("design:paramtypes", [exports.ɵbz, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -1662,7 +1662,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbw
+                    exports.ɵbz
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -1710,7 +1710,7 @@
             core.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);
@@ -1966,18 +1966,6 @@
         __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 pectin.DelegatingFormValueModel());
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
             _this.focus = new core.EventEmitter();
@@ -1996,6 +1984,13 @@
             };
             return _this;
         }
+        Object.defineProperty(AbstractInputComponent.prototype, "inputModel", {
+            get: function () {
+                return typescriptUtilities.lang.abstractMethod(this.constructor, "inputModel");
+            },
+            enumerable: true,
+            configurable: true
+        });
         AbstractInputComponent.prototype.notifyClick = function () {
             this.safelyInvoke(this.clickCommand);
         };
@@ -2027,7 +2022,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
             get: function () {
-                return this.delegatingFormValueModel.enabled;
+                return this.inputModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -2037,7 +2032,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: function () {
-                return this.delegatingFormValueModel.errorList;
+                return this.inputModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -2049,6 +2044,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
+            get: function () {
+                return this.inputModel.focusContext;
+            },
+            enumerable: true,
+            configurable: true
+        });
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -2130,6 +2132,54 @@
         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 pectin.DelegatingFormListModel());
+            return _this;
+        }
+        AbstractListInputComponent = __decorate([
+            core.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 pectin.DelegatingFormValueModel());
+            return _this;
+        }
+        AbstractValueInputComponent = __decorate([
+            core.Component({ template: '' })
+        ], AbstractValueInputComponent);
+        return AbstractValueInputComponent;
+    }(AbstractInputComponent));
+
     var CheckboxInputComponent = /** @class */ (function (_super) {
         __extends(CheckboxInputComponent, _super);
         function CheckboxInputComponent() {
@@ -2141,7 +2191,7 @@
         CheckboxInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], CheckboxInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -2161,7 +2211,7 @@
             __metadata("design:paramtypes", [])
         ], CheckboxInputComponent);
         return CheckboxInputComponent;
-    }(AbstractInputComponent));
+    }(AbstractValueInputComponent));
 
     var NumberInputComponent = /** @class */ (function (_super) {
         __extends(NumberInputComponent, _super);
@@ -2174,7 +2224,7 @@
         NumberInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], NumberInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -2188,13 +2238,13 @@
         NumberInputComponent = __decorate([
             core.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);
@@ -2204,19 +2254,19 @@
         PasswordInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "inputModel" }),
             __metadata("design:type", Object)
         ], PasswordInputComponent.prototype, "valueModel", void 0);
         PasswordInputComponent = __decorate([
             core.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);
@@ -2228,7 +2278,7 @@
         SelectInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "inputModel" }),
             __metadata("design:type", Object)
         ], SelectInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -2262,13 +2312,13 @@
         SelectInputComponent = __decorate([
             core.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);
@@ -2298,7 +2348,7 @@
         StringInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], StringInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -2312,13 +2362,13 @@
         StringInputComponent = __decorate([
             core.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);
@@ -2331,7 +2381,7 @@
         TextInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], TextInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -2345,13 +2395,13 @@
         TextInputComponent = __decorate([
             core.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() {
@@ -2568,17 +2618,20 @@
 
     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 pectin.MutableValueModel();
-            _this.rowValueModel = _this._editorValue.readonly;
-            _this.form = new pectin.Form();
+            _this._liveRowValue = new pectin.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);
                 });
             });
@@ -2647,28 +2700,13 @@
             });
             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([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], SelectCellRendererComponent.prototype, "row", null);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+        ], SelectCellRendererComponent.prototype, "row", void 0);
         SelectCellRendererComponent = __decorate([
             core.Component({
                 selector: 'aup-select-cell-renderer',
@@ -2690,15 +2728,13 @@
             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([
-            core.Input(),
-            __metadata("design:type", pectin.MultipleSelectionModel)
-        ], SelectHeaderCellRendererComponent.prototype, "selectionModel", void 0);
         SelectHeaderCellRendererComponent = __decorate([
             core.Component({
                 selector: 'aup-select-header-cell-renderer',
@@ -2710,197 +2746,6 @@
         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 portal.ComponentPortal(cellRenderer),
-                pushState: initialiser
-            };
-        };
-        ColumnModel.prototype.cellHeaderRenderer = function (cellRenderer, initialiser) {
-            this._columnHeaderConfig = {
-                portal: new portal.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([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", String)
-        ], ColumnModel.prototype, "getHeaderText", null);
-        __decorate([
-            src.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 portal.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) {
-            typescriptUtilities.assert.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 pectin.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];
     /**
@@ -2979,6 +2824,7 @@
             this._garbage = new pectin.GarbageCollector();
             this._columns = new pectin.MutableListModel();
             this._editorSessions = new pectin.MutableListModel();
+            this._createForm = function (row) { return new pectin.Form(); };
             this.identityOf = sourceOfTruth.identityOf;
             var _a = pectin.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');
@@ -3018,6 +2864,9 @@
         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));
         };
@@ -3028,6 +2877,13 @@
         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)) {
                 pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
@@ -3051,14 +2907,14 @@
                 return pectin.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 = pectin.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;
@@ -3086,46 +2942,481 @@
         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 = pectin.Command.create(function () {
+                _this.tableModel.startEditSession(_this.row);
+            });
         }
-        TableComponent.prototype.ngOnInit = function () {
-            var _a = pectin.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([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "row", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", ColumnModel)
+        ], TableCellRendererComponent.prototype, "column", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", EditSession)
+        ], TableCellRendererComponent.prototype, "editSession", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", TableModel)
+        ], TableCellRendererComponent.prototype, "tableModel", void 0);
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+        __decorate([
+            core.HostBinding('class.fillCell'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "fillCell", void 0);
+        __decorate([
+            core.HostBinding('class.padChild'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "padChild", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", void 0)
+        ], TableCellRendererComponent.prototype, "initialiseEditor", null);
+        TableCellRendererComponent = __decorate([
+            core.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) {
+            typescriptUtilities.assert.isTruthy(host);
+            host[HEADER_CELL_RENDERER_PORTAL] = new portal.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 portal.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) {
+            typescriptUtilities.assert.isTruthy(host);
+            host[CELL_EDITOR_PORTAL] = new portal.ComponentPortal(this.componentType);
+        };
+        CellEditorPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+            host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+            this.initialiseEditorSession(portalComponent, host.editSession);
+        };
+        __decorate([
+            pectin.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) {
+            typescriptUtilities.assert.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 portal.TemplatePortal(this.templateRef, this.viewContainer, __assign(__assign({}, (data)), { $implicit: data.row }));
+        };
+        __decorate([
+            pectin.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([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", String)
+        ], ColumnModel.prototype, "getHeaderText", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Object)
+        ], ColumnModel.prototype, "getColumnTextProperties", null);
+        __decorate([
+            pectin.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__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) {
+            typescriptUtilities.assert.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__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) {
+            typescriptUtilities.assert.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 pectin.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 = pectin.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([
             core.Input(),
             pectin.TrackExternal(),
@@ -3144,94 +3435,62 @@
 
     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;
+            pectin.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: core.TemplateRef },
             { type: core.ViewContainerRef }
         ]; };
-        ColumnTemplateDirective = __decorate([
-            core.Directive({
-                selector: '[aupColumnTemplate]'
-            }),
-            __metadata("design:paramtypes", [TableComponent,
-                core.TemplateRef,
-                core.ViewContainerRef])
-        ], ColumnTemplateDirective);
-        return ColumnTemplateDirective;
-    }());
-
-    var TableCellRendererComponent = /** @class */ (function () {
-        function TableCellRendererComponent() {
-            var _this = this;
-            this.defaultClassNames = "aup-header-cell-renderer";
-            this.editRowCommand = pectin.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([
             core.Input(),
-            __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "row", void 0);
+            __metadata("design:type", String)
+        ], ColumnTemplateDirective.prototype, "aupColumnTemplate", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", ColumnModel)
-        ], TableCellRendererComponent.prototype, "column", void 0);
+            __metadata("design:type", String)
+        ], ColumnTemplateDirective.prototype, "aupColumnTemplateColumnId", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", EditSession)
-        ], TableCellRendererComponent.prototype, "editSession", void 0);
+            __metadata("design:type", Object)
+        ], ColumnTemplateDirective.prototype, "aupColumnTemplateFillCell", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", TableModel)
-        ], TableCellRendererComponent.prototype, "tableModel", void 0);
-        __decorate([
-            core.HostBinding('class'),
             __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
-        TableCellRendererComponent = __decorate([
-            core.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([
+            core.Directive({
+                selector: '[aupColumnTemplate]'
             }),
-            __metadata("design:paramtypes", [])
-        ], TableCellRendererComponent);
-        return TableCellRendererComponent;
+            __metadata("design:paramtypes", [TableComponent,
+                core.TemplateRef,
+                core.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([
             core.Input(),
@@ -3244,8 +3503,8 @@
         TableHeaderCellRendererComponent = __decorate([
             core.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);
@@ -3337,6 +3596,58 @@
         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([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
+            __metadata("design:type", Object)
+        ], MultipleSelectInputComponent.prototype, "listModel", void 0);
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], MultipleSelectInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
+        __decorate([
+            core.ContentChild('optionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+        __decorate([
+            core.ContentChild('nilOptionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+        MultipleSelectInputComponent = __decorate([
+            core.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() {
         }
@@ -3344,6 +3655,8 @@
             core.NgModule({
                 declarations: [
                     AbstractInputComponent,
+                    AbstractValueInputComponent,
+                    AbstractListInputComponent,
                     AbstractInputActivity,
                     NumberInputComponent,
                     StringInputComponent,
@@ -3369,7 +3682,8 @@
                     SelectCellRendererComponent,
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
-                    TableHeaderCellRendererComponent
+                    TableHeaderCellRendererComponent,
+                    MultipleSelectInputComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -3405,7 +3719,8 @@
                     CardContainerComponent,
                     TableComponent,
                     EditRowControls,
-                    ColumnTemplateDirective
+                    ColumnTemplateDirective,
+                    MultipleSelectInputComponent
                 ],
                 providers: [
                     FocusBindingFactory,
@@ -4527,7 +4842,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵcm = /** @class */ (function () {
+    exports.ɵcp = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -4664,7 +4979,7 @@
         //   }
         //
         // }
-    })(exports.ɵcm || (exports.ɵcm = {}));
+    })(exports.ɵcp || (exports.ɵcp = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -5187,11 +5502,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbw },
+            { type: exports.ɵbz },
             { type: UrlService },
-            { type: exports.ɵcm }
+            { type: exports.ɵcp }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbw), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵcm)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbz), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵcp)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -5204,9 +5519,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbw,
+                exports.ɵbz,
                 UrlService,
-                exports.ɵcm])
+                exports.ɵcp])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -6300,8 +6615,10 @@
     exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
+    exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
+    exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
@@ -6311,11 +6628,18 @@
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
+    exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
+    exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
     exports.CardContainerComponent = CardContainerComponent;
+    exports.CellEditorPortalRef = CellEditorPortalRef;
+    exports.CellHeaderPortalRef = CellHeaderPortalRef;
+    exports.CellPortalRef = CellPortalRef;
+    exports.CellRendererPortalRef = CellRendererPortalRef;
     exports.CheckboxInputComponent = CheckboxInputComponent;
     exports.ColumnModel = ColumnModel;
     exports.ColumnTemplateDirective = ColumnTemplateDirective;
     exports.CommandDirective = CommandDirective;
+    exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
@@ -6341,26 +6665,31 @@
     exports.FocusBindingFactory = FocusBindingFactory;
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
+    exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbw;
+    exports.InteractionService = exports.ɵbz;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
+    exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
+    exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
     exports.Navigating = Navigating;
     exports.NavigatingDuringInteraction = NavigatingDuringInteraction;
     exports.NavigationSession = NavigationSession;
     exports.NoopAuthGuard = NoopAuthGuard;
     exports.NoopComponent = NoopComponent;
     exports.NumberInputComponent = NumberInputComponent;
+    exports.PORTAL_EDITOR_COMPONENT = PORTAL_EDITOR_COMPONENT;
+    exports.PORTAL_RENDERER_COMPONENT = PORTAL_RENDERER_COMPONENT;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵcm;
+    exports.PlaceHistory = exports.ɵcp;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -6391,6 +6720,7 @@
     exports.TableComponent = TableComponent;
     exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
     exports.TableModel = TableModel;
+    exports.TemplateCellRendererPortalRef = TemplateCellRendererPortalRef;
     exports.TextInputComponent = TextInputComponent;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
@@ -6404,70 +6734,74 @@
     exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
     exports.slideDownOnEnterAnimation = slideDownOnEnterAnimation;
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
+    exports.ɵ0 = ɵ0;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = CardContainerComponent;
-    exports.ɵbb = TableComponent;
-    exports.ɵbc = EditRowControls;
-    exports.ɵbd = ColumnTemplateDirective;
-    exports.ɵbe = DefaultCellRendererComponent;
-    exports.ɵbf = TableCellRendererComponent;
-    exports.ɵbg = SelectCellRendererComponent;
-    exports.ɵbh = SelectHeaderCellRendererComponent;
-    exports.ɵbi = DefaultHeaderCellRendererComponent;
-    exports.ɵbj = TableHeaderCellRendererComponent;
-    exports.ɵbk = InteractionModule;
-    exports.ɵbl = ActivityContainerComponent;
-    exports.ɵbm = AbstractInteractionContext;
-    exports.ɵbn = ActivityOutletComponent;
-    exports.ɵbo = ConfirmationDialogComponent;
-    exports.ɵbp = ACTIVITY_DATA;
-    exports.ɵbq = Activity;
-    exports.ɵbs = ConfirmThenDialogComponent;
-    exports.ɵbt = AlertDialogComponent;
-    exports.ɵbv = InPlaceInteractionContextComponent;
-    exports.ɵbx = ModalInteractionContextFactory;
-    exports.ɵby = AddItemInteractionContextComponent;
-    exports.ɵbz = ActivityActionsComponent;
+    exports.ɵba = VerticalFocusContainerComponent;
+    exports.ɵbb = FocusableComponent;
+    exports.ɵbc = CardContainerComponent;
+    exports.ɵbd = TableComponent;
+    exports.ɵbe = EditRowControls;
+    exports.ɵbf = ColumnTemplateDirective;
+    exports.ɵbg = DefaultCellRendererComponent;
+    exports.ɵbh = TableCellRendererComponent;
+    exports.ɵbi = SelectCellRendererComponent;
+    exports.ɵbj = SelectHeaderCellRendererComponent;
+    exports.ɵbk = DefaultHeaderCellRendererComponent;
+    exports.ɵbl = TableHeaderCellRendererComponent;
+    exports.ɵbm = MultipleSelectInputComponent;
+    exports.ɵbn = InteractionModule;
+    exports.ɵbo = ActivityContainerComponent;
+    exports.ɵbp = AbstractInteractionContext;
+    exports.ɵbq = ActivityOutletComponent;
+    exports.ɵbr = ConfirmationDialogComponent;
+    exports.ɵbs = ACTIVITY_DATA;
+    exports.ɵbt = Activity;
+    exports.ɵbv = ConfirmThenDialogComponent;
+    exports.ɵbw = AlertDialogComponent;
+    exports.ɵby = InPlaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = PopupInteractionContextComponent;
-    exports.ɵcb = InteractionContextTriggerFor;
-    exports.ɵcc = PlaceModule;
-    exports.ɵcd = EmptyStateComponent;
-    exports.ɵce = BusyOverlayComponent;
-    exports.ɵcf = PlaceOutletComponent;
-    exports.ɵcg = leftRightPlaceAnimation;
-    exports.ɵch = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵci = AUP_PLACE_CONFIG;
-    exports.ɵck = PlaceRouter;
-    exports.ɵcl = UrlService;
-    exports.ɵcn = TabbedPlaceNavigationComponent;
-    exports.ɵco = AbstractPlaceNavigationComponent;
-    exports.ɵcp = ListPlaceNavComponent;
-    exports.ɵcq = SidePlaceNavigationComponent;
+    exports.ɵca = ModalInteractionContextFactory;
+    exports.ɵcb = AddItemInteractionContextComponent;
+    exports.ɵcc = ActivityActionsComponent;
+    exports.ɵcd = PopupInteractionContextComponent;
+    exports.ɵce = InteractionContextTriggerFor;
+    exports.ɵcf = PlaceModule;
+    exports.ɵcg = EmptyStateComponent;
+    exports.ɵch = BusyOverlayComponent;
+    exports.ɵci = PlaceOutletComponent;
+    exports.ɵcj = leftRightPlaceAnimation;
+    exports.ɵck = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵcl = AUP_PLACE_CONFIG;
+    exports.ɵcn = PlaceRouter;
+    exports.ɵco = UrlService;
+    exports.ɵcq = TabbedPlaceNavigationComponent;
+    exports.ɵcr = AbstractPlaceNavigationComponent;
+    exports.ɵcs = ListPlaceNavComponent;
+    exports.ɵct = SidePlaceNavigationComponent;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
     exports.ɵg = AbstractInputComponent;
-    exports.ɵh = AbstractInputActivity;
-    exports.ɵi = Activity;
-    exports.ɵj = ACTIVITY_DATA;
-    exports.ɵk = NumberInputComponent;
-    exports.ɵl = StringInputComponent;
-    exports.ɵm = StringInputActivity;
-    exports.ɵn = TextInputComponent;
-    exports.ɵo = PasswordInputComponent;
-    exports.ɵp = SelectInputComponent;
-    exports.ɵq = CheckboxInputComponent;
-    exports.ɵr = ScrollContainerComponent;
-    exports.ɵs = NoopComponent;
-    exports.ɵt = SwitchCaseOption;
-    exports.ɵu = SwitchCaseWhenDirective;
-    exports.ɵv = SwitchCaseDefaultDirective;
-    exports.ɵw = SwitchCaseComponent;
-    exports.ɵx = FocusContainerComponent;
-    exports.ɵy = VerticalFocusContainerComponent;
-    exports.ɵz = FocusableComponent;
+    exports.ɵh = AbstractValueInputComponent;
+    exports.ɵi = AbstractListInputComponent;
+    exports.ɵj = AbstractInputActivity;
+    exports.ɵk = Activity;
+    exports.ɵl = ACTIVITY_DATA;
+    exports.ɵm = NumberInputComponent;
+    exports.ɵn = StringInputComponent;
+    exports.ɵo = StringInputActivity;
+    exports.ɵp = TextInputComponent;
+    exports.ɵq = PasswordInputComponent;
+    exports.ɵr = SelectInputComponent;
+    exports.ɵs = CheckboxInputComponent;
+    exports.ɵt = ScrollContainerComponent;
+    exports.ɵu = NoopComponent;
+    exports.ɵv = SwitchCaseOption;
+    exports.ɵw = SwitchCaseWhenDirective;
+    exports.ɵx = SwitchCaseDefaultDirective;
+    exports.ɵy = SwitchCaseComponent;
+    exports.ɵz = FocusContainerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });