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

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, EventEmitter, SkipSelf, ViewChild, Output, ViewChildren, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
+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 { 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, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, ListModel, StoreInListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+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 { __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, RouterStateSnapshot } from '@angular/router';
+import { RouterModule, ActivatedRouteSnapshot, NavigationStart, NavigationCancel, UrlSegment, Router, UrlSerializer, NavigationEnd, NavigationError, RouterOutlet } from '@angular/router';
 import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
 import { MatListModule } from '@angular/material/list';
@@ -511,379 +511,363 @@ var TrackBy;
     TrackBy.byIndex = (data, index) => index;
 })(TrackBy || (TrackBy = {}));
 
-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);
+class PopupAwareComponent extends DisposableComponent {
+    constructor(element, parent) {
+        super();
+        this.element = element;
+        this.parent = parent;
+        if (parent) {
+            this.registerDisposable(this.parent.register(this));
         }
     }
-    __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;
-        }
+    get componentIndex() {
+        return this.computeComponentIndex();
     }
-    __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;
+    computeComponentIndex() {
+        let node = this.element.nativeElement;
+        let index = 0;
+        while ((node = node.previousElementSibling)) {
+            index++;
         }
+        return index;
     }
-    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).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);
-    }
-    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;
+    getFace() {
+        return undefined;
     }
-    ViewData.hasFace = hasFace;
-    function isCommand(data) {
-        return data instanceof CommandData;
+}
+
+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.isCommand = isCommand;
-    function isSeparator(data) {
-        return data instanceof SeparatorData;
+    isActive(face) {
+        return this.activeFace.query().equals(face);
     }
-    ViewData.isSeparator = isSeparator;
-    function isFlex(data) {
-        return data instanceof FlexData;
+    ngOnInit() {
     }
-    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');
+    ngAfterViewInit() {
+        // console.log(this.element.nativeElement.previousSibling)
     }
-    getCommand(data) {
-        const command = ViewData.getCommand(data);
-        const { when } = Dsl.disposeWith(this);
-        when(command.busy).becomesFalsey(() => this.commandFired.emit());
-        return command;
+    getFace() {
+        return this.face;
     }
 }
-CommandGroupMenuRendererComponent.decorators = [
+CommandComponent.decorators = [
     { type: Component, args: [{
-                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"
+                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}"]
             },] }
 ];
-CommandGroupMenuRendererComponent.ctorParameters = () => [
-    { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+CommandComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }] }
 ];
-CommandGroupMenuRendererComponent.propDecorators = {
-    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
-    groupViewData: [{ type: Input }],
-    commandFired: [{ type: Output }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+CommandComponent.propDecorators = {
+    command: [{ type: Input }],
+    faceModel: [{ type: Input }],
+    face: [{ type: Input }],
+    busyFaceModel: [{ type: Input }],
+    busyFace: [{ type: Input }]
 };
 __decorate([
-    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',] }]
-};
+    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)
-], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+], CommandComponent.prototype, "busyFaceModel", void 0);
 __decorate([
-    StoreInValueModel('groupViewDataModel'),
-    __metadata("design:type", ViewData.GroupData)
-], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+    StoreInValueModel('busyFaceModel'),
+    __metadata("design:type", Object)
+], CommandComponent.prototype, "busyFace", void 0);
 
-class Registration extends GarbageCollector {
-}
-(function (Registration) {
-    class FaceRegistration extends Registration {
-        constructor(faceListModel) {
-            super();
-            this.faceListModel = faceListModel;
-        }
-    }
-    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);
-        }
-    }
-    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()));
-        }
+class CommandContainer extends GarbageCollector {
+    constructor(parent) {
+        super();
+        this.parent = parent;
     }
-    Registration.GroupRegistration = GroupRegistration;
-    class SeparatorRegistration extends Registration {
-        constructor() {
-            super(...arguments);
-            this.template = new ViewData.SeparatorData();
-        }
-        toTemplate() {
-            return this.template;
-        }
+    get depth() {
+        return this.hasParent() ? this.parent.depth + 1 : 0;
     }
-    Registration.SeparatorRegistration = SeparatorRegistration;
-    class FlexRegistration extends Registration {
-        constructor() {
-            super(...arguments);
-            this.template = new ViewData.FlexData();
-        }
-        toTemplate() {
-            return this.template;
-        }
+    hasParent() {
+        return !!this.parent;
     }
-    Registration.FlexRegistration = FlexRegistration;
-    function hasFace(entry) {
-        return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+    get orientation() {
+        return CommandContainer.Orientation.VERTICAL;
     }
-    Registration.hasFace = hasFace;
-})(Registration || (Registration = {}));
+}
+(function (CommandContainer) {
+    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
+})(CommandContainer || (CommandContainer = {}));
 
-class CommandGroup extends GarbageCollector {
-    constructor(parent) {
+/**
+ *
+ */
+class ToolBarComponent extends CommandContainer {
+    constructor() {
         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 orientation() {
+        return CommandContainer.Orientation.HORIZONTAL;
     }
-    get rootTemplate() {
-        return this._rootTemplate.readonly;
-    }
-    get registrations() {
-        return this._registrations.readonly;
+    // @Trace()
+    ngOnInit() {
     }
-    notifyChanged() {
-        if (this.parent) {
-            this.parent.notifyChanged();
-        }
-        else {
-            this.rebuildTemplates();
-        }
+    // @Trace()
+    ngAfterContentInit() {
+        // this.group.initialise();
     }
-    notifyChildFaceChanged(is, was) {
-        this.notifyChanged();
+    // @Trace()
+    ngAfterViewInit() {
     }
-    rebuildTemplates() {
-        this._rootTemplate.value = new ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
+}
+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;
     }
-    get depth() {
-        return this.isRoot() ? 0 : this.parent.depth + 1;
+    isHorizontalContainer() {
+        return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === CommandContainer.Orientation.HORIZONTAL;
     }
-    isRoot() {
-        return false;
+    ngOnInit() {
     }
-    registerCommand(command, faceListModel) {
-        return this.register(new Registration.CommandRegistration(command, faceListModel));
+}
+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');
     }
-    registerGroup(group, faceModel) {
-        return this.register(new Registration.GroupRegistration(faceModel, group));
+    ngAfterContentChecked() {
+        // force the list to re-order as the child indicies may have changed.
+        this._unorderedChildren.value = [...this._unorderedChildren.value];
     }
-    registerFlex(component) {
-        return this.register(new Registration.FlexRegistration());
+    get faceAdapter() {
+        return this.faceAdapterModel.value;
     }
-    registerSeparator(component) {
-        return this.register(new Registration.SeparatorRegistration());
+    isRoot() {
+        return !this.parent;
     }
-    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;
+    // @Trace()
+    register(component) {
+        this._unorderedChildren.push(component);
+        return Disposable.disposableThatRuns(() => {
+            this._unorderedChildren.remove(component);
+        });
     }
-}
-(function (CommandGroup) {
-    class Root extends CommandGroup {
-        constructor() {
-            super();
-        }
-        isRoot() {
-            return true;
-        }
+    onCommandFired() {
+        this.triggers.forEach(trigger => {
+            if (trigger.menuOpen) {
+                trigger.closeMenu();
+            }
+        });
     }
-    __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();
+    getFace() {
+        return this.faceAdapter.face;
     }
-    CommandGroup.factory = factory;
-})(CommandGroup || (CommandGroup = {}));
+}
+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,] }]
+};
 
-class CommandGroupComponent extends CommandGroup {
-    constructor(parent) {
-        super(parent);
-        this.parent = parent;
-        this.xPosition = 'after';
-        this.yPosition = 'below';
+/**
+ *
+ */
+class PopupMenuComponent extends AbstractPopupMenuComponent {
+    constructor(element, parent) {
+        super(element, parent);
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.faceListModel = chain(this.faceModel).mapToList(v => [v]);
-        this.parent.registerGroup(this, this.faceListModel);
+        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
 }
-CommandGroupComponent.decorators = [
+PopupMenuComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-command-group',
-                template: '',
+                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",
                 providers: [
-                    { provide: CommandGroup, useExisting: CommandGroupComponent }
+                    { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                 ]
             },] }
 ];
-CommandGroupComponent.ctorParameters = () => [
-    { type: CommandGroup, decorators: [{ type: SkipSelf }] }
+PopupMenuComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
 ];
-CommandGroupComponent.propDecorators = {
+PopupMenuComponent.propDecorators = {
     faceModel: [{ type: Input }],
-    face: [{ type: Input }],
-    xPosition: [{ type: Input }],
-    yPosition: [{ type: Input }]
+    face: [{ type: Input }]
 };
 __decorate([
-    TrackExternal(),
+    TrackExternal({ delegateTo: 'faceModelDelegate' }),
     __metadata("design:type", ValueModel)
-], CommandGroupComponent.prototype, "faceModel", void 0);
+], PopupMenuComponent.prototype, "faceModel", void 0);
 __decorate([
     StoreInValueModel('faceModel'),
     __metadata("design:type", Object)
-], CommandGroupComponent.prototype, "face", void 0);
+], 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,] }]
+};
 
 /**
  * Custom CSS:
@@ -948,82 +932,12 @@ __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(parent) {
+    constructor() {
         super();
-        this.parent = parent;
-        if (parent) {
-            parent.registerFlex(this);
-        }
     }
     ngOnInit() {
     }
@@ -1034,48 +948,41 @@ FlexComponent.decorators = [
                 template: ``
             },] }
 ];
-FlexComponent.ctorParameters = () => [
-    { type: CommandGroup }
-];
+FlexComponent.ctorParameters = () => [];
 
-const ɵ0 = CommandGroup.factory;
 /**
  *
  */
-class MoreMenuComponent extends DisposableComponent {
-    constructor(group) {
-        super();
-        this.group = group;
+class MoreMenuComponent extends AbstractPopupMenuComponent {
+    constructor(element, parent) {
+        super(element, parent);
         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.faceListModel = chain(this.tooltipModel).mapToList(tooltip => {
-            return [
-                {
-                    icon: () => 'mat:more_vert',
-                    tooltip() {
-                        return tooltip;
-                    }
+        this.faceModelDelegate.setDelegate(chain(this.tooltipModel).map(tooltip => {
+            return {
+                icon: () => 'mat:more_vert',
+                tooltip() {
+                    return tooltip;
                 }
-            ];
-        }, { allowNil: true });
+            };
+        }, { allowNil: true }));
     }
-    ngOnInit() {
-    }
-    // @Trace()
-    ngAfterContentInit() {
-        this.group.initialise();
+    get face() {
+        return this.faceModelDelegate.value;
     }
 }
 MoreMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-more-menu',
-                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-                providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
+                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 }
+                ]
             },] }
 ];
 MoreMenuComponent.ctorParameters = () => [
-    { type: CommandGroup }
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
 ];
 MoreMenuComponent.propDecorators = {
     tooltip: [{ type: Input }]
@@ -1085,111 +992,6 @@ __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();
@@ -2197,7 +1999,7 @@ SelectHeaderCellRendererComponent.ctorParameters = () => [];
 
 const noop = () => {
 };
-const ɵ0$3 = noop;
+const ɵ0 = noop;
 const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 class ColumnModel {
     constructor(columnId, defaults) {
@@ -3087,13 +2889,12 @@ ComponentsModule.decorators = [
                     ToolBarComponent,
                     CommandComponent,
                     PopupMenuComponent,
-                    CommandGroupComponent,
                     CommandFaceComponent,
                     MoreMenuComponent,
                     SeparatorComponent,
                     FlexComponent,
-                    CommandGroupMenuRendererComponent,
-                    CommandGroupRendererComponent
+                    AbstractPopupMenuComponent,
+                    PopupMenuRendererComponent
                 ],
                 imports: [
                     CommonModule,
@@ -3140,7 +2941,6 @@ ComponentsModule.decorators = [
                     IconComponent,
                     SectionHeaderComponent,
                     TableRowMenuComponent,
-                    CommandGroupComponent,
                     ToolBarComponent,
                     CommandComponent,
                     PopupMenuComponent,
@@ -6156,10 +5956,11 @@ function leftRightPlaceAnimation(duration) {
 const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
 class PlaceOutletComponent extends DisposableComponent {
-    constructor(router, placeRouter, placeConfig, parentOutlet) {
+    constructor(router, placeRouter, placeAuthService, placeConfig, parentOutlet) {
         super();
         this.router = router;
         this.placeRouter = placeRouter;
+        this.placeAuthService = placeAuthService;
         this.placeConfig = placeConfig;
         this.placeChanged = new EventEmitter();
         this.outletActivated = new MutableValueModel(false);
@@ -6204,6 +6005,13 @@ 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() {
@@ -6325,6 +6133,7 @@ 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 }] }
 ];
@@ -6903,17 +6712,28 @@ 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);
-                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.handleNotAuthorisation(activatedRoute, state));
+                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 result = yield this.cleanInteractionState(activatedRoute, state, () => __awaiter(this, void 0, void 0, function* () {
                     // Parse our route params.
@@ -6942,6 +6762,7 @@ class PlaceGuard {
             }
         });
     }
+    // @Trace()
     canDeactivate(component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
             const currentUrl = this.urlService.parseUrl(currentState.url);
@@ -6950,13 +6771,14 @@ class PlaceGuard {
             return result instanceof UrlSnapshot ? result.urlTree : result;
         });
     }
-    handleGuardResult(result) {
-        if (result instanceof UrlSnapshot) {
-            return result.urlTree;
-        }
-        else {
-            return this.urlService.createUrlSnapshot(result).urlTree;
-        }
+    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;
     }
     // 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;
@@ -6979,6 +6801,7 @@ 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);
@@ -7006,30 +6829,6 @@ 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) {
@@ -7131,5 +6930,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandDirective, CommandFace, CommandFaceComponent, CommandGroup, CommandGroupComponent, CommandGroupMenuRendererComponent, CommandGroupRendererComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, 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 };
+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 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map