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

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } 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';
@@ -9,25 +9,29 @@ import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/t
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, FocusManager, Form, Guard, MutableListModel, MutableValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, DebugContext, Binding, Functions } from '@coolon/pectin';
-import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, 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 produce from 'immer';
-import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
-import { 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';
@@ -369,11 +373,844 @@ CardContainerComponent = __decorate([
     Component({
         selector: 'aup-card-container',
         template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <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);
 
+var TrackBy;
+(function (TrackBy) {
+    TrackBy.byIndex = (data, index) => index;
+})(TrackBy || (TrackBy = {}));
+
+var CommandFace;
+(function (CommandFace) {
+    let 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;
+    class Adapter {
+        constructor(face) {
+            this.face = face;
+        }
+        get text() {
+            return CommandFace.getTextOf(this.face);
+        }
+        get icon() {
+            return CommandFace.getIconOf(this.face);
+        }
+        get iconPosition() {
+            return CommandFace.getIconPositionOf(this.face);
+        }
+        get tooltip() {
+            return CommandFace.getTooltipOf(this.face);
+        }
+        get iconPositionStart() {
+            return this.iconPosition === CommandFace.Position.START;
+        }
+        get iconPositionEnd() {
+            return this.iconPosition === CommandFace.Position.END;
+        }
+        get color() {
+            return CommandFace.getColorOf(this.face);
+        }
+        get style() {
+            return CommandFace.getStyleOf(this.face);
+        }
+    }
+    __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);
+    CommandFace.Adapter = Adapter;
+})(CommandFace || (CommandFace = {}));
+
+class ViewData {
+}
+(function (ViewData) {
+    class FaceData extends ViewData {
+        constructor(face) {
+            super();
+            this.faceAdapter = new CommandFace.Adapter(face);
+        }
+    }
+    ViewData.FaceData = FaceData;
+    class GroupData extends FaceData {
+        constructor(face, xPosition, yPosition, children) {
+            super(face);
+            this.xPosition = xPosition;
+            this.yPosition = yPosition;
+            this.children = children;
+        }
+        get hasMixedIcons() {
+            const hasFaces = this.children.filter(c => ViewData.hasFace(c));
+            const iconCount = hasFaces.filter(c => !!c.faceAdapter.icon).length;
+            return iconCount > 0 && hasFaces.length !== iconCount;
+        }
+    }
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], GroupData.prototype, "hasMixedIcons", null);
+    ViewData.GroupData = GroupData;
+    class CommandData extends FaceData {
+        constructor(face, command) {
+            super(face);
+            this.command = command;
+        }
+    }
+    ViewData.CommandData = CommandData;
+    class SeparatorData extends ViewData {
+    }
+    ViewData.SeparatorData = SeparatorData;
+    class FlexData extends 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 = {}));
+
+let CommandGroupMenuRendererComponent = class CommandGroupMenuRendererComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this.groupViewDataModel = new MutableValueModel();
+        this.commandFired = new EventEmitter();
+        this.ViewData = ViewData;
+        this.TrackBy = TrackBy;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.children = chain(this.groupViewDataModel).pluckList('children');
+        this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
+    }
+    getCommand(data) {
+        const command = ViewData.getCommand(data);
+        const { when } = Dsl.disposeWith(this);
+        when(command.busy).becomesFalsey(() => this.commandFired.emit());
+        return command;
+    }
+};
+CommandGroupMenuRendererComponent.ctorParameters = () => [
+    { 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);
+
+let CommandGroupRendererComponent = class CommandGroupRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.renderRootNode = true;
+        this.ViewData = ViewData;
+        this.TrackBy = TrackBy;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.childViewDataModels = chain(this.groupViewDataModel).pluckList('children');
+    }
+};
+__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);
+
+class Registration extends GarbageCollector {
+}
+(function (Registration) {
+    class FaceRegistration extends Registration {
+        constructor(faceModel) {
+            super();
+            this.faceModel = faceModel;
+        }
+    }
+    Registration.FaceRegistration = FaceRegistration;
+    class CommandRegistration extends FaceRegistration {
+        constructor(faceModel, command) {
+            super(faceModel);
+            this.command = command;
+        }
+        toTemplate() {
+            return new ViewData.CommandData(this.faceModel.value, this.command);
+        }
+    }
+    Registration.CommandRegistration = CommandRegistration;
+    class GroupRegistration extends FaceRegistration {
+        constructor(faceModel, group) {
+            super(faceModel);
+            this.group = group;
+        }
+        toTemplate() {
+            return new ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(r => r.toTemplate()));
+        }
+    }
+    Registration.GroupRegistration = GroupRegistration;
+    class SeparatorRegistration extends Registration {
+        constructor() {
+            super(...arguments);
+            this.template = new ViewData.SeparatorData();
+        }
+        toTemplate() {
+            return this.template;
+        }
+    }
+    Registration.SeparatorRegistration = SeparatorRegistration;
+    class FlexRegistration extends Registration {
+        constructor() {
+            super(...arguments);
+            this.template = new ViewData.FlexData();
+        }
+        toTemplate() {
+            return this.template;
+        }
+    }
+    Registration.FlexRegistration = FlexRegistration;
+    function hasFace(entry) {
+        return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+    }
+    Registration.hasFace = hasFace;
+})(Registration || (Registration = {}));
+
+class CommandGroup extends GarbageCollector {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this._rootTemplate = new MutableValueModel();
+        this._registrations = new MutableListModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.childTemplates = chain(this._rootTemplate).pluckList('children');
+        this.initialised = chain(this._rootTemplate).isNotNil();
+    }
+    initialise() {
+        this.rebuildTemplates();
+    }
+    get rootTemplate() {
+        return this._rootTemplate.readonly;
+    }
+    get registrations() {
+        return this._registrations.readonly;
+    }
+    notifyChanged() {
+        if (this.parent) {
+            this.parent.notifyChanged();
+        }
+        else {
+            this.rebuildTemplates();
+        }
+    }
+    notifyChildFaceChanged(is, was) {
+        this.notifyChanged();
+    }
+    rebuildTemplates() {
+        this._rootTemplate.value = new ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
+    }
+    get depth() {
+        return this.isRoot() ? 0 : this.parent.depth + 1;
+    }
+    isRoot() {
+        return false;
+    }
+    registerCommand(command, faceModel) {
+        return this.register(new Registration.CommandRegistration(faceModel, command));
+    }
+    registerGroup(group, faceModel) {
+        return this.register(new Registration.GroupRegistration(faceModel, group));
+    }
+    registerFlex(component) {
+        return this.register(new Registration.FlexRegistration());
+    }
+    registerSeparator(component) {
+        return this.register(new Registration.SeparatorRegistration());
+    }
+    register(registration) {
+        this._registrations.push(registration);
+        if (registration instanceof Registration.FaceRegistration) {
+            const { when } = Dsl.disposeWith(registration);
+            when(registration.faceModel).changes((is, was) => {
+                this.notifyChildFaceChanged(is, was);
+            }, { asLongAs: this.initialised });
+        }
+        registration.onDispose(() => this._registrations.remove(registration));
+        return registration;
+    }
+}
+(function (CommandGroup) {
+    class Root extends CommandGroup {
+        isRoot() {
+            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);
+    CommandGroup.Root = Root;
+    function factory() {
+        return new Root();
+    }
+    CommandGroup.factory = factory;
+})(CommandGroup || (CommandGroup = {}));
+
+var CommandGroupComponent_1;
+let CommandGroupComponent = CommandGroupComponent_1 = class CommandGroupComponent extends CommandGroup {
+    constructor(parent) {
+        super(parent);
+        this.parent = parent;
+        this.xPosition = 'after';
+        this.yPosition = 'below';
+        this.parent.registerGroup(this, this.faceModel);
+    }
+};
+CommandGroupComponent.ctorParameters = () => [
+    { 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);
+
+/**
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
+ */
+let CommandFaceComponent = class CommandFaceComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.faceModel = new MutableValueModel();
+        this.ignoreIcon = false;
+        this.ignoreText = false;
+        this.includeMissingIconInLayout = false;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        // overkill /c: when all you have is a hammer...
+        const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));
+        this.iconModel = faceAdapter.pluck('icon');
+        this.textModel = faceAdapter.pluck('text');
+        this.positionModel = faceAdapter.pluck('iconPosition');
+        this.colorModel = faceAdapter.pluck('color');
+    }
+    get requiresMissingIconInLayout() {
+        return this.includeMissingIconInLayout && !this.iconModel.value;
+    }
+    ngOnInit() {
+    }
+    get iconPosition() {
+        var _a;
+        return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : CommandFace.Position.START;
+    }
+    get shouldIncludeIcon() {
+        return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+    }
+    get iconStart() {
+        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;
+    }
+    get iconEnd() {
+        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;
+    }
+    get text() {
+        return this.ignoreText ? undefined : this.textModel.value;
+    }
+    get color() {
+        return this.colorModel.value;
+    }
+};
+__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);
+
+/**
+ *
+ */
+let CommandComponent = class CommandComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this.CommandFace = CommandFace;
+        const { chain, switchOn } = Dsl.disposeWith(this);
+        this.activeFaceModel = switchOn(this.command.busy).toValue(when => {
+            when.equalTo(true, this.busyFaceModel);
+            when.otherwise(this.faceModel);
+        }).otherwise(this.faceModel);
+        this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));
+        this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));
+        if (parent) {
+            this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));
+        }
+    }
+    ngOnInit() {
+    }
+};
+CommandComponent.ctorParameters = () => [
+    { 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);
+
+/**
+ *
+ */
+let FlexComponent = class FlexComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        if (parent) {
+            parent.registerFlex(this);
+        }
+    }
+    ngOnInit() {
+    }
+};
+FlexComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
+FlexComponent = __decorate([
+    Component({
+        selector: 'aup-flex',
+        template: ``
+    }),
+    __metadata("design:paramtypes", [CommandGroup])
+], FlexComponent);
+
+const ɵ0 = CommandGroup.factory;
+/**
+ *
+ */
+let MoreMenuComponent = class MoreMenuComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+        this.tooltipModel = new MutableValueModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        group.xPosition = 'before'; // this should be the default unless overridden by the user.
+        group.faceModel = chain(this.tooltipModel).map(tooltip => {
+            return {
+                icon: () => 'mat:more_vert',
+                tooltip() {
+                    return tooltip;
+                }
+            };
+        }, { allowNil: true });
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+};
+MoreMenuComponent.ctorParameters = () => [
+    { 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);
+
+const ɵ0$1 = CommandGroup.factory;
+/**
+ *
+ */
+let PopupMenuComponent = class PopupMenuComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        group.faceModel = this.faceModel;
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    ngAfterViewInit() {
+    }
+};
+PopupMenuComponent.ctorParameters = () => [
+    { 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);
+
+/**
+ *
+ */
+let SeparatorComponent = class SeparatorComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        if (parent) {
+            parent.registerSeparator(this);
+        }
+    }
+    isVertical() {
+        return this === null || this === void 0 ? void 0 : this.parent.isRoot();
+    }
+    ngOnInit() {
+    }
+};
+SeparatorComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: Optional }] }
+];
+SeparatorComponent = __decorate([
+    Component({
+        selector: 'aup-separator',
+        template: `
+    <mat-divider [vertical]="isVertical()"></mat-divider>`
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [CommandGroup])
+], SeparatorComponent);
+
+const ɵ0$2 = CommandGroup.factory;
+/**
+ *
+ */
+let ToolBarComponent = class ToolBarComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    ngAfterViewInit() {
+    }
+};
+ToolBarComponent.ctorParameters = () => [
+    { 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);
+
 let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
     constructor(focusManager) {
         super();
@@ -467,6 +1304,7 @@ FocusableComponent = __decorate([
 let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
+        this.onValueEditedListeners = new EventListenerList();
         this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -515,19 +1353,19 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
         return this.enabled.value;
     }
     get enabled() {
-        return this.inputModel.enabled;
+        return this.formValueModel.enabled;
     }
     hasErrors() {
         return !this.errorList.query().isEmpty();
     }
     get errorList() {
-        return this.inputModel.errorList;
+        return this.formValueModel.errorList;
     }
     get firstError() {
         return this.hasErrors() ? this.errorList.value[0] : null;
     }
     get focusContext() {
-        return this.inputModel.focusContext;
+        return this.formValueModel.focusContext;
     }
     get floatLabel() {
         return this.dense ? 'never' : this.userFloatLabel;
@@ -535,6 +1373,13 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
     get showHint() {
         return this.dense ? false : !!this.hint;
     }
+    /**
+     * Invokes the callback when this components value is changed by a user edit.
+     * @param callback
+     */
+    onValueEdited(callback) {
+        return this.onValueEditedListeners.add(callback);
+    }
 };
 __decorate([
     Input(),
@@ -634,29 +1479,42 @@ let AbstractListInputComponent = class AbstractListInputComponent extends Abstra
          * 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();
-        const { when } = Dsl.disposeWith(this);
-        when(this.inputModel).changes(value => this.valueChange.emit(value), {
+        const { when, valueOf, chain } = Dsl.disposeWith(this);
+        const binding = new Binding.Identity(this.formValueModel, this.componentListModel).writeRight();
+        const inExternalChange = valueOf.any(this.setValueIsInProgress, chain(binding.direction).equals(Binding.Direction.RIGHT)).areTruthy();
+        when(this.componentListModel).changes((is, was) => {
+            this.valueChange.emit(is);
+            this.onValueEditedListeners.fire(l => 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`);
     }
+    // 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 value(value) {
-        if (!this.listHolder) {
-            this.setValueIsInitialising.whileTrue(() => {
+        this.setValueIsInProgress.whileTrue(() => {
+            if (!this.listHolder) {
                 this.listHolder = new MutableListModel(value);
                 this.listModel = this.listHolder;
-            });
-        }
-        else {
-            this.listHolder.value = value;
-        }
+            }
+            else {
+                this.listHolder.value = value;
+            }
+        });
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
+    Input(), TrackExternal({ delegateTo: 'formValueModel' }),
     __metadata("design:type", Object)
 ], AbstractListInputComponent.prototype, "listModel", void 0);
 __decorate([
@@ -687,41 +1545,121 @@ let AbstractValueInputComponent = class AbstractValueInputComponent extends Abst
          * 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.setValueIsInitialising = new Guard();
+        this.formValueModel = this.registerDisposable(new Form.DelegatingValueModel());
+        this.setValueInProgress = new Guard();
+        this.componentValueModel = new MutableValueModel();
         this.valueChange = new EventEmitter();
-        const { when } = Dsl.disposeWith(this);
-        when(this.inputModel).changes(value => this.valueChange.emit(value), { initialValue: 'ignore', unless: this.setValueIsInitialising });
+        const { when, chain, valueOf } = Dsl.disposeWith(this);
+        const binding = new Binding.Identity(this.formValueModel, this.componentValueModel).writeRight();
+        const inExternalChange = valueOf.any(this.setValueInProgress, chain(binding.direction).equals(Binding.Direction.RIGHT)).areTruthy();
+        when(this.componentValueModel).changes((is, was) => {
+            this.valueChange.emit(is);
+            this.onValueEditedListeners.fire(l => l(is, was));
+        }, {
+            initialValue: 'ignore',
+            // we never fire events during an external set value operation. This allows
+            // the component to behave when used in the conventional angular
+            // fashion, i.e. [(value)]="..."
+            unless: inExternalChange
+        });
+        DebugContext.tag(this.formValueModel, `${this.constructor.name}.formValueModel`);
     }
+    // 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 value(value) {
-        if (!this.valueHolder) {
-            this.setValueIsInitialising.whileTrue(() => {
-                this.valueHolder = new MutableValueModel(value);
-                this.valueModel = this.valueHolder;
-            });
-        }
-        else {
-            this.valueHolder.value = value;
-        }
+        this.setValueInProgress.whileTrue(() => {
+            if (!this.plainValueHolder) {
+                this.plainValueHolder = new MutableValueModel(value);
+                this.valueModel = this.plainValueHolder;
+            }
+            else {
+                this.plainValueHolder.value = value;
+            }
+        });
+    }
+};
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'formValueModel' }),
+    __metadata("design:type", Object)
+], AbstractValueInputComponent.prototype, "valueModel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], AbstractValueInputComponent.prototype, "value", null);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AbstractValueInputComponent.prototype, "valueChange", void 0);
+AbstractValueInputComponent = __decorate([
+    Component({ template: '' }),
+    __metadata("design:paramtypes", [])
+], AbstractValueInputComponent);
+
+/**
+ * Using templates (not only supported for nil values:
+ * <aup-autocomplete-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-autocomplete-input>
+ */
+let AutocompleteInputComponent = class AutocompleteInputComponent extends AbstractValueInputComponent {
+    constructor() {
+        super();
+        this.filterValue = new MutableValueModel();
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        const lowerCaseFilterValue = chain(this.filterValue)
+            .map(v => ___default.isString(v) ? v.toLowerCase() : '');
+        this.filteredOptions = chain(this.optionsModel)
+            .select(option => {
+            return ___default.isEmpty(this.filterValue.value) || this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+        }, { dependsOn: lowerCaseFilterValue });
+    }
+    ngOnInit() {
+    }
+    formatOption(option) {
+        return this.optionLabelFormat(option);
+    }
+    updateFilter($event) {
+        this.filterValue.value = $event;
+    }
+    onSelect($event) {
+        this.valueModel.value = $event.option.value;
     }
 };
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
+    Input(), TrackExternal(),
+    __metadata("design:type", ListModel)
+], AutocompleteInputComponent.prototype, "optionsModel", void 0);
+__decorate([
+    Input(), StoreInListModel('optionsModel'),
+    __metadata("design:type", Array)
+], AutocompleteInputComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
     __metadata("design:type", Object)
-], AbstractValueInputComponent.prototype, "valueModel", void 0);
+], AutocompleteInputComponent.prototype, "optionLabel", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], AbstractValueInputComponent.prototype, "value", null);
+    __metadata("design:type", Boolean)
+], AutocompleteInputComponent.prototype, "allowNil", void 0);
 __decorate([
-    Output(),
-    __metadata("design:type", Object)
-], AbstractValueInputComponent.prototype, "valueChange", void 0);
-AbstractValueInputComponent = __decorate([
-    Component({ template: '' }),
+    ContentChild('nilOptionTemplate'),
+    __metadata("design:type", TemplateRef)
+], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
+AutocompleteInputComponent = __decorate([
+    Component({
+        selector: 'aup-autocomplete-input',
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+    }),
     __metadata("design:paramtypes", [])
-], AbstractValueInputComponent);
+], AutocompleteInputComponent);
 
 let CheckboxInputComponent = class CheckboxInputComponent extends AbstractValueInputComponent {
     constructor() {
@@ -745,12 +1683,56 @@ __decorate([
 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", [])
 ], CheckboxInputComponent);
 
+/**
+ * Using templates:
+ * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-multiple-select_input>
+ */
+let MultipleSelectInputComponent = class MultipleSelectInputComponent extends AbstractListInputComponent {
+    constructor() {
+        super();
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+    }
+    ngOnInit() {
+    }
+};
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ListModel)
+], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+__decorate([
+    Input(), StoreInListModel('optionsModel'),
+    __metadata("design:type", Array)
+], MultipleSelectInputComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+__decorate([
+    ContentChild('optionTemplate'),
+    __metadata("design:type", TemplateRef)
+], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+MultipleSelectInputComponent = __decorate([
+    Component({
+        selector: 'aup-multiple-select-input',
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+    }),
+    __metadata("design:paramtypes", [])
+], MultipleSelectInputComponent);
+
 let NumberInputComponent = class NumberInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
@@ -773,7 +1755,7 @@ __decorate([
 NumberInputComponent = __decorate([
     Component({
         selector: 'aup-number-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"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", [])
@@ -791,7 +1773,7 @@ let PasswordInputComponent = class PasswordInputComponent extends AbstractValueI
 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", [])
@@ -801,6 +1783,7 @@ PasswordInputComponent = __decorate([
  * Using templates:
  * <aup-select-input [valueModel]="myModel" [options]="myOptions">
  *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
  * </aup-select_input>
  */
 let SelectInputComponent = class SelectInputComponent extends AbstractValueInputComponent {
@@ -842,7 +1825,7 @@ __decorate([
 SelectInputComponent = __decorate([
     Component({
         selector: 'aup-select-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"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", [])
@@ -853,9 +1836,9 @@ let StringInputComponent = class StringInputComponent extends AbstractValueInput
         super();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.clearCommand = Command.create(() => {
-            this.valueModel.value = null;
+            this.componentValueModel.value = null;
         });
-        this.clearCommand.disableWhile(chain.stringValue(this.valueModel).isBlank());
+        this.clearCommand.disableWhile(chain.stringValue(this.componentValueModel).isBlank());
     }
     ngOnInit() {
     }
@@ -871,7 +1854,7 @@ __decorate([
 StringInputComponent = __decorate([
     Component({
         selector: 'aup-string-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"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", [])
@@ -899,12 +1882,59 @@ __decorate([
 TextInputComponent = __decorate([
     Component({
         selector: 'aup-text-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"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", [])
 ], TextInputComponent);
 
+var IconComponent_1;
+let IconComponent = IconComponent_1 = class IconComponent {
+    constructor() {
+        this.allowedPrefixes = Enum.values(IconComponent_1.IconPrefix).map(p => `${p}:`);
+        this.iconPrefix = IconComponent_1.IconPrefix;
+    }
+    set icon(iconName) {
+        this._icon = iconName;
+        if (!iconName) {
+            this.errorMessage = 'icon is nil';
+            this.prefix = undefined;
+            return;
+        }
+        const colonIndex = iconName.indexOf(':');
+        if (colonIndex > 0) {
+            this.prefix = this.icon.slice(0, colonIndex);
+            this.suffix = this.icon.slice(colonIndex + 1);
+        }
+        if (this.prefix) {
+            this.errorMessage = `Unknown icon "${iconName}"`;
+        }
+        this.errorMessage = `Unknown icon prefix, expected one of [${this.allowedPrefixes.join(',')}] got "${this.prefix}:"`;
+    }
+    get icon() {
+        return this._icon;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], IconComponent.prototype, "icon", null);
+IconComponent = IconComponent_1 = __decorate([
+    Component({
+        selector: 'aup-icon',
+        template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
+        styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
+    })
+], IconComponent);
+(function (IconComponent) {
+    IconComponent.IconPrefix = Enum({
+        SVG: 'svg',
+        FONT_AWESOME: 'fa',
+        MATERIAL: 'mat'
+    });
+})(IconComponent || (IconComponent = {}));
+
 let NoopComponent = class NoopComponent {
     constructor() {
     }
@@ -1318,7 +2348,8 @@ SelectHeaderCellRendererComponent = __decorate([
 
 const noop = () => {
 };
-const ɵ0 = noop;
+const ɵ0$3 = noop;
+const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 class ColumnModel {
     constructor(columnId, defaults) {
         this.columnId = columnId;
@@ -1432,6 +2463,34 @@ class PropertyColumnModel extends ColumnModel {
         }));
         return this;
     }
+    mutableCellRenderer(componentType, options) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (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;
+            let 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((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;
+    }
     cellEditor(editor, validatorsOrInitialiser, onComponentInit) {
         const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
         const initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
@@ -1499,9 +2558,22 @@ class CustomValueColumnModel extends ColumnModel {
         this.getValue = getValue;
         this.cellRenderer(DefaultCellRendererComponent);
     }
-    cellRenderer(componentType) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+    cellRenderer(componentType, onComponentInitOrOptions) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (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;
     }
@@ -1663,6 +2735,9 @@ let TableModel = TableModel_1 = class TableModel {
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
         this._createForm = (row) => new DirtyTrackingForm();
+        this.trackBy = (index, item) => {
+            return this.identityOf ? this.identityOf(item) : index;
+        };
         this.identityOf = sourceOfTruth.identityOf;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
         this._columnsById = chain(this._columns).indexBy('columnId');
@@ -1684,11 +2759,6 @@ let TableModel = TableModel_1 = class TableModel {
     get rowsBeingEdited() {
         return this._rowsBeingEdited.readonly;
     }
-    getTrackByFunction() {
-        return (index, item) => {
-            return this.identityOf ? this.identityOf(item) : index;
-        };
-    }
     get columns() {
         return this._columns.readonly;
     }
@@ -1710,6 +2780,9 @@ let TableModel = TableModel_1 = class TableModel {
     addCustomColumn(columnId, dataAccessor) {
         return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     }
+    addComponentColumn(columnId, component, onComponentInitOrOptions) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, row => row)).cellRenderer(component, onComponentInitOrOptions);
+    }
     addTemplateColumn(columnId) {
         return this.addColumn(new CustomTemplateColumnModel(columnId, this));
     }
@@ -1738,12 +2811,14 @@ let TableModel = TableModel_1 = class TableModel {
         }
         return column;
     }
+    // removeColumn(column: ColumnModel<Row>) {
+    //
+    // }
     columnTextProperties(columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     }
     getColumnTextProperties(column) {
-        const factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
     }
     startEditSession(row) {
         const rowId = this.identityOf(row);
@@ -1857,7 +2932,7 @@ __decorate([
 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", [])
@@ -2032,6 +3107,73 @@ TableHeaderCellRendererComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], TableHeaderCellRendererComponent);
 
+class MenuItemData {
+    constructor(factory, face) {
+        this.factory = factory;
+        this.face = face;
+    }
+}
+/**
+ *
+ */
+let TableRowMenuComponent = class TableRowMenuComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.actions = [];
+        this.moreActions = [];
+    }
+    registerAction(commandFactory, properties) {
+        this.actions.push(new MenuItemData(commandFactory, properties));
+    }
+    registerMoreAction(commandFactory, properties) {
+        this.moreActions.push(new MenuItemData(commandFactory, properties));
+    }
+    ngOnInit() {
+    }
+    createMoreMenuCommand(item, value) {
+        const { when } = Dsl.disposeWith(this);
+        const command = item.factory.create(value);
+        when(command.busy).becomesFalsey(() => {
+            this.closeMoreMenu();
+        });
+        return command;
+    }
+    closeMoreMenu() {
+        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: `
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.faceModel"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.faceModel"></aup-command>
+          </aup-more-menu>
+      </ng-container>
+  `,
+        styles: [`:host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+  }`]
+    }),
+    __metadata("design:paramtypes", [])
+], TableRowMenuComponent);
+
 let VerticalFocusContainerComponent = class VerticalFocusContainerComponent extends FocusContainerComponent {
     constructor(focusManager) {
         super(focusManager);
@@ -2084,115 +3226,35 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
 __decorate([
-    HostListener('keyup.arrowRight', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowRight", null);
-__decorate([
-    HostListener('keyup.arrowDown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowDown", null);
-__decorate([
-    HostListener('keyup.arrowUp', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowUp", null);
-VerticalFocusContainerComponent = __decorate([
-    Component({
-        selector: 'aup-vertical-focus-container',
-        template: "<ng-content></ng-content>\n",
-        providers: [
-            { provide: FocusManager }
-        ],
-        styles: [":host{display:block}"]
-    }),
-    __param(0, Self()),
-    __metadata("design:paramtypes", [FocusManager])
-], VerticalFocusContainerComponent);
-
-let MultipleSelectInputComponent = class MultipleSelectInputComponent extends AbstractListInputComponent {
-    constructor() {
-        super();
-        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
-    }
-    ngOnInit() {
-    }
-};
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ListModel)
-], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
-__decorate([
-    Input(), StoreInListModel('optionsModel'),
-    __metadata("design:type", Array)
-], MultipleSelectInputComponent.prototype, "options", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], MultipleSelectInputComponent.prototype, "allowNil", void 0);
-__decorate([
-    ContentChild('optionTemplate'),
-    __metadata("design:type", TemplateRef)
-], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
-__decorate([
-    ContentChild('nilOptionTemplate'),
-    __metadata("design:type", TemplateRef)
-], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
-MultipleSelectInputComponent = __decorate([
-    Component({
-        selector: 'aup-multiple-select-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
-    }),
-    __metadata("design:paramtypes", [])
-], MultipleSelectInputComponent);
-
-let IconComponent = class IconComponent {
-    set icon(iconName) {
-        this._icon = iconName;
-        if (!iconName) {
-            this.errorMessage = 'icon is nil';
-            this.prefix = undefined;
-            return;
-        }
-        const colonIndex = iconName.indexOf(':');
-        if (colonIndex > 0) {
-            this.prefix = this.icon.slice(0, colonIndex);
-            this.suffix = this.icon.slice(colonIndex + 1);
-        }
-        if (this.prefix) {
-            this.errorMessage = `Unknown icon "${iconName}"`;
-        }
-        this.errorMessage = `Unknown icon prefix "${this.prefix}"`;
-    }
-    get icon() {
-        return this._icon;
-    }
-};
+    HostListener('keyup.arrowRight', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowRight", null);
 __decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], IconComponent.prototype, "icon", null);
-IconComponent = __decorate([
+    HostListener('keyup.arrowDown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+__decorate([
+    HostListener('keyup.arrowUp', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+VerticalFocusContainerComponent = __decorate([
     Component({
-        selector: 'aup-icon',
-        template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-        styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
-    })
-], IconComponent);
+        selector: 'aup-vertical-focus-container',
+        template: "<ng-content></ng-content>\n",
+        providers: [
+            { provide: FocusManager }
+        ],
+        styles: [":host{display:block}"]
+    }),
+    __param(0, Self()),
+    __metadata("design:paramtypes", [FocusManager])
+], VerticalFocusContainerComponent);
 
 let ComponentsModule = class ComponentsModule {
     constructor(faIconLibrary) {
@@ -2213,6 +3275,8 @@ ComponentsModule = __decorate([
             TextInputComponent,
             PasswordInputComponent,
             SelectInputComponent,
+            MultipleSelectInputComponent,
+            AutocompleteInputComponent,
             CheckboxInputComponent,
             ScrollContainerComponent,
             NoopComponent,
@@ -2232,9 +3296,19 @@ ComponentsModule = __decorate([
             SelectHeaderCellRendererComponent,
             DefaultHeaderCellRendererComponent,
             TableHeaderCellRendererComponent,
-            MultipleSelectInputComponent,
             IconComponent,
-            SectionHeaderComponent
+            SectionHeaderComponent,
+            TableRowMenuComponent,
+            ToolBarComponent,
+            CommandComponent,
+            PopupMenuComponent,
+            CommandGroupComponent,
+            CommandFaceComponent,
+            MoreMenuComponent,
+            SeparatorComponent,
+            FlexComponent,
+            CommandGroupMenuRendererComponent,
+            CommandGroupRendererComponent
         ],
         imports: [
             CommonModule,
@@ -2252,7 +3326,10 @@ ComponentsModule = __decorate([
             PortalModule,
             CdkScrollableModule,
             FontAwesomeModule,
-            MatTooltipModule
+            MatTooltipModule,
+            MatAutocompleteModule,
+            MatMenuModule,
+            MatDividerModule
         ],
         exports: [
             NumberInputComponent,
@@ -2261,6 +3338,8 @@ ComponentsModule = __decorate([
             PasswordInputComponent,
             CheckboxInputComponent,
             SelectInputComponent,
+            MultipleSelectInputComponent,
+            AutocompleteInputComponent,
             ScrollContainerComponent,
             NoopComponent,
             SwitchCaseComponent,
@@ -2273,12 +3352,20 @@ ComponentsModule = __decorate([
             TableComponent,
             EditRowControls,
             ColumnTemplateDirective,
-            MultipleSelectInputComponent,
             IconComponent,
-            SectionHeaderComponent
+            SectionHeaderComponent,
+            TableRowMenuComponent,
+            CommandGroupComponent,
+            ToolBarComponent,
+            CommandComponent,
+            PopupMenuComponent,
+            CommandFaceComponent,
+            MoreMenuComponent,
+            SeparatorComponent,
+            FlexComponent
         ],
         providers: [
-            FocusBindingFactory,
+            FocusBindingFactory
         ]
     }),
     __metadata("design:paramtypes", [FaIconLibrary])
@@ -2346,7 +3433,7 @@ ActivityActionsComponent = __decorate([
     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);
 
@@ -2355,12 +3442,21 @@ class Activity extends DisposableComponent {
     constructor() {
         super(...arguments);
         this._busyModel = new DelegatingValueModel().withDefault(false);
+        this._focusedModel = this.registerDisposable(new DelegatingValueModel());
         this.class = 'aup-activity';
     }
+    get isFocused() {
+        return this._focusedModel.value;
+    }
     initialise(nestedInteractionContext, activityContext) {
+        const { chain, when } = Dsl.disposeWith(this);
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
+        this._focusedModel.setDelegate(activityContext.focused);
+        when(this._focusedModel).becomesTruthy(() => {
+            this.onActivityReady();
+        });
     }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
@@ -2378,6 +3474,9 @@ class Activity extends DisposableComponent {
     get busy() {
         return this._busyModel.readonly;
     }
+    get focused() {
+        return this._focusedModel.readonly;
+    }
     busyWhile(busyModel) {
         this._busyModel.setDelegate(busyModel);
     }
@@ -2392,6 +3491,11 @@ __decorate([
     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);
 
 let AlertDialogComponent = class AlertDialogComponent extends Activity {
     constructor(alert) {
@@ -2511,6 +3615,7 @@ class ActivityRef {
         this.onComplete = onComplete;
         this._complete = false;
         this.deferredResult = Deferred.defer();
+        this.focusedModel = new MutableValueModel();
     }
     isActivityRealised() {
         return !!this._activity;
@@ -2522,6 +3627,12 @@ class ActivityRef {
         assert.isTruthy(this.isActivityRealised());
         return this._activity;
     }
+    setFocused(focused) {
+        this.focusedModel.value = focused;
+    }
+    get focused() {
+        return this.focusedModel.value;
+    }
     notifyActivityCreated(activity, nestedInteractionContext) {
         assert.isNil(this._activity);
         this._activity = activity;
@@ -2532,7 +3643,8 @@ class ActivityRef {
             },
             onCancel(error) {
                 self.finishActivity(deferred => deferred.reject(error));
-            }
+            },
+            focused: this.focusedModel.readonly
         });
     }
     finishActivity(resolveOrReject) {
@@ -2561,7 +3673,7 @@ let ActivityOutletComponent = class ActivityOutletComponent {
     }
     set activityRef(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);
@@ -2618,8 +3730,9 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     constructor() {
         super();
         this.dynamicHeight = false;
-        this.activityTabs = [];
+        this.activityRefs = [];
         this.garbage = new GarbageCollector();
+        this.inAnimation = new MutableValueModel(false);
     }
     ngOnInit() {
     }
@@ -2651,6 +3764,7 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     registerDisposable(disposable) {
         return this.garbage.registerDisposable(disposable);
     }
+    // @Trace()
     dispose() {
         // TODO: think about auto cancelling any outstanding activity on dispose.
         //       See NavigationState.Navigating for a use-case.
@@ -2661,7 +3775,7 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         if (!this.isActive()) {
             lang$1.illegalState('no activity in progress');
         }
-        return ___default.findLast(this.activityTabs, tab => !tab.isComplete());
+        return ___default.findLast(this.activityRefs, tab => !tab.isComplete());
     }
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
@@ -2695,14 +3809,14 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         });
         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;
     }
     getActiveActivityCount() {
-        return this.activityTabs.filter(ref => !ref.isComplete()).length;
+        return this.activityRefs.filter(ref => !ref.isComplete()).length;
     }
     /**
      * Checks if this interaction context has finished an is in the process of waiting
@@ -2726,7 +3840,7 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
             // 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 = [];
             const promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(() => {
@@ -2736,14 +3850,15 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     }
     // @Trace()
     launchActivity(activityRef) {
-        const cleanedTabs = this.activityTabs.filter(tab => !tab.isComplete());
-        this.activityTabs = cleanedTabs.concat(activityRef);
+        const cleanedTabs = this.activityRefs.filter(tab => !tab.isComplete());
+        this.activityRefs = cleanedTabs.concat(activityRef);
         this.synchroniseSelectedTabIndex();
     }
     activityIndex(index, activityRef) {
         return index;
     }
     ;
+    // @Trace()
     onAnimationFinished() {
         if (this.onAnimationFinishedJob) {
             this.onAnimationFinishedJob();
@@ -2753,14 +3868,20 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     /**
      * Synchronises the selected tab index.
      */
+    // @Trace()
     synchroniseSelectedTabIndex() {
         const previousIndex = this.tabs.selectedIndex;
         const newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
+            this.inAnimation.value = true;
+            this.activityRefs[newIndex].setFocused(false);
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = () => {
-                this.getSelectedOutlet().component.onActivityReady();
-                this.activityTabs = this.activityTabs.filter(tab => !tab.isComplete());
+                this.activityRefs = this.activityRefs.filter(tab => !tab.isComplete());
+                this.inAnimation.value = false;
+                this.activityRefs.forEach((ref, index) => {
+                    ref.setFocused(index === newIndex);
+                });
             };
         }
     }
@@ -2768,6 +3889,10 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     }
     // @Trace()
+    getSelectedTabIndex() {
+        return this.tabs.selectedIndex;
+    }
+    // @Trace()
     triggerTabSynchronisation() {
         if (this.syncSelectedTabTimeout) {
             clearTimeout(this.syncSelectedTabTimeout);
@@ -2790,16 +3915,10 @@ __decorate([
     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", [])
@@ -3776,13 +4895,16 @@ let PlaceComponent = PlaceComponent_1 = class PlaceComponent extends DisposableC
         super();
         this.visitModel = new MutableValueModel();
         this._inVisitUpdate = new Guard();
+        this._active = new MutableValueModel(false);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        when(this._active).becomesTruthy(() => this.onPlaceReady());
     }
     // @Trace()
     initialiseVisit(visit, notifyVisitChanged) {
         assert.isNil(this.visitModel.value);
         const { when } = Dsl.disposeWith(this);
         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(parameterDef => this.installBinding(parameterDef));
         when.valueOf(this.visitModel).changes((current, previous) => {
             notifyVisitChanged(current, previous);
@@ -3821,6 +4943,15 @@ let PlaceComponent = PlaceComponent_1 = class PlaceComponent extends DisposableC
     get childPlaces() {
         return this.placeDefinition.children.map(d => d.component);
     }
+    get active() {
+        return this._active.readonly;
+    }
+    /**
+     * Called by the router when the place is ready to interact after any animations have run.
+     */
+    _notifyActive(active) {
+        this._active.value = active;
+    }
     onPlaceReady() {
     }
 };
@@ -4822,70 +5953,6 @@ UrlService = __decorate([
     __metadata("design:paramtypes", [Router, Location, UrlSerializer])
 ], UrlService);
 
-class Visit {
-    constructor(placeDefinition, visitParameters = {}) {
-        this.placeDefinition = placeDefinition;
-        this.visitParameters = visitParameters;
-    }
-    // @Trace()
-    getRouteId() {
-        return this.placeDefinition.getRouteIdFrom(this);
-    }
-    // @Trace()
-    hasRouteId() {
-        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.
-     */
-    getParameter(parameterName) {
-        return this.visitParameters[parameterName];
-    }
-    // @Trace()
-    hasParameter(parameterName) {
-        return Object.keys(this.visitParameters).includes(parameterName);
-    }
-    replace(parameter, value) {
-        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
-    }
-    mergeRouteParameters(routeParams) {
-        // todo: whitelist parameters.
-        const routeParameterKeys = Object.keys(routeParams);
-        const params = {};
-        this.placeDefinition.getVisitParameterDefs().forEach(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.
-                const value = this.getParameter(def.name);
-                if (this.hasParameter(def.name)) {
-                    params[def.name] = value;
-                }
-            }
-        });
-        return new Visit(this.placeDefinition, params);
-    }
-    hasRoutingChangedFrom(other) {
-        const samePlace = other.placeDefinition === this.placeDefinition;
-        const sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    }
-    hasChangedFrom(other) {
-        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-    }
-    toDebugString() {
-        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(",");
-    }
-}
-
 let PlaceRouter = class PlaceRouter extends GarbageCollector {
     constructor(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
         super();
@@ -5047,6 +6114,7 @@ let PlaceRouter = class PlaceRouter extends GarbageCollector {
     get activeVisits() {
         return this._activeVisits.readonly;
     }
+    // @Trace()
     pushVisitChangesToRoute(previous, next) {
         return __awaiter(this, void 0, void 0, function* () {
             this.placeHistory.updateVisit(next);
@@ -5143,12 +6211,6 @@ PlaceRouter.ctorParameters = () => [
     { 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'
@@ -5160,6 +6222,70 @@ PlaceRouter = __decorate([
         PlaceHistory])
 ], PlaceRouter);
 
+class Visit {
+    constructor(placeDefinition, visitParameters = {}) {
+        this.placeDefinition = placeDefinition;
+        this.visitParameters = visitParameters;
+    }
+    // @Trace()
+    getRouteId() {
+        return this.placeDefinition.getRouteIdFrom(this);
+    }
+    // @Trace()
+    hasRouteId() {
+        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.
+     */
+    getParameter(parameterName) {
+        return this.visitParameters[parameterName];
+    }
+    // @Trace()
+    hasParameter(parameterName) {
+        return Object.keys(this.visitParameters).includes(parameterName);
+    }
+    replace(parameter, value) {
+        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
+    }
+    mergeRouteParameters(routeParams) {
+        // todo: whitelist parameters.
+        const routeParameterKeys = Object.keys(routeParams);
+        const params = {};
+        this.placeDefinition.getVisitParameterDefs().forEach(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.
+                const value = this.getParameter(def.name);
+                if (this.hasParameter(def.name)) {
+                    params[def.name] = value;
+                }
+            }
+        });
+        return new Visit(this.placeDefinition, params);
+    }
+    hasRoutingChangedFrom(other) {
+        const samePlace = other.placeDefinition === this.placeDefinition;
+        const sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
+    }
+    hasChangedFrom(other) {
+        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+    }
+    toDebugString() {
+        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(",");
+    }
+}
+
 const AUP_PLACE_CONFIG = new InjectionToken('AUP_PLACE_CONFIG');
 
 // Freezes the state of the components at the start of the animation.
@@ -5218,6 +6344,7 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
         this._activePlaceModel = new MutableValueModel();
         this.initialPlaceIndex = null;
         this._isPushingVisitToRoute = new MutableValueModel(false);
+        this.isVeryFirstLoad = true;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.parentOutletModel = new MutableValueModel(parentOutlet);
         const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
@@ -5226,8 +6353,9 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             .pluckList('children')
             .pluck('component');
         const activatePlaceType = chain(this.activePlaceModel).map(p => p.constructor);
-        this.placeAnimationOrder = chain(this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder)
+        this.placesInAnimationOrder = chain(this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder);
+        this.activePlaceAnimationPosition = this.placesInAnimationOrder
             .reduce((placesInOrder) => {
             let placeIndex = 0;
             if (activatePlaceType.value) {
@@ -5238,14 +6366,16 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             }
             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(() => {
+        when(this.navigationInProgress).becomesFalsey(() => {
             this.checkStateAndInitialise();
         });
-        when.valueOf(this.outletActivated).becomesTruthy(() => {
+        when(this.outletActivated).becomesTruthy(() => {
             this.checkStateAndInitialise();
         });
         chain(this._activePlaceModel)
@@ -5257,14 +6387,17 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     }
     // @Trace()
     getAnimationOrder() {
-        return this.placeAnimationOrder.value;
+        return this.activePlaceAnimationPosition.value;
     }
     get animationDuration() {
         return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
     }
     // @Trace()
     navigate(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
         });
@@ -5278,14 +6411,25 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     get activatedRouteModel() {
         return this._activatedRouteModel.readonly;
     }
-    // @Trace()
     onOutletActivated(routerOutlet, place) {
         this._activatedRouteModel.value = routerOutlet.activatedRoute;
         this._activePlaceModel.value = place;
+        this.validateAnimationState(place);
         this.outletActivated.value = true;
         this.checkStateAndInitialise();
     }
-    // @Trace()
+    validateAnimationState(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}.`);
+                }
+            }
+        }
+    }
     onOutletDeactivated() {
         this.outletActivated.value = false;
         this._activePlaceModel.value = null;
@@ -5302,16 +6446,24 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             this.initialisePlace(routerVisit, activePlace);
         }
     }
-    // @Trace()
     initialisePlace(routerVisit, activePlace) {
         const visitModel = new MutableValueModel(routerVisit);
         DebugContext.tag(visitModel, `PlaceOutletComponent[${activePlace.constructor.name})].visitModel`);
         activePlace.initialiseVisit(routerVisit, (current, previous) => {
             this.pushVisitChangeToRoute(previous, current);
         });
-        if (!this.animateModel.value) {
-            // we're not animating so trigger any post animation callbacks now.
-            this.animationDone();
+        const finishPlaceLoad = () => {
+            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;
         }
         const { when, chain, valueOf } = Dsl.disposeWith(activePlace);
         when.valueOf(this.routerVisitModel)
@@ -5333,8 +6485,9 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     }
     // @Trace()
     animationDone() {
-        if (this._activePlaceModel.value) {
-            this._activePlaceModel.value.onPlaceReady();
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
         }
     }
 };
@@ -5368,10 +6521,22 @@ __decorate([
     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}"]
     }),
@@ -5398,10 +6563,10 @@ let AbstractPlaceNavigationComponent = class AbstractPlaceNavigationComponent ex
         });
         this.activePlaceDefinition = chain(this._activePlaceComponent).pluck('placeDefinition');
     }
-    getNav(placeDef) {
+    getNavigationFace(placeDef) {
         const navItem = placeDef.getPlaceData('nav');
         return {
-            title: () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']),
+            text: () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']),
             tooltip: () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null),
             icon: () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null)
         };
@@ -5436,7 +6601,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", Object)
-], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
 AbstractPlaceNavigationComponent = __decorate([
     Component({
         template: ''
@@ -5497,29 +6662,12 @@ ListPlaceNavComponent.ctorParameters = () => [
 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])
 ], ListPlaceNavComponent);
 
-let TabbedPlaceNavigationComponent = class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
-    constructor(placeRouter) {
-        super(placeRouter);
-    }
-};
-TabbedPlaceNavigationComponent.ctorParameters = () => [
-    { 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);
-
 /**
  * @example
  * // Usage
@@ -5558,7 +6706,7 @@ TabbedPlaceNavigationComponent = __decorate([
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav()
+ *     nav: I18n.places.myPlace.nav
  *   }
  * })
  */
@@ -5593,12 +6741,29 @@ __decorate([
 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])
 ], SidePlaceNavigationComponent);
 
+let TabbedPlaceNavigationComponent = class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
+    constructor(placeRouter) {
+        super(placeRouter);
+    }
+};
+TabbedPlaceNavigationComponent.ctorParameters = () => [
+    { 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);
+
 let PlaceModule = class PlaceModule {
 };
 PlaceModule = __decorate([
@@ -6045,8 +7210,7 @@ function installMechanics(prototype, propertyKey, backingModel, tagPrefix, isEmp
         binding: null
     };
     const 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;
@@ -6108,5 +7272,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, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, EditRowControls as ɵba, ColumnTemplateDirective as ɵbb, DefaultCellRendererComponent as ɵbc, TableCellRendererComponent as ɵbd, SelectCellRendererComponent as ɵbe, SelectHeaderCellRendererComponent as ɵbf, DefaultHeaderCellRendererComponent as ɵbg, TableHeaderCellRendererComponent as ɵbh, MultipleSelectInputComponent as ɵbi, IconComponent as ɵbj, SectionHeaderComponent as ɵbk, PlaceModule as ɵbl, ComponentsModule as ɵbm, EmptyStateComponent as ɵbn, BusyOverlayComponent as ɵbo, PlaceOutletComponent as ɵbp, leftRightPlaceAnimation as ɵbq, LEFT_RIGHT_PLACE_ANIMATION as ɵbr, AUP_PLACE_CONFIG as ɵbs, PlaceRouter as ɵbu, InteractionService as ɵbv, ModalInteractionContextFactory as ɵbw, UrlService as ɵbx, PlaceHistory as ɵby, TabbedPlaceNavigationComponent as ɵbz, FocusBindingDirective as ɵc, AbstractPlaceNavigationComponent as ɵca, ListPlaceNavComponent as ɵcb, SidePlaceNavigationComponent as ɵcc, InteractionModule as ɵcd, ActivityContainerComponent as ɵce, AbstractInteractionContext as ɵcf, ActivityOutletComponent as ɵcg, ConfirmationDialogComponent as ɵch, ACTIVITY_DATA as ɵci, Activity as ɵcj, ConfirmThenDialogComponent as ɵcl, AlertDialogComponent as ɵcm, InPlaceInteractionContextComponent as ɵco, AddItemInteractionContextComponent as ɵcp, ActivityActionsComponent as ɵcq, PopupInteractionContextComponent as ɵcr, StringInputActivity as ɵcs, AbstractInputActivity as ɵct, SelectInputActivity as ɵcu, InteractionContextTriggerFor as ɵcv, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, CheckboxInputComponent as ɵo, ScrollContainerComponent as ɵp, NoopComponent as ɵq, SwitchCaseOption as ɵr, SwitchCaseWhenDirective as ɵs, SwitchCaseDefaultDirective as ɵt, SwitchCaseComponent as ɵu, FocusContainerComponent as ɵv, VerticalFocusContainerComponent as ɵw, FocusableComponent as ɵx, CardContainerComponent as ɵy, TableComponent as ɵz };
+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