@coolon/angular-ui-powerups 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('immer'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@angular/material/tooltip'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'immer', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@angular/material/tooltip', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.typescriptUtilities, global.src, global.___default, global.produce, global.angularFontawesome, global.freeSolidSvgIcons, global.ng.material.tooltip, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, button, checkbox, icon, table, pectin, typescriptUtilities, src, ___default, produce, angularFontawesome, freeSolidSvgIcons, tooltip, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('lodash'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', 'lodash', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.___default, global.typescriptUtilities, global.src, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, icon, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, ___default, typescriptUtilities, src, produce, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -578,7 +578,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    <aup-icon icon=\"mat:add\"></aup-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);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}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 .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}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}"]
+                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-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}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);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}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 .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}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);
@@ -693,6 +693,8 @@
         __extends(AbstractInputComponent, _super);
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
+            _this.onValueEditedListeners = new pectin.EventListenerList();
+            _this.dense = false;
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
             _this.focus = new core.EventEmitter();
@@ -742,7 +744,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
             get: function () {
-                return this.inputModel.enabled;
+                return this.formValueModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -752,7 +754,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: function () {
-                return this.inputModel.errorList;
+                return this.formValueModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -766,19 +768,40 @@
         });
         Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
             get: function () {
-                return this.inputModel.focusContext;
+                return this.formValueModel.focusContext;
             },
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(AbstractInputComponent.prototype, "floatLabel", {
+            get: function () {
+                return this.dense ? 'never' : this.userFloatLabel;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AbstractInputComponent.prototype, "showHint", {
+            get: function () {
+                return this.dense ? false : !!this.hint;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Invokes the callback when this components value is changed by a user edit.
+         * @param callback
+         */
+        AbstractInputComponent.prototype.onValueEdited = function (callback) {
+            return this.onValueEditedListeners.add(callback);
+        };
         __decorate([
             core.Input(),
             __metadata("design:type", String)
         ], AbstractInputComponent.prototype, "label", void 0);
         __decorate([
-            core.Input(),
+            core.Input('floatLabel'),
             __metadata("design:type", String)
-        ], AbstractInputComponent.prototype, "floatLabel", void 0);
+        ], AbstractInputComponent.prototype, "userFloatLabel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -787,6 +810,11 @@
             core.Input(),
             __metadata("design:type", String)
         ], AbstractInputComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.HostBinding('class.dense'),
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "dense", void 0);
         __decorate([
             core.Input('command.focus'),
             __metadata("design:type", pectin.Command)
@@ -855,7 +883,7 @@
     var AbstractListInputComponent = /** @class */ (function (_super) {
         __extends(AbstractListInputComponent, _super);
         function AbstractListInputComponent() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.call(this) || this;
             /**
              * A backing model for all our @Input() valueModel properties which should be defined as follows.
              *
@@ -867,11 +895,61 @@
              * 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.Form.DelegatingListModel());
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
+            _this.componentListModel = new pectin.MutableListModel();
+            _this.setValueIsInProgress = new pectin.Guard();
+            _this.valueChange = new core.EventEmitter();
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentListModel);
+            var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentListModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
+                initialValue: 'ignore',
+                // we never fire events during an external changes to the value. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
+            });
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
+        Object.defineProperty(AbstractListInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
+            set: function (value) {
+                var _this = this;
+                this.setValueIsInProgress.whileTrue(function () {
+                    if (!_this.listHolder) {
+                        _this.listHolder = new pectin.MutableListModel(value);
+                        _this.listModel = _this.listHolder;
+                    }
+                    else {
+                        _this.listHolder.value = value;
+                    }
+                });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
+            __metadata("design:type", Object)
+        ], AbstractListInputComponent.prototype, "listModel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Array),
+            __metadata("design:paramtypes", [Array])
+        ], AbstractListInputComponent.prototype, "value", null);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractListInputComponent.prototype, "valueChange", void 0);
         AbstractListInputComponent = __decorate([
-            core.Component({ template: '' })
+            core.Component({ template: '' }),
+            __metadata("design:paramtypes", [])
         ], AbstractListInputComponent);
         return AbstractListInputComponent;
     }(AbstractInputComponent));
@@ -891,14 +969,58 @@
              * 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.Form.DelegatingValueModel());
-            _this.inputModel.onTransactionStart(function (tx) {
-                tx.onRootTransactionFinalised(function () {
-                    console.log({ changed: tx.hasChanged() });
-                });
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
+            _this.setValueInProgress = new pectin.Guard();
+            _this.componentValueModel = new pectin.MutableValueModel();
+            _this.valueChange = new core.EventEmitter();
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentValueModel);
+            var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentValueModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
+                initialValue: 'ignore',
+                // we never fire events during an external set value operation. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
             });
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
+        Object.defineProperty(AbstractValueInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
+            set: function (value) {
+                var _this = this;
+                this.setValueInProgress.whileTrue(function () {
+                    if (!_this.plainValueHolder) {
+                        _this.plainValueHolder = new pectin.MutableValueModel(value);
+                        _this.valueModel = _this.plainValueHolder;
+                    }
+                    else {
+                        _this.plainValueHolder.value = value;
+                    }
+                });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
+            __metadata("design:type", Object)
+        ], AbstractValueInputComponent.prototype, "valueModel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], AbstractValueInputComponent.prototype, "value", null);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractValueInputComponent.prototype, "valueChange", void 0);
         AbstractValueInputComponent = __decorate([
             core.Component({ template: '' }),
             __metadata("design:paramtypes", [])
@@ -906,20 +1028,85 @@
         return AbstractValueInputComponent;
     }(AbstractInputComponent));
 
+    /**
+     * Using templates (not only supported for nil values:
+     * <aup-autocomplete-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-autocomplete-input>
+     */
+    var AutocompleteInputComponent = /** @class */ (function (_super) {
+        __extends(AutocompleteInputComponent, _super);
+        function AutocompleteInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.filterValue = new pectin.MutableValueModel();
+            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+            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;
+            var lowerCaseFilterValue = chain(_this.filterValue)
+                .map(function (v) { return ___default__default.isString(v) ? v.toLowerCase() : ''; });
+            _this.filteredOptions = chain(_this.optionsModel)
+                .select(function (option) {
+                return ___default__default.isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+            }, { dependsOn: lowerCaseFilterValue });
+            return _this;
+        }
+        AutocompleteInputComponent.prototype.ngOnInit = function () {
+        };
+        AutocompleteInputComponent.prototype.formatOption = function (option) {
+            return this.optionLabelFormat(option);
+        };
+        AutocompleteInputComponent.prototype.updateFilter = function ($event) {
+            this.filterValue.value = $event;
+        };
+        AutocompleteInputComponent.prototype.onSelect = function ($event) {
+            this.valueModel.value = $event.option.value;
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], AutocompleteInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], AutocompleteInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutocompleteInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutocompleteInputComponent.prototype, "allowNil", void 0);
+        __decorate([
+            core.ContentChild('nilOptionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
+        AutocompleteInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-autocomplete-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{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", [])
+        ], AutocompleteInputComponent);
+        return AutocompleteInputComponent;
+    }(AbstractValueInputComponent));
+
     var CheckboxInputComponent = /** @class */ (function (_super) {
         __extends(CheckboxInputComponent, _super);
         function CheckboxInputComponent() {
             var _this = _super.call(this) || this;
+            // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+            // valueModel: Form.ValueModelBase<boolean> | IMutableValueModel<boolean>;
             _this.color = 'accent';
             _this.labelPosition = 'after';
             return _this;
         }
         CheckboxInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
-            __metadata("design:type", Object)
-        ], CheckboxInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -931,28 +1118,73 @@
         CheckboxInputComponent = __decorate([
             core.Component({
                 selector: 'aup-checkbox-input',
-                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
-                styles: [":host{display:inline-flex;flex-direction:column;margin-top:24px;margin-bottom:16px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
+                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+                styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
             }),
             __metadata("design:paramtypes", [])
         ], CheckboxInputComponent);
         return CheckboxInputComponent;
     }(AbstractValueInputComponent));
 
+    /**
+     * Using templates:
+     * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-multiple-select_input>
+     */
+    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(),
+            __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.ContentChild('optionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", 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)]=\"componentListModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\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=\"showHint\">{{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 NumberInputComponent = /** @class */ (function (_super) {
         __extends(NumberInputComponent, _super);
         function NumberInputComponent() {
             var _this = _super.call(this) || this;
+            // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+            // valueModel: Form.ValueModelBase<number> | IMutableValueModel<number>;
             _this.min = Number.MIN_SAFE_INTEGER;
             _this.max = Number.MAX_SAFE_INTEGER;
             return _this;
         }
         NumberInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
-            __metadata("design:type", Object)
-        ], NumberInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -964,8 +1196,8 @@
         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]=\"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}"]
+                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)]=\"componentValueModel.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 && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                styles: [""]
             }),
             __metadata("design:paramtypes", [])
         ], NumberInputComponent);
@@ -974,26 +1206,31 @@
 
     var PasswordInputComponent = /** @class */ (function (_super) {
         __extends(PasswordInputComponent, _super);
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
         function PasswordInputComponent() {
             return _super.call(this) || this;
         }
         PasswordInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            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]=\"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}"]
+                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)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                styles: [""]
             }),
             __metadata("design:paramtypes", [])
         ], PasswordInputComponent);
         return PasswordInputComponent;
     }(AbstractValueInputComponent));
 
+    /**
+     * Using templates:
+     * <aup-select-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-select_input>
+     */
     var SelectInputComponent = /** @class */ (function (_super) {
         __extends(SelectInputComponent, _super);
         function SelectInputComponent() {
@@ -1003,10 +1240,6 @@
         }
         SelectInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
-            __metadata("design:type", Object)
-        ], SelectInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.ListModel)
@@ -1038,7 +1271,7 @@
         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]=\"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)]=\"componentValueModel.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\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </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=\"showHint\">{{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", [])
@@ -1052,17 +1285,13 @@
             var _this = _super.call(this) || this;
             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.clearCommand = pectin.Command.create(function () {
-                _this.valueModel.value = null;
+                _this.componentValueModel.value = null;
             });
-            _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+            _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
             return _this;
         }
         StringInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
-            __metadata("design:type", Object)
-        ], StringInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(), pectin.TrackExternal({ defaultValue: false }),
             __metadata("design:type", pectin.ValueModel)
@@ -1074,8 +1303,8 @@
         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]=\"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    <aup-icon icon=\"mat:close\"></aup-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}"]
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+                styles: ["button[disabled]{visibility:hidden}"]
             }),
             __metadata("design:paramtypes", [])
         ], StringInputComponent);
@@ -1086,16 +1315,14 @@
         __extends(TextInputComponent, _super);
         function TextInputComponent() {
             var _this = _super.call(this) || this;
+            // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+            // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
             _this.rows = 2;
             return _this;
             // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         }
         TextInputComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
-            __metadata("design:type", Object)
-        ], TextInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -1107,14 +1334,56 @@
         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]=\"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}"]
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.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=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
             }),
             __metadata("design:paramtypes", [])
         ], TextInputComponent);
         return TextInputComponent;
     }(AbstractValueInputComponent));
 
+    var IconComponent = /** @class */ (function () {
+        function IconComponent() {
+        }
+        Object.defineProperty(IconComponent.prototype, "icon", {
+            get: function () {
+                return this._icon;
+            },
+            set: function (iconName) {
+                this._icon = iconName;
+                if (!iconName) {
+                    this.errorMessage = 'icon is nil';
+                    this.prefix = undefined;
+                    return;
+                }
+                var colonIndex = iconName.indexOf(':');
+                if (colonIndex > 0) {
+                    this.prefix = this.icon.slice(0, colonIndex);
+                    this.suffix = this.icon.slice(colonIndex + 1);
+                }
+                if (this.prefix) {
+                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
+                }
+                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], IconComponent.prototype, "icon", null);
+        IconComponent = __decorate([
+            core.Component({
+                selector: 'aup-icon',
+                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
+                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
+            })
+        ], IconComponent);
+        return IconComponent;
+    }());
+
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
         }
@@ -1325,6 +1594,7 @@
             typescriptUtilities.assert.isTruthy(host);
             host[HEADER_CELL_RENDERER_PORTAL] = new portal.ComponentPortal(this.componentType);
         };
+        // @Trace()
         CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
             this.initialiseHeader(portalComponent, host.column);
         };
@@ -1348,13 +1618,15 @@
         ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
             host[CELL_RENDERER_PORTAL] = new portal.ComponentPortal(this.componentType);
         };
+        // @Trace()
         ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
             host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-            this.updateComponent(portalComponent, host.getRowData());
+            this.updateComponent(portalComponent, host.getRowData(), true);
         };
+        // @Trace()
         ComponentCellRendererPortalRef.prototype.pushState = function (host) {
             if (host[PORTAL_RENDERER_COMPONENT]) {
-                this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+                this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData(), false);
             }
         };
         return ComponentCellRendererPortalRef;
@@ -1396,6 +1668,7 @@
         TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
             //  don't care
         };
+        // @Trace()
         TemplateCellRendererPortalRef.prototype.pushState = function (host) {
             host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
             host.fillCell = this.fillCell;
@@ -1587,6 +1860,7 @@
     var noop = function () {
     };
     var ɵ0 = noop;
+    var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
     var ColumnModel = /** @class */ (function () {
         function ColumnModel(columnId, defaults) {
             this.columnId = columnId;
@@ -1677,24 +1951,66 @@
     }());
     var PropertyColumnModel = /** @class */ (function (_super) {
         __extends(PropertyColumnModel, _super);
-        function PropertyColumnModel(property, defaults) {
-            var _this = _super.call(this, property.toString(), defaults) || this;
+        function PropertyColumnModel(id, property, defaults) {
+            var _this = _super.call(this, id, defaults) || this;
             _this.property = property;
             _this._format = function (value) { return value; };
             _this.cellRenderer(DefaultCellRendererComponent);
             return _this;
         }
-        PropertyColumnModel.prototype.cellRenderer = function (componentType) {
+        PropertyColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
             var _this = this;
-            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                if (firstTime) {
+                    if (___default__default.isFunction(onComponentInitOrOptions)) {
+                        onComponentInitOrOptions(component);
+                    }
+                    else {
+                        if (___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                            onComponentInitOrOptions.onComponentInit(component);
+                        }
+                    }
+                }
                 component.value = _this._format(rowData.row[_this.property]);
+                if (!___default__default.isFunction(onComponentInitOrOptions) && ___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                    onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+                }
             }));
             return this;
         };
-        PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
+        PropertyColumnModel.prototype.mutableCellRenderer = function (componentType, options) {
+            var _this = this;
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                // keep a local copy most recent row value so it's available to teh
+                // edit callback without having to add/remove subscribers all the time.
+                component[CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
+                var disableEditCallback = false;
+                if (firstTime) {
+                    if (___default__default.isFunction(options === null || options === void 0 ? void 0 : options.onComponentInit)) {
+                        options.onComponentInit(component);
+                    }
+                    // install our edit callback
+                    component.onValueEdited(function (is, was) {
+                        if (!disableEditCallback) {
+                            options.onValueEdit(component[CELL_RENDERER_COMPONENT_ROW_CACHE], is, was);
+                        }
+                    });
+                }
+                // now push the value the component and disable the callback just incase the component misbehaves
+                // and fires a value change during the operation.
+                disableEditCallback = true;
+                component.value = rowData.row[_this.property];
+                disableEditCallback = false;
+                if (!___default__default.isFunction(options) && ___default__default.isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
+                    options.onRowUpdate(component, rowData.row);
+                }
+            }));
+            return this;
+        };
+        PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, onComponentInit) {
             var _this = this;
             var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-            var initialiser = ___default__default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+            var initialiser = ___default__default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
             this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
                 var formValueModel = editSession.form.pluck(_this.property);
                 if (validators) {
@@ -1719,8 +2035,8 @@
     }(ColumnModel));
     var ListPropertyColumnModel = /** @class */ (function (_super) {
         __extends(ListPropertyColumnModel, _super);
-        function ListPropertyColumnModel(property, defaults) {
-            var _this = _super.call(this, property.toString(), defaults) || this;
+        function ListPropertyColumnModel(id, property, defaults) {
+            var _this = _super.call(this, id, 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);
@@ -1767,10 +2083,23 @@
             _this.cellRenderer(DefaultCellRendererComponent);
             return _this;
         }
-        CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
+        CustomValueColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
             var _this = this;
-            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                if (firstTime) {
+                    if (___default__default.isFunction(onComponentInitOrOptions)) {
+                        onComponentInitOrOptions(component);
+                    }
+                    else {
+                        if (___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                            onComponentInitOrOptions.onComponentInit(component);
+                        }
+                    }
+                }
                 component.value = _this.getValue(rowData.row);
+                if (!___default__default.isFunction(onComponentInitOrOptions) && ___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                    onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+                }
             }));
             return this;
         };
@@ -1954,7 +2283,7 @@
             this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
             this.firstEditableColumn = chain(this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
             this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
-            this.addRowClass("enable-hover", function () { return _this.isRowSelectionEnabled(); });
+            this.addRowClass('enable-hover', function () { return _this.isRowSelectionEnabled(); });
         }
         TableModel_1 = TableModel;
         TableModel.fromList = function (sourceOfTruth, builder) {
@@ -1982,11 +2311,11 @@
             enumerable: true,
             configurable: true
         });
-        TableModel.prototype.pluck = function (property) {
-            return this.addColumn(new PropertyColumnModel(property, this));
+        TableModel.prototype.pluck = function (property, options) {
+            return this.addColumn(new PropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
         };
-        TableModel.prototype.pluckList = function (property) {
-            return this.addColumn(new ListPropertyColumnModel(property, this));
+        TableModel.prototype.pluckList = function (property, options) {
+            return this.addColumn(new ListPropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
         };
         TableModel.prototype.addSelectionColumn = function (selectionModel) {
             pectin.assert.isNil(this.selectionColumnModel);
@@ -2000,6 +2329,9 @@
         TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
             return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
         };
+        TableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
+            return this.addColumn(new CustomValueColumnModel(columnId, this, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
+        };
         TableModel.prototype.addTemplateColumn = function (columnId) {
             return this.addColumn(new CustomTemplateColumnModel(columnId, this));
         };
@@ -2419,100 +2751,6 @@
         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 IconComponent = /** @class */ (function () {
-        function IconComponent() {
-        }
-        Object.defineProperty(IconComponent.prototype, "icon", {
-            get: function () {
-                return this._icon;
-            },
-            set: function (iconName) {
-                this._icon = iconName;
-                if (!iconName) {
-                    this.errorMessage = 'icon is nil';
-                    this.prefix = undefined;
-                    return;
-                }
-                var colonIndex = iconName.indexOf(':');
-                if (colonIndex > 0) {
-                    this.prefix = this.icon.slice(0, colonIndex);
-                    this.suffix = this.icon.slice(colonIndex + 1);
-                }
-                if (this.prefix) {
-                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
-                }
-                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], IconComponent.prototype, "icon", null);
-        IconComponent = __decorate([
-            core.Component({
-                selector: 'aup-icon',
-                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
-            })
-        ], IconComponent);
-        return IconComponent;
-    }());
-
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
             faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
@@ -2531,6 +2769,8 @@
                     TextInputComponent,
                     PasswordInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     CheckboxInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
@@ -2550,7 +2790,6 @@
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
-                    MultipleSelectInputComponent,
                     IconComponent,
                     SectionHeaderComponent
                 ],
@@ -2570,7 +2809,8 @@
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
                     angularFontawesome.FontAwesomeModule,
-                    tooltip.MatTooltipModule
+                    tooltip.MatTooltipModule,
+                    autocomplete.MatAutocompleteModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -2579,6 +2819,8 @@
                     PasswordInputComponent,
                     CheckboxInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
                     SwitchCaseComponent,
@@ -2591,12 +2833,23 @@
                     TableComponent,
                     EditRowControls,
                     ColumnTemplateDirective,
-                    MultipleSelectInputComponent,
                     IconComponent,
                     SectionHeaderComponent
                 ],
                 providers: [
-                    FocusBindingFactory,
+                    FocusBindingFactory
+                    // {
+                    //   provide: CELL_EDITOR_REGISTRATION, useValue: {
+                    //     type: 'string',
+                    //     editorClass: StringInputComponent
+                    //   }, multi: true
+                    // },
+                    // {
+                    //   provide: CELL_EDITOR_REGISTRATION, useValue: {
+                    //     type: 'number',
+                    //     editorClass: NumberInputComponent
+                    //   }, multi: true
+                    // }
                 ]
             }),
             __metadata("design:paramtypes", [angularFontawesome.FaIconLibrary])
@@ -3035,6 +3288,7 @@
         ActivityContainerComponent.prototype.registerDisposable = function (disposable) {
             return this.garbage.registerDisposable(disposable);
         };
+        // @Trace()
         ActivityContainerComponent.prototype.dispose = function () {
             // TODO: think about auto cancelling any outstanding activity on dispose.
             //       See NavigationState.Navigating for a use-case.
@@ -3183,12 +3437,6 @@
             core.ViewChildren(ActivityOutletComponent),
             __metadata("design:type", core.QueryList)
         ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ActivityContainerComponent.prototype, "dispose", null);
         ActivityContainerComponent = __decorate([
             core.Component({
                 selector: 'aup-activity-container',
@@ -3237,7 +3485,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbv = /** @class */ (function () {
+    exports.ɵbw = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3382,7 +3630,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbv || (exports.ɵbv = {}));
+    })(exports.ɵbw || (exports.ɵbw = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3440,7 +3688,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbv },
+            { type: exports.ɵbw },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3458,7 +3706,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.ɵbv, Object])
+            __metadata("design:paramtypes", [exports.ɵbw, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -3997,7 +4245,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbv
+                    exports.ɵbw
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -4272,7 +4520,7 @@
             pectin.assert.isNil(this.visitModel.value);
             var when = pectin.Dsl.disposeWith(this).when;
             this.visitModel.value = visit;
-            pectin.DebugContext.get(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
+            pectin.DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
             this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _this.installBinding(parameterDef); });
             when.valueOf(this.visitModel).changes(function (current, previous) {
                 notifyVisitChanged(current, previous);
@@ -5119,7 +5367,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵby = /** @class */ (function () {
+    exports.ɵbz = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5256,7 +5504,7 @@
         //   }
         //
         // }
-    })(exports.ɵby || (exports.ɵby = {}));
+    })(exports.ɵbz || (exports.ɵbz = {}));
 
     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.
@@ -5420,75 +5668,6 @@
         return UrlService;
     }());
 
-    var Visit = /** @class */ (function () {
-        function Visit(placeDefinition, visitParameters) {
-            if (visitParameters === void 0) { visitParameters = {}; }
-            this.placeDefinition = placeDefinition;
-            this.visitParameters = visitParameters;
-        }
-        // @Trace()
-        Visit.prototype.getRouteId = function () {
-            return this.placeDefinition.getRouteIdFrom(this);
-        };
-        // @Trace()
-        Visit.prototype.hasRouteId = function () {
-            return !___default.isNil(this.getRouteId());
-        };
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param parameterName the field name of the property model or the `as` option if specified.
-         */
-        Visit.prototype.getParameter = function (parameterName) {
-            return this.visitParameters[parameterName];
-        };
-        // @Trace()
-        Visit.prototype.hasParameter = function (parameterName) {
-            return Object.keys(this.visitParameters).includes(parameterName);
-        };
-        Visit.prototype.replace = function (parameter, value) {
-            var _a;
-            return new Visit(this.placeDefinition, __assign(__assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
-        };
-        Visit.prototype.mergeRouteParameters = function (routeParams) {
-            var _this = this;
-            // todo: whitelist parameters.
-            var routeParameterKeys = Object.keys(routeParams);
-            var params = {};
-            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
-                if (def.isRouteId || def.isRouteParameter) {
-                    if (routeParameterKeys.includes(def.name)) {
-                        params[def.name] = routeParams[def.name];
-                    }
-                }
-                else {
-                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
-                    // defaults and remember sanitisation process.
-                    var value = _this.getParameter(def.name);
-                    if (_this.hasParameter(def.name)) {
-                        params[def.name] = value;
-                    }
-                }
-            });
-            return new Visit(this.placeDefinition, params);
-        };
-        Visit.prototype.hasRoutingChangedFrom = function (other) {
-            var samePlace = other.placeDefinition === this.placeDefinition;
-            var sameRouteParameters = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = ___default.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-        };
-        Visit.prototype.toDebugString = function () {
-            var _this = this;
-            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(",");
-        };
-        return Visit;
-    }());
-
     var PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
         function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
@@ -5684,6 +5863,7 @@
             enumerable: true,
             configurable: true
         });
+        // @Trace()
         PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -5779,30 +5959,93 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbv },
+            { type: exports.ɵbw },
             { type: UrlService },
-            { type: exports.ɵby }
+            { type: exports.ɵbz }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbv), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵby)); }, token: PlaceRouter, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Visit, Visit]),
-            __metadata("design:returntype", Promise)
-        ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
+        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.ɵbz)); }, token: PlaceRouter, providedIn: "root" });
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbv,
+                exports.ɵbw,
                 UrlService,
-                exports.ɵby])
+                exports.ɵbz])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
 
+    var Visit = /** @class */ (function () {
+        function Visit(placeDefinition, visitParameters) {
+            if (visitParameters === void 0) { visitParameters = {}; }
+            this.placeDefinition = placeDefinition;
+            this.visitParameters = visitParameters;
+        }
+        // @Trace()
+        Visit.prototype.getRouteId = function () {
+            return this.placeDefinition.getRouteIdFrom(this);
+        };
+        // @Trace()
+        Visit.prototype.hasRouteId = function () {
+            return !___default.isNil(this.getRouteId());
+        };
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param parameterName the field name of the property model or the `as` option if specified.
+         */
+        Visit.prototype.getParameter = function (parameterName) {
+            return this.visitParameters[parameterName];
+        };
+        // @Trace()
+        Visit.prototype.hasParameter = function (parameterName) {
+            return Object.keys(this.visitParameters).includes(parameterName);
+        };
+        Visit.prototype.replace = function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, __assign(__assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
+        };
+        Visit.prototype.mergeRouteParameters = function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            var routeParameterKeys = Object.keys(routeParams);
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                else {
+                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                    // defaults and remember sanitisation process.
+                    var value = _this.getParameter(def.name);
+                    if (_this.hasParameter(def.name)) {
+                        params[def.name] = value;
+                    }
+                }
+            });
+            return new Visit(this.placeDefinition, params);
+        };
+        Visit.prototype.hasRoutingChangedFrom = function (other) {
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            var sameRouteParameters = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = ___default.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        };
+        Visit.prototype.toDebugString = function () {
+            var _this = this;
+            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(",");
+        };
+        return Visit;
+    }());
+
     var AUP_PLACE_CONFIG = new core.InjectionToken('AUP_PLACE_CONFIG');
 
     // Freezes the state of the components at the start of the animation.
@@ -6817,8 +7060,7 @@
             binding: null
         };
         var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
-        pectin.DebugContext.get(mechanics.backingModel).tag(tag);
-        pectin.Logger.get(mechanics.backingModel).tag(tag);
+        pectin.DebugContext.getOrCreate(mechanics.backingModel).tag(tag);
         Object.defineProperty(prototype, propertyKey, {
             get: function () {
                 return mechanics.backingModel;
@@ -6889,6 +7131,7 @@
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
+    exports.AutocompleteInputComponent = AutocompleteInputComponent;
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
     exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
@@ -6932,7 +7175,7 @@
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbv;
+    exports.InteractionService = exports.ɵbw;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -6952,7 +7195,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵby;
+    exports.PlaceHistory = exports.ɵbz;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -7002,50 +7245,51 @@
     exports.ɵ0 = ɵ0;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = EditRowControls;
-    exports.ɵbb = ColumnTemplateDirective;
-    exports.ɵbc = DefaultCellRendererComponent;
-    exports.ɵbd = TableCellRendererComponent;
-    exports.ɵbe = SelectCellRendererComponent;
-    exports.ɵbf = SelectHeaderCellRendererComponent;
-    exports.ɵbg = DefaultHeaderCellRendererComponent;
-    exports.ɵbh = TableHeaderCellRendererComponent;
-    exports.ɵbi = MultipleSelectInputComponent;
-    exports.ɵbj = IconComponent;
-    exports.ɵbk = SectionHeaderComponent;
-    exports.ɵbl = PlaceModule;
-    exports.ɵbm = ComponentsModule;
-    exports.ɵbn = EmptyStateComponent;
-    exports.ɵbo = BusyOverlayComponent;
-    exports.ɵbp = PlaceOutletComponent;
-    exports.ɵbq = leftRightPlaceAnimation;
-    exports.ɵbr = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbs = AUP_PLACE_CONFIG;
-    exports.ɵbu = PlaceRouter;
-    exports.ɵbw = ModalInteractionContextFactory;
-    exports.ɵbx = UrlService;
-    exports.ɵbz = TabbedPlaceNavigationComponent;
+    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 = IconComponent;
+    exports.ɵbl = SectionHeaderComponent;
+    exports.ɵbm = PlaceModule;
+    exports.ɵbn = ComponentsModule;
+    exports.ɵbo = EmptyStateComponent;
+    exports.ɵbp = BusyOverlayComponent;
+    exports.ɵbq = PlaceOutletComponent;
+    exports.ɵbr = leftRightPlaceAnimation;
+    exports.ɵbs = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵbt = AUP_PLACE_CONFIG;
+    exports.ɵbv = PlaceRouter;
+    exports.ɵbx = ModalInteractionContextFactory;
+    exports.ɵby = UrlService;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = AbstractPlaceNavigationComponent;
-    exports.ɵcb = ListPlaceNavComponent;
-    exports.ɵcc = SidePlaceNavigationComponent;
-    exports.ɵcd = InteractionModule;
-    exports.ɵce = ActivityContainerComponent;
-    exports.ɵcf = AbstractInteractionContext;
-    exports.ɵcg = ActivityOutletComponent;
-    exports.ɵch = ConfirmationDialogComponent;
-    exports.ɵci = ACTIVITY_DATA;
-    exports.ɵcj = Activity;
-    exports.ɵcl = ConfirmThenDialogComponent;
-    exports.ɵcm = AlertDialogComponent;
-    exports.ɵco = InPlaceInteractionContextComponent;
-    exports.ɵcp = AddItemInteractionContextComponent;
-    exports.ɵcq = ActivityActionsComponent;
-    exports.ɵcr = PopupInteractionContextComponent;
-    exports.ɵcs = StringInputActivity;
-    exports.ɵct = AbstractInputActivity;
-    exports.ɵcu = SelectInputActivity;
-    exports.ɵcv = InteractionContextTriggerFor;
+    exports.ɵca = TabbedPlaceNavigationComponent;
+    exports.ɵcb = AbstractPlaceNavigationComponent;
+    exports.ɵcc = ListPlaceNavComponent;
+    exports.ɵcd = SidePlaceNavigationComponent;
+    exports.ɵce = InteractionModule;
+    exports.ɵcf = ActivityContainerComponent;
+    exports.ɵcg = AbstractInteractionContext;
+    exports.ɵch = ActivityOutletComponent;
+    exports.ɵci = ConfirmationDialogComponent;
+    exports.ɵcj = ACTIVITY_DATA;
+    exports.ɵck = Activity;
+    exports.ɵcm = ConfirmThenDialogComponent;
+    exports.ɵcn = AlertDialogComponent;
+    exports.ɵcp = InPlaceInteractionContextComponent;
+    exports.ɵcq = AddItemInteractionContextComponent;
+    exports.ɵcr = ActivityActionsComponent;
+    exports.ɵcs = PopupInteractionContextComponent;
+    exports.ɵct = StringInputActivity;
+    exports.ɵcu = AbstractInputActivity;
+    exports.ɵcv = SelectInputActivity;
+    exports.ɵcw = InteractionContextTriggerFor;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
@@ -7057,18 +7301,18 @@
     exports.ɵl = TextInputComponent;
     exports.ɵm = PasswordInputComponent;
     exports.ɵn = SelectInputComponent;
-    exports.ɵo = CheckboxInputComponent;
-    exports.ɵp = ScrollContainerComponent;
-    exports.ɵq = NoopComponent;
-    exports.ɵr = SwitchCaseOption;
-    exports.ɵs = SwitchCaseWhenDirective;
-    exports.ɵt = SwitchCaseDefaultDirective;
-    exports.ɵu = SwitchCaseComponent;
-    exports.ɵv = FocusContainerComponent;
-    exports.ɵw = VerticalFocusContainerComponent;
-    exports.ɵx = FocusableComponent;
-    exports.ɵy = CardContainerComponent;
-    exports.ɵz = TableComponent;
+    exports.ɵo = MultipleSelectInputComponent;
+    exports.ɵp = AutocompleteInputComponent;
+    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;
 
     Object.defineProperty(exports, '__esModule', { value: true });