@coolon/angular-ui-powerups 2.0.0-alpha.9 → 2.0.0

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, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
+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 { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -12,23 +12,26 @@ 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, FocusManager, Form, Guard, MutableListModel, MutableValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, DebugContext, Binding, Functions } from '@coolon/pectin';
+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 { 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 { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import produce from 'immer';
 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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
@@ -407,13 +410,1005 @@ 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}.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}"]
+            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}"]
         }),
         __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 getIconPositionOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.iconPosition) ? face.iconPosition() : undefined;
+    }
+    CommandFace.getIconPositionOf = getIconPositionOf;
+    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 CommandFace.getTextOf(this.face);
+            },
+            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 CommandFace.getIconPositionOf(this.face);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "tooltip", {
+            get: function () {
+                return CommandFace.getTooltipOf(this.face);
+            },
+            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 _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');
+        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;
+    };
+    CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+        { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+    ]; };
+    __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(),
+        __metadata("design:type", Object)
+    ], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
+    __decorate([
+        ViewChildren(MatMenuTrigger),
+        __metadata("design:type", QueryList)
+    ], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
+    CommandGroupMenuRendererComponent = __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"
+        }),
+        __param(0, Optional()), __param(0, SkipSelf()),
+        __metadata("design:paramtypes", [CommandGroupMenuRendererComponent])
+    ], CommandGroupMenuRendererComponent);
+    return CommandGroupMenuRendererComponent;
+}(DisposableComponent));
+
+var CommandGroupRendererComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupRendererComponent, _super);
+    function CommandGroupRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.renderRootNode = true;
+        _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.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;
+        }
+        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", {
+        get: function () {
+            return this._registrations.readonly;
+        },
+        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();
+    };
+    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(); }));
+    };
+    Object.defineProperty(CommandGroup.prototype, "depth", {
+        get: function () {
+            return this.isRoot() ? 0 : this.parent.depth + 1;
+        },
+        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 }] }
+    ]; };
+    __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);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], CommandGroupComponent.prototype, "xPosition", void 0);
+    __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));
+
+/**
+ * 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 _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) {
@@ -522,6 +1517,7 @@ 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
@@ -572,7 +1568,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            return this.inputModel.enabled;
+            return this.formValueModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -582,7 +1578,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.inputModel.errorList;
+            return this.formValueModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -596,7 +1592,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
         get: function () {
-            return this.inputModel.focusContext;
+            return this.formValueModel.focusContext;
         },
         enumerable: true,
         configurable: true
@@ -615,6 +1611,13 @@ 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)
@@ -716,34 +1719,47 @@ 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.inputModel = _this.registerDisposable(new Form.DelegatingListModel());
-        _this.setValueIsInitialising = new Guard();
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingListModel());
+        _this.componentListModel = new MutableListModel();
+        _this.setValueIsInProgress = new Guard();
         _this.valueChange = new EventEmitter();
-        var when = Dsl.disposeWith(_this).when;
-        when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+        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',
-            unless: _this.setValueIsInitialising
+            // 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");
         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;
-            if (!this.listHolder) {
-                this.setValueIsInitialising.whileTrue(function () {
+            this.setValueIsInProgress.whileTrue(function () {
+                if (!_this.listHolder) {
                     _this.listHolder = new MutableListModel(value);
                     _this.listModel = _this.listHolder;
-                });
-            }
-            else {
-                this.listHolder.value = value;
-            }
+                }
+                else {
+                    _this.listHolder.value = value;
+                }
+            });
         },
         enumerable: true,
         configurable: true
     });
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
         __metadata("design:type", Object)
     ], AbstractListInputComponent.prototype, "listModel", void 0);
     __decorate([
@@ -777,29 +1793,39 @@ var AbstractValueInputComponent = /** @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.inputModel = _this.registerDisposable(new Form.DelegatingValueModel());
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingValueModel());
         _this.setValueInProgress = new Guard();
+        _this.componentValueModel = new MutableValueModel();
         _this.valueChange = new EventEmitter();
-        var when = Dsl.disposeWith(_this).when;
-        when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+        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',
-            unless: _this.setValueInProgress
+            // 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;
-            // 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)]="..."
             this.setValueInProgress.whileTrue(function () {
-                if (!_this.valueHolder) {
-                    _this.valueHolder = new MutableValueModel(value);
-                    _this.valueModel = _this.valueHolder;
+                if (!_this.plainValueHolder) {
+                    _this.plainValueHolder = new MutableValueModel(value);
+                    _this.valueModel = _this.plainValueHolder;
                 }
                 else {
-                    _this.valueHolder.value = value;
+                    _this.plainValueHolder.value = value;
                 }
             });
         },
@@ -807,7 +1833,7 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
         configurable: true
     });
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
         __metadata("design:type", Object)
     ], AbstractValueInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -849,9 +1875,15 @@ var AutocompleteInputComponent = /** @class */ (function (_super) {
     }
     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)
@@ -879,7 +1911,7 @@ var AutocompleteInputComponent = /** @class */ (function (_super) {
     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]=\"optionLabelFormat(valueModel.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\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{optionLabelFormat(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",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [":host{display:inline-block}mat-form-field{width:100%}"]
         }),
         __metadata("design:paramtypes", [])
@@ -910,7 +1942,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     CheckboxInputComponent = __decorate([
         Component({
             selector: 'aup-checkbox-input',
-            template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+            template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
             styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
         }),
         __metadata("design:paramtypes", [])
@@ -922,7 +1954,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
  * Using templates:
  * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
  *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
- *   <ng-template #nilOptionTemplateRef let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
  * </aup-multiple-select_input>
  */
 var MultipleSelectInputComponent = /** @class */ (function (_super) {
@@ -946,18 +1978,10 @@ var MultipleSelectInputComponent = /** @class */ (function (_super) {
         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)
@@ -965,7 +1989,7 @@ var MultipleSelectInputComponent = /** @class */ (function (_super) {
     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",
+            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", [])
@@ -996,7 +2020,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)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -1016,7 +2040,7 @@ var PasswordInputComponent = /** @class */ (function (_super) {
     PasswordInputComponent = __decorate([
         Component({
             selector: 'aup-password-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -1028,7 +2052,7 @@ 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 #nilOptionTemplateRef let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
  * </aup-select_input>
  */
 var SelectInputComponent = /** @class */ (function (_super) {
@@ -1071,7 +2095,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)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [":host{display:inline-block}mat-form-field{width:100%}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1085,9 +2109,9 @@ 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.valueModel.value = null;
+            _this.componentValueModel.value = null;
         });
-        _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+        _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
         return _this;
     }
     StringInputComponent.prototype.ngOnInit = function () {
@@ -1103,7 +2127,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)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
             styles: ["button[disabled]{visibility:hidden}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1134,7 +2158,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)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1144,7 +2168,10 @@ var TextInputComponent = /** @class */ (function (_super) {
 
 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;
@@ -1164,25 +2191,33 @@ var IconComponent = /** @class */ (function () {
             if (this.prefix) {
                 this.errorMessage = "Unknown icon \"" + iconName + "\"";
             }
-            this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
+            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 = __decorate([
+    IconComponent = IconComponent_1 = __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",
+            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() {
@@ -1659,7 +2694,8 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
 
 var noop = function () {
 };
-var ɵ0 = noop;
+var ɵ0$3 = noop;
+var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 var ColumnModel = /** @class */ (function () {
     function ColumnModel(columnId, defaults) {
         this.columnId = columnId;
@@ -1777,6 +2813,35 @@ var PropertyColumnModel = /** @class */ (function (_super) {
         }));
         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) {
         var _this = this;
         var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
@@ -1853,10 +2918,23 @@ var CustomValueColumnModel = /** @class */ (function (_super) {
         _this.cellRenderer(DefaultCellRendererComponent);
         return _this;
     }
-    CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
+    CustomValueColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
         var _this = this;
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+            if (firstTime) {
+                if (___default.isFunction(onComponentInitOrOptions)) {
+                    onComponentInitOrOptions(component);
+                }
+                else {
+                    if (___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        onComponentInitOrOptions.onComponentInit(component);
+                    }
+                }
+            }
             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;
     };
@@ -2029,6 +3107,9 @@ 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');
@@ -2055,12 +3136,6 @@ 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;
@@ -2086,6 +3161,9 @@ 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));
     };
@@ -2114,12 +3192,14 @@ var TableModel = /** @class */ (function () {
         }
         return column;
     };
+    // removeColumn(column: ColumnModel<Row>) {
+    //
+    // }
     TableModel.prototype.columnTextProperties = function (columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     };
     TableModel.prototype.getColumnTextProperties = function (column) {
-        var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
     };
     TableModel.prototype.startEditSession = function (row) {
         var _this = this;
@@ -2237,7 +3317,7 @@ var TableComponent = /** @class */ (function (_super) {
     TableComponent = __decorate([
         Component({
             selector: 'aup-table',
-            template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"\n      [ngClass]=\"tableModel.getRowClasses(row)\"\n  ></tr>\n\n</table>\n",
+            template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n      [ngClass]=\"tableModel.getRowClasses(row)\" [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n  ></tr>\n\n</table>\n",
             styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -2411,14 +3491,71 @@ var TableHeaderCellRendererComponent = /** @class */ (function () {
     ], TableHeaderCellRendererComponent.prototype, "defaultClassNames", void 0);
     TableHeaderCellRendererComponent = __decorate([
         Component({
-            selector: 'aup-table-header-cell-renderer',
-            template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-            styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
+            selector: 'aup-table-header-cell-renderer',
+            template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+            styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], TableHeaderCellRendererComponent);
+    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", [])
-    ], TableHeaderCellRendererComponent);
-    return TableHeaderCellRendererComponent;
-}());
+    ], TableRowMenuComponent);
+    return TableRowMenuComponent;
+}(DisposableComponent));
 
 var VerticalFocusContainerComponent = /** @class */ (function (_super) {
     __extends(VerticalFocusContainerComponent, _super);
@@ -2545,7 +3682,18 @@ var ComponentsModule = /** @class */ (function () {
                 DefaultHeaderCellRendererComponent,
                 TableHeaderCellRendererComponent,
                 IconComponent,
-                SectionHeaderComponent
+                SectionHeaderComponent,
+                TableRowMenuComponent,
+                ToolBarComponent,
+                CommandComponent,
+                PopupMenuComponent,
+                CommandGroupComponent,
+                CommandFaceComponent,
+                MoreMenuComponent,
+                SeparatorComponent,
+                FlexComponent,
+                CommandGroupMenuRendererComponent,
+                CommandGroupRendererComponent
             ],
             imports: [
                 CommonModule,
@@ -2564,7 +3712,9 @@ var ComponentsModule = /** @class */ (function () {
                 CdkScrollableModule,
                 FontAwesomeModule,
                 MatTooltipModule,
-                MatAutocompleteModule
+                MatAutocompleteModule,
+                MatMenuModule,
+                MatDividerModule
             ],
             exports: [
                 NumberInputComponent,
@@ -2588,22 +3738,19 @@ var ComponentsModule = /** @class */ (function () {
                 EditRowControls,
                 ColumnTemplateDirective,
                 IconComponent,
-                SectionHeaderComponent
+                SectionHeaderComponent,
+                TableRowMenuComponent,
+                CommandGroupComponent,
+                ToolBarComponent,
+                CommandComponent,
+                PopupMenuComponent,
+                CommandFaceComponent,
+                MoreMenuComponent,
+                SeparatorComponent,
+                FlexComponent
             ],
             providers: [
                 FocusBindingFactory
-                // {
-                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-                //     type: 'string',
-                //     editorClass: StringInputComponent
-                //   }, multi: true
-                // },
-                // {
-                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-                //     type: 'number',
-                //     editorClass: NumberInputComponent
-                //   }, multi: true
-                // }
             ]
         }),
         __metadata("design:paramtypes", [FaIconLibrary])
@@ -2682,7 +3829,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}.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}"]
+            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}"]
         })
     ], ActivityActionsComponent);
     return ActivityActionsComponent;
@@ -2694,13 +3841,27 @@ 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 () {
@@ -2726,6 +3887,13 @@ 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);
     };
@@ -2739,6 +3907,11 @@ 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));
 
@@ -2877,6 +4050,7 @@ 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;
@@ -2892,6 +4066,16 @@ 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;
@@ -2902,7 +4086,8 @@ var ActivityRef = /** @class */ (function () {
             },
             onCancel: function (error) {
                 self.finishActivity(function (deferred) { return deferred.reject(error); });
-            }
+            },
+            focused: this.focusedModel.readonly
         });
     };
     ActivityRef.prototype.finishActivity = function (resolveOrReject) {
@@ -2940,7 +4125,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);
@@ -3003,8 +4188,9 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     function ActivityContainerComponent() {
         var _this = _super.call(this) || this;
         _this.dynamicHeight = false;
-        _this.activityTabs = [];
+        _this.activityRefs = [];
         _this.garbage = new GarbageCollector();
+        _this.inAnimation = new MutableValueModel(false);
         return _this;
     }
     ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -3042,6 +4228,7 @@ 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.
@@ -3052,7 +4239,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         if (!this.isActive()) {
             lang$1.illegalState('no activity in progress');
         }
-        return ___default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+        return ___default.findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
     };
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
@@ -3091,14 +4278,14 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         });
         this.launchActivity(activityRef);
         // if this is the first activity let the interaction service know.
-        if (this.activityTabs.length === 1) {
+        if (this.activityRefs.length === 1) {
             // console.log('Now active!!!');
             this.interactionServiceApi.notifyActive(this);
         }
         return activityRef.activityResult;
     };
     ActivityContainerComponent.prototype.getActiveActivityCount = function () {
-        return this.activityTabs.filter(function (ref) { return !ref.isComplete(); }).length;
+        return this.activityRefs.filter(function (ref) { return !ref.isComplete(); }).length;
     };
     /**
      * Checks if this interaction context has finished an is in the process of waiting
@@ -3125,7 +4312,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.activityTabs = [];
+            this.activityRefs = [];
             var promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(function () {
@@ -3135,14 +4322,15 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
-        var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
-        this.activityTabs = cleanedTabs.concat(activityRef);
+        var cleanedTabs = this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+        this.activityRefs = cleanedTabs.concat(activityRef);
         this.synchroniseSelectedTabIndex();
     };
     ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
         return index;
     };
     ;
+    // @Trace()
     ActivityContainerComponent.prototype.onAnimationFinished = function () {
         if (this.onAnimationFinishedJob) {
             this.onAnimationFinishedJob();
@@ -3152,15 +4340,21 @@ 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.getSelectedOutlet().component.onActivityReady();
-                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+                _this.activityRefs = _this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+                _this.inAnimation.value = false;
+                _this.activityRefs.forEach(function (ref, index) {
+                    ref.setFocused(index === newIndex);
+                });
             };
         }
     };
@@ -3168,6 +4362,10 @@ 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) {
@@ -3190,16 +4388,10 @@ 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 tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+            template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let 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",
             styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -4270,6 +5462,9 @@ 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;
@@ -4279,7 +5474,7 @@ var PlaceComponent = /** @class */ (function (_super) {
         assert.isNil(this.visitModel.value);
         var when = Dsl.disposeWith(this).when;
         this.visitModel.value = visit;
-        DebugContext.get(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
+        DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
         this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _this.installBinding(parameterDef); });
         when.valueOf(this.visitModel).changes(function (current, previous) {
             notifyVisitChanged(current, previous);
@@ -4327,6 +5522,19 @@ 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;
@@ -5427,75 +6635,6 @@ 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) {
@@ -5691,6 +6830,7 @@ 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;
@@ -5791,12 +6931,6 @@ 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'
@@ -5810,6 +6944,75 @@ 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.
@@ -5869,6 +7072,7 @@ 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)
@@ -5877,8 +7081,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             .pluckList('children')
             .pluck('component');
         var activatePlaceType = chain(_this.activePlaceModel).map(function (p) { return p.constructor; });
-        _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder)
+        _this.placesInAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder);
+        _this.activePlaceAnimationPosition = _this.placesInAnimationOrder
             .reduce(function (placesInOrder) {
             var placeIndex = 0;
             if (activatePlaceType.value) {
@@ -5889,14 +7094,16 @@ 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.valueOf(_this.navigationInProgress).becomesFalsey(function () {
+        when(_this.navigationInProgress).becomesFalsey(function () {
             _this.checkStateAndInitialise();
         });
-        when.valueOf(_this.outletActivated).becomesTruthy(function () {
+        when(_this.outletActivated).becomesTruthy(function () {
             _this.checkStateAndInitialise();
         });
         chain(_this._activePlaceModel)
@@ -5909,7 +7116,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.getAnimationOrder = function () {
-        return this.placeAnimationOrder.value;
+        return this.activePlaceAnimationPosition.value;
     };
     Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
         get: function () {
@@ -5920,7 +7127,10 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     });
     // @Trace()
     PlaceOutletComponent.prototype.navigate = function (visit) {
-        // console.log({ activatedRoute: this._activatedRouteModel.value });
+        // const place = this.placesInAnimationOrder.query().findMatching(p => visit.placeDefinition.component === p);
+        // if (!place) {
+        //     lang.illegalState()
+        // }
         this.placeRouter.navigate(visit, {
             relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
         });
@@ -5946,14 +7156,25 @@ 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();
     };
-    // @Trace()
+    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 + ".");
+                }
+            }
+        }
+    };
     PlaceOutletComponent.prototype.onOutletDeactivated = function () {
         this.outletActivated.value = false;
         this._activePlaceModel.value = null;
@@ -5970,7 +7191,6 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             this.initialisePlace(routerVisit, activePlace);
         }
     };
-    // @Trace()
     PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
         var _this = this;
         var visitModel = new MutableValueModel(routerVisit);
@@ -5978,9 +7198,18 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         activePlace.initialiseVisit(routerVisit, function (current, previous) {
             _this.pushVisitChangeToRoute(previous, current);
         });
-        if (!this.animateModel.value) {
-            // we're not animating so trigger any post animation callbacks now.
-            this.animationDone();
+        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;
         }
         var _a = Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
         when.valueOf(this.routerVisitModel)
@@ -6003,8 +7232,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.animationDone = function () {
-        if (this._activePlaceModel.value) {
-            this._activePlaceModel.value.onPlaceReady();
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
         }
     };
     PlaceOutletComponent.ctorParameters = function () { return [
@@ -6037,10 +7267,22 @@ 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=\"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",
+            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",
             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}"]
         }),
@@ -6071,10 +7313,10 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
         return _this;
     }
-    AbstractPlaceNavigationComponent.prototype.getNav = function (placeDef) {
+    AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
         var navItem = placeDef.getPlaceData('nav');
         return {
-            title: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
+            text: 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); }
         };
@@ -6108,7 +7350,7 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [PlaceDefinition]),
         __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+    ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
     AbstractPlaceNavigationComponent = __decorate([
         Component({
             template: ''
@@ -6169,7 +7411,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]=\"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",
+            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",
             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])
@@ -6177,25 +7419,6 @@ 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
@@ -6234,7 +7457,7 @@ var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav()
+ *     nav: I18n.places.myPlace.nav
  *   }
  * })
  */
@@ -6270,7 +7493,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]=\"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",
+            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",
             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])
@@ -6278,6 +7501,25 @@ 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() {
     }
@@ -6824,8 +8066,7 @@ function installMechanics(prototype, propertyKey, backingModel, tagPrefix, isEmp
         binding: null
     };
     var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
-    DebugContext.get(mechanics.backingModel).tag(tag);
-    Logger.get(mechanics.backingModel).tag(tag);
+    DebugContext.getOrCreate(mechanics.backingModel).tag(tag);
     Object.defineProperty(prototype, propertyKey, {
         get: function () {
             return mechanics.backingModel;
@@ -6887,5 +8128,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, 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, 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, PlaceModule as ɵbm, ComponentsModule as ɵbn, EmptyStateComponent as ɵbo, BusyOverlayComponent as ɵbp, PlaceOutletComponent as ɵbq, leftRightPlaceAnimation as ɵbr, LEFT_RIGHT_PLACE_ANIMATION as ɵbs, AUP_PLACE_CONFIG as ɵbt, PlaceRouter as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, UrlService as ɵby, PlaceHistory as ɵbz, FocusBindingDirective as ɵc, TabbedPlaceNavigationComponent as ɵca, AbstractPlaceNavigationComponent as ɵcb, ListPlaceNavComponent as ɵcc, SidePlaceNavigationComponent as ɵcd, InteractionModule as ɵce, ActivityContainerComponent as ɵcf, AbstractInteractionContext as ɵcg, ActivityOutletComponent as ɵch, ConfirmationDialogComponent as ɵci, ACTIVITY_DATA as ɵcj, Activity as ɵck, ConfirmThenDialogComponent as ɵcm, AlertDialogComponent as ɵcn, InPlaceInteractionContextComponent as ɵcp, AddItemInteractionContextComponent as ɵcq, ActivityActionsComponent as ɵcr, PopupInteractionContextComponent as ɵcs, StringInputActivity as ɵct, AbstractInputActivity as ɵcu, SelectInputActivity as ɵcv, InteractionContextTriggerFor as ɵcw, 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, 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, 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 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map