@coolon/angular-ui-powerups 1.12.0 → 1.13.0

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

@@ -7,12 +7,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, Deferred, Trace, MutableListModel, FocusManager, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, Deferred, Trace, MutableListModel, FocusManager, Form, DelegatingFormListModel, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -1379,7 +1379,7 @@ CardContainerComponent = __decorate([
     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);
@@ -1608,18 +1608,6 @@ AbstractInputActivity = __decorate([
 let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
-        /**
-         * A backing model for all our @Input() valueModel properties which should be defined as follows.
-         *
-         *    @Input() @TrackExternal({useExisting: "delegatingFormValueModel"})
-         *    valueModel: FormValueModel<string> | MutableValueModel<string>;
-         *
-         * This approach allows the input to accept plain or form models but all backed by a form
-         * friendly delegate.  We have to use an existing delegate for union types as pectin just
-         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
-         */
-        // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        this.delegatingFormValueModel = this.registerDisposable(new DelegatingFormValueModel());
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
         this.focus = new EventEmitter();
@@ -1637,6 +1625,9 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
             }
         };
     }
+    get inputModel() {
+        return lang$1.abstractMethod(this.constructor, "inputModel");
+    }
     notifyClick() {
         this.safelyInvoke(this.clickCommand);
     }
@@ -1667,17 +1658,20 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
         return this.enabled.value;
     }
     get enabled() {
-        return this.delegatingFormValueModel.enabled;
+        return this.inputModel.enabled;
     }
     hasErrors() {
         return !this.errorList.query().isEmpty();
     }
     get errorList() {
-        return this.delegatingFormValueModel.errorList;
+        return this.inputModel.errorList;
     }
     get firstError() {
         return this.hasErrors() ? this.errorList.value[0] : null;
     }
+    get focusContext() {
+        return this.inputModel.focusContext;
+    }
 };
 __decorate([
     Input(),
@@ -1758,7 +1752,49 @@ AbstractInputComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], AbstractInputComponent);
 
-let CheckboxInputComponent = class CheckboxInputComponent extends AbstractInputComponent {
+let AbstractListInputComponent = class AbstractListInputComponent extends AbstractInputComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "inputModel"})
+         *    valueModel: FormListModel<string> | IMutableListModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        this.inputModel = this.registerDisposable(new DelegatingFormListModel());
+    }
+};
+AbstractListInputComponent = __decorate([
+    Component({ template: '' })
+], AbstractListInputComponent);
+
+let AbstractValueInputComponent = class AbstractValueInputComponent extends AbstractInputComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "inputModel"})
+         *    valueModel: FormValueModel<string> | IMutableValueModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        this.inputModel = this.registerDisposable(new DelegatingFormValueModel());
+    }
+};
+AbstractValueInputComponent = __decorate([
+    Component({ template: '' })
+], AbstractValueInputComponent);
+
+let CheckboxInputComponent = class CheckboxInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
         this.color = 'accent';
@@ -1768,7 +1804,7 @@ let CheckboxInputComponent = class CheckboxInputComponent extends AbstractInputC
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
     __metadata("design:type", Object)
 ], CheckboxInputComponent.prototype, "valueModel", void 0);
 __decorate([
@@ -1788,7 +1824,7 @@ CheckboxInputComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], CheckboxInputComponent);
 
-let NumberInputComponent = class NumberInputComponent extends AbstractInputComponent {
+let NumberInputComponent = class NumberInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
         this.min = Number.MIN_SAFE_INTEGER;
@@ -1798,7 +1834,7 @@ let NumberInputComponent = class NumberInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
     __metadata("design:type", Object)
 ], NumberInputComponent.prototype, "valueModel", void 0);
 __decorate([
@@ -1812,13 +1848,13 @@ __decorate([
 NumberInputComponent = __decorate([
     Component({
         selector: 'aup-number-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel?.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
         styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
     }),
     __metadata("design:paramtypes", [])
 ], NumberInputComponent);
 
-let PasswordInputComponent = class PasswordInputComponent extends AbstractInputComponent {
+let PasswordInputComponent = class PasswordInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
     }
@@ -1826,19 +1862,19 @@ let PasswordInputComponent = class PasswordInputComponent extends AbstractInputC
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "inputModel" }),
     __metadata("design:type", Object)
 ], PasswordInputComponent.prototype, "valueModel", void 0);
 PasswordInputComponent = __decorate([
     Component({
         selector: 'aup-password-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
         styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
     }),
     __metadata("design:paramtypes", [])
 ], PasswordInputComponent);
 
-let SelectInputComponent = class SelectInputComponent extends AbstractInputComponent {
+let SelectInputComponent = class SelectInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
         this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
@@ -1847,7 +1883,7 @@ let SelectInputComponent = class SelectInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "inputModel" }),
     __metadata("design:type", Object)
 ], SelectInputComponent.prototype, "valueModel", void 0);
 __decorate([
@@ -1881,7 +1917,7 @@ __decorate([
 SelectInputComponent = __decorate([
     Component({
         selector: 'aup-select-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
         styles: [":host{display:inline-block}mat-form-field{width:100%}"]
     }),
     __metadata("design:paramtypes", [])
@@ -1905,7 +1941,7 @@ StringInputActivity = __decorate([
     })
 ], StringInputActivity);
 
-let StringInputComponent = class StringInputComponent extends AbstractInputComponent {
+let StringInputComponent = class StringInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
@@ -1918,7 +1954,7 @@ let StringInputComponent = class StringInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
     __metadata("design:type", Object)
 ], StringInputComponent.prototype, "valueModel", void 0);
 __decorate([
@@ -1932,13 +1968,13 @@ __decorate([
 StringInputComponent = __decorate([
     Component({
         selector: 'aup-string-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n",
         styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}"]
     }),
     __metadata("design:paramtypes", [])
 ], StringInputComponent);
 
-let TextInputComponent = class TextInputComponent extends AbstractInputComponent {
+let TextInputComponent = class TextInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
         this.rows = 2;
@@ -1948,7 +1984,7 @@ let TextInputComponent = class TextInputComponent extends AbstractInputComponent
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
     __metadata("design:type", Object)
 ], TextInputComponent.prototype, "valueModel", void 0);
 __decorate([
@@ -1962,7 +1998,7 @@ __decorate([
 TextInputComponent = __decorate([
     Component({
         selector: 'aup-text-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
         styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
     }),
     __metadata("design:paramtypes", [])
@@ -2154,17 +2190,20 @@ DefaultHeaderCellRendererComponent = __decorate([
 ], DefaultHeaderCellRendererComponent);
 
 class EditSession extends GarbageCollector {
-    constructor(rowId, row, saveCommand) {
+    constructor(rowId, row, form, saveCommand) {
         super();
         this.rowId = rowId;
+        this.form = form;
         this.saveCommand = saveCommand;
-        this._editorValue = new MutableValueModel();
-        this.rowValueModel = this._editorValue.readonly;
-        this.form = new Form();
+        this._liveRowValue = new MutableValueModel();
+        this.liveRowValue = this._liveRowValue.readonly;
         this.form.load(row);
-        this._editorValue.value = row;
+        this._liveRowValue.value = row;
         this.form.onEdit(() => {
-            this._editorValue.value = produce(this._editorValue.value, draft => {
+            // if (!this._liveRowValue.value[immerable]) {
+            //   console.warn()
+            // }
+            this._liveRowValue.value = produce(this._liveRowValue.value, draft => {
                 this.form.writeDirtyStateTo(draft);
             });
         });
@@ -2222,25 +2261,14 @@ let SelectCellRendererComponent = class SelectCellRendererComponent extends Disp
             this.selectionModel.selectCommand.execute(this.row);
         });
     }
-    set row(value) {
-        this._row = value;
-    }
-    get row() {
-        return this._row;
-    }
     isSelected() {
         return this.selectionModel.isSelected(this.row);
     }
 };
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], SelectCellRendererComponent.prototype, "row", null);
 __decorate([
     Input(),
     __metadata("design:type", Object)
-], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+], SelectCellRendererComponent.prototype, "row", void 0);
 SelectCellRendererComponent = __decorate([
     Component({
         selector: 'aup-select-cell-renderer',
@@ -2258,16 +2286,14 @@ let SelectHeaderCellRendererComponent = class SelectHeaderCellRendererComponent
         });
     }
     isSelected() {
-        return this.selectionModel.allSelected.value;
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.allSelected.value) || false;
     }
     isIntermediate() {
-        return this.selectionModel.someSelected.value;
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.someSelected.value) || false;
     }
 };
-__decorate([
-    Input(),
-    __metadata("design:type", MultipleSelectionModel)
-], SelectHeaderCellRendererComponent.prototype, "selectionModel", void 0);
 SelectHeaderCellRendererComponent = __decorate([
     Component({
         selector: 'aup-select-header-cell-renderer',
@@ -2277,167 +2303,6 @@ SelectHeaderCellRendererComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], SelectHeaderCellRendererComponent);
 
-class ColumnModel {
-    constructor(columnId, defaults) {
-        this.columnId = columnId;
-        this.defaults = defaults;
-        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
-            component.headerText = column.getHeaderText();
-        });
-    }
-    getHeaderText() {
-        var _a;
-        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
-    }
-    getDefaultHeaderText() {
-        return this.columnId;
-    }
-    getColumnTextProperties() {
-        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
-    }
-    textProperties(columnTextProperties) {
-        this._columnTextProperties = columnTextProperties;
-        return this;
-    }
-    setCellRenderer(cellRenderer, initialiser) {
-        this._cellRendererConfig = {
-            portal: new ComponentPortal(cellRenderer),
-            pushState: initialiser
-        };
-    }
-    cellHeaderRenderer(cellRenderer, initialiser) {
-        this._columnHeaderConfig = {
-            portal: new ComponentPortal(cellRenderer),
-            initialiseComponent: initialiser
-        };
-        return this;
-    }
-    setCellEditor(cellEditor) {
-        this._cellEditorConfig = cellEditor;
-    }
-    get cellRendererPortal() {
-        return this._cellRendererConfig.portal;
-    }
-    get columnHeaderCellRendererPortal() {
-        return this._columnHeaderConfig.portal;
-    }
-    get cellEditorPortal() {
-        var _a;
-        return (_a = this._cellEditorConfig) === null || _a === void 0 ? void 0 : _a.portal;
-    }
-    hasEditor() {
-        return !!this._cellEditorConfig;
-    }
-    updateCellRenderer(component, row, editRowCommand, editSession) {
-        this._cellRendererConfig.pushState(component, row, editRowCommand, editSession);
-    }
-    initialiseHeader(component) {
-        this._columnHeaderConfig.initialiseComponent(component, this);
-    }
-    initialiseEditor(component, editSession) {
-        this._cellEditorConfig.initialiseComponent(component, editSession);
-    }
-}
-__decorate([
-    Memoize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", String)
-], ColumnModel.prototype, "getHeaderText", null);
-__decorate([
-    Memoize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Object)
-], ColumnModel.prototype, "getColumnTextProperties", null);
-class PropertyColumnModel extends ColumnModel {
-    constructor(property, defaults) {
-        super(property.toString(), defaults);
-        this.property = property;
-        this._format = (value) => value;
-        this.cellRenderer(DefaultCellRendererComponent);
-    }
-    cellRenderer(componentType) {
-        this.setCellRenderer(componentType, (component, row) => {
-            component.value = this._format(row[this.property]);
-        });
-        return this;
-    }
-    cellEditor(editor, options) {
-        this.setCellEditor({
-            portal: new ComponentPortal(editor),
-            initialiseComponent: (component, editSession) => {
-                const 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;
-    }
-    format(formatter) {
-        assert$1.isFunction(formatter);
-        this._format = formatter;
-        return this;
-    }
-}
-class CustomValueColumnModel extends ColumnModel {
-    constructor(columnId, defaults, getValue) {
-        super(columnId, defaults);
-        this.getValue = getValue;
-        this.cellRenderer(DefaultCellRendererComponent);
-    }
-    cellRenderer(componentType) {
-        this.setCellRenderer(componentType, (component, row) => {
-            component.value = this.getValue(row);
-        });
-        return this;
-    }
-}
-class EditorControlColumnModel extends ColumnModel {
-    constructor(columnId, saveCommand, defaults) {
-        super(columnId, defaults);
-        this.cellRenderer(EditRowControls);
-    }
-    cellRenderer(componentType) {
-        this.setCellRenderer(componentType, (component, row, editRowCommand, editSession) => {
-            component.row = row;
-            component.editSession = editSession;
-            component.editRowCommand = editRowCommand;
-        });
-        return this;
-    }
-    getDefaultHeaderText() {
-        return '';
-    }
-}
-class CustomTemplateColumnModel extends ColumnModel {
-    constructor(columnId, defaults, component) {
-        super(columnId, defaults);
-    }
-}
-class SelectionColumnModel extends ColumnModel {
-    constructor(columnId, defaults, selectionModel) {
-        super(columnId, defaults);
-        if (selectionModel instanceof MultipleSelectionModel) {
-            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
-                component.selectionModel = selectionModel;
-            });
-        }
-        this.setCellRenderer(SelectCellRendererComponent, (component, row, editRowCommand, editSession) => {
-            component.row = row;
-            component.selectionModel = selectionModel;
-        });
-    }
-    getDefaultHeaderText() {
-        return '';
-    }
-}
-
 var TableModel_1;
 // 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];
@@ -2517,6 +2382,7 @@ let TableModel = TableModel_1 = class TableModel {
         this._garbage = new GarbageCollector();
         this._columns = new MutableListModel();
         this._editorSessions = new MutableListModel();
+        this._createForm = (row) => new Form();
         this.identityOf = sourceOfTruth.identityOf;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
         this._columnsById = chain(this._columns).indexBy('columnId');
@@ -2546,6 +2412,9 @@ let TableModel = TableModel_1 = class TableModel {
     pluck(property) {
         return this.addColumn(new PropertyColumnModel(property, this));
     }
+    pluckList(property) {
+        return this.addColumn(new ListPropertyColumnModel(property, this));
+    }
     addSelectionColumn(selectionModel) {
         return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
     }
@@ -2556,6 +2425,13 @@ let TableModel = TableModel_1 = class TableModel {
     addCustomColumn(columnId, dataAccessor) {
         return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     }
+    addTemplateColumn(columnId) {
+        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    }
+    useFormFactory(factory) {
+        this._createForm = factory;
+        return this;
+    }
     addColumn(column) {
         if (this._columnsById.get(column.columnId)) {
             lang.illegalState(`Column with id=${column.columnId} already exists`);
@@ -2578,14 +2454,14 @@ let TableModel = TableModel_1 = class TableModel {
             return lang.illegalState(`Row with id=${rowId} already being edited`);
         }
         else {
-            const editSession = new EditSession(rowId, row, this.saveCommand);
+            const editSession = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
             const { when } = Dsl.disposeWith(editSession);
-            when.valueOf(editSession.rowValueModel).changes((editedValue) => {
+            when.valueOf(editSession.liveRowValue).changes((editedValue) => {
                 this._rowsBeingEdited.replaceOrPush(editedValue);
             }, { initialValue: 'triggerChangeUnlessNil' });
             this._editorSessions.push(editSession);
             editSession.onDispose(() => {
-                this._rowsBeingEdited.remove(editSession.rowValueModel.value);
+                this._rowsBeingEdited.remove(editSession.liveRowValue.value);
                 this._editorSessions.remove(editSession);
             });
             return editSession;
@@ -2610,6 +2486,391 @@ TableModel = TableModel_1 = __decorate([
     __metadata("design:paramtypes", [ListModel])
 ], TableModel);
 
+let TableCellRendererComponent = class TableCellRendererComponent {
+    constructor() {
+        this.defaultClassNames = 'aup-cell-renderer';
+        this.fillCell = false;
+        this.padChild = false;
+        this.editRowCommand = Command.create(() => {
+            this.tableModel.startEditSession(this.row);
+        });
+    }
+    ngOnInit() {
+        this.column.attachCell(this);
+    }
+    hasActiveEditor() {
+        return !!this.editSession && !!this.column.hasEditorPortal();
+    }
+    initialiseRenderer(instance) {
+        this.column.onRendererAttached(this, instance);
+    }
+    initialiseEditor(instance) {
+        this.column.onEditorAttached(this, instance);
+    }
+    // @Trace()
+    ngOnChanges(changes) {
+        this.column.updatePortalContent(this);
+    }
+    getRendererPortal() {
+        return this[CELL_RENDERER_PORTAL];
+    }
+    getEditorPortal() {
+        return this[CELL_EDITOR_PORTAL];
+    }
+    getRowData() {
+        return {
+            row: this.row,
+            editSession: this.editSession,
+            editRowCommand: this.editRowCommand
+        };
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "row", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", ColumnModel)
+], TableCellRendererComponent.prototype, "column", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", EditSession)
+], TableCellRendererComponent.prototype, "editSession", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TableModel)
+], TableCellRendererComponent.prototype, "tableModel", void 0);
+__decorate([
+    HostBinding('class'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+__decorate([
+    HostBinding('class.fillCell'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "fillCell", void 0);
+__decorate([
+    HostBinding('class.padChild'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "padChild", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], TableCellRendererComponent.prototype, "initialiseEditor", null);
+TableCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-table-cell-renderer',
+        template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], TableCellRendererComponent);
+
+const HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
+const CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
+const CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
+const PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
+const PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
+const noop = () => {
+};
+const ɵ0 = noop;
+class CellPortalRef {
+    constructor() {
+    }
+}
+class CellHeaderPortalRef extends CellPortalRef {
+    constructor(componentType, initialiseHeader) {
+        super();
+        this.componentType = componentType;
+        this.initialiseHeader = initialiseHeader;
+    }
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
+        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
+    }
+    onPortalAttached(host, portalComponent) {
+        this.initialiseHeader(portalComponent, host.column);
+    }
+}
+class CellRendererPortalRef extends CellPortalRef {
+}
+class ComponentCellRendererPortalRef extends CellRendererPortalRef {
+    constructor(componentType, updateComponent) {
+        super();
+        this.componentType = componentType;
+        this.updateComponent = updateComponent;
+    }
+    initialiseHost(host, columnModel) {
+        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
+    }
+    onPortalAttached(host, portalComponent) {
+        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
+        this.updateComponent(portalComponent, host.getRowData());
+    }
+    pushState(host) {
+        if (host[PORTAL_RENDERER_COMPONENT]) {
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+        }
+    }
+}
+class CellEditorPortalRef extends CellPortalRef {
+    constructor(componentType, initialiseEditorSession) {
+        super();
+        this.componentType = componentType;
+        this.initialiseEditorSession = initialiseEditorSession;
+    }
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
+        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
+    }
+    onPortalAttached(host, portalComponent) {
+        host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+        this.initialiseEditorSession(portalComponent, host.editSession);
+    }
+}
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
+    __metadata("design:returntype", void 0)
+], CellEditorPortalRef.prototype, "onPortalAttached", null);
+class TemplateCellRendererPortalRef extends CellRendererPortalRef {
+    constructor() {
+        super();
+    }
+    registerPortal(templateRef, viewContainer, fillCell, padChild) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.fillCell = fillCell;
+        this.padChild = padChild;
+    }
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
+    }
+    onPortalAttached(host, portalComponent) {
+        //  don't care
+    }
+    pushState(host) {
+        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
+        host.fillCell = this.fillCell;
+        host.padChild = this.padChild;
+    }
+    createPortal(data) {
+        return new TemplatePortal(this.templateRef, this.viewContainer, Object.assign(Object.assign({}, (data)), { $implicit: data.row }));
+    }
+}
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [TableCellRendererComponent, void 0]),
+    __metadata("design:returntype", void 0)
+], TemplateCellRendererPortalRef.prototype, "onPortalAttached", null);
+class ColumnModel {
+    constructor(columnId, defaults) {
+        this.columnId = columnId;
+        this.defaults = defaults;
+        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
+            component.headerText = column.getHeaderText();
+        });
+    }
+    getHeaderText() {
+        var _a;
+        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
+    }
+    getDefaultHeaderText() {
+        return this.columnId;
+    }
+    getColumnTextProperties() {
+        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+    }
+    textProperties(columnTextProperties) {
+        this._columnTextProperties = columnTextProperties;
+        return this;
+    }
+    configureHeaderRenderer(config) {
+        this._columnHeaderPortalRef = config;
+    }
+    configureCellRenderer(config) {
+        this._cellRendererPortalRef = config;
+    }
+    configureCellEditor(cellEditor) {
+        this._cellEditorPortalRef = cellEditor;
+    }
+    cellHeaderRenderer(componentType, initialiser) {
+        this.configureHeaderRenderer(new CellHeaderPortalRef(componentType, initialiser));
+        return this;
+    }
+    hasEditorPortal() {
+        return !!this._cellEditorPortalRef;
+    }
+    attachHeaderCell(host) {
+        this._columnHeaderPortalRef.initialiseHost(host, this);
+    }
+    attachCell(host) {
+        this._cellRendererPortalRef.initialiseHost(host, this);
+        if (this.hasEditorPortal()) {
+            this._cellEditorPortalRef.initialiseHost(host, this);
+        }
+    }
+    onHeaderAttached(host, component) {
+        this._columnHeaderPortalRef.onPortalAttached(host, component);
+    }
+    onRendererAttached(host, component) {
+        this._cellRendererPortalRef.onPortalAttached(host, component);
+    }
+    onEditorAttached(host, component) {
+        this._cellEditorPortalRef.onPortalAttached(host, component);
+    }
+    updatePortalContent(host) {
+        this._cellRendererPortalRef.pushState(host);
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", String)
+], ColumnModel.prototype, "getHeaderText", null);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Object)
+], ColumnModel.prototype, "getColumnTextProperties", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
+    __metadata("design:returntype", void 0)
+], ColumnModel.prototype, "onEditorAttached", null);
+class PropertyColumnModel extends ColumnModel {
+    constructor(property, defaults) {
+        super(property.toString(), defaults);
+        this.property = property;
+        this._format = (value) => value;
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+            component.value = this._format(rowData.row[this.property]);
+        }));
+        return this;
+    }
+    cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
+        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        const initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
+            const formValueModel = editSession.form.pluck(this.property);
+            if (validators) {
+                formValueModel.validateUsing(validators);
+            }
+            component.valueModel = formValueModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    }
+    format(formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    }
+}
+class ListPropertyColumnModel extends ColumnModel {
+    constructor(property, defaults) {
+        super(property.toString(), defaults);
+        this.property = property;
+        this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(', ');
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+            component.value = this._format(rowData.row[this.property]);
+        }));
+        return this;
+    }
+    cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
+        const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
+        const initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
+            const formListModel = editSession.form.pluckList(this.property);
+            if (validators) {
+                formListModel.validateUsing(validators);
+            }
+            component.listModel = formListModel;
+            if (initialiser) {
+                initialiser(component);
+            }
+        }));
+        return this;
+    }
+    format(formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    }
+}
+class CustomValueColumnModel extends ColumnModel {
+    constructor(columnId, defaults, getValue) {
+        super(columnId, defaults);
+        this.getValue = getValue;
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+            component.value = this.getValue(rowData.row);
+        }));
+        return this;
+    }
+}
+class EditorControlColumnModel extends ColumnModel {
+    constructor(columnId, saveCommand, defaults) {
+        super(columnId, defaults);
+        this.cellRenderer(EditRowControls);
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+            component.row = rowData.row;
+            component.editSession = rowData.editSession;
+            component.editRowCommand = rowData.editRowCommand;
+        }));
+        return this;
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+class CustomTemplateColumnModel extends ColumnModel {
+    constructor(columnId, defaults) {
+        super(columnId, defaults);
+        this.config = new TemplateCellRendererPortalRef();
+        this.configureCellRenderer(this.config);
+    }
+    setTemplate(templateRef, viewContainer, fillCell, padChild) {
+        this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
+    }
+}
+class SelectionColumnModel extends ColumnModel {
+    constructor(columnId, defaults, selectionModel) {
+        super(columnId, defaults);
+        if (selectionModel instanceof MultipleSelectionModel) {
+            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
+                component.selectionModel = selectionModel;
+            });
+        }
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, (component, rowData) => {
+            component.row = rowData.row;
+            component.selectionModel = selectionModel;
+        }));
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+
 /**
  * Create your model:
  * @example
@@ -2645,10 +2906,17 @@ let TableComponent = class TableComponent extends DisposableComponent {
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.columns = chain(this.tableModel.columns);
         this.columnIds = chain(this.columns).pluck('columnId');
+        this.columnsById = chain(this.columns).indexBy('columnId');
     }
     isEditing(row) {
         return !!this.tableModel.getEditSessionFor(row);
     }
+    registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
+        const column = this.columnsById.get(columnId);
+        if (column instanceof CustomTemplateColumnModel) {
+            column.setTemplate(templateRef, viewContainer, fillCell, padChild);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -2666,8 +2934,16 @@ TableComponent = __decorate([
 
 let ColumnTemplateDirective = class ColumnTemplateDirective {
     constructor(host, templateRef, viewContainer) {
+        this.host = host;
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
+        this.aupColumnTemplateFillCell = false;
+        this.aupColumnTemplateAutoPadChild = undefined;
+    }
+    ngOnInit() {
+        var _a;
+        assert.isTruthy(this.aupColumnTemplateColumnId);
+        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
     }
 };
 ColumnTemplateDirective.ctorParameters = () => [
@@ -2675,82 +2951,44 @@ ColumnTemplateDirective.ctorParameters = () => [
     { type: TemplateRef },
     { type: ViewContainerRef }
 ];
-ColumnTemplateDirective = __decorate([
-    Directive({
-        selector: '[aupColumnTemplate]'
-    }),
-    __metadata("design:paramtypes", [TableComponent,
-        TemplateRef,
-        ViewContainerRef])
-], ColumnTemplateDirective);
-
-let TableCellRendererComponent = class TableCellRendererComponent {
-    constructor() {
-        this.defaultClassNames = "aup-header-cell-renderer";
-        this.editRowCommand = Command.create(() => {
-            this.tableModel.startEditSession(this.row);
-        });
-    }
-    initialiseRenderer(instance) {
-        if (this.renderer !== instance) {
-            this.renderer = instance;
-            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
-        }
-    }
-    initialiseEditor(instance) {
-        if (this.editor !== instance) {
-            this.editor = instance;
-            this.column.initialiseEditor(this.editor, this.editSession);
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.renderer) {
-            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
-            this.renderer.editSession = this.editSession;
-        }
-    }
-    hasActiveEditor() {
-        return this.editSession && this.column.hasEditor();
-    }
-};
 __decorate([
     Input(),
-    __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "row", void 0);
+    __metadata("design:type", String)
+], ColumnTemplateDirective.prototype, "aupColumnTemplate", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", ColumnModel)
-], TableCellRendererComponent.prototype, "column", void 0);
+    __metadata("design:type", String)
+], ColumnTemplateDirective.prototype, "aupColumnTemplateColumnId", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", EditSession)
-], TableCellRendererComponent.prototype, "editSession", void 0);
+    __metadata("design:type", Object)
+], ColumnTemplateDirective.prototype, "aupColumnTemplateFillCell", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", TableModel)
-], TableCellRendererComponent.prototype, "tableModel", void 0);
-__decorate([
-    HostBinding('class'),
     __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
-TableCellRendererComponent = __decorate([
-    Component({
-        selector: 'aup-table-cell-renderer',
-        template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellRendererPortal\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellEditorPortal\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
-        styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
+], ColumnTemplateDirective.prototype, "aupColumnTemplateAutoPadChild", void 0);
+ColumnTemplateDirective = __decorate([
+    Directive({
+        selector: '[aupColumnTemplate]'
     }),
-    __metadata("design:paramtypes", [])
-], TableCellRendererComponent);
+    __metadata("design:paramtypes", [TableComponent,
+        TemplateRef,
+        ViewContainerRef])
+], ColumnTemplateDirective);
 
 let TableHeaderCellRendererComponent = class TableHeaderCellRendererComponent {
     constructor() {
-        this.defaultClassNames = "aup-header-cell-renderer";
+        this.defaultClassNames = 'aup-header-cell-renderer';
     }
+    ngOnInit() {
+        this.column.attachHeaderCell(this);
+    }
+    // @Trace()
     initialiseHeader(instance) {
-        if (this.renderer !== instance) {
-            this.renderer = instance;
-            this.column.initialiseHeader(this.renderer);
-        }
+        this.column.onHeaderAttached(this, instance);
+    }
+    getPortal() {
+        return this[HEADER_CELL_RENDERER_PORTAL];
     }
 };
 __decorate([
@@ -2764,8 +3002,8 @@ __decorate([
 TableHeaderCellRendererComponent = __decorate([
     Component({
         selector: 'aup-table-header-cell-renderer',
-        template: "<ng-container [cdkPortalOutlet]=\"column.columnHeaderCellRendererPortal\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-        styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
+        template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+        styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
     }),
     __metadata("design:paramtypes", [])
 ], TableHeaderCellRendererComponent);
@@ -2852,12 +3090,63 @@ VerticalFocusContainerComponent = __decorate([
     __metadata("design:paramtypes", [FocusManager])
 ], VerticalFocusContainerComponent);
 
+let MultipleSelectInputComponent = class MultipleSelectInputComponent extends AbstractListInputComponent {
+    constructor() {
+        super();
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+    }
+    ngOnInit() {
+    }
+};
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
+    __metadata("design:type", Object)
+], MultipleSelectInputComponent.prototype, "listModel", void 0);
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ListModel)
+], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+__decorate([
+    Input(), StoreInListModel('optionsModel'),
+    __metadata("design:type", Array)
+], MultipleSelectInputComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], MultipleSelectInputComponent.prototype, "allowNil", void 0);
+__decorate([
+    ContentChild('optionTemplate'),
+    __metadata("design:type", TemplateRef)
+], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+__decorate([
+    ContentChild('nilOptionTemplate'),
+    __metadata("design:type", TemplateRef)
+], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+MultipleSelectInputComponent = __decorate([
+    Component({
+        selector: 'aup-multiple-select-input',
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+    }),
+    __metadata("design:paramtypes", [])
+], MultipleSelectInputComponent);
+
 let ComponentsModule = class ComponentsModule {
 };
 ComponentsModule = __decorate([
     NgModule({
         declarations: [
             AbstractInputComponent,
+            AbstractValueInputComponent,
+            AbstractListInputComponent,
             AbstractInputActivity,
             NumberInputComponent,
             StringInputComponent,
@@ -2883,7 +3172,8 @@ ComponentsModule = __decorate([
             SelectCellRendererComponent,
             SelectHeaderCellRendererComponent,
             DefaultHeaderCellRendererComponent,
-            TableHeaderCellRendererComponent
+            TableHeaderCellRendererComponent,
+            MultipleSelectInputComponent
         ],
         imports: [
             CommonModule,
@@ -2919,7 +3209,8 @@ ComponentsModule = __decorate([
             CardContainerComponent,
             TableComponent,
             EditRowControls,
-            ColumnTemplateDirective
+            ColumnTemplateDirective,
+            MultipleSelectInputComponent
         ],
         providers: [
             FocusBindingFactory,
@@ -5491,5 +5782,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, AddItemInteractionContextComponent as ɵby, ActivityActionsComponent as ɵbz, FocusBindingDirective as ɵc, PopupInteractionContextComponent as ɵca, InteractionContextTriggerFor as ɵcb, PlaceModule as ɵcc, EmptyStateComponent as ɵcd, BusyOverlayComponent as ɵce, PlaceOutletComponent as ɵcf, leftRightPlaceAnimation as ɵcg, LEFT_RIGHT_PLACE_ANIMATION as ɵch, AUP_PLACE_CONFIG as ɵci, PlaceRouter as ɵck, UrlService as ɵcl, PlaceHistory as ɵcm, TabbedPlaceNavigationComponent as ɵcn, AbstractPlaceNavigationComponent as ɵco, ListPlaceNavComponent as ɵcp, SidePlaceNavigationComponent as ɵcq, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractInputActivity as ɵh, Activity as ɵi, ACTIVITY_DATA as ɵj, NumberInputComponent as ɵk, StringInputComponent as ɵl, StringInputActivity as ɵm, TextInputComponent as ɵn, PasswordInputComponent as ɵo, SelectInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, VerticalFocusContainerComponent as ɵba, FocusableComponent as ɵbb, CardContainerComponent as ɵbc, TableComponent as ɵbd, EditRowControls as ɵbe, ColumnTemplateDirective as ɵbf, DefaultCellRendererComponent as ɵbg, TableCellRendererComponent as ɵbh, SelectCellRendererComponent as ɵbi, SelectHeaderCellRendererComponent as ɵbj, DefaultHeaderCellRendererComponent as ɵbk, TableHeaderCellRendererComponent as ɵbl, MultipleSelectInputComponent as ɵbm, InteractionModule as ɵbn, ActivityContainerComponent as ɵbo, AbstractInteractionContext as ɵbp, ActivityOutletComponent as ɵbq, ConfirmationDialogComponent as ɵbr, ACTIVITY_DATA as ɵbs, Activity as ɵbt, ConfirmThenDialogComponent as ɵbv, AlertDialogComponent as ɵbw, InPlaceInteractionContextComponent as ɵby, InteractionService as ɵbz, FocusBindingDirective as ɵc, ModalInteractionContextFactory as ɵca, AddItemInteractionContextComponent as ɵcb, ActivityActionsComponent as ɵcc, PopupInteractionContextComponent as ɵcd, InteractionContextTriggerFor as ɵce, PlaceModule as ɵcf, EmptyStateComponent as ɵcg, BusyOverlayComponent as ɵch, PlaceOutletComponent as ɵci, leftRightPlaceAnimation as ɵcj, LEFT_RIGHT_PLACE_ANIMATION as ɵck, AUP_PLACE_CONFIG as ɵcl, PlaceRouter as ɵcn, UrlService as ɵco, PlaceHistory as ɵcp, TabbedPlaceNavigationComponent as ɵcq, AbstractPlaceNavigationComponent as ɵcr, ListPlaceNavComponent as ɵcs, SidePlaceNavigationComponent as ɵct, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, AbstractInputActivity as ɵj, Activity as ɵk, ACTIVITY_DATA as ɵl, NumberInputComponent as ɵm, StringInputComponent as ɵn, StringInputActivity as ɵo, TextInputComponent as ɵp, PasswordInputComponent as ɵq, SelectInputComponent as ɵr, CheckboxInputComponent as ɵs, ScrollContainerComponent as ɵt, NoopComponent as ɵu, SwitchCaseOption as ɵv, SwitchCaseWhenDirective as ɵw, SwitchCaseDefaultDirective as ɵx, SwitchCaseComponent as ɵy, FocusContainerComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map