@coolon/angular-ui-powerups 3.7.0-alpha.10 → 3.7.0-alpha.2

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

@@ -1,5 +1,5 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, InjectionToken, ViewEncapsulation, HostBinding, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, EventEmitter, SkipSelf, ViewChild, Output, ViewChildren, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -18,7 +18,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, ValueModel, StoreInValueModel, MutableListModel, Disposable, DelegatingListModel, StoreInListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, ListModel, StoreInListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { isNil, isEqual } from 'lodash';
@@ -27,7 +27,7 @@ import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescr
 import produce from 'immer';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig } from '@angular/material/dialog';
-import { RouterModule, ActivatedRouteSnapshot, NavigationStart, NavigationCancel, UrlSegment, Router, UrlSerializer, NavigationEnd, NavigationError, RouterOutlet } from '@angular/router';
+import { RouterModule, ActivatedRouteSnapshot, NavigationStart, NavigationCancel, UrlSegment, Router, UrlSerializer, NavigationEnd, NavigationError, RouterOutlet, RouterStateSnapshot } from '@angular/router';
 import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
 import { MatListModule } from '@angular/material/list';
@@ -511,363 +511,379 @@ var TrackBy;
     TrackBy.byIndex = (data, index) => index;
 })(TrackBy || (TrackBy = {}));
 
-class PopupAwareComponent extends DisposableComponent {
-    constructor(element, parent) {
-        super();
-        this.element = element;
-        this.parent = parent;
-        if (parent) {
-            this.registerDisposable(this.parent.register(this));
+class ViewData {
+}
+(function (ViewData) {
+    class FaceData extends ViewData {
+        constructor(faces) {
+            super();
+            this.faces = faces;
+            assert.notNil(faces);
+        }
+        get activeFaceAdapter() {
+            return new CommandFace.Adapter(this.faces.length > 0 ? this.faces[0] : undefined);
         }
     }
-    get componentIndex() {
-        return this.computeComponentIndex();
+    __decorate([
+        Memoize(),
+        __metadata("design:type", CommandFace.Adapter),
+        __metadata("design:paramtypes", [])
+    ], FaceData.prototype, "activeFaceAdapter", null);
+    ViewData.FaceData = FaceData;
+    class GroupData extends FaceData {
+        constructor(faces, xPosition, yPosition, children) {
+            super(faces);
+            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.activeFaceAdapter.icon).length;
+            return iconCount > 0 && hasFaces.length !== iconCount;
+        }
     }
-    computeComponentIndex() {
-        let node = this.element.nativeElement;
-        let index = 0;
-        while ((node = node.previousElementSibling)) {
-            index++;
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], GroupData.prototype, "hasMixedIcons", null);
+    ViewData.GroupData = GroupData;
+    class CommandData extends FaceData {
+        constructor(command, faces) {
+            super(faces);
+            this.command = command;
         }
-        return index;
     }
-    getFace() {
-        return undefined;
+    ViewData.CommandData = CommandData;
+    class SeparatorData extends ViewData {
     }
-}
-
-const POPUP_CONTAINER = new InjectionToken('popup-component');
-
-/**
- *
- */
-class CommandComponent extends PopupAwareComponent {
-    constructor(element, parent) {
-        super(element, parent);
-        this.CommandFace = CommandFace;
-        const { chain, switchOn } = Dsl.disposeWith(this);
-        this.faces = chain(this.command.busy).mapToList(busy => {
-            return busy ?
-                [this.busyFaceModel.value, this.faceModel.value] :
-                [this.faceModel.value, this.busyFaceModel.value];
-        }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })
-            .rejectNil();
-        this.activeFace = this.faces.first();
-        this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
-        this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
+    ViewData.SeparatorData = SeparatorData;
+    class FlexData extends ViewData {
     }
-    isActive(face) {
-        return this.activeFace.query().equals(face);
+    ViewData.FlexData = FlexData;
+    function as(type, viewData) {
+        return viewData instanceof type ? viewData : lang.illegalState(`expected instance of ${type.name}, got ${viewData.constructor.name}`);
     }
-    ngOnInit() {
+    ViewData.as = as;
+    function getCommand(data) {
+        return as(CommandData, data).command;
     }
-    ngAfterViewInit() {
-        // console.log(this.element.nativeElement.previousSibling)
+    ViewData.getCommand = getCommand;
+    function getTooltip(data) {
+        return as(FaceData, data).activeFaceAdapter.tooltip;
+    }
+    ViewData.getTooltip = getTooltip;
+    function getStyle(data) {
+        return as(FaceData, data).activeFaceAdapter.style;
+    }
+    ViewData.getStyle = getStyle;
+    function getColor(data) {
+        return as(FaceData, data).activeFaceAdapter.color;
+    }
+    ViewData.getColor = getColor;
+    function hasText(data) {
+        return !!as(FaceData, data).activeFaceAdapter.text;
+    }
+    ViewData.hasText = hasText;
+    function getFaces(data) {
+        return as(FaceData, data).faces;
+    }
+    ViewData.getFaces = getFaces;
+    function asGroup(viewData) {
+        return as(GroupData, viewData);
     }
-    getFace() {
-        return this.face;
+    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 = {}));
+
+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;
     }
 }
-CommandComponent.decorators = [
+CommandGroupMenuRendererComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-command',
-                template: "<ng-container [ngSwitch]=\"buttonStyle.value\">\n  <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n    <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n    <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
-                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
+                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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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"
             },] }
 ];
-CommandComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }] }
+CommandGroupMenuRendererComponent.ctorParameters = () => [
+    { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
 ];
-CommandComponent.propDecorators = {
-    command: [{ type: Input }],
-    faceModel: [{ type: Input }],
-    face: [{ type: Input }],
-    busyFaceModel: [{ type: Input }],
-    busyFace: [{ type: Input }]
+CommandGroupMenuRendererComponent.propDecorators = {
+    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
+    groupViewData: [{ type: Input }],
+    commandFired: [{ type: Output }],
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
 };
 __decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], CommandComponent.prototype, "command", void 0);
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", ValueModel)
-], CommandComponent.prototype, "faceModel", void 0);
-__decorate([
-    StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], CommandComponent.prototype, "face", void 0);
+    StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+
+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');
+    }
+}
+CommandGroupRendererComponent.decorators = [
+    { type: Component, args: [{
+                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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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 [faces]=\"ViewData.getFaces(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{align-items:center;display:inline-flex;flex-direction:row}: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}"]
+            },] }
+];
+CommandGroupRendererComponent.ctorParameters = () => [];
+CommandGroupRendererComponent.propDecorators = {
+    groupViewDataModel: [{ type: Input }],
+    groupViewData: [{ type: Input }],
+    renderRootNode: [{ type: Input }, { type: HostBinding, args: ['class.render-root',] }]
+};
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
-], CommandComponent.prototype, "busyFaceModel", void 0);
+], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
 __decorate([
-    StoreInValueModel('busyFaceModel'),
-    __metadata("design:type", Object)
-], CommandComponent.prototype, "busyFace", void 0);
+    StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
 
-class CommandContainer extends GarbageCollector {
-    constructor(parent) {
-        super();
-        this.parent = parent;
+class Registration extends GarbageCollector {
+}
+(function (Registration) {
+    class FaceRegistration extends Registration {
+        constructor(faceListModel) {
+            super();
+            this.faceListModel = faceListModel;
+        }
     }
-    get depth() {
-        return this.hasParent() ? this.parent.depth + 1 : 0;
+    Registration.FaceRegistration = FaceRegistration;
+    class CommandRegistration extends FaceRegistration {
+        constructor(command, faceListModel) {
+            super(faceListModel);
+            this.command = command;
+        }
+        toTemplate() {
+            return new ViewData.CommandData(this.command, this.faceListModel.value);
+        }
     }
-    hasParent() {
-        return !!this.parent;
+    Registration.CommandRegistration = CommandRegistration;
+    class GroupRegistration extends FaceRegistration {
+        constructor(faceModel, group) {
+            super(faceModel);
+            this.group = group;
+        }
+        toTemplate() {
+            return new ViewData.GroupData(this.faceListModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(r => r.toTemplate()));
+        }
     }
-    get orientation() {
-        return CommandContainer.Orientation.VERTICAL;
+    Registration.GroupRegistration = GroupRegistration;
+    class SeparatorRegistration extends Registration {
+        constructor() {
+            super(...arguments);
+            this.template = new ViewData.SeparatorData();
+        }
+        toTemplate() {
+            return this.template;
+        }
     }
-}
-(function (CommandContainer) {
-    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
-})(CommandContainer || (CommandContainer = {}));
+    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 ToolBarComponent extends CommandContainer {
-    constructor() {
+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();
     }
-    get orientation() {
-        return CommandContainer.Orientation.HORIZONTAL;
+    initialise() {
+        this.rebuildTemplates();
     }
-    // @Trace()
-    ngOnInit() {
+    get rootTemplate() {
+        return this._rootTemplate.readonly;
     }
-    // @Trace()
-    ngAfterContentInit() {
-        // this.group.initialise();
-    }
-    // @Trace()
-    ngAfterViewInit() {
+    get registrations() {
+        return this._registrations.readonly;
     }
-}
-ToolBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-tool-bar',
-                template: '<div class="toolbar-content"><ng-content></ng-content></div>',
-                encapsulation: ViewEncapsulation.None,
-                styles: [":host{display:inline-block}.toolbar-content{align-items:center;display:inline-flex;flex-direction:row}.toolbar-content>aup-separator{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
-            },] }
-];
-ToolBarComponent.ctorParameters = () => [];
-
-/**
- *
- */
-class SeparatorComponent extends PopupAwareComponent {
-    constructor(element, popupContainer, containerParent) {
-        super(element, popupContainer);
-        this.containerParent = containerParent;
+    notifyChanged() {
+        if (this.parent) {
+            this.parent.notifyChanged();
+        }
+        else {
+            this.rebuildTemplates();
+        }
     }
-    isHorizontalContainer() {
-        return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === CommandContainer.Orientation.HORIZONTAL;
+    notifyChildFaceChanged(is, was) {
+        this.notifyChanged();
     }
-    ngOnInit() {
+    rebuildTemplates() {
+        this._rootTemplate.value = new ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
     }
-}
-SeparatorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-separator',
-                template: `
-    <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`,
-                styles: [`:host {
-  }`,
-                    `:host(.horizontal-container) {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: stretch;
-    }`]
-            },] }
-];
-SeparatorComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [POPUP_CONTAINER,] }] },
-    { type: CommandContainer, decorators: [{ type: Optional }] }
-];
-SeparatorComponent.propDecorators = {
-    isHorizontalContainer: [{ type: HostBinding, args: ['class.horizontal-container',] }]
-};
-
-/**
- *
- */
-class AbstractPopupMenuComponent extends PopupAwareComponent {
-    constructor(element, parent) {
-        super(element, parent);
-        this._unorderedChildren = new MutableListModel();
-        this.faceModelDelegate = new DelegatingValueModel();
-        this.xPosition = 'after';
-        this.yPosition = 'below';
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
-        this.faceAdapterModel = chain(this.faceModelDelegate).map(f => new CommandFace.Adapter(f));
-        this.children = chain(this._unorderedChildren).sortBy('componentIndex');
+    get depth() {
+        return this.isRoot() ? 0 : this.parent.depth + 1;
     }
-    ngAfterContentChecked() {
-        // force the list to re-order as the child indicies may have changed.
-        this._unorderedChildren.value = [...this._unorderedChildren.value];
+    isRoot() {
+        return false;
     }
-    get faceAdapter() {
-        return this.faceAdapterModel.value;
+    registerCommand(command, faceListModel) {
+        return this.register(new Registration.CommandRegistration(command, faceListModel));
     }
-    isRoot() {
-        return !this.parent;
+    registerGroup(group, faceModel) {
+        return this.register(new Registration.GroupRegistration(faceModel, group));
     }
-    // @Trace()
-    register(component) {
-        this._unorderedChildren.push(component);
-        return Disposable.disposableThatRuns(() => {
-            this._unorderedChildren.remove(component);
-        });
+    registerFlex(component) {
+        return this.register(new Registration.FlexRegistration());
     }
-    onCommandFired() {
-        this.triggers.forEach(trigger => {
-            if (trigger.menuOpen) {
-                trigger.closeMenu();
-            }
-        });
+    registerSeparator(component) {
+        return this.register(new Registration.SeparatorRegistration());
     }
-    getFace() {
-        return this.faceAdapter.face;
+    register(registration) {
+        this._registrations.push(registration);
+        if (registration instanceof Registration.FaceRegistration) {
+            const { when } = Dsl.disposeWith(registration);
+            when(registration.faceListModel).changes((is, was) => {
+                this.notifyChildFaceChanged(is, was);
+            }, { asLongAs: this.initialised });
+        }
+        registration.onDispose(() => this._registrations.remove(registration));
+        return registration;
     }
 }
-AbstractPopupMenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-abstract-popup-menu',
-                template: ''
-            },] }
-];
-AbstractPopupMenuComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }] }
-];
-AbstractPopupMenuComponent.propDecorators = {
-    xPosition: [{ type: Input }],
-    yPosition: [{ type: Input }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
-};
+(function (CommandGroup) {
+    class Root extends CommandGroup {
+        constructor() {
+            super();
+        }
+        isRoot() {
+            return true;
+        }
+    }
+    __decorate([
+        TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], Root.prototype, "faceListModel", 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 = {}));
 
-/**
- *
- */
-class PopupMenuComponent extends AbstractPopupMenuComponent {
-    constructor(element, parent) {
-        super(element, parent);
+class CommandGroupComponent extends CommandGroup {
+    constructor(parent) {
+        super(parent);
+        this.parent = parent;
+        this.xPosition = 'after';
+        this.yPosition = 'below';
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
+        this.faceListModel = chain(this.faceModel).mapToList(v => [v]);
+        this.parent.registerGroup(this, this.faceListModel);
     }
 }
-PopupMenuComponent.decorators = [
+CommandGroupComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-popup-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                selector: 'aup-command-group',
+                template: '',
                 providers: [
-                    { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
+                    { provide: CommandGroup, useExisting: CommandGroupComponent }
                 ]
             },] }
 ];
-PopupMenuComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
+CommandGroupComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: SkipSelf }] }
 ];
-PopupMenuComponent.propDecorators = {
+CommandGroupComponent.propDecorators = {
     faceModel: [{ type: Input }],
-    face: [{ type: Input }]
+    face: [{ type: Input }],
+    xPosition: [{ type: Input }],
+    yPosition: [{ type: Input }]
 };
 __decorate([
-    TrackExternal({ delegateTo: 'faceModelDelegate' }),
+    TrackExternal(),
     __metadata("design:type", ValueModel)
-], PopupMenuComponent.prototype, "faceModel", void 0);
+], CommandGroupComponent.prototype, "faceModel", void 0);
 __decorate([
     StoreInValueModel('faceModel'),
     __metadata("design:type", Object)
-], PopupMenuComponent.prototype, "face", void 0);
-
-class PopupMenuRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this._childList = new DelegatingListModel();
-        this.commandFired = new EventEmitter();
-        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');
-        const faces = chain(this._childList).map(child => {
-            return child.getFace();
-        }).rejectNil();
-        const icons = faces.select(face => !!CommandFace.getIconOf(face));
-        const iconCount = icons.count();
-        const totalFaces = faces.count();
-        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
-    }
-    get parent() {
-        return this._parentComponent;
-    }
-    set parent(comp) {
-        this._parentComponent = comp;
-        this._childList.setDelegate(comp.children);
-    }
-    get children() {
-        return this.parent.children.value;
-    }
-    executeCommand(data) {
-        if (this.isCommand(data)) {
-            data.command.execute().finally(() => {
-                this.commandFired.emit();
-            });
-        }
-    }
-    isEnabled(data) {
-        return true; //ViewData.getCommand(data).enabled.value;
-    }
-    // @Trace()
-    onCommandFired() {
-        this.commandFired.emit();
-        this.triggers.forEach(trigger => {
-            if (trigger.menuOpen) {
-                trigger.closeMenu();
-            }
-        });
-    }
-    isCommand(child) {
-        return child instanceof CommandComponent;
-    }
-    isPopupMenu(child) {
-        return child instanceof AbstractPopupMenuComponent;
-    }
-    isSeparator(child) {
-        return child instanceof SeparatorComponent;
-    }
-    getTooltip(child) {
-        return this.isCommand(child) ? CommandFace.getTooltipOf(child.face) : undefined;
-    }
-    getFaces(child) {
-        return this.isCommand(child) ?
-            child.faces.value :
-            this.isPopupMenu(child) ?
-                [child.faceAdapter.face] :
-                undefined;
-    }
-}
-PopupMenuRendererComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-popup-menu-renderer',
-                template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n"
-            },] }
-];
-PopupMenuRendererComponent.ctorParameters = () => [];
-PopupMenuRendererComponent.propDecorators = {
-    parent: [{ type: Input }],
-    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
-    commandFired: [{ type: Output }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
-};
+], CommandGroupComponent.prototype, "face", void 0);
 
 /**
  * Custom CSS:
@@ -932,12 +948,82 @@ __decorate([
     __metadata("design:type", Array)
 ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
+/**
+ *
+ */
+class CommandComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this.CommandFace = CommandFace;
+        const { chain, switchOn } = Dsl.disposeWith(this);
+        this.faces = chain(this.command.busy).mapToList(busy => {
+            return busy ?
+                [this.busyFaceModel.value, this.faceModel.value] :
+                [this.faceModel.value, this.busyFaceModel.value];
+        }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })
+            .rejectNil();
+        this.activeFace = this.faces.first();
+        this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
+        this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
+        if (parent) {
+            this.registerDisposable(this.parent.registerCommand(this.command, this.faces));
+        }
+    }
+    isActive(face) {
+        return this.activeFace.query().equals(face);
+    }
+    ngOnInit() {
+    }
+}
+CommandComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-command',
+                template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n          <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n          <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
+                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
+            },] }
+];
+CommandComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: Optional }] }
+];
+CommandComponent.propDecorators = {
+    command: [{ type: Input }],
+    faceModel: [{ type: Input }],
+    face: [{ type: Input }],
+    busyFaceModel: [{ type: Input }],
+    busyFace: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], CommandComponent.prototype, "command", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandComponent.prototype, "faceModel", void 0);
+__decorate([
+    StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], CommandComponent.prototype, "face", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandComponent.prototype, "busyFaceModel", void 0);
+__decorate([
+    StoreInValueModel('busyFaceModel'),
+    __metadata("design:type", Object)
+], CommandComponent.prototype, "busyFace", void 0);
+
 /**
  *
  */
 class FlexComponent extends DisposableComponent {
-    constructor() {
+    constructor(parent) {
         super();
+        this.parent = parent;
+        if (parent) {
+            parent.registerFlex(this);
+        }
     }
     ngOnInit() {
     }
@@ -948,41 +1034,48 @@ FlexComponent.decorators = [
                 template: ``
             },] }
 ];
-FlexComponent.ctorParameters = () => [];
+FlexComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
 
+const ɵ0 = CommandGroup.factory;
 /**
  *
  */
-class MoreMenuComponent extends AbstractPopupMenuComponent {
-    constructor(element, parent) {
-        super(element, parent);
+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);
-        this.faceModelDelegate.setDelegate(chain(this.tooltipModel).map(tooltip => {
-            return {
-                icon: () => 'mat:more_vert',
-                tooltip() {
-                    return tooltip;
+        group.xPosition = 'before'; // this should be the default unless overridden by the user.
+        group.faceListModel = chain(this.tooltipModel).mapToList(tooltip => {
+            return [
+                {
+                    icon: () => 'mat:more_vert',
+                    tooltip() {
+                        return tooltip;
+                    }
                 }
-            };
-        }, { allowNil: true }));
+            ];
+        }, { allowNil: true });
     }
-    get face() {
-        return this.faceModelDelegate.value;
+    ngOnInit() {
+    }
+    // @Trace()
+    ngAfterContentInit() {
+        this.group.initialise();
     }
 }
 MoreMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-more-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
-                providers: [
-                    { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
-                ]
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
             },] }
 ];
 MoreMenuComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
+    { type: CommandGroup }
 ];
 MoreMenuComponent.propDecorators = {
     tooltip: [{ type: Input }]
@@ -992,6 +1085,111 @@ __decorate([
     __metadata("design:type", String)
 ], MoreMenuComponent.prototype, "tooltip", void 0);
 
+const ɵ0$1 = CommandGroup.factory;
+/**
+ *
+ */
+class PopupMenuComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
+    }
+    // @Trace()
+    ngOnInit() {
+    }
+    // @Trace()
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    // @Trace()
+    ngAfterViewInit() {
+    }
+}
+PopupMenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-popup-menu',
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: CommandGroup, useFactory: ɵ0$1 }]
+            },] }
+];
+PopupMenuComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
+PopupMenuComponent.propDecorators = {
+    faceModel: [{ type: Input }],
+    face: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], PopupMenuComponent.prototype, "faceModel", void 0);
+__decorate([
+    StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], PopupMenuComponent.prototype, "face", void 0);
+
+/**
+ *
+ */
+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.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-separator',
+                template: `
+    <mat-divider [vertical]="isVertical()"></mat-divider>`
+            },] }
+];
+SeparatorComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: Optional }] }
+];
+
+const ɵ0$2 = CommandGroup.factory;
+/**
+ *
+ */
+class ToolBarComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+    }
+    // @Trace()
+    ngOnInit() {
+    }
+    // @Trace()
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    // @Trace()
+    ngAfterViewInit() {
+    }
+}
+ToolBarComponent.decorators = [
+    { type: Component, args: [{
+                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{align-items:center;display:inline-flex;flex-direction:row}:host mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host span.flex{flex:1}:host>*+*{margin-left:8px}"]
+            },] }
+];
+ToolBarComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
+
 class FocusContainerComponent extends DisposableComponent {
     constructor(focusManager) {
         super();
@@ -1999,7 +2197,7 @@ SelectHeaderCellRendererComponent.ctorParameters = () => [];
 
 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) {
@@ -2889,12 +3087,13 @@ ComponentsModule.decorators = [
                     ToolBarComponent,
                     CommandComponent,
                     PopupMenuComponent,
+                    CommandGroupComponent,
                     CommandFaceComponent,
                     MoreMenuComponent,
                     SeparatorComponent,
                     FlexComponent,
-                    AbstractPopupMenuComponent,
-                    PopupMenuRendererComponent
+                    CommandGroupMenuRendererComponent,
+                    CommandGroupRendererComponent
                 ],
                 imports: [
                     CommonModule,
@@ -2941,6 +3140,7 @@ ComponentsModule.decorators = [
                     IconComponent,
                     SectionHeaderComponent,
                     TableRowMenuComponent,
+                    CommandGroupComponent,
                     ToolBarComponent,
                     CommandComponent,
                     PopupMenuComponent,
@@ -5956,11 +6156,10 @@ function leftRightPlaceAnimation(duration) {
 const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
 class PlaceOutletComponent extends DisposableComponent {
-    constructor(router, placeRouter, placeAuthService, placeConfig, parentOutlet) {
+    constructor(router, placeRouter, placeConfig, parentOutlet) {
         super();
         this.router = router;
         this.placeRouter = placeRouter;
-        this.placeAuthService = placeAuthService;
         this.placeConfig = placeConfig;
         this.placeChanged = new EventEmitter();
         this.outletActivated = new MutableValueModel(false);
@@ -6005,13 +6204,6 @@ class PlaceOutletComponent extends DisposableComponent {
         chain(this._activePlaceModel)
             .postponeWhile(this.navigationInProgress)
             .subscribe(place => this.placeChanged.emit(place));
-        when(placeAuthService.authoriserModel).changes(isAuthorised => {
-            const activePlace = this._activePlaceModel.value;
-            if (activePlace && !isAuthorised(activePlace.placeDefinition)) {
-                const visitOrPlace = placeAuthService.handleNotAuthorised(this._activatedRouteModel.value.snapshot, this.router.routerState.snapshot);
-                this.placeRouter.navigate(visitOrPlace instanceof Visit ? visitOrPlace : new Visit(PlaceComponent.getDefinition(visitOrPlace)));
-            }
-        });
     }
     // @Trace()
     ngOnInit() {
@@ -6133,7 +6325,6 @@ PlaceOutletComponent.decorators = [
 PlaceOutletComponent.ctorParameters = () => [
     { type: Router },
     { type: PlaceRouter },
-    { type: undefined, decorators: [{ type: Inject, args: [PLACE_AUTH_SERVICE,] }] },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [AUP_PLACE_CONFIG,] }] },
     { type: PlaceOutletComponent, decorators: [{ type: SkipSelf }, { type: Optional }] }
 ];
@@ -6712,28 +6903,17 @@ class PlaceGuard {
         this.interactionService = interactionService;
         this.injector = injector;
     }
-    // @Trace()
     canActivate(activatedRoute, state) {
         return __awaiter(this, void 0, void 0, function* () {
             if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
                 const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
-                if (placeDefinition.authenticate) {
-                    if (!(yield this.placeAuthService.isAuthenticated())) {
-                        const redirectLocation = this.placeAuthService.handleNotAuthenticated(activatedRoute, state);
-                        const nextPlaceDef = this.getPlaceDefinition(redirectLocation);
-                        if (nextPlaceDef.authenticate) {
-                            lang.illegalState(`handleNotAuthenticated hook returned place ${nextPlaceDef.component.name} that requires authentication.`);
-                        }
-                        return this.createUrlTree(redirectLocation);
-                    }
-                    if (!this.placeAuthService.isAuthorised(placeDefinition)) {
-                        const redirectLocation = this.placeAuthService.handleNotAuthorised(activatedRoute, state);
-                        const nextPlaceDef = this.getPlaceDefinition(redirectLocation);
-                        if (!this.placeAuthService.isAuthorised(nextPlaceDef)) {
-                            lang.illegalState(`handleNotAuthorised hook returned place ${nextPlaceDef.component.name} that is not authorised for the current user.`);
-                        }
-                        return this.createUrlTree(redirectLocation);
-                    }
+                const needsAuth = placeDefinition.authenticate;
+                const proceed = !needsAuth || (yield this.placeAuthService.isAuthenticated());
+                if (!proceed) {
+                    return this.handleGuardResult(this.placeAuthService.handleNotAuthenticated(activatedRoute, state));
+                }
+                if (!this.placeAuthService.isAuthorised(placeDefinition)) {
+                    return this.handleGuardResult(this.placeAuthService.handleNotAuthorised(activatedRoute, state));
                 }
                 const result = yield this.cleanInteractionState(activatedRoute, state, () => __awaiter(this, void 0, void 0, function* () {
                     // Parse our route params.
@@ -6762,7 +6942,6 @@ class PlaceGuard {
             }
         });
     }
-    // @Trace()
     canDeactivate(component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
             const currentUrl = this.urlService.parseUrl(currentState.url);
@@ -6771,14 +6950,13 @@ class PlaceGuard {
             return result instanceof UrlSnapshot ? result.urlTree : result;
         });
     }
-    getPlaceDefinition(result) {
-        return result instanceof Visit ?
-            result.placeDefinition :
-            PlaceComponent.getDefinition(result);
-    }
-    createUrlTree(result) {
-        const visit = result instanceof Visit ? result : new Visit(PlaceComponent.getDefinition(result), {});
-        return this.urlService.createUrlSnapshot(visit).urlTree;
+    handleGuardResult(result) {
+        if (result instanceof UrlSnapshot) {
+            return result.urlTree;
+        }
+        else {
+            return this.urlService.createUrlSnapshot(result).urlTree;
+        }
     }
     // protected async ensureAuthenticatedThen(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot, next: (placeDefinition: PlaceDefinition) => Promise<boolean | UrlTree>): Promise<boolean | UrlTree> {
     //   const authoriseResult = placeDefinition.authenticate ? await this.isAuthorised(activatedRoute, state) : true;
@@ -6801,7 +6979,6 @@ class PlaceGuard {
     //   return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
     // }
     // abstract getAuthGuard(injector: Injector): CanActivate;
-    // @Trace()
     cleanInteractionState(route, state, next) {
         return __awaiter(this, void 0, void 0, function* () {
             const url = this.urlService.parseUrl(state.url);
@@ -6829,6 +7006,30 @@ PlaceGuard.ctorParameters = () => [
     { type: InteractionService },
     { type: Injector }
 ];
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
+    __metadata("design:returntype", Promise)
+], PlaceGuard.prototype, "canActivate", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PlaceComponent, ActivatedRouteSnapshot, RouterStateSnapshot, RouterStateSnapshot]),
+    __metadata("design:returntype", Promise)
+], PlaceGuard.prototype, "canDeactivate", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], PlaceGuard.prototype, "handleGuardResult", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot, Function]),
+    __metadata("design:returntype", Promise)
+], PlaceGuard.prototype, "cleanInteractionState", null);
 
 var Formatter;
 (function (Formatter) {
@@ -6930,5 +7131,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, 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, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, 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, PLACE_AUTH_SERVICE, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, 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, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
+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, PLACE_AUTH_SERVICE, 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, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map