@coolon/angular-ui-powerups 2.0.0-alpha.3 → 2.0.0-alpha.30

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/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), 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/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', '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.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global.___default, global.typescriptStringEnums, global.typescriptUtilities, 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, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, ___default, typescriptStringEnums, typescriptUtilities, 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,13 +578,501 @@
             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-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-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;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.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}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}: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);
         return CardContainerComponent;
     }(DisposableComponent));
 
+
+    (function (CommandFace) {
+        var Position;
+        (function (Position) {
+            Position["START"] = "start";
+            Position["END"] = "end";
+        })(Position = CommandFace.Position || (CommandFace.Position = {}));
+        var Adapter = /** @class */ (function () {
+            function Adapter(face) {
+                this.face = face;
+            }
+            Object.defineProperty(Adapter.prototype, "text", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.text) ? this.face.text() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "icon", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPosition", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "tooltip", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionStart", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.START;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionEnd", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.END;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "destructive", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "text", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "icon", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPosition", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "tooltip", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionStart", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionEnd", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "destructive", null);
+            return Adapter;
+        }());
+        CommandFace.Adapter = Adapter;
+    })(exports.CommandFace || (exports.CommandFace = {}));
+
+    var CommandContainer = /** @class */ (function (_super) {
+        __extends(CommandContainer, _super);
+        function CommandContainer() {
+            var _this = _super.call(this) || this;
+            _this._commandRegistrations = new pectin.MutableListModel();
+            return _this;
+        }
+        Object.defineProperty(CommandContainer.prototype, "commandRegistrations", {
+            get: function () {
+                return this._commandRegistrations.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandContainer.prototype.registerCommand = function (command, face) {
+            var _this = this;
+            var registration = { command: command, faceAdapter: new exports.CommandFace.Adapter(face) };
+            this._commandRegistrations.push(registration);
+            return pectin.Disposable.disposableThatRuns(function () { return _this._commandRegistrations.remove(registration); });
+        };
+        CommandContainer.prototype.getDefaultIconPosition = function () {
+            return exports.CommandFace.Position.START;
+        };
+        return CommandContainer;
+    }(pectin.GarbageCollector));
+
+    /**
+     *
+     */
+    var CommandBarComponent = /** @class */ (function (_super) {
+        __extends(CommandBarComponent, _super);
+        function CommandBarComponent() {
+            return _super.call(this) || this;
+        }
+        CommandBarComponent_1 = CommandBarComponent;
+        CommandBarComponent.prototype.ngOnInit = function () {
+        };
+        CommandBarComponent.prototype.getButtonColor = function (registration) {
+            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        };
+        var CommandBarComponent_1;
+        CommandBarComponent = CommandBarComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-command-bar',
+                template: "\n    <ng-container *ngFor=\"let registration of commandRegistrations.value\">\n      <button *ngIf=\"registration.faceAdapter.icon && !registration.faceAdapter.text\"\n              mat-icon-button\n              [color]=\"getButtonColor(registration)\"\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.faceAdapter.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n      <button *ngIf=\"registration.faceAdapter.text\"\n              [color]=\"getButtonColor(registration)\"\n              mat-button\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n    </ng-container>\n  ",
+                providers: [{ provide: CommandContainer, useExisting: core.forwardRef(function () { return CommandBarComponent_1; }) }],
+                styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], CommandBarComponent);
+        return CommandBarComponent;
+    }(CommandContainer));
+
+    /**
+     *
+     */
+    var CommandFaceComponent = /** @class */ (function (_super) {
+        __extends(CommandFaceComponent, _super);
+        function CommandFaceComponent(commandContainer) {
+            var _this = _super.call(this) || this;
+            _this.commandContainer = commandContainer;
+            _this.faceModel = new pectin.MutableValueModel();
+            _this.ignoreIcon = false;
+            _this.ignoreText = false;
+            _this.includeMissingIconInLayout = false;
+            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;
+            // overkill /c: when all you have is a hammer...
+            var faceAdapter = chain(_this.faceModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            _this.iconModel = faceAdapter.pluck('icon');
+            _this.textModel = faceAdapter.pluck('text');
+            _this.positionModel = faceAdapter.pluck('iconPosition');
+            _this.destructiveModel = faceAdapter.pluck('destructive');
+            return _this;
+        }
+        Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
+            get: function () {
+                return this.includeMissingIconInLayout && !this.iconModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandFaceComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(CommandFaceComponent.prototype, "iconPosition", {
+            get: function () {
+                var _a, _b, _c;
+                return (_c = (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : (_b = this.commandContainer) === null || _b === void 0 ? void 0 : _b.getDefaultIconPosition()) !== null && _c !== void 0 ? _c : exports.CommandFace.Position.START;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "shouldIncludeIcon", {
+            get: function () {
+                return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconStart", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.START;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.END;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "text", {
+            get: function () {
+                return this.ignoreText ? undefined : this.textModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "destructive", {
+            get: function () {
+                return this.destructiveModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandFaceComponent.ctorParameters = function () { return [
+            { type: CommandContainer, decorators: [{ type: core.Optional }] }
+        ]; };
+        __decorate([
+            core.Input('face'), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "_rawFace", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreIcon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreText", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
+        __decorate([
+            core.HostBinding('class.hide-icon'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
+        __decorate([
+            core.HostBinding('class.destructive'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "destructive", null);
+        CommandFaceComponent = __decorate([
+            core.Component({
+                selector: 'aup-command-face',
+                template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
+                encapsulation: core.ViewEncapsulation.None,
+                styles: ["aup-command-face{--icon-gap:var(--command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+            }),
+            __param(0, core.Optional()),
+            __metadata("design:paramtypes", [CommandContainer])
+        ], CommandFaceComponent);
+        return CommandFaceComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var CommandComponent = /** @class */ (function (_super) {
+        __extends(CommandComponent, _super);
+        function CommandComponent(commandContainer) {
+            var _this = _super.call(this) || this;
+            _this.commandContainer = commandContainer;
+            return _this;
+        }
+        CommandComponent.prototype.ngOnInit = function () {
+            this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
+        };
+        CommandComponent.ctorParameters = function () { return [
+            { type: CommandContainer }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], CommandComponent.prototype, "command", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandComponent.prototype, "face", void 0);
+        CommandComponent = __decorate([
+            core.Component({
+                selector: 'aup-command',
+                template: ""
+            }),
+            __metadata("design:paramtypes", [CommandContainer])
+        ], CommandComponent);
+        return CommandComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var PopupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuRendererComponent, _super);
+        function PopupMenuRendererComponent() {
+            var _this = _super.call(this) || this;
+            _this.xPosition = 'after';
+            _this.yPosition = 'below';
+            _this.commandExecuted = new core.EventEmitter();
+            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 registrations = chain(_this.commandRegistrations);
+            var iconCount = registrations.select(function (r) { return !!r.faceAdapter.icon; }).count();
+            _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(registrations.length)).areTruthy();
+            return _this;
+        }
+        PopupMenuRendererComponent.prototype.ngOnInit = function () {
+        };
+        PopupMenuRendererComponent.prototype.getPopupMenuCommandFor = function (item) {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(item.command.busy).becomesFalsey(function () {
+                _this.commandExecuted.emit();
+            });
+            return item.command;
+        };
+        PopupMenuRendererComponent.prototype.getButtonColor = function (registration) {
+            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], PopupMenuRendererComponent.prototype, "commandRegistrations", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], PopupMenuRendererComponent.prototype, "xPosition", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], PopupMenuRendererComponent.prototype, "yPosition", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], PopupMenuRendererComponent.prototype, "commandExecuted", void 0);
+        __decorate([
+            core.ViewChild(menu.MatMenu),
+            __metadata("design:type", menu.MatMenu)
+        ], PopupMenuRendererComponent.prototype, "matMenu", void 0);
+        PopupMenuRendererComponent = __decorate([
+            core.Component({
+                selector: 'aup-popup-menu-renderer',
+                template: "<mat-menu [xPosition]=\"xPosition\" [yPosition]=\"yPosition\" >\n  <button *ngFor=\"let registration of commandRegistrations.value\"\n          mat-menu-item\n          [pectinCommand]=\"getPopupMenuCommandFor(registration)\"\n  >\n    <aup-command-face [face]=\"registration.faceAdapter.face\" [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n  </button>\n</mat-menu>\n",
+                styles: [":host{display:inline-flex;flex-direction:row;align-items:center}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], PopupMenuRendererComponent);
+        return PopupMenuRendererComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
+        __extends(AbstractPopupMenuComponent, _super);
+        function AbstractPopupMenuComponent(cdr) {
+            var _this = _super.call(this) || this;
+            _this.cdr = cdr;
+            _this.xPosition = 'after';
+            _this.yPosition = 'below';
+            return _this;
+        }
+        AbstractPopupMenuComponent.prototype.ngAfterViewInit = function () {
+            this.cdr.detectChanges();
+        };
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "matMenuComponent", {
+            get: function () {
+                var _a;
+                return (_a = this.popupMenu) === null || _a === void 0 ? void 0 : _a.matMenu;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AbstractPopupMenuComponent.prototype.closeMenu = function () {
+            this.menuTrigger.closeMenu();
+        };
+        AbstractPopupMenuComponent.prototype.getButtonColor = function (registration) {
+            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        };
+        AbstractPopupMenuComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
+        __decorate([
+            core.ViewChild(PopupMenuRendererComponent),
+            __metadata("design:type", PopupMenuRendererComponent)
+        ], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+        __decorate([
+            core.ViewChild(menu.MatMenuTrigger),
+            __metadata("design:type", menu.MatMenuTrigger)
+        ], AbstractPopupMenuComponent.prototype, "menuTrigger", void 0);
+        AbstractPopupMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-abstract-popup-menu',
+                template: ''
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], AbstractPopupMenuComponent);
+        return AbstractPopupMenuComponent;
+    }(CommandContainer));
+
+    /**
+     *
+     */
+    var PopupMenuComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuComponent, _super);
+        function PopupMenuComponent(cdr) {
+            var _this = _super.call(this, cdr) || this;
+            _this.faceModel = new pectin.MutableValueModel();
+            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 faceAdapterModel = chain(_this.faceModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            _this.faceTooltipModel = faceAdapterModel.pluck('tooltip');
+            return _this;
+        }
+        PopupMenuComponent_1 = PopupMenuComponent;
+        PopupMenuComponent.prototype.getTooltip = function () {
+            return this.faceTooltipModel.value;
+        };
+        PopupMenuComponent.prototype.ngOnInit = function () {
+        };
+        var PopupMenuComponent_1;
+        PopupMenuComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], PopupMenuComponent.prototype, "face", void 0);
+        PopupMenuComponent = PopupMenuComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-popup-menu',
+                template: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"getTooltip()\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\" [yPosition]=\"yPosition\"\n                             [xPosition]=\"xPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
+                providers: [{ provide: CommandContainer, useExisting: core.forwardRef(function () { return PopupMenuComponent_1; }) }]
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], PopupMenuComponent);
+        return PopupMenuComponent;
+    }(AbstractPopupMenuComponent));
+
+    /**
+     *
+     */
+    var MoreMenuComponent = /** @class */ (function (_super) {
+        __extends(MoreMenuComponent, _super);
+        function MoreMenuComponent(cdr) {
+            var _this = _super.call(this, cdr) || this;
+            _this.xPosition = "before"; // this should be the default unless overriden by the user.
+            return _this;
+        }
+        MoreMenuComponent_1 = MoreMenuComponent;
+        var MoreMenuComponent_1;
+        MoreMenuComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], MoreMenuComponent.prototype, "tooltip", void 0);
+        MoreMenuComponent = MoreMenuComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-more-menu',
+                template: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"tooltip\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\"\n                             [xPosition]=\"xPosition\"\n                             [yPosition]=\"yPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
+                providers: [{ provide: CommandContainer, useExisting: core.forwardRef(function () { return MoreMenuComponent_1; }) }]
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], MoreMenuComponent);
+        return MoreMenuComponent;
+    }(AbstractPopupMenuComponent));
+
     var FocusContainerComponent = /** @class */ (function (_super) {
         __extends(FocusContainerComponent, _super);
         function FocusContainerComponent(focusManager) {
@@ -693,6 +1181,7 @@
         __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
@@ -743,7 +1232,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
             get: function () {
-                return this.inputModel.enabled;
+                return this.formValueModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -753,7 +1242,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: function () {
-                return this.inputModel.errorList;
+                return this.formValueModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -767,7 +1256,7 @@
         });
         Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
             get: function () {
-                return this.inputModel.focusContext;
+                return this.formValueModel.focusContext;
             },
             enumerable: true,
             configurable: true
@@ -786,6 +1275,13 @@
             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)
@@ -875,7 +1371,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.
              *
@@ -887,11 +1383,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).writeRight();
+            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));
@@ -911,9 +1457,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.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).writeRight();
+            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", [])
@@ -921,20 +1516,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)
@@ -946,7 +1606,7 @@
         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=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+                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", [])
@@ -954,20 +1614,65 @@
         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)
@@ -979,7 +1684,7 @@
         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 && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"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", [])
@@ -989,19 +1694,17 @@
 
     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=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"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", [])
@@ -1013,6 +1716,7 @@
      * 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) {
@@ -1024,10 +1728,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)
@@ -1059,7 +1759,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=\"showHint\">{{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", [])
@@ -1073,17 +1773,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)
@@ -1095,7 +1791,7 @@
         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=\"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",
+                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", [])
@@ -1107,16 +1803,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)
@@ -1128,7 +1822,7 @@
         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=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"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", [])
@@ -1136,6 +1830,59 @@
         return TextInputComponent;
     }(AbstractValueInputComponent));
 
+    exports.ɵbk = /** @class */ (function () {
+        function IconComponent() {
+            this.allowedPrefixes = typescriptStringEnums.Enum.values(IconComponent_1.IconPrefix).map(function (p) { return p + ":"; });
+            this.iconPrefix = IconComponent_1.IconPrefix;
+        }
+        IconComponent_1 = 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, expected one of [" + this.allowedPrefixes.join(',') + "] got \"" + this.prefix + ":\"";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        var IconComponent_1;
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], IconComponent.prototype, "icon", null);
+        IconComponent = IconComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-icon',
+                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\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;
+    }());
+    (function (IconComponent) {
+        IconComponent.IconPrefix = typescriptStringEnums.Enum({
+            SVG: 'svg',
+            FONT_AWESOME: 'fa',
+            MATERIAL: 'mat'
+        });
+    })(exports.ɵbk || (exports.ɵbk = {}));
+
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
         }
@@ -1346,6 +2093,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);
         };
@@ -1369,13 +2117,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;
@@ -1417,6 +2167,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;
@@ -1608,6 +2359,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;
@@ -1698,24 +2450,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.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, initialiseComponent) {
+        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) {
@@ -1740,8 +2534,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);
@@ -1788,10 +2582,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;
         };
@@ -1964,6 +2771,9 @@
             this._editorSessions = new pectin.MutableListModel();
             this.rowClassNamePredicates = [];
             this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
+            this.trackBy = function (index, item) {
+                return _this.identityOf ? _this.identityOf(item) : index;
+            };
             this.identityOf = sourceOfTruth.identityOf;
             var _a = pectin.Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             this._columnsById = chain(this._columns).indexBy('columnId');
@@ -1975,7 +2785,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) {
@@ -1990,12 +2800,6 @@
             enumerable: true,
             configurable: true
         });
-        TableModel.prototype.getTrackByFunction = function () {
-            var _this = this;
-            return function (index, item) {
-                return _this.identityOf ? _this.identityOf(item) : index;
-            };
-        };
         Object.defineProperty(TableModel.prototype, "columns", {
             get: function () {
                 return this._columns.readonly;
@@ -2003,11 +2807,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);
@@ -2021,6 +2825,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));
         };
@@ -2172,7 +2979,7 @@
         TableComponent = __decorate([
             core.Component({
                 selector: 'aup-table',
-                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"\n      [ngClass]=\"tableModel.getRowClasses(row)\"\n  ></tr>\n\n</table>\n",
+                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n      [ngClass]=\"tableModel.getRowClasses(row)\" [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n  ></tr>\n\n</table>\n",
                 styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
@@ -2355,6 +3162,65 @@
         return TableHeaderCellRendererComponent;
     }());
 
+    var MenuItemData = /** @class */ (function (_super) {
+        __extends(MenuItemData, _super);
+        function MenuItemData(factory, face) {
+            var _this = _super.call(this, face) || this;
+            _this.factory = factory;
+            return _this;
+        }
+        return MenuItemData;
+    }(exports.CommandFace.Adapter));
+    /**
+     *
+     */
+    var TableRowMenuComponent = /** @class */ (function (_super) {
+        __extends(TableRowMenuComponent, _super);
+        function TableRowMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.actions = [];
+            _this.moreActions = [];
+            return _this;
+        }
+        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
+            this.actions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
+            this.moreActions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.ngOnInit = function () {
+        };
+        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            var command = item.factory.create(value);
+            when(command.busy).becomesFalsey(function () {
+                _this.closeMoreMenu();
+            });
+            return command;
+        };
+        TableRowMenuComponent.prototype.closeMoreMenu = function () {
+            this.menu.closeMenu();
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TableRowMenuComponent.prototype, "value", void 0);
+        __decorate([
+            core.ViewChild(menu.MatMenuTrigger),
+            __metadata("design:type", menu.MatMenuTrigger)
+        ], TableRowMenuComponent.prototype, "menu", void 0);
+        TableRowMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-table-row-menu',
+                template: "\n    <button mat-icon-button *ngFor=\"let action of actions\" [pectinCommand]=\"action.factory.create(value)\">\n      <aup-icon [icon]=\"action.icon\"></aup-icon>\n    </button>\n    <ng-container *ngIf=\"moreActions.length > 0\">\n      <button #trigger mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <aup-icon icon=\"mat:more_vert\"></aup-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\" xPosition=\"before\" matTooltip=\"More options...\">\n        <button *ngFor=\"let action of moreActions\"\n                mat-menu-item\n                [pectinCommand]=\"createMoreMenuCommand(action, value)\"\n        >\n          <aup-icon *ngIf=\"action.icon && action.iconPositionStart\" [icon]=\"action.icon\"></aup-icon>\n          {{action.text}}\n          <aup-icon *ngIf=\"action.icon && action.iconPositionEnd\" [icon]=\"action.icon\"></aup-icon>\n        </button>\n      </mat-menu>\n    </ng-container>\n  ",
+                styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], TableRowMenuComponent);
+        return TableRowMenuComponent;
+    }(DisposableComponent));
+
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
         function VerticalFocusContainerComponent(focusManager) {
@@ -2440,100 +3306,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=\"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 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);
@@ -2552,6 +3324,8 @@
                     TextInputComponent,
                     PasswordInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     CheckboxInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
@@ -2571,9 +3345,16 @@
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
-                    MultipleSelectInputComponent,
-                    IconComponent,
-                    SectionHeaderComponent
+                    exports.ɵbk,
+                    SectionHeaderComponent,
+                    TableRowMenuComponent,
+                    CommandBarComponent,
+                    CommandComponent,
+                    PopupMenuComponent,
+                    CommandFaceComponent,
+                    AbstractPopupMenuComponent,
+                    PopupMenuRendererComponent,
+                    MoreMenuComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -2591,7 +3372,10 @@
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
                     angularFontawesome.FontAwesomeModule,
-                    tooltip.MatTooltipModule
+                    tooltip.MatTooltipModule,
+                    autocomplete.MatAutocompleteModule,
+                    menu._MatMenuDirectivesModule,
+                    menu.MatMenuModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -2600,6 +3384,8 @@
                     PasswordInputComponent,
                     CheckboxInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
                     SwitchCaseComponent,
@@ -2612,12 +3398,31 @@
                     TableComponent,
                     EditRowControls,
                     ColumnTemplateDirective,
-                    MultipleSelectInputComponent,
-                    IconComponent,
-                    SectionHeaderComponent
+                    exports.ɵbk,
+                    SectionHeaderComponent,
+                    TableRowMenuComponent,
+                    CommandBarComponent,
+                    CommandComponent,
+                    AbstractPopupMenuComponent,
+                    PopupMenuComponent,
+                    CommandFaceComponent,
+                    PopupMenuRendererComponent,
+                    MoreMenuComponent
                 ],
                 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])
@@ -2954,7 +3759,7 @@
             },
             set: function (activityRef) {
                 if (this.activityRef && !this.activityRef.isComplete()) {
-                    typescriptUtilities.lang.illegalState("changing activity before previous one has completed");
+                    typescriptUtilities.lang.illegalState('changing activity before previous one has completed');
                 }
                 this._activityRef = activityRef;
                 this.loadActivity(activityRef);
@@ -3019,6 +3824,11 @@
             _this.dynamicHeight = false;
             _this.activityTabs = [];
             _this.garbage = new pectin.GarbageCollector();
+            // We have issues where angular is triggering a leave animation when an
+            // activity is replaced by another, but is not running the enter animation
+            // when it is scrolled back into view.  So we track the tab changes and
+            // disable all animations inside the tab while we're animating.
+            _this.inTabChange = new pectin.MutableValueModel(false);
             return _this;
         }
         ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -3056,6 +3866,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.
@@ -3162,6 +3973,7 @@
                 this.onAnimationFinishedJob();
                 this.onAnimationFinishedJob = undefined;
             }
+            this.inTabChange.value = false;
         };
         /**
          * Synchronises the selected tab index.
@@ -3171,6 +3983,7 @@
             var previousIndex = this.tabs.selectedIndex;
             var newIndex = this.getActiveActivityCount() - 1;
             if (previousIndex !== newIndex) {
+                this.inTabChange.value = true;
                 this.tabs.selectedIndex = newIndex;
                 this.onAnimationFinishedJob = function () {
                     _this.getSelectedOutlet().component.onActivityReady();
@@ -3181,7 +3994,9 @@
         ActivityContainerComponent.prototype.getSelectedOutlet = function () {
             return this.activityOutlets.toArray()[this.tabs.selectedIndex];
         };
-        // @Trace()
+        ActivityContainerComponent.prototype.getSelectedTabIndex = function () {
+            return this.tabs.selectedIndex;
+        };
         ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
             var _this = this;
             if (this.syncSelectedTabTimeout) {
@@ -3209,11 +4024,29 @@
             __metadata("design:type", Function),
             __metadata("design:paramtypes", []),
             __metadata("design:returntype", void 0)
-        ], ActivityContainerComponent.prototype, "dispose", null);
+        ], ActivityContainerComponent.prototype, "onAnimationFinished", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ActivityContainerComponent.prototype, "synchroniseSelectedTabIndex", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ActivityContainerComponent.prototype, "getSelectedTabIndex", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ActivityContainerComponent.prototype, "triggerTabSynchronisation", null);
         ActivityContainerComponent = __decorate([
             core.Component({
                 selector: 'aup-activity-container',
-                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; let i = index; trackBy: activityIndex\" [@.disabled]=\"inTabChange.value\">\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
@@ -3258,7 +4091,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbv = /** @class */ (function () {
+    exports.ɵcf = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3403,7 +4236,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbv || (exports.ɵbv = {}));
+    })(exports.ɵcf || (exports.ɵcf = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3461,7 +4294,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbv },
+            { type: exports.ɵcf },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3479,7 +4312,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.ɵcf, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -4018,7 +4851,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbv
+                    exports.ɵcf
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -4293,7 +5126,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);
@@ -5140,7 +5973,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵby = /** @class */ (function () {
+    exports.ɵci = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5277,7 +6110,7 @@
         //   }
         //
         // }
-    })(exports.ɵby || (exports.ɵby = {}));
+    })(exports.ɵci || (exports.ɵci = {}));
 
     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.
@@ -5441,75 +6274,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) {
@@ -5705,6 +6469,7 @@
             enumerable: true,
             configurable: true
         });
+        // @Trace()
         PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -5800,30 +6565,93 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbv },
+            { type: exports.ɵcf },
             { type: UrlService },
-            { type: exports.ɵby }
+            { type: exports.ɵci }
         ]; };
-        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.ɵcf), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵci)); }, token: PlaceRouter, providedIn: "root" });
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbv,
+                exports.ɵcf,
                 UrlService,
-                exports.ɵby])
+                exports.ɵci])
         ], 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.
@@ -6838,8 +7666,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;
@@ -6901,6 +7728,7 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
+    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
@@ -6910,6 +7738,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;
@@ -6921,7 +7750,11 @@
     exports.CheckboxInputComponent = CheckboxInputComponent;
     exports.ColumnModel = ColumnModel;
     exports.ColumnTemplateDirective = ColumnTemplateDirective;
+    exports.CommandBarComponent = CommandBarComponent;
+    exports.CommandComponent = CommandComponent;
+    exports.CommandContainer = CommandContainer;
     exports.CommandDirective = CommandDirective;
+    exports.CommandFaceComponent = CommandFaceComponent;
     exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
@@ -6949,16 +7782,17 @@
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
-    exports.IconComponent = IconComponent;
+    exports.IconComponent = exports.ɵbk;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbv;
+    exports.InteractionService = exports.ɵcf;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
+    exports.MoreMenuComponent = MoreMenuComponent;
     exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
     exports.Navigating = Navigating;
     exports.NavigatingDuringInteraction = NavigatingDuringInteraction;
@@ -6973,7 +7807,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵby;
+    exports.PlaceHistory = exports.ɵci;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -6981,6 +7815,8 @@
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
+    exports.PopupMenuComponent = PopupMenuComponent;
+    exports.PopupMenuRendererComponent = PopupMenuRendererComponent;
     exports.PropertyColumnModel = PropertyColumnModel;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.RemoveLastInteractionFromUrlNavigationSession = RemoveLastInteractionFromUrlNavigationSession;
@@ -7006,6 +7842,7 @@
     exports.TableComponent = TableComponent;
     exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
     exports.TableModel = TableModel;
+    exports.TableRowMenuComponent = TableRowMenuComponent;
     exports.TemplateCellRendererPortalRef = TemplateCellRendererPortalRef;
     exports.TextInputComponent = TextInputComponent;
     exports.UrlService = UrlService;
@@ -7023,51 +7860,60 @@
     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.ɵbl = SectionHeaderComponent;
+    exports.ɵbm = TableRowMenuComponent;
+    exports.ɵbn = CommandBarComponent;
+    exports.ɵbo = CommandContainer;
+    exports.ɵbp = CommandComponent;
+    exports.ɵbq = PopupMenuComponent;
+    exports.ɵbr = AbstractPopupMenuComponent;
+    exports.ɵbs = PopupMenuRendererComponent;
+    exports.ɵbt = CommandFaceComponent;
+    exports.ɵbu = MoreMenuComponent;
+    exports.ɵbv = PlaceModule;
+    exports.ɵbw = ComponentsModule;
+    exports.ɵbx = EmptyStateComponent;
+    exports.ɵby = BusyOverlayComponent;
+    exports.ɵbz = PlaceOutletComponent;
     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 = leftRightPlaceAnimation;
+    exports.ɵcb = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵcc = AUP_PLACE_CONFIG;
+    exports.ɵce = PlaceRouter;
+    exports.ɵcg = ModalInteractionContextFactory;
+    exports.ɵch = UrlService;
+    exports.ɵcj = TabbedPlaceNavigationComponent;
+    exports.ɵck = AbstractPlaceNavigationComponent;
+    exports.ɵcl = ListPlaceNavComponent;
+    exports.ɵcm = SidePlaceNavigationComponent;
+    exports.ɵcn = InteractionModule;
+    exports.ɵco = ActivityContainerComponent;
+    exports.ɵcp = AbstractInteractionContext;
+    exports.ɵcq = ActivityOutletComponent;
+    exports.ɵcr = ConfirmationDialogComponent;
+    exports.ɵcs = ACTIVITY_DATA;
+    exports.ɵct = Activity;
+    exports.ɵcv = ConfirmThenDialogComponent;
+    exports.ɵcw = AlertDialogComponent;
+    exports.ɵcy = InPlaceInteractionContextComponent;
+    exports.ɵcz = AddItemInteractionContextComponent;
     exports.ɵd = DisposableComponent;
+    exports.ɵda = ActivityActionsComponent;
+    exports.ɵdb = PopupInteractionContextComponent;
+    exports.ɵdc = StringInputActivity;
+    exports.ɵdd = AbstractInputActivity;
+    exports.ɵde = SelectInputActivity;
+    exports.ɵdf = InteractionContextTriggerFor;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
     exports.ɵg = AbstractInputComponent;
@@ -7078,18 +7924,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 });