@coolon/angular-ui-powerups 2.0.0-alpha.37 → 2.0.0-alpha.4

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __assign, __awaiter, __generator, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, EventEmitter, Optional, SkipSelf, ViewChild, Output, ViewChildren, QueryList, HostBinding, ViewEncapsulation, Self, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -9,29 +9,25 @@ import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/t
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenu, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, Trace, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, StoreInListModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, Form, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
-import { Enum } from 'typescript-string-enums';
-import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import produce from 'immer';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
-import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatListModule } from '@angular/material/list';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
@@ -410,1110 +406,121 @@ var CardContainerComponent = /** @class */ (function (_super) {
         Component({
             selector: 'aup-card-container',
             template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <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;--aup-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}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.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}"]
+            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
         }),
         __metadata("design:paramtypes", [])
     ], CardContainerComponent);
     return CardContainerComponent;
 }(DisposableComponent));
 
-var TrackBy;
-(function (TrackBy) {
-    TrackBy.byIndex = function (data, index) { return index; };
-})(TrackBy || (TrackBy = {}));
-
-var CommandFace;
-(function (CommandFace) {
-    var Position;
-    (function (Position) {
-        Position["START"] = "start";
-        Position["END"] = "end";
-    })(Position = CommandFace.Position || (CommandFace.Position = {}));
-    CommandFace.Style = Enum({
-        FLAT: 'flat',
-        STROKED: 'stroked',
-        RAISED: 'raised'
-    });
-    function getColorOf(face) {
-        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
-    }
-    CommandFace.getColorOf = getColorOf;
-    function getStyleOf(face) {
-        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
-    }
-    CommandFace.getStyleOf = getStyleOf;
-    function getIconOf(face) {
-        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
-    }
-    CommandFace.getIconOf = getIconOf;
-    function getTooltipOf(face) {
-        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
-    }
-    CommandFace.getTooltipOf = getTooltipOf;
-    function getTextOf(face) {
-        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
-    }
-    CommandFace.getTextOf = getTextOf;
-    var Adapter = /** @class */ (function () {
-        function Adapter(face) {
-            this.face = face;
-        }
-        Object.defineProperty(Adapter.prototype, "text", {
-            get: function () {
-                return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(Adapter.prototype, "icon", {
-            get: function () {
-                return CommandFace.getIconOf(this.face);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(Adapter.prototype, "iconPosition", {
-            get: function () {
-                return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(Adapter.prototype, "tooltip", {
-            get: function () {
-                return ___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, "color", {
-            get: function () {
-                return CommandFace.getColorOf(this.face);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(Adapter.prototype, "style", {
-            get: function () {
-                return CommandFace.getStyleOf(this.face);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "text", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "icon", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "iconPosition", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "tooltip", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Boolean),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "iconPositionStart", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Boolean),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "iconPositionEnd", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "color", null);
-        __decorate([
-            Memoize(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "style", null);
-        return Adapter;
-    }());
-    CommandFace.Adapter = Adapter;
-})(CommandFace || (CommandFace = {}));
-
-var ViewData = /** @class */ (function () {
-    function ViewData() {
-    }
-    return ViewData;
-}());
-(function (ViewData) {
-    var FaceData = /** @class */ (function (_super) {
-        __extends(FaceData, _super);
-        function FaceData(face) {
-            var _this = _super.call(this) || this;
-            _this.faceAdapter = new CommandFace.Adapter(face);
-            return _this;
-        }
-        return FaceData;
-    }(ViewData));
-    ViewData.FaceData = FaceData;
-    var GroupData = /** @class */ (function (_super) {
-        __extends(GroupData, _super);
-        function GroupData(face, xPosition, yPosition, children) {
-            var _this = _super.call(this, face) || this;
-            _this.xPosition = xPosition;
-            _this.yPosition = yPosition;
-            _this.children = children;
-            return _this;
-        }
-        Object.defineProperty(GroupData.prototype, "hasMixedIcons", {
-            get: function () {
-                var hasFaces = this.children.filter(function (c) { return ViewData.hasFace(c); });
-                var iconCount = hasFaces.filter(function (c) { return !!c.faceAdapter.icon; }).length;
-                return iconCount > 0 && hasFaces.length !== iconCount;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            Memoize(),
-            __metadata("design:type", Boolean),
-            __metadata("design:paramtypes", [])
-        ], GroupData.prototype, "hasMixedIcons", null);
-        return GroupData;
-    }(FaceData));
-    ViewData.GroupData = GroupData;
-    var CommandData = /** @class */ (function (_super) {
-        __extends(CommandData, _super);
-        function CommandData(face, command) {
-            var _this = _super.call(this, face) || this;
-            _this.command = command;
-            return _this;
-        }
-        return CommandData;
-    }(FaceData));
-    ViewData.CommandData = CommandData;
-    var SeparatorData = /** @class */ (function (_super) {
-        __extends(SeparatorData, _super);
-        function SeparatorData() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SeparatorData;
-    }(ViewData));
-    ViewData.SeparatorData = SeparatorData;
-    var FlexData = /** @class */ (function (_super) {
-        __extends(FlexData, _super);
-        function FlexData() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return FlexData;
-    }(ViewData));
-    ViewData.FlexData = FlexData;
-    function as(type, viewData) {
-        return viewData instanceof type ? viewData : lang.illegalState("expected instance of " + type.name + ", got " + viewData.constructor.name);
-    }
-    ViewData.as = as;
-    function getCommand(data) {
-        return as(CommandData, data).command;
-    }
-    ViewData.getCommand = getCommand;
-    function getTooltip(data) {
-        return as(FaceData, data).faceAdapter.tooltip;
-    }
-    ViewData.getTooltip = getTooltip;
-    function getStyle(data) {
-        return as(FaceData, data).faceAdapter.style;
-    }
-    ViewData.getStyle = getStyle;
-    function getColor(data) {
-        return as(FaceData, data).faceAdapter.color;
-    }
-    ViewData.getColor = getColor;
-    function hasText(data) {
-        return !!as(FaceData, data).faceAdapter.text;
-    }
-    ViewData.hasText = hasText;
-    function getFace(data) {
-        return as(FaceData, data).faceAdapter.face;
-    }
-    ViewData.getFace = getFace;
-    function asGroup(viewData) {
-        return as(GroupData, viewData);
-    }
-    ViewData.asGroup = asGroup;
-    function hasMixedIcons(data) {
-        return as(GroupData, data).hasMixedIcons;
-    }
-    ViewData.hasMixedIcons = hasMixedIcons;
-    function isGroup(data) {
-        return data instanceof GroupData;
-    }
-    ViewData.isGroup = isGroup;
-    function hasFace(data) {
-        return data instanceof FaceData;
-    }
-    ViewData.hasFace = hasFace;
-    function isCommand(data) {
-        return data instanceof CommandData;
-    }
-    ViewData.isCommand = isCommand;
-    function isSeparator(data) {
-        return data instanceof SeparatorData;
-    }
-    ViewData.isSeparator = isSeparator;
-    function isFlex(data) {
-        return data instanceof FlexData;
-    }
-    ViewData.isFlex = isFlex;
-})(ViewData || (ViewData = {}));
-
-var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
-    __extends(CommandGroupMenuRendererComponent, _super);
-    function CommandGroupMenuRendererComponent(parent) {
+var FocusContainerComponent = /** @class */ (function (_super) {
+    __extends(FocusContainerComponent, _super);
+    function FocusContainerComponent(focusManager) {
         var _this = _super.call(this) || this;
-        _this.parent = parent;
-        _this.groupViewDataModel = new MutableValueModel();
-        _this.commandFired = new EventEmitter();
-        _this.ViewData = ViewData;
-        _this.TrackBy = TrackBy;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.children = chain(_this.groupViewDataModel).pluckList('children');
-        _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
+        _this.focusManager = focusManager;
+        _this.restoreFocusCommand = Command.create(function () {
+            _this.restoreFocus();
+        });
+        _this.tabIndex = -1;
         return _this;
     }
-    CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
-        var _this = this;
-        var command = ViewData.getCommand(data);
-        var when = Dsl.disposeWith(this).when;
-        when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
-        return command;
+    FocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    // @Trace()
+    FocusContainerComponent.prototype.restoreFocus = function () {
+        this.focusManager.restoreFocus();
     };
-    CommandGroupMenuRendererComponent.ctorParameters = function () { return [
-        { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+    FocusContainerComponent.ctorParameters = function () { return [
+        { type: FocusManager, decorators: [{ type: Self }] }
     ]; };
     __decorate([
-        ViewChild('menu', { static: true }),
-        __metadata("design:type", MatMenu)
-    ], CommandGroupMenuRendererComponent.prototype, "menuComponent", void 0);
-    __decorate([
-        Input(), StoreInValueModel('groupViewDataModel'),
-        __metadata("design:type", ViewData.GroupData)
-    ], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
-    __decorate([
-        Output(),
+        HostBinding('attr.tabindex'),
         __metadata("design:type", Object)
-    ], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
-    __decorate([
-        ViewChildren(MatMenuTrigger),
-        __metadata("design:type", QueryList)
-    ], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
-    CommandGroupMenuRendererComponent = __decorate([
+    ], FocusContainerComponent.prototype, "tabIndex", void 0);
+    FocusContainerComponent = __decorate([
         Component({
-            selector: 'aup-command-group-menu',
-            template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
+            selector: 'aup-focus-container',
+            template: "<ng-content></ng-content>\n",
+            providers: [
+                { provide: FocusManager }
+            ],
+            styles: [":host{display:block}"]
         }),
-        __param(0, Optional()), __param(0, SkipSelf()),
-        __metadata("design:paramtypes", [CommandGroupMenuRendererComponent])
-    ], CommandGroupMenuRendererComponent);
-    return CommandGroupMenuRendererComponent;
+        __param(0, Self()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], FocusContainerComponent);
+    return FocusContainerComponent;
 }(DisposableComponent));
 
-var CommandGroupRendererComponent = /** @class */ (function (_super) {
-    __extends(CommandGroupRendererComponent, _super);
-    function CommandGroupRendererComponent() {
+var FocusableComponent = /** @class */ (function (_super) {
+    __extends(FocusableComponent, _super);
+    function FocusableComponent(el, focusManager, focusBindingFactory) {
         var _this = _super.call(this) || this;
-        _this.renderRootNode = true;
-        _this.ViewData = ViewData;
-        _this.TrackBy = TrackBy;
+        _this.el = el;
+        _this.focusManager = focusManager;
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.childViewDataModels = chain(_this.groupViewDataModel).pluckList('children');
-        return _this;
-    }
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('groupViewDataModel'),
-        __metadata("design:type", ViewData.GroupData)
-    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
-    __decorate([
-        Input(),
-        HostBinding('class.render-root'),
-        __metadata("design:type", Object)
-    ], CommandGroupRendererComponent.prototype, "renderRootNode", void 0);
-    CommandGroupRendererComponent = __decorate([
-        Component({
-            selector: 'aup-command-group-renderer',
-            template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
-            styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], CommandGroupRendererComponent);
-    return CommandGroupRendererComponent;
-}(DisposableComponent));
-
-var Registration = /** @class */ (function (_super) {
-    __extends(Registration, _super);
-    function Registration() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return Registration;
-}(GarbageCollector));
-(function (Registration) {
-    var FaceRegistration = /** @class */ (function (_super) {
-        __extends(FaceRegistration, _super);
-        function FaceRegistration(faceModel) {
-            var _this = _super.call(this) || this;
-            _this.faceModel = faceModel;
-            return _this;
-        }
-        return FaceRegistration;
-    }(Registration));
-    Registration.FaceRegistration = FaceRegistration;
-    var CommandRegistration = /** @class */ (function (_super) {
-        __extends(CommandRegistration, _super);
-        function CommandRegistration(faceModel, command) {
-            var _this = _super.call(this, faceModel) || this;
-            _this.command = command;
-            return _this;
-        }
-        CommandRegistration.prototype.toTemplate = function () {
-            return new ViewData.CommandData(this.faceModel.value, this.command);
-        };
-        return CommandRegistration;
-    }(FaceRegistration));
-    Registration.CommandRegistration = CommandRegistration;
-    var GroupRegistration = /** @class */ (function (_super) {
-        __extends(GroupRegistration, _super);
-        function GroupRegistration(faceModel, group) {
-            var _this = _super.call(this, faceModel) || this;
-            _this.group = group;
-            return _this;
-        }
-        GroupRegistration.prototype.toTemplate = function () {
-            return new ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
-        };
-        return GroupRegistration;
-    }(FaceRegistration));
-    Registration.GroupRegistration = GroupRegistration;
-    var SeparatorRegistration = /** @class */ (function (_super) {
-        __extends(SeparatorRegistration, _super);
-        function SeparatorRegistration() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.template = new ViewData.SeparatorData();
-            return _this;
-        }
-        SeparatorRegistration.prototype.toTemplate = function () {
-            return this.template;
-        };
-        return SeparatorRegistration;
-    }(Registration));
-    Registration.SeparatorRegistration = SeparatorRegistration;
-    var FlexRegistration = /** @class */ (function (_super) {
-        __extends(FlexRegistration, _super);
-        function FlexRegistration() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.template = new ViewData.FlexData();
-            return _this;
+        if (_this.focusManager) {
+            _this._focusContext = _this.focusManager.registerFocusable(_this);
+            _this.registerDisposable(_this._focusContext);
+            _this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, _this.focusContext));
         }
-        FlexRegistration.prototype.toTemplate = function () {
-            return this.template;
-        };
-        return FlexRegistration;
-    }(Registration));
-    Registration.FlexRegistration = FlexRegistration;
-    function hasFace(entry) {
-        return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
-    }
-    Registration.hasFace = hasFace;
-})(Registration || (Registration = {}));
-
-var CommandGroup = /** @class */ (function (_super) {
-    __extends(CommandGroup, _super);
-    function CommandGroup(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        _this._rootTemplate = new MutableValueModel();
-        _this._registrations = new MutableListModel();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.childTemplates = chain(_this._rootTemplate).pluckList('children');
-        _this.initialised = chain(_this._rootTemplate).isNotNil();
         return _this;
     }
-    CommandGroup.prototype.initialise = function () {
-        this.rebuildTemplates();
-    };
-    Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
-        get: function () {
-            return this._rootTemplate.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CommandGroup.prototype, "registrations", {
+    Object.defineProperty(FocusableComponent.prototype, "focusable", {
         get: function () {
-            return this._registrations.readonly;
+            return !!this.focusContext ? 0 : undefined;
         },
         enumerable: true,
         configurable: true
     });
-    CommandGroup.prototype.notifyChanged = function () {
-        if (this.parent) {
-            this.parent.notifyChanged();
-        }
-        else {
-            this.rebuildTemplates();
-        }
-    };
-    CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
-        this.notifyChanged();
+    FocusableComponent.prototype.onFocus = function () {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
     };
-    CommandGroup.prototype.rebuildTemplates = function () {
-        this._rootTemplate.value = new ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+    FocusableComponent.prototype.onBlur = function () {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
     };
-    Object.defineProperty(CommandGroup.prototype, "depth", {
+    Object.defineProperty(FocusableComponent.prototype, "focusContext", {
         get: function () {
-            return this.isRoot() ? 0 : this.parent.depth + 1;
+            return this._focusContext;
         },
         enumerable: true,
         configurable: true
     });
-    CommandGroup.prototype.isRoot = function () {
-        return false;
-    };
-    CommandGroup.prototype.registerCommand = function (command, faceModel) {
-        return this.register(new Registration.CommandRegistration(faceModel, command));
-    };
-    CommandGroup.prototype.registerGroup = function (group, faceModel) {
-        return this.register(new Registration.GroupRegistration(faceModel, group));
-    };
-    CommandGroup.prototype.registerFlex = function (component) {
-        return this.register(new Registration.FlexRegistration());
-    };
-    CommandGroup.prototype.registerSeparator = function (component) {
-        return this.register(new Registration.SeparatorRegistration());
-    };
-    CommandGroup.prototype.register = function (registration) {
-        var _this = this;
-        this._registrations.push(registration);
-        if (registration instanceof Registration.FaceRegistration) {
-            var when = Dsl.disposeWith(registration).when;
-            when(registration.faceModel).changes(function (is, was) {
-                _this.notifyChildFaceChanged(is, was);
-            }, { asLongAs: this.initialised });
-        }
-        registration.onDispose(function () { return _this._registrations.remove(registration); });
-        return registration;
-    };
-    return CommandGroup;
-}(GarbageCollector));
-(function (CommandGroup) {
-    var Root = /** @class */ (function (_super) {
-        __extends(Root, _super);
-        function Root() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Root.prototype.isRoot = function () {
-            return true;
-        };
-        __decorate([
-            TrackExternal(),
-            __metadata("design:type", ValueModel)
-        ], Root.prototype, "faceModel", void 0);
-        __decorate([
-            TrackExternal({ defaultValue: 'after' }),
-            __metadata("design:type", ValueModel)
-        ], Root.prototype, "xPositionModel", void 0);
-        __decorate([
-            StoreInValueModel('xPositionModel'),
-            __metadata("design:type", String)
-        ], Root.prototype, "xPosition", void 0);
-        __decorate([
-            TrackExternal({ defaultValue: 'below' }),
-            __metadata("design:type", ValueModel)
-        ], Root.prototype, "yPositionModel", void 0);
-        __decorate([
-            StoreInValueModel('yPositionModel'),
-            __metadata("design:type", String)
-        ], Root.prototype, "yPosition", void 0);
-        return Root;
-    }(CommandGroup));
-    CommandGroup.Root = Root;
-    function factory() {
-        return new Root();
-    }
-    CommandGroup.factory = factory;
-})(CommandGroup || (CommandGroup = {}));
-
-var CommandGroupComponent = /** @class */ (function (_super) {
-    __extends(CommandGroupComponent, _super);
-    function CommandGroupComponent(parent) {
-        var _this = _super.call(this, parent) || this;
-        _this.parent = parent;
-        _this.xPosition = 'after';
-        _this.yPosition = 'below';
-        _this.parent.registerGroup(_this, _this.faceModel);
-        return _this;
-    }
-    CommandGroupComponent_1 = CommandGroupComponent;
-    var CommandGroupComponent_1;
-    CommandGroupComponent.ctorParameters = function () { return [
-        { type: CommandGroup, decorators: [{ type: SkipSelf }] }
+    FocusableComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: FocusManager },
+        { type: FocusBindingFactory }
     ]; };
     __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], CommandGroupComponent.prototype, "faceModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandGroupComponent.prototype, "face", void 0);
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], FocusableComponent.prototype, "focusable", null);
     __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], CommandGroupComponent.prototype, "xPosition", void 0);
+        HostListener('focus'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onFocus", null);
     __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], CommandGroupComponent.prototype, "yPosition", void 0);
-    CommandGroupComponent = CommandGroupComponent_1 = __decorate([
-        Component({
-            selector: 'aup-command-group',
-            template: '',
-            providers: [
-                { provide: CommandGroup, useExisting: CommandGroupComponent_1 }
-            ]
-        }),
-        __param(0, SkipSelf()),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], CommandGroupComponent);
-    return CommandGroupComponent;
-}(CommandGroup));
+        HostListener('blur'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onBlur", null);
+    FocusableComponent = __decorate([
+        Component({ template: '' }),
+        __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBindingFactory])
+    ], FocusableComponent);
+    return FocusableComponent;
+}(DisposableComponent));
 
-/**
- * Custom CSS:
- * @example
- * root: { // globally
- *   --aup-command-face-icon-gap: 8px;
- * }
- * aup-command-face { // per instance
- *   --icon-gap: 4px;
- * }
- */
-var CommandFaceComponent = /** @class */ (function (_super) {
-    __extends(CommandFaceComponent, _super);
-    function CommandFaceComponent() {
+var AbstractInputComponent = /** @class */ (function (_super) {
+    __extends(AbstractInputComponent, _super);
+    function AbstractInputComponent() {
         var _this = _super.call(this) || this;
-        _this.faceModel = new MutableValueModel();
-        _this.ignoreIcon = false;
-        _this.ignoreText = false;
-        _this.includeMissingIconInLayout = false;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        // overkill /c: when all you have is a hammer...
-        var faceAdapter = chain(_this.faceModel).map(function (face) { return new CommandFace.Adapter(face); });
-        _this.iconModel = faceAdapter.pluck('icon');
-        _this.textModel = faceAdapter.pluck('text');
-        _this.positionModel = faceAdapter.pluck('iconPosition');
-        _this.colorModel = faceAdapter.pluck('color');
-        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;
-            return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : 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 === CommandFace.Position.START;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
-        get: function () {
-            return this.shouldIncludeIcon && this.iconPosition === 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, "color", {
-        get: function () {
-            return this.colorModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input('face'), StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandFaceComponent.prototype, "_rawFace", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], CommandFaceComponent.prototype, "ignoreIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], CommandFaceComponent.prototype, "ignoreText", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
-    __decorate([
-        HostBinding('class.hide-icon'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
-    __decorate([
-        HostBinding('attr.color'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], CommandFaceComponent.prototype, "color", null);
-    CommandFaceComponent = __decorate([
-        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: ViewEncapsulation.None,
-            styles: ["aup-command-face{--icon-gap:var(--aup-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}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], CommandFaceComponent);
-    return CommandFaceComponent;
-}(DisposableComponent));
-
-/**
- *
- */
-var CommandComponent = /** @class */ (function (_super) {
-    __extends(CommandComponent, _super);
-    function CommandComponent(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        _this.CommandFace = CommandFace;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
-        _this.activeFaceModel = switchOn(_this.command.busy).toValue(function (when) {
-            when.equalTo(true, _this.busyFaceModel);
-            when.otherwise(_this.faceModel);
-        }).otherwise(_this.faceModel);
-        _this.buttonStyle = chain(_this.activeFaceModel).map(function (f) { return CommandFace.getStyleOf(f); });
-        _this.colorModel = chain(_this.activeFaceModel).map(function (f) { return CommandFace.getColorOf(f); });
-        if (parent) {
-            _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.activeFaceModel));
-        }
-        return _this;
-    }
-    CommandComponent.prototype.ngOnInit = function () {
-    };
-    CommandComponent.ctorParameters = function () { return [
-        { type: CommandGroup, decorators: [{ type: Optional }] }
-    ]; };
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", Command)
-    ], CommandComponent.prototype, "command", void 0);
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], CommandComponent.prototype, "faceModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandComponent.prototype, "face", void 0);
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], CommandComponent.prototype, "busyFaceModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('busyFaceModel'),
-        __metadata("design:type", Object)
-    ], CommandComponent.prototype, "busyFace", void 0);
-    CommandComponent = __decorate([
-        Component({
-            selector: 'aup-command',
-            template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], CommandComponent);
-    return CommandComponent;
-}(DisposableComponent));
-
-/**
- *
- */
-var FlexComponent = /** @class */ (function (_super) {
-    __extends(FlexComponent, _super);
-    function FlexComponent(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        if (parent) {
-            parent.registerFlex(_this);
-        }
-        return _this;
-    }
-    FlexComponent.prototype.ngOnInit = function () {
-    };
-    FlexComponent.ctorParameters = function () { return [
-        { type: CommandGroup }
-    ]; };
-    FlexComponent = __decorate([
-        Component({
-            selector: 'aup-flex',
-            template: ""
-        }),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], FlexComponent);
-    return FlexComponent;
-}(DisposableComponent));
-
-var ɵ0 = CommandGroup.factory;
-/**
- *
- */
-var MoreMenuComponent = /** @class */ (function (_super) {
-    __extends(MoreMenuComponent, _super);
-    function MoreMenuComponent(group) {
-        var _this = _super.call(this) || this;
-        _this.group = group;
-        _this.tooltipModel = new MutableValueModel();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        group.xPosition = 'before'; // this should be the default unless overridden by the user.
-        group.faceModel = chain(_this.tooltipModel).map(function (tooltip) {
-            return {
-                icon: function () { return 'mat:more_vert'; },
-                tooltip: function () {
-                    return tooltip;
-                }
-            };
-        }, { allowNil: true });
-        return _this;
-    }
-    MoreMenuComponent.prototype.ngOnInit = function () {
-    };
-    MoreMenuComponent.prototype.ngAfterContentInit = function () {
-        this.group.initialise();
-    };
-    MoreMenuComponent.ctorParameters = function () { return [
-        { type: CommandGroup }
-    ]; };
-    __decorate([
-        Input(), StoreInValueModel('tooltipModel'),
-        __metadata("design:type", String)
-    ], MoreMenuComponent.prototype, "tooltip", void 0);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], MoreMenuComponent.prototype, "ngAfterContentInit", null);
-    MoreMenuComponent = __decorate([
-        Component({
-            selector: 'aup-more-menu',
-            template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-            providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
-        }),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], MoreMenuComponent);
-    return MoreMenuComponent;
-}(DisposableComponent));
-
-var ɵ0$1 = CommandGroup.factory;
-/**
- *
- */
-var PopupMenuComponent = /** @class */ (function (_super) {
-    __extends(PopupMenuComponent, _super);
-    function PopupMenuComponent(group) {
-        var _this = _super.call(this) || this;
-        _this.group = group;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        group.faceModel = _this.faceModel;
-        return _this;
-    }
-    PopupMenuComponent.prototype.ngOnInit = function () {
-    };
-    PopupMenuComponent.prototype.ngAfterContentInit = function () {
-        this.group.initialise();
-    };
-    PopupMenuComponent.prototype.ngAfterViewInit = function () {
-    };
-    PopupMenuComponent.ctorParameters = function () { return [
-        { type: CommandGroup }
-    ]; };
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], PopupMenuComponent.prototype, "faceModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], PopupMenuComponent.prototype, "face", void 0);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], PopupMenuComponent.prototype, "ngOnInit", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], PopupMenuComponent.prototype, "ngAfterContentInit", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], PopupMenuComponent.prototype, "ngAfterViewInit", null);
-    PopupMenuComponent = __decorate([
-        Component({
-            selector: 'aup-popup-menu',
-            template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-            providers: [{ provide: CommandGroup, useFactory: ɵ0$1 }]
-        }),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], PopupMenuComponent);
-    return PopupMenuComponent;
-}(DisposableComponent));
-
-/**
- *
- */
-var SeparatorComponent = /** @class */ (function (_super) {
-    __extends(SeparatorComponent, _super);
-    function SeparatorComponent(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        if (parent) {
-            parent.registerSeparator(_this);
-        }
-        return _this;
-    }
-    SeparatorComponent.prototype.isVertical = function () {
-        return this === null || this === void 0 ? void 0 : this.parent.isRoot();
-    };
-    SeparatorComponent.prototype.ngOnInit = function () {
-    };
-    SeparatorComponent.ctorParameters = function () { return [
-        { type: CommandGroup, decorators: [{ type: Optional }] }
-    ]; };
-    SeparatorComponent = __decorate([
-        Component({
-            selector: 'aup-separator',
-            template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], SeparatorComponent);
-    return SeparatorComponent;
-}(DisposableComponent));
-
-var ɵ0$2 = CommandGroup.factory;
-/**
- *
- */
-var ToolBarComponent = /** @class */ (function (_super) {
-    __extends(ToolBarComponent, _super);
-    function ToolBarComponent(group) {
-        var _this = _super.call(this) || this;
-        _this.group = group;
-        return _this;
-    }
-    ToolBarComponent.prototype.ngOnInit = function () {
-    };
-    ToolBarComponent.prototype.ngAfterContentInit = function () {
-        this.group.initialise();
-    };
-    ToolBarComponent.prototype.ngAfterViewInit = function () {
-    };
-    ToolBarComponent.ctorParameters = function () { return [
-        { type: CommandGroup }
-    ]; };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ToolBarComponent.prototype, "ngOnInit", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ToolBarComponent.prototype, "ngAfterContentInit", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ToolBarComponent.prototype, "ngAfterViewInit", null);
-    ToolBarComponent = __decorate([
-        Component({
-            selector: 'aup-tool-bar',
-            template: '<aup-command-group-renderer [renderRootNode]="false" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-            providers: [{ provide: CommandGroup, useFactory: ɵ0$2 }],
-            styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host span.flex{flex:1}:host>*+*{margin-left:8px}"]
-        }),
-        __metadata("design:paramtypes", [CommandGroup])
-    ], ToolBarComponent);
-    return ToolBarComponent;
-}(DisposableComponent));
-
-var FocusContainerComponent = /** @class */ (function (_super) {
-    __extends(FocusContainerComponent, _super);
-    function FocusContainerComponent(focusManager) {
-        var _this = _super.call(this) || this;
-        _this.focusManager = focusManager;
-        _this.restoreFocusCommand = Command.create(function () {
-            _this.restoreFocus();
-        });
-        _this.tabIndex = -1;
-        return _this;
-    }
-    FocusContainerComponent.prototype.ngOnInit = function () {
-    };
-    // @Trace()
-    FocusContainerComponent.prototype.restoreFocus = function () {
-        this.focusManager.restoreFocus();
-    };
-    FocusContainerComponent.ctorParameters = function () { return [
-        { type: FocusManager, decorators: [{ type: Self }] }
-    ]; };
-    __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Object)
-    ], FocusContainerComponent.prototype, "tabIndex", void 0);
-    FocusContainerComponent = __decorate([
-        Component({
-            selector: 'aup-focus-container',
-            template: "<ng-content></ng-content>\n",
-            providers: [
-                { provide: FocusManager }
-            ],
-            styles: [":host{display:block}"]
-        }),
-        __param(0, Self()),
-        __metadata("design:paramtypes", [FocusManager])
-    ], FocusContainerComponent);
-    return FocusContainerComponent;
-}(DisposableComponent));
-
-var FocusableComponent = /** @class */ (function (_super) {
-    __extends(FocusableComponent, _super);
-    function FocusableComponent(el, focusManager, focusBindingFactory) {
-        var _this = _super.call(this) || this;
-        _this.el = el;
-        _this.focusManager = focusManager;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        if (_this.focusManager) {
-            _this._focusContext = _this.focusManager.registerFocusable(_this);
-            _this.registerDisposable(_this._focusContext);
-            _this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, _this.focusContext));
-        }
-        return _this;
-    }
-    Object.defineProperty(FocusableComponent.prototype, "focusable", {
-        get: function () {
-            return !!this.focusContext ? 0 : undefined;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FocusableComponent.prototype.onFocus = function () {
-        var _a;
-        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
-    };
-    FocusableComponent.prototype.onBlur = function () {
-        var _a;
-        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
-    };
-    Object.defineProperty(FocusableComponent.prototype, "focusContext", {
-        get: function () {
-            return this._focusContext;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FocusableComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: FocusManager },
-        { type: FocusBindingFactory }
-    ]; };
-    __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], FocusableComponent.prototype, "focusable", null);
-    __decorate([
-        HostListener('focus'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FocusableComponent.prototype, "onFocus", null);
-    __decorate([
-        HostListener('blur'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FocusableComponent.prototype, "onBlur", null);
-    FocusableComponent = __decorate([
-        Component({ template: '' }),
-        __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBindingFactory])
-    ], FocusableComponent);
-    return FocusableComponent;
-}(DisposableComponent));
-
-var AbstractInputComponent = /** @class */ (function (_super) {
-    __extends(AbstractInputComponent, _super);
-    function AbstractInputComponent() {
-        var _this = _super.call(this) || this;
-        _this.onValueEditedListeners = new EventListenerList();
         _this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -1564,7 +571,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            return this.formValueModel.enabled;
+            return this.inputModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -1574,7 +581,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.formValueModel.errorList;
+            return this.inputModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -1588,7 +595,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
         get: function () {
-            return this.formValueModel.focusContext;
+            return this.inputModel.focusContext;
         },
         enumerable: true,
         configurable: true
@@ -1607,13 +614,6 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         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([
         Input(),
         __metadata("design:type", String)
@@ -1703,7 +703,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
 var AbstractListInputComponent = /** @class */ (function (_super) {
     __extends(AbstractListInputComponent, _super);
     function AbstractListInputComponent() {
-        var _this = _super.call(this) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         /**
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
@@ -1715,61 +715,11 @@ var AbstractListInputComponent = /** @class */ (function (_super) {
          * 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.formValueModel = _this.registerDisposable(new Form.DelegatingListModel());
-        _this.componentListModel = new MutableListModel();
-        _this.setValueIsInProgress = new Guard();
-        _this.valueChange = new EventEmitter();
-        var _a = Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
-        var binding = new Binding.Identity(_this.formValueModel, _this.componentListModel).writeRight();
-        var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(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
-        });
-        DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
+        _this.inputModel = _this.registerDisposable(new Form.DelegatingListModel());
         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 MutableListModel(value);
-                    _this.listModel = _this.listHolder;
-                }
-                else {
-                    _this.listHolder.value = value;
-                }
-            });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
-        __metadata("design:type", Object)
-    ], AbstractListInputComponent.prototype, "listModel", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], AbstractListInputComponent.prototype, "value", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", Object)
-    ], AbstractListInputComponent.prototype, "valueChange", void 0);
     AbstractListInputComponent = __decorate([
-        Component({ template: '' }),
-        __metadata("design:paramtypes", [])
+        Component({ template: '' })
     ], AbstractListInputComponent);
     return AbstractListInputComponent;
 }(AbstractInputComponent));
@@ -1779,154 +729,40 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
     function AbstractValueInputComponent() {
         var _this = _super.call(this) || this;
         /**
-         * A backing model for all our @Input() valueModel properties which should be defined as follows.
-         *
-         *    @Input() @TrackExternal({useExisting: "inputModel"})
-         *    valueModel:  DirtyTrackingForm.ValueModel<string> | IMutableValueModel<string>;
-         *
-         * This approach allows the input to accept plain or form models but all backed by a form
-         * friendly delegate.  We have to use an existing delegate for union types as pectin just
-         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
-         */
-        // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        _this.formValueModel = _this.registerDisposable(new Form.DelegatingValueModel());
-        _this.setValueInProgress = new Guard();
-        _this.componentValueModel = new MutableValueModel();
-        _this.valueChange = new EventEmitter();
-        var _a = Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
-        var binding = new Binding.Identity(_this.formValueModel, _this.componentValueModel).writeRight();
-        var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(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
-        });
-        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 MutableValueModel(value);
-                    _this.valueModel = _this.plainValueHolder;
-                }
-                else {
-                    _this.plainValueHolder.value = value;
-                }
-            });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
-        __metadata("design:type", Object)
-    ], AbstractValueInputComponent.prototype, "valueModel", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], AbstractValueInputComponent.prototype, "value", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", Object)
-    ], AbstractValueInputComponent.prototype, "valueChange", void 0);
-    AbstractValueInputComponent = __decorate([
-        Component({ template: '' }),
-        __metadata("design:paramtypes", [])
-    ], AbstractValueInputComponent);
-    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 MutableValueModel();
-        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        var lowerCaseFilterValue = chain(_this.filterValue)
-            .map(function (v) { return ___default.isString(v) ? v.toLowerCase() : ''; });
-        _this.filteredOptions = chain(_this.optionsModel)
-            .select(function (option) {
-            return ___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([
-        Input(), TrackExternal(),
-        __metadata("design:type", ListModel)
-    ], AutocompleteInputComponent.prototype, "optionsModel", void 0);
-    __decorate([
-        Input(), StoreInListModel('optionsModel'),
-        __metadata("design:type", Array)
-    ], AutocompleteInputComponent.prototype, "options", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], AutocompleteInputComponent.prototype, "optionLabel", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], AutocompleteInputComponent.prototype, "allowNil", void 0);
-    __decorate([
-        ContentChild('nilOptionTemplate'),
-        __metadata("design:type", TemplateRef)
-    ], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
-    AutocompleteInputComponent = __decorate([
-        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%}"]
-        }),
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "inputModel"})
+         *    valueModel:  DirtyTrackingForm.ValueModel<string> | IMutableValueModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        _this.inputModel = _this.registerDisposable(new Form.DelegatingValueModel());
+        return _this;
+    }
+    AbstractValueInputComponent = __decorate([
+        Component({ template: '' }),
         __metadata("design:paramtypes", [])
-    ], AutocompleteInputComponent);
-    return AutocompleteInputComponent;
-}(AbstractValueInputComponent));
+    ], AbstractValueInputComponent);
+    return AbstractValueInputComponent;
+}(AbstractInputComponent));
 
 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([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], CheckboxInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -1938,7 +774,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     CheckboxInputComponent = __decorate([
         Component({
             selector: 'aup-checkbox-input',
-            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",
+            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",
             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", [])
@@ -1946,65 +782,20 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     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([
-        Input(), TrackExternal(),
-        __metadata("design:type", ListModel)
-    ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
-    __decorate([
-        Input(), StoreInListModel('optionsModel'),
-        __metadata("design:type", Array)
-    ], MultipleSelectInputComponent.prototype, "options", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
-    __decorate([
-        ContentChild('optionTemplate'),
-        __metadata("design:type", TemplateRef)
-    ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
-    MultipleSelectInputComponent = __decorate([
-        Component({
-            selector: 'aup-multiple-select-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"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([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], NumberInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -2016,7 +807,7 @@ var NumberInputComponent = /** @class */ (function (_super) {
     NumberInputComponent = __decorate([
         Component({
             selector: 'aup-number-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"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",
+            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",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -2026,17 +817,19 @@ var NumberInputComponent = /** @class */ (function (_super) {
 
 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([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], PasswordInputComponent.prototype, "valueModel", void 0);
     PasswordInputComponent = __decorate([
         Component({
             selector: 'aup-password-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"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",
+            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",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -2048,7 +841,6 @@ var PasswordInputComponent = /** @class */ (function (_super) {
  * 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) {
@@ -2060,6 +852,10 @@ var SelectInputComponent = /** @class */ (function (_super) {
     }
     SelectInputComponent.prototype.ngOnInit = function () {
     };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], SelectInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(), TrackExternal(),
         __metadata("design:type", ListModel)
@@ -2091,7 +887,7 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent = __decorate([
         Component({
             selector: 'aup-select-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"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",
+            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",
             styles: [":host{display:inline-block}mat-form-field{width:100%}"]
         }),
         __metadata("design:paramtypes", [])
@@ -2105,13 +901,17 @@ var StringInputComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         _this.clearCommand = Command.create(function () {
-            _this.componentValueModel.value = null;
+            _this.valueModel.value = null;
         });
-        _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
+        _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
         return _this;
     }
     StringInputComponent.prototype.ngOnInit = function () {
     };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], StringInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(), TrackExternal({ defaultValue: false }),
         __metadata("design:type", ValueModel)
@@ -2123,7 +923,7 @@ var StringInputComponent = /** @class */ (function (_super) {
     StringInputComponent = __decorate([
         Component({
             selector: 'aup-string-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"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",
+            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",
             styles: ["button[disabled]{visibility:hidden}"]
         }),
         __metadata("design:paramtypes", [])
@@ -2135,14 +935,16 @@ var TextInputComponent = /** @class */ (function (_super) {
     __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([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], TextInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -2154,7 +956,7 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent = __decorate([
         Component({
             selector: 'aup-text-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"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",
+            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",
             styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
         }),
         __metadata("design:paramtypes", [])
@@ -2162,59 +964,6 @@ var TextInputComponent = /** @class */ (function (_super) {
     return TextInputComponent;
 }(AbstractValueInputComponent));
 
-var IconComponent = /** @class */ (function () {
-    function IconComponent() {
-        this.allowedPrefixes = 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([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], IconComponent.prototype, "icon", null);
-    IconComponent = IconComponent_1 = __decorate([
-        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 = Enum({
-        SVG: 'svg',
-        FONT_AWESOME: 'fa',
-        MATERIAL: 'mat'
-    });
-})(IconComponent || (IconComponent = {}));
-
 var NoopComponent = /** @class */ (function () {
     function NoopComponent() {
     }
@@ -2425,7 +1174,6 @@ var CellHeaderPortalRef = /** @class */ (function (_super) {
         assert$1.isTruthy(host);
         host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
-    // @Trace()
     CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
         this.initialiseHeader(portalComponent, host.column);
     };
@@ -2449,15 +1197,13 @@ var ComponentCellRendererPortalRef = /** @class */ (function (_super) {
     ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
         host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
-    // @Trace()
     ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
         host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-        this.updateComponent(portalComponent, host.getRowData(), true);
+        this.updateComponent(portalComponent, host.getRowData());
     };
-    // @Trace()
     ComponentCellRendererPortalRef.prototype.pushState = function (host) {
         if (host[PORTAL_RENDERER_COMPONENT]) {
-            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData(), false);
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
         }
     };
     return ComponentCellRendererPortalRef;
@@ -2499,7 +1245,6 @@ var TemplateCellRendererPortalRef = /** @class */ (function (_super) {
     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;
@@ -2690,8 +1435,7 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
 
 var noop = function () {
 };
-var ɵ0$3 = noop;
-var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
+var ɵ0 = noop;
 var ColumnModel = /** @class */ (function () {
     function ColumnModel(columnId, defaults) {
         this.columnId = columnId;
@@ -2782,66 +1526,24 @@ var ColumnModel = /** @class */ (function () {
 }());
 var PropertyColumnModel = /** @class */ (function (_super) {
     __extends(PropertyColumnModel, _super);
-    function PropertyColumnModel(id, property, defaults) {
-        var _this = _super.call(this, id, defaults) || this;
+    function PropertyColumnModel(property, defaults) {
+        var _this = _super.call(this, property.toString(), defaults) || this;
         _this.property = property;
         _this._format = function (value) { return value; };
         _this.cellRenderer(DefaultCellRendererComponent);
         return _this;
     }
-    PropertyColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
+    PropertyColumnModel.prototype.cellRenderer = function (componentType) {
         var _this = this;
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
-            if (firstTime) {
-                if (___default.isFunction(onComponentInitOrOptions)) {
-                    onComponentInitOrOptions(component);
-                }
-                else {
-                    if (___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
-                        onComponentInitOrOptions.onComponentInit(component);
-                    }
-                }
-            }
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
             component.value = _this._format(rowData.row[_this.property]);
-            if (!___default.isFunction(onComponentInitOrOptions) && ___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.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.isFunction(options) && ___default.isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
-                options.onRowUpdate(component, rowData.row);
-            }
         }));
         return this;
     };
-    PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, onComponentInit) {
+    PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
         var _this = this;
         var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
+        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
         this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
             var formValueModel = editSession.form.pluck(_this.property);
             if (validators) {
@@ -2866,8 +1568,8 @@ var PropertyColumnModel = /** @class */ (function (_super) {
 }(ColumnModel));
 var ListPropertyColumnModel = /** @class */ (function (_super) {
     __extends(ListPropertyColumnModel, _super);
-    function ListPropertyColumnModel(id, property, defaults) {
-        var _this = _super.call(this, id, defaults) || this;
+    function ListPropertyColumnModel(property, defaults) {
+        var _this = _super.call(this, property.toString(), defaults) || this;
         _this.property = property;
         _this._format = function (value) { return value.map(function (v) { return v === null || v === void 0 ? void 0 : v.toString(); }).join(', '); };
         _this.cellRenderer(DefaultCellRendererComponent);
@@ -2914,23 +1616,10 @@ var CustomValueColumnModel = /** @class */ (function (_super) {
         _this.cellRenderer(DefaultCellRendererComponent);
         return _this;
     }
-    CustomValueColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
+    CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
         var _this = this;
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
-            if (firstTime) {
-                if (___default.isFunction(onComponentInitOrOptions)) {
-                    onComponentInitOrOptions(component);
-                }
-                else {
-                    if (___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
-                        onComponentInitOrOptions.onComponentInit(component);
-                    }
-                }
-            }
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
             component.value = _this.getValue(rowData.row);
-            if (!___default.isFunction(onComponentInitOrOptions) && ___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
-                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
-            }
         }));
         return this;
     };
@@ -3103,9 +1792,6 @@ var TableModel = /** @class */ (function () {
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
         this._createForm = function (row) { return new DirtyTrackingForm(); };
-        this.trackBy = function (index, item) {
-            return _this.identityOf ? _this.identityOf(item) : index;
-        };
         this.identityOf = sourceOfTruth.identityOf;
         var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         this._columnsById = chain(this._columns).indexBy('columnId');
@@ -3117,7 +1803,7 @@ var TableModel = /** @class */ (function () {
         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) {
@@ -3132,6 +1818,12 @@ var TableModel = /** @class */ (function () {
         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;
@@ -3139,11 +1831,11 @@ var TableModel = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    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.pluck = function (property) {
+        return this.addColumn(new PropertyColumnModel(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.pluckList = function (property) {
+        return this.addColumn(new ListPropertyColumnModel(property, this));
     };
     TableModel.prototype.addSelectionColumn = function (selectionModel) {
         assert.isNil(this.selectionColumnModel);
@@ -3157,9 +1849,6 @@ var TableModel = /** @class */ (function () {
     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));
     };
@@ -3188,14 +1877,12 @@ var TableModel = /** @class */ (function () {
         }
         return column;
     };
-    // removeColumn(column: ColumnModel<Row>) {
-    //
-    // }
     TableModel.prototype.columnTextProperties = function (columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     };
     TableModel.prototype.getColumnTextProperties = function (column) {
-        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        return factory ? factory() : undefined;
     };
     TableModel.prototype.startEditSession = function (row) {
         var _this = this;
@@ -3313,7 +2000,7 @@ var TableComponent = /** @class */ (function (_super) {
     TableComponent = __decorate([
         Component({
             selector: 'aup-table',
-            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",
+            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",
             styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -3496,63 +2183,6 @@ var TableHeaderCellRendererComponent = /** @class */ (function () {
     return TableHeaderCellRendererComponent;
 }());
 
-var MenuItemData = /** @class */ (function () {
-    function MenuItemData(factory, face) {
-        this.factory = factory;
-        this.face = face;
-    }
-    return MenuItemData;
-}());
-/**
- *
- */
-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 = 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([
-        Input(),
-        __metadata("design:type", Object)
-    ], TableRowMenuComponent.prototype, "value", void 0);
-    __decorate([
-        ViewChild(MatMenuTrigger),
-        __metadata("design:type", MatMenuTrigger)
-    ], TableRowMenuComponent.prototype, "menu", void 0);
-    TableRowMenuComponent = __decorate([
-        Component({
-            selector: 'aup-table-row-menu',
-            template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.faceModel\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.faceModel\"></aup-command>\n          </aup-more-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) {
@@ -3638,6 +2268,100 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
     return VerticalFocusContainerComponent;
 }(FocusContainerComponent));
 
+var MultipleSelectInputComponent = /** @class */ (function (_super) {
+    __extends(MultipleSelectInputComponent, _super);
+    function MultipleSelectInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+        return _this;
+    }
+    MultipleSelectInputComponent.prototype.ngOnInit = function () {
+    };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        __metadata("design:type", Object)
+    ], MultipleSelectInputComponent.prototype, "listModel", void 0);
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+    __decorate([
+        Input(), StoreInListModel('optionsModel'),
+        __metadata("design:type", Array)
+    ], MultipleSelectInputComponent.prototype, "options", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
+    __decorate([
+        ContentChild('optionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+    __decorate([
+        ContentChild('nilOptionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+    MultipleSelectInputComponent = __decorate([
+        Component({
+            selector: 'aup-multiple-select-input',
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"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([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], IconComponent.prototype, "icon", null);
+    IconComponent = __decorate([
+        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(fas);
@@ -3656,8 +2380,6 @@ var ComponentsModule = /** @class */ (function () {
                 TextInputComponent,
                 PasswordInputComponent,
                 SelectInputComponent,
-                MultipleSelectInputComponent,
-                AutocompleteInputComponent,
                 CheckboxInputComponent,
                 ScrollContainerComponent,
                 NoopComponent,
@@ -3677,19 +2399,9 @@ var ComponentsModule = /** @class */ (function () {
                 SelectHeaderCellRendererComponent,
                 DefaultHeaderCellRendererComponent,
                 TableHeaderCellRendererComponent,
+                MultipleSelectInputComponent,
                 IconComponent,
-                SectionHeaderComponent,
-                TableRowMenuComponent,
-                ToolBarComponent,
-                CommandComponent,
-                PopupMenuComponent,
-                CommandGroupComponent,
-                CommandFaceComponent,
-                MoreMenuComponent,
-                SeparatorComponent,
-                FlexComponent,
-                CommandGroupMenuRendererComponent,
-                CommandGroupRendererComponent
+                SectionHeaderComponent
             ],
             imports: [
                 CommonModule,
@@ -3707,10 +2419,7 @@ var ComponentsModule = /** @class */ (function () {
                 PortalModule,
                 CdkScrollableModule,
                 FontAwesomeModule,
-                MatTooltipModule,
-                MatAutocompleteModule,
-                MatMenuModule,
-                MatDividerModule
+                MatTooltipModule
             ],
             exports: [
                 NumberInputComponent,
@@ -3719,8 +2428,6 @@ var ComponentsModule = /** @class */ (function () {
                 PasswordInputComponent,
                 CheckboxInputComponent,
                 SelectInputComponent,
-                MultipleSelectInputComponent,
-                AutocompleteInputComponent,
                 ScrollContainerComponent,
                 NoopComponent,
                 SwitchCaseComponent,
@@ -3733,20 +2440,12 @@ var ComponentsModule = /** @class */ (function () {
                 TableComponent,
                 EditRowControls,
                 ColumnTemplateDirective,
+                MultipleSelectInputComponent,
                 IconComponent,
-                SectionHeaderComponent,
-                TableRowMenuComponent,
-                CommandGroupComponent,
-                ToolBarComponent,
-                CommandComponent,
-                PopupMenuComponent,
-                CommandFaceComponent,
-                MoreMenuComponent,
-                SeparatorComponent,
-                FlexComponent
+                SectionHeaderComponent
             ],
             providers: [
-                FocusBindingFactory
+                FocusBindingFactory,
             ]
         }),
         __metadata("design:paramtypes", [FaIconLibrary])
@@ -3825,7 +2524,7 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
         Component({
             selector: 'aup-activity-actions',
             template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n    <aup-icon icon=\"mat:clear\"></aup-icon>\n  </button>\n  <button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n    <aup-icon icon=\"mat:done\"></aup-icon>\n  </button>\n  <button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.column{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.column{-ms-grid-row:1;-ms-grid-column:2}"]
+            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.content{-ms-grid-row:1;-ms-grid-column:2}"]
         })
     ], ActivityActionsComponent);
     return ActivityActionsComponent;
@@ -3837,27 +2536,13 @@ var Activity = /** @class */ (function (_super) {
     function Activity() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._busyModel = new DelegatingValueModel().withDefault(false);
-        _this._focusedModel = _this.registerDisposable(new DelegatingValueModel());
         _this.class = 'aup-activity';
         return _this;
     }
-    Object.defineProperty(Activity.prototype, "isFocused", {
-        get: function () {
-            return this._focusedModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
-        var _this = this;
-        var _a = Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
-        this._focusedModel.setDelegate(activityContext.focused);
-        when(this._focusedModel).becomesTruthy(function () {
-            _this.onActivityReady();
-        });
     };
     Object.defineProperty(Activity.prototype, "interactionContext", {
         get: function () {
@@ -3883,13 +2568,6 @@ var Activity = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Activity.prototype, "focused", {
-        get: function () {
-            return this._focusedModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Activity.prototype.busyWhile = function (busyModel) {
         this._busyModel.setDelegate(busyModel);
     };
@@ -3903,11 +2581,6 @@ var Activity = /** @class */ (function (_super) {
         HostBinding('class'),
         __metadata("design:type", Object)
     ], Activity.prototype, "class", void 0);
-    __decorate([
-        HostBinding('attr.focused'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Activity.prototype, "isFocused", null);
     return Activity;
 }(DisposableComponent));
 
@@ -4046,7 +2719,6 @@ var ActivityRef = /** @class */ (function () {
         this.onComplete = onComplete;
         this._complete = false;
         this.deferredResult = Deferred.defer();
-        this.focusedModel = new MutableValueModel();
     }
     ActivityRef.prototype.isActivityRealised = function () {
         return !!this._activity;
@@ -4062,16 +2734,6 @@ var ActivityRef = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    ActivityRef.prototype.setFocused = function (focused) {
-        this.focusedModel.value = focused;
-    };
-    Object.defineProperty(ActivityRef.prototype, "focused", {
-        get: function () {
-            return this.focusedModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
         assert.isNil(this._activity);
         this._activity = activity;
@@ -4082,8 +2744,7 @@ var ActivityRef = /** @class */ (function () {
             },
             onCancel: function (error) {
                 self.finishActivity(function (deferred) { return deferred.reject(error); });
-            },
-            focused: this.focusedModel.readonly
+            }
         });
     };
     ActivityRef.prototype.finishActivity = function (resolveOrReject) {
@@ -4121,7 +2782,7 @@ var ActivityOutletComponent = /** @class */ (function () {
         },
         set: function (activityRef) {
             if (this.activityRef && !this.activityRef.isComplete()) {
-                lang$1.illegalState('changing activity before previous one has completed');
+                lang$1.illegalState("changing activity before previous one has completed");
             }
             this._activityRef = activityRef;
             this.loadActivity(activityRef);
@@ -4184,9 +2845,8 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     function ActivityContainerComponent() {
         var _this = _super.call(this) || this;
         _this.dynamicHeight = false;
-        _this.activityRefs = [];
+        _this.activityTabs = [];
         _this.garbage = new GarbageCollector();
-        _this.inAnimation = new MutableValueModel(false);
         return _this;
     }
     ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -4224,7 +2884,6 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     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.
@@ -4235,7 +2894,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         if (!this.isActive()) {
             lang$1.illegalState('no activity in progress');
         }
-        return ___default.findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
+        return ___default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
     };
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
@@ -4274,14 +2933,14 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         });
         this.launchActivity(activityRef);
         // if this is the first activity let the interaction service know.
-        if (this.activityRefs.length === 1) {
+        if (this.activityTabs.length === 1) {
             // console.log('Now active!!!');
             this.interactionServiceApi.notifyActive(this);
         }
         return activityRef.activityResult;
     };
     ActivityContainerComponent.prototype.getActiveActivityCount = function () {
-        return this.activityRefs.filter(function (ref) { return !ref.isComplete(); }).length;
+        return this.activityTabs.filter(function (ref) { return !ref.isComplete(); }).length;
     };
     /**
      * Checks if this interaction context has finished an is in the process of waiting
@@ -4308,7 +2967,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
             // Without this our animation done wasn't called when a single
             // new activity followed a single tab activity (since we're tracking
             // by activity index)
-            this.activityRefs = [];
+            this.activityTabs = [];
             var promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(function () {
@@ -4318,15 +2977,14 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
-        var cleanedTabs = this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
-        this.activityRefs = cleanedTabs.concat(activityRef);
+        var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+        this.activityTabs = cleanedTabs.concat(activityRef);
         this.synchroniseSelectedTabIndex();
     };
     ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
         return index;
     };
     ;
-    // @Trace()
     ActivityContainerComponent.prototype.onAnimationFinished = function () {
         if (this.onAnimationFinishedJob) {
             this.onAnimationFinishedJob();
@@ -4336,21 +2994,15 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     /**
      * Synchronises the selected tab index.
      */
-    // @Trace()
     ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
         var _this = this;
         var previousIndex = this.tabs.selectedIndex;
         var newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
-            this.inAnimation.value = true;
-            this.activityRefs[newIndex].setFocused(false);
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = function () {
-                _this.activityRefs = _this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
-                _this.inAnimation.value = false;
-                _this.activityRefs.forEach(function (ref, index) {
-                    ref.setFocused(index === newIndex);
-                });
+                _this.getSelectedOutlet().component.onActivityReady();
+                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
             };
         }
     };
@@ -4358,10 +3010,6 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     };
     // @Trace()
-    ActivityContainerComponent.prototype.getSelectedTabIndex = function () {
-        return this.tabs.selectedIndex;
-    };
-    // @Trace()
     ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
         var _this = this;
         if (this.syncSelectedTabTimeout) {
@@ -4384,10 +3032,16 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         ViewChildren(ActivityOutletComponent),
         __metadata("design:type", QueryList)
     ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ActivityContainerComponent.prototype, "dispose", null);
     ActivityContainerComponent = __decorate([
         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 activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <!--\n    We have issues where angular is triggering a leave animation when an\n    new activity is started, but is not running the enter animation\n    when it is scrolled back into view.  So we track the tab changes and\n    disable all animations inside the tab while we're animating.\n    -->\n    <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n      <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n    </div>\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; trackBy: activityIndex\" >\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", [])
@@ -5458,9 +4112,6 @@ var PlaceComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.visitModel = new MutableValueModel();
         _this._inVisitUpdate = new Guard();
-        _this._active = new MutableValueModel(false);
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
         return _this;
     }
     PlaceComponent_1 = PlaceComponent;
@@ -5470,7 +4121,7 @@ var PlaceComponent = /** @class */ (function (_super) {
         assert.isNil(this.visitModel.value);
         var when = Dsl.disposeWith(this).when;
         this.visitModel.value = visit;
-        DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
+        DebugContext.get(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);
@@ -5518,19 +4169,6 @@ var PlaceComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(PlaceComponent.prototype, "active", {
-        get: function () {
-            return this._active.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Called by the router when the place is ready to interact after any animations have run.
-     */
-    PlaceComponent.prototype._notifyActive = function (active) {
-        this._active.value = active;
-    };
     PlaceComponent.prototype.onPlaceReady = function () {
     };
     var PlaceComponent_1;
@@ -6631,6 +5269,75 @@ var UrlService = /** @class */ (function () {
     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 !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 = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
+    };
+    Visit.prototype.hasChangedFrom = function (other) {
+        var sameNonRouteParameters = 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) {
@@ -6826,7 +5533,6 @@ var PlaceRouter = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    // @Trace()
     PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
         return __awaiter(this, void 0, void 0, function () {
             var _this = this;
@@ -6927,6 +5633,12 @@ var PlaceRouter = /** @class */ (function (_super) {
         { type: PlaceHistory }
     ]; };
     PlaceRouter.ɵprov = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location), ɵɵinject(InteractionService), ɵɵinject(UrlService), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Visit, Visit]),
+        __metadata("design:returntype", Promise)
+    ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
     PlaceRouter = __decorate([
         Injectable({
             providedIn: 'root'
@@ -6940,75 +5652,6 @@ var PlaceRouter = /** @class */ (function (_super) {
     return PlaceRouter;
 }(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 !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 = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    };
-    Visit.prototype.hasChangedFrom = function (other) {
-        var sameNonRouteParameters = 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 InjectionToken('AUP_PLACE_CONFIG');
 
 // Freezes the state of the components at the start of the animation.
@@ -7068,7 +5711,6 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         _this._activePlaceModel = new MutableValueModel();
         _this.initialPlaceIndex = null;
         _this._isPushingVisitToRoute = new MutableValueModel(false);
-        _this.isVeryFirstLoad = true;
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         _this.parentOutletModel = new MutableValueModel(parentOutlet);
         var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
@@ -7077,9 +5719,8 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             .pluckList('children')
             .pluck('component');
         var activatePlaceType = chain(_this.activePlaceModel).map(function (p) { return p.constructor; });
-        _this.placesInAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder);
-        _this.activePlaceAnimationPosition = _this.placesInAnimationOrder
+        _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder)
             .reduce(function (placesInOrder) {
             var placeIndex = 0;
             if (activatePlaceType.value) {
@@ -7090,16 +5731,14 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             }
             return isNil(_this.initialPlaceIndex) ? 0 : placeIndex - _this.initialPlaceIndex;
         }, { dependsOn: activatePlaceType });
-        _this.animationSupported = _this.placesInAnimationOrder.count().isGreaterThan(0);
-        _this.animationEnabled = valueOf.all(_this.animateModel, _this.animationSupported).areTruthy();
         // Extract our visit model from the place router.
         _this._activePlaceDefinition = chain(_this._activePlaceModel).pluck('placeDefinition');
         _this.routerVisitModel = _this._activePlaceDefinition.findIn(chain(placeRouter.activeVisitsByPlaceDefinition));
         _this.navigationInProgress = chain(_this.placeRouter.navigationInProgress);
-        when(_this.navigationInProgress).becomesFalsey(function () {
+        when.valueOf(_this.navigationInProgress).becomesFalsey(function () {
             _this.checkStateAndInitialise();
         });
-        when(_this.outletActivated).becomesTruthy(function () {
+        when.valueOf(_this.outletActivated).becomesTruthy(function () {
             _this.checkStateAndInitialise();
         });
         chain(_this._activePlaceModel)
@@ -7112,7 +5751,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.getAnimationOrder = function () {
-        return this.activePlaceAnimationPosition.value;
+        return this.placeAnimationOrder.value;
     };
     Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
         get: function () {
@@ -7123,10 +5762,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     });
     // @Trace()
     PlaceOutletComponent.prototype.navigate = function (visit) {
-        // const place = this.placesInAnimationOrder.query().findMatching(p => visit.placeDefinition.component === p);
-        // if (!place) {
-        //     lang.illegalState()
-        // }
+        // console.log({ activatedRoute: this._activatedRouteModel.value });
         this.placeRouter.navigate(visit, {
             relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
         });
@@ -7152,25 +5788,14 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    // @Trace()
     PlaceOutletComponent.prototype.onOutletActivated = function (routerOutlet, place) {
         this._activatedRouteModel.value = routerOutlet.activatedRoute;
         this._activePlaceModel.value = place;
-        this.validateAnimationState(place);
         this.outletActivated.value = true;
         this.checkStateAndInitialise();
     };
-    PlaceOutletComponent.prototype.validateAnimationState = function (place) {
-        if (this.animateModel.value) {
-            if (this.placesInAnimationOrder.length < 1) {
-                console.error('PlaceOutlet.animate === true but placeAnimationOrder has not been set. Animation is disabled.');
-            }
-            else {
-                if (!this.placesInAnimationOrder.query().includes(place.placeDefinition.component)) {
-                    console.error("PlaceOutlet.animate === true but placeAnimationOrder doesn't contain " + place.placeDefinition.component.name + ".");
-                }
-            }
-        }
-    };
+    // @Trace()
     PlaceOutletComponent.prototype.onOutletDeactivated = function () {
         this.outletActivated.value = false;
         this._activePlaceModel.value = null;
@@ -7187,6 +5812,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             this.initialisePlace(routerVisit, activePlace);
         }
     };
+    // @Trace()
     PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
         var _this = this;
         var visitModel = new MutableValueModel(routerVisit);
@@ -7194,18 +5820,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         activePlace.initialiseVisit(routerVisit, function (current, previous) {
             _this.pushVisitChangeToRoute(previous, current);
         });
-        var finishPlaceLoad = function () {
-            _this._activePlaceModel.value._notifyActive(true);
-        };
-        if (!this.animationEnabled.value || this.isVeryFirstLoad) {
-            // if animation is disabled or this is the very first load then
-            // we won't get our animation done callback so we finish the
-            // process here and now.
-            this.isVeryFirstLoad = false;
-            finishPlaceLoad();
-        }
-        else {
-            this.onAnimationFinishedJob = finishPlaceLoad;
+        if (!this.animateModel.value) {
+            // we're not animating so trigger any post animation callbacks now.
+            this.animationDone();
         }
         var _a = Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
         when.valueOf(this.routerVisitModel)
@@ -7228,9 +5845,8 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.animationDone = function () {
-        if (this.onAnimationFinishedJob) {
-            this.onAnimationFinishedJob();
-            this.onAnimationFinishedJob = undefined;
+        if (this._activePlaceModel.value) {
+            this._activePlaceModel.value.onPlaceReady();
         }
     };
     PlaceOutletComponent.ctorParameters = function () { return [
@@ -7263,22 +5879,10 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         ViewChild('routeOutlet', { static: true }),
         __metadata("design:type", RouterOutlet)
     ], PlaceOutletComponent.prototype, "routerOut", void 0);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [RouterOutlet, PlaceComponent]),
-        __metadata("design:returntype", void 0)
-    ], PlaceOutletComponent.prototype, "onOutletActivated", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
     PlaceOutletComponent = __decorate([
         Component({
             selector: 'aup-place-outlet',
-            template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
+            template: "<ng-container *ngIf=\"animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
             animations: [LEFT_RIGHT_PLACE_ANIMATION],
             styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}"]
         }),
@@ -7309,10 +5913,10 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
         return _this;
     }
-    AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
+    AbstractPlaceNavigationComponent.prototype.getNav = function (placeDef) {
         var navItem = placeDef.getPlaceData('nav');
         return {
-            text: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
+            title: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
             tooltip: function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); },
             icon: function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); }
         };
@@ -7346,7 +5950,7 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [PlaceDefinition]),
         __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
+    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
     AbstractPlaceNavigationComponent = __decorate([
         Component({
             template: ''
@@ -7407,7 +6011,7 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
     ListPlaceNavComponent = __decorate([
         Component({
             selector: 'aup-list-place-nav',
-            template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
+            template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
             styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
         }),
         __metadata("design:paramtypes", [PlaceRouter])
@@ -7415,6 +6019,25 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
     return ListPlaceNavComponent;
 }(AbstractPlaceNavigationComponent));
 
+var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+    __extends(TabbedPlaceNavigationComponent, _super);
+    function TabbedPlaceNavigationComponent(placeRouter) {
+        return _super.call(this, placeRouter) || this;
+    }
+    TabbedPlaceNavigationComponent.ctorParameters = function () { return [
+        { type: PlaceRouter }
+    ]; };
+    TabbedPlaceNavigationComponent = __decorate([
+        Component({
+            selector: 'aup-tabbed-place-navigation',
+            template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</nav>\n",
+            styles: [""]
+        }),
+        __metadata("design:paramtypes", [PlaceRouter])
+    ], TabbedPlaceNavigationComponent);
+    return TabbedPlaceNavigationComponent;
+}(AbstractPlaceNavigationComponent));
+
 /**
  * @example
  * // Usage
@@ -7453,7 +6076,7 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav
+ *     nav: I18n.places.myPlace.nav()
  *   }
  * })
  */
@@ -7489,7 +6112,7 @@ var SidePlaceNavigationComponent = /** @class */ (function (_super) {
     SidePlaceNavigationComponent = __decorate([
         Component({
             selector: 'aup-side-place-navigation',
-            template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+            template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span\n      class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
             styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width, 56px);--resolved-nav-item-height:var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width, 235px);--resolved-color:var(--nav-color, rgba(255, 255, 255, 0.9));--resolved-background-color:var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
         }),
         __metadata("design:paramtypes", [Router, PlaceRouter])
@@ -7497,25 +6120,6 @@ var SidePlaceNavigationComponent = /** @class */ (function (_super) {
     return SidePlaceNavigationComponent;
 }(AbstractPlaceNavigationComponent));
 
-var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(TabbedPlaceNavigationComponent, _super);
-    function TabbedPlaceNavigationComponent(placeRouter) {
-        return _super.call(this, placeRouter) || this;
-    }
-    TabbedPlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
-    ]; };
-    TabbedPlaceNavigationComponent = __decorate([
-        Component({
-            selector: 'aup-tabbed-place-navigation',
-            template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</nav>\n",
-            styles: [""]
-        }),
-        __metadata("design:paramtypes", [PlaceRouter])
-    ], TabbedPlaceNavigationComponent);
-    return TabbedPlaceNavigationComponent;
-}(AbstractPlaceNavigationComponent));
-
 var PlaceModule = /** @class */ (function () {
     function PlaceModule() {
     }
@@ -8062,7 +6666,8 @@ function installMechanics(prototype, propertyKey, backingModel, tagPrefix, isEmp
         binding: null
     };
     var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
-    DebugContext.getOrCreate(mechanics.backingModel).tag(tag);
+    DebugContext.get(mechanics.backingModel).tag(tag);
+    Logger.get(mechanics.backingModel).tag(tag);
     Object.defineProperty(prototype, propertyKey, {
         get: function () {
             return mechanics.backingModel;
@@ -8124,5 +6729,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandDirective, CommandFace, CommandFaceComponent, CommandGroup, CommandGroupComponent, CommandGroupMenuRendererComponent, CommandGroupRendererComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PopupMenuComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, Registration, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, UrlService, UrlSnapshot, VerticalFocusContainerComponent, ViewData, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, ToolBarComponent as ɵbn, CommandGroup as ɵbo, CommandComponent as ɵbp, PopupMenuComponent as ɵbq, CommandGroupComponent as ɵbr, CommandFaceComponent as ɵbs, MoreMenuComponent as ɵbt, SeparatorComponent as ɵbu, FlexComponent as ɵbv, CommandGroupMenuRendererComponent as ɵbw, CommandGroupRendererComponent as ɵbx, PlaceModule as ɵby, ComponentsModule as ɵbz, FocusBindingDirective as ɵc, EmptyStateComponent as ɵca, BusyOverlayComponent as ɵcb, PlaceOutletComponent as ɵcc, leftRightPlaceAnimation as ɵcd, LEFT_RIGHT_PLACE_ANIMATION as ɵce, AUP_PLACE_CONFIG as ɵcf, PlaceRouter as ɵch, InteractionService as ɵci, ModalInteractionContextFactory as ɵcj, UrlService as ɵck, PlaceHistory as ɵcl, TabbedPlaceNavigationComponent as ɵcm, AbstractPlaceNavigationComponent as ɵcn, ListPlaceNavComponent as ɵco, SidePlaceNavigationComponent as ɵcp, InteractionModule as ɵcq, ActivityContainerComponent as ɵcr, AbstractInteractionContext as ɵcs, ActivityOutletComponent as ɵct, ConfirmationDialogComponent as ɵcu, ACTIVITY_DATA as ɵcv, Activity as ɵcw, ConfirmThenDialogComponent as ɵcy, AlertDialogComponent as ɵcz, DisposableComponent as ɵd, InPlaceInteractionContextComponent as ɵdb, AddItemInteractionContextComponent as ɵdc, ActivityActionsComponent as ɵdd, PopupInteractionContextComponent as ɵde, StringInputActivity as ɵdf, AbstractInputActivity as ɵdg, SelectInputActivity as ɵdh, InteractionContextTriggerFor as ɵdi, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, EditRowControls as ɵba, ColumnTemplateDirective as ɵbb, DefaultCellRendererComponent as ɵbc, TableCellRendererComponent as ɵbd, SelectCellRendererComponent as ɵbe, SelectHeaderCellRendererComponent as ɵbf, DefaultHeaderCellRendererComponent as ɵbg, TableHeaderCellRendererComponent as ɵbh, MultipleSelectInputComponent as ɵbi, IconComponent as ɵbj, SectionHeaderComponent as ɵbk, PlaceModule as ɵbl, ComponentsModule as ɵbm, EmptyStateComponent as ɵbn, BusyOverlayComponent as ɵbo, PlaceOutletComponent as ɵbp, leftRightPlaceAnimation as ɵbq, LEFT_RIGHT_PLACE_ANIMATION as ɵbr, AUP_PLACE_CONFIG as ɵbs, PlaceRouter as ɵbu, InteractionService as ɵbv, ModalInteractionContextFactory as ɵbw, UrlService as ɵbx, PlaceHistory as ɵby, TabbedPlaceNavigationComponent as ɵbz, FocusBindingDirective as ɵc, AbstractPlaceNavigationComponent as ɵca, ListPlaceNavComponent as ɵcb, SidePlaceNavigationComponent as ɵcc, InteractionModule as ɵcd, ActivityContainerComponent as ɵce, AbstractInteractionContext as ɵcf, ActivityOutletComponent as ɵcg, ConfirmationDialogComponent as ɵch, ACTIVITY_DATA as ɵci, Activity as ɵcj, ConfirmThenDialogComponent as ɵcl, AlertDialogComponent as ɵcm, InPlaceInteractionContextComponent as ɵco, AddItemInteractionContextComponent as ɵcp, ActivityActionsComponent as ɵcq, PopupInteractionContextComponent as ɵcr, StringInputActivity as ɵcs, AbstractInputActivity as ɵct, SelectInputActivity as ɵcu, InteractionContextTriggerFor as ɵcv, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, CheckboxInputComponent as ɵo, ScrollContainerComponent as ɵp, NoopComponent as ɵq, SwitchCaseOption as ɵr, SwitchCaseWhenDirective as ɵs, SwitchCaseDefaultDirective as ɵt, SwitchCaseComponent as ɵu, FocusContainerComponent as ɵv, VerticalFocusContainerComponent as ɵw, FocusableComponent as ɵx, CardContainerComponent as ɵy, TableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map