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

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -857,371 +857,457 @@
         CommandFace.Adapter = Adapter;
     })(exports.CommandFace || (exports.CommandFace = {}));
 
-    var PopupAwareComponent = /** @class */ (function (_super) {
-        __extends(PopupAwareComponent, _super);
-        function PopupAwareComponent(element, parent) {
+    exports.ViewData = /** @class */ (function () {
+        function ViewData() {
+        }
+        return ViewData;
+    }());
+    (function (ViewData) {
+        var FaceData = /** @class */ (function (_super) {
+            __extends(FaceData, _super);
+            function FaceData(faces) {
+                var _this = _super.call(this) || this;
+                _this.faces = faces;
+                pectin.assert.notNil(faces);
+                return _this;
+            }
+            Object.defineProperty(FaceData.prototype, "activeFaceAdapter", {
+                get: function () {
+                    return new exports.CommandFace.Adapter(this.faces.length > 0 ? this.faces[0] : undefined);
+                },
+                enumerable: false,
+                configurable: true
+            });
+            return FaceData;
+        }(ViewData));
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", exports.CommandFace.Adapter),
+            __metadata("design:paramtypes", [])
+        ], FaceData.prototype, "activeFaceAdapter", null);
+        ViewData.FaceData = FaceData;
+        var GroupData = /** @class */ (function (_super) {
+            __extends(GroupData, _super);
+            function GroupData(faces, xPosition, yPosition, children) {
+                var _this = _super.call(this, faces) || this;
+                _this.xPosition = xPosition;
+                _this.yPosition = yPosition;
+                _this.children = children;
+                return _this;
+            }
+            Object.defineProperty(GroupData.prototype, "hasMixedIcons", {
+                get: function () {
+                    var hasFaces = this.children.filter(function (c) { return ViewData.hasFace(c); });
+                    var iconCount = hasFaces.filter(function (c) { return !!c.activeFaceAdapter.icon; }).length;
+                    return iconCount > 0 && hasFaces.length !== iconCount;
+                },
+                enumerable: false,
+                configurable: true
+            });
+            return GroupData;
+        }(FaceData));
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], GroupData.prototype, "hasMixedIcons", null);
+        ViewData.GroupData = GroupData;
+        var CommandData = /** @class */ (function (_super) {
+            __extends(CommandData, _super);
+            function CommandData(command, faces) {
+                var _this = _super.call(this, faces) || this;
+                _this.command = command;
+                return _this;
+            }
+            return CommandData;
+        }(FaceData));
+        ViewData.CommandData = CommandData;
+        var SeparatorData = /** @class */ (function (_super) {
+            __extends(SeparatorData, _super);
+            function SeparatorData() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return SeparatorData;
+        }(ViewData));
+        ViewData.SeparatorData = SeparatorData;
+        var FlexData = /** @class */ (function (_super) {
+            __extends(FlexData, _super);
+            function FlexData() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return FlexData;
+        }(ViewData));
+        ViewData.FlexData = FlexData;
+        function as(type, viewData) {
+            return viewData instanceof type ? viewData : pectin.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;
+        }
+        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;
+    })(exports.ViewData || (exports.ViewData = {}));
+
+    var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupMenuRendererComponent, _super);
+        function CommandGroupMenuRendererComponent(parent) {
             var _this = _super.call(this) || this;
-            _this.element = element;
             _this.parent = parent;
-            if (parent) {
-                _this.registerDisposable(_this.parent.register(_this));
-            }
+            _this.groupViewDataModel = new pectin.MutableValueModel();
+            _this.commandFired = new i0.EventEmitter();
+            _this.ViewData = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.children = chain(_this.groupViewDataModel).pluckList('children');
+            _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
             return _this;
         }
-        Object.defineProperty(PopupAwareComponent.prototype, "componentIndex", {
-            get: function () {
-                return this.computeComponentIndex();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PopupAwareComponent.prototype.computeComponentIndex = function () {
-            var node = this.element.nativeElement;
-            var index = 0;
-            while ((node = node.previousElementSibling)) {
-                index++;
-            }
-            return index;
-        };
-        PopupAwareComponent.prototype.getFace = function () {
-            return undefined;
+        CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
+            var _this = this;
+            var command = exports.ViewData.getCommand(data);
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
+            return command;
         };
-        return PopupAwareComponent;
+        return CommandGroupMenuRendererComponent;
     }(DisposableComponent));
+    CommandGroupMenuRendererComponent.decorators = [
+        { type: i0.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"
+                },] }
+    ];
+    CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+        { type: CommandGroupMenuRendererComponent, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] }
+    ]; };
+    CommandGroupMenuRendererComponent.propDecorators = {
+        menuComponent: [{ type: i0.ViewChild, args: ['menu', { static: true },] }],
+        groupViewData: [{ type: i0.Input }],
+        commandFired: [{ type: i0.Output }],
+        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+    };
+    __decorate([
+        pectin.StoreInValueModel('groupViewDataModel'),
+        __metadata("design:type", exports.ViewData.GroupData)
+    ], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
 
-    var POPUP_CONTAINER = new i0.InjectionToken('popup-component');
-
-    /**
-     *
-     */
-    var CommandComponent = /** @class */ (function (_super) {
-        __extends(CommandComponent, _super);
-        function CommandComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
-            _this.CommandFace = exports.CommandFace;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
-            _this.faces = chain(_this.command.busy).mapToList(function (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(function (f) { return exports.CommandFace.getStyleOf(f); });
-            _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
+    var CommandGroupRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupRendererComponent, _super);
+        function CommandGroupRendererComponent() {
+            var _this = _super.call(this) || this;
+            _this.renderRootNode = true;
+            _this.ViewData = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.childViewDataModels = chain(_this.groupViewDataModel)
+                .pluckList('children');
             return _this;
         }
-        CommandComponent.prototype.isActive = function (face) {
-            return this.activeFace.query().equals(face);
-        };
-        CommandComponent.prototype.ngOnInit = function () {
-        };
-        CommandComponent.prototype.ngAfterViewInit = function () {
-            // console.log(this.element.nativeElement.previousSibling)
-        };
-        CommandComponent.prototype.getFace = function () {
-            return this.face;
-        };
-        return CommandComponent;
-    }(PopupAwareComponent));
-    CommandComponent.decorators = [
+        return CommandGroupRendererComponent;
+    }(DisposableComponent));
+    CommandGroupRendererComponent.decorators = [
         { type: i0.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-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}"]
                 },] }
     ];
-    CommandComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }] }
-    ]; };
-    CommandComponent.propDecorators = {
-        command: [{ type: i0.Input }],
-        faceModel: [{ type: i0.Input }],
-        face: [{ type: i0.Input }],
-        busyFaceModel: [{ type: i0.Input }],
-        busyFace: [{ type: i0.Input }]
+    CommandGroupRendererComponent.ctorParameters = function () { return []; };
+    CommandGroupRendererComponent.propDecorators = {
+        groupViewDataModel: [{ type: i0.Input }],
+        groupViewData: [{ type: i0.Input }],
+        renderRootNode: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.render-root',] }]
     };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.Command)
-    ], CommandComponent.prototype, "command", void 0);
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.ValueModel)
-    ], CommandComponent.prototype, "faceModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandComponent.prototype, "face", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.ValueModel)
-    ], CommandComponent.prototype, "busyFaceModel", void 0);
+    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
     __decorate([
-        pectin.StoreInValueModel('busyFaceModel'),
-        __metadata("design:type", Object)
-    ], CommandComponent.prototype, "busyFace", void 0);
+        pectin.StoreInValueModel('groupViewDataModel'),
+        __metadata("design:type", exports.ViewData.GroupData)
+    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
 
-    exports.CommandContainer = /** @class */ (function (_super) {
-        __extends(CommandContainer, _super);
-        function CommandContainer(parent) {
+    exports.Registration = /** @class */ (function (_super) {
+        __extends(Registration, _super);
+        function Registration() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Registration;
+    }(pectin.GarbageCollector));
+    (function (Registration) {
+        var FaceRegistration = /** @class */ (function (_super) {
+            __extends(FaceRegistration, _super);
+            function FaceRegistration(faceListModel) {
+                var _this = _super.call(this) || this;
+                _this.faceListModel = faceListModel;
+                return _this;
+            }
+            return FaceRegistration;
+        }(Registration));
+        Registration.FaceRegistration = FaceRegistration;
+        var CommandRegistration = /** @class */ (function (_super) {
+            __extends(CommandRegistration, _super);
+            function CommandRegistration(command, faceListModel) {
+                var _this = _super.call(this, faceListModel) || this;
+                _this.command = command;
+                return _this;
+            }
+            CommandRegistration.prototype.toTemplate = function () {
+                return new exports.ViewData.CommandData(this.command, this.faceListModel.value);
+            };
+            return CommandRegistration;
+        }(FaceRegistration));
+        Registration.CommandRegistration = CommandRegistration;
+        var GroupRegistration = /** @class */ (function (_super) {
+            __extends(GroupRegistration, _super);
+            function GroupRegistration(faceModel, group) {
+                var _this = _super.call(this, faceModel) || this;
+                _this.group = group;
+                return _this;
+            }
+            GroupRegistration.prototype.toTemplate = function () {
+                return new exports.ViewData.GroupData(this.faceListModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
+            };
+            return GroupRegistration;
+        }(FaceRegistration));
+        Registration.GroupRegistration = GroupRegistration;
+        var SeparatorRegistration = /** @class */ (function (_super) {
+            __extends(SeparatorRegistration, _super);
+            function SeparatorRegistration() {
+                var _this = _super.apply(this, __spread(arguments)) || this;
+                _this.template = new exports.ViewData.SeparatorData();
+                return _this;
+            }
+            SeparatorRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return SeparatorRegistration;
+        }(Registration));
+        Registration.SeparatorRegistration = SeparatorRegistration;
+        var FlexRegistration = /** @class */ (function (_super) {
+            __extends(FlexRegistration, _super);
+            function FlexRegistration() {
+                var _this = _super.apply(this, __spread(arguments)) || this;
+                _this.template = new exports.ViewData.FlexData();
+                return _this;
+            }
+            FlexRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return FlexRegistration;
+        }(Registration));
+        Registration.FlexRegistration = FlexRegistration;
+        function hasFace(entry) {
+            return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+        }
+        Registration.hasFace = hasFace;
+    })(exports.Registration || (exports.Registration = {}));
+
+    exports.CommandGroup = /** @class */ (function (_super) {
+        __extends(CommandGroup, _super);
+        function CommandGroup(parent) {
             var _this = _super.call(this) || this;
             _this.parent = parent;
+            _this._rootTemplate = new pectin.MutableValueModel();
+            _this._registrations = new pectin.MutableListModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.childTemplates = chain(_this._rootTemplate).pluckList('children');
+            _this.initialised = chain(_this._rootTemplate).isNotNil();
             return _this;
         }
-        Object.defineProperty(CommandContainer.prototype, "depth", {
+        CommandGroup.prototype.initialise = function () {
+            this.rebuildTemplates();
+        };
+        Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
             get: function () {
-                return this.hasParent() ? this.parent.depth + 1 : 0;
+                return this._rootTemplate.readonly;
             },
             enumerable: false,
             configurable: true
         });
-        CommandContainer.prototype.hasParent = function () {
-            return !!this.parent;
-        };
-        Object.defineProperty(CommandContainer.prototype, "orientation", {
+        Object.defineProperty(CommandGroup.prototype, "registrations", {
             get: function () {
-                return CommandContainer.Orientation.VERTICAL;
+                return this._registrations.readonly;
             },
             enumerable: false,
             configurable: true
         });
-        return CommandContainer;
-    }(pectin.GarbageCollector));
-    (function (CommandContainer) {
-        CommandContainer.Orientation = typescriptStringEnums.Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
-    })(exports.CommandContainer || (exports.CommandContainer = {}));
-
-    /**
-     *
-     */
-    var ToolBarComponent = /** @class */ (function (_super) {
-        __extends(ToolBarComponent, _super);
-        function ToolBarComponent() {
-            return _super.call(this) || this;
-        }
-        Object.defineProperty(ToolBarComponent.prototype, "orientation", {
+        CommandGroup.prototype.notifyChanged = function () {
+            if (this.parent) {
+                this.parent.notifyChanged();
+            }
+            else {
+                this.rebuildTemplates();
+            }
+        };
+        CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
+            this.notifyChanged();
+        };
+        CommandGroup.prototype.rebuildTemplates = function () {
+            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+        };
+        Object.defineProperty(CommandGroup.prototype, "depth", {
             get: function () {
-                return exports.CommandContainer.Orientation.HORIZONTAL;
+                return this.isRoot() ? 0 : this.parent.depth + 1;
             },
             enumerable: false,
             configurable: true
         });
-        // @Trace()
-        ToolBarComponent.prototype.ngOnInit = function () {
+        CommandGroup.prototype.isRoot = function () {
+            return false;
         };
-        // @Trace()
-        ToolBarComponent.prototype.ngAfterContentInit = function () {
-            // this.group.initialise();
+        CommandGroup.prototype.registerCommand = function (command, faceListModel) {
+            return this.register(new exports.Registration.CommandRegistration(command, faceListModel));
         };
-        // @Trace()
-        ToolBarComponent.prototype.ngAfterViewInit = function () {
+        CommandGroup.prototype.registerGroup = function (group, faceModel) {
+            return this.register(new exports.Registration.GroupRegistration(faceModel, group));
         };
-        return ToolBarComponent;
-    }(exports.CommandContainer));
-    ToolBarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-tool-bar',
-                    template: '<div class="toolbar-content"><ng-content></ng-content></div>',
-                    encapsulation: i0.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 = function () { return []; };
-
-    /**
-     *
-     */
-    var SeparatorComponent = /** @class */ (function (_super) {
-        __extends(SeparatorComponent, _super);
-        function SeparatorComponent(element, popupContainer, containerParent) {
-            var _this = _super.call(this, element, popupContainer) || this;
-            _this.containerParent = containerParent;
-            return _this;
-        }
-        SeparatorComponent.prototype.isHorizontalContainer = function () {
-            return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === exports.CommandContainer.Orientation.HORIZONTAL;
+        CommandGroup.prototype.registerFlex = function (component) {
+            return this.register(new exports.Registration.FlexRegistration());
         };
-        SeparatorComponent.prototype.ngOnInit = function () {
+        CommandGroup.prototype.registerSeparator = function (component) {
+            return this.register(new exports.Registration.SeparatorRegistration());
         };
-        return SeparatorComponent;
-    }(PopupAwareComponent));
-    SeparatorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-separator',
-                    template: "\n    <mat-divider [vertical]=\"!isHorizontalContainer()\"></mat-divider>",
-                    styles: [":host {\n  }",
-                        ":host(.horizontal-container) {\n      display: inline-flex;\n      flex-direction: row;\n      align-items: stretch;\n    }"]
-                },] }
-    ];
-    SeparatorComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [POPUP_CONTAINER,] }] },
-        { type: exports.CommandContainer, decorators: [{ type: i0.Optional }] }
-    ]; };
-    SeparatorComponent.propDecorators = {
-        isHorizontalContainer: [{ type: i0.HostBinding, args: ['class.horizontal-container',] }]
-    };
-
-    /**
-     *
-     */
-    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
-        __extends(AbstractPopupMenuComponent, _super);
-        function AbstractPopupMenuComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
-            _this._unorderedChildren = new pectin.MutableListModel();
-            _this.faceModelDelegate = new pectin.DelegatingValueModel();
+        CommandGroup.prototype.register = function (registration) {
+            var _this = this;
+            this._registrations.push(registration);
+            if (registration instanceof exports.Registration.FaceRegistration) {
+                var when = pectin.Dsl.disposeWith(registration).when;
+                when(registration.faceListModel).changes(function (is, was) {
+                    _this.notifyChildFaceChanged(is, was);
+                }, { asLongAs: this.initialised });
+            }
+            registration.onDispose(function () { return _this._registrations.remove(registration); });
+            return registration;
+        };
+        return CommandGroup;
+    }(pectin.GarbageCollector));
+    (function (CommandGroup) {
+        var Root = /** @class */ (function (_super) {
+            __extends(Root, _super);
+            function Root() {
+                return _super.call(this) || this;
+            }
+            Root.prototype.isRoot = function () {
+                return true;
+            };
+            return Root;
+        }(CommandGroup));
+        __decorate([
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], Root.prototype, "faceListModel", void 0);
+        __decorate([
+            pectin.TrackExternal({ defaultValue: 'after' }),
+            __metadata("design:type", pectin.ValueModel)
+        ], Root.prototype, "xPositionModel", void 0);
+        __decorate([
+            pectin.StoreInValueModel('xPositionModel'),
+            __metadata("design:type", String)
+        ], Root.prototype, "xPosition", void 0);
+        __decorate([
+            pectin.TrackExternal({ defaultValue: 'below' }),
+            __metadata("design:type", pectin.ValueModel)
+        ], Root.prototype, "yPositionModel", void 0);
+        __decorate([
+            pectin.StoreInValueModel('yPositionModel'),
+            __metadata("design:type", String)
+        ], Root.prototype, "yPosition", void 0);
+        CommandGroup.Root = Root;
+        function factory() {
+            return new Root();
+        }
+        CommandGroup.factory = factory;
+    })(exports.CommandGroup || (exports.CommandGroup = {}));
+
+    var CommandGroupComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupComponent, _super);
+        function CommandGroupComponent(parent) {
+            var _this = _super.call(this, parent) || this;
+            _this.parent = parent;
             _this.xPosition = 'after';
             _this.yPosition = 'below';
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
-            _this.faceAdapterModel = chain(_this.faceModelDelegate).map(function (f) { return new exports.CommandFace.Adapter(f); });
-            _this.children = chain(_this._unorderedChildren).sortBy('componentIndex');
+            _this.faceListModel = chain(_this.faceModel).mapToList(function (v) { return [v]; });
+            _this.parent.registerGroup(_this, _this.faceListModel);
             return _this;
         }
-        AbstractPopupMenuComponent.prototype.ngAfterContentChecked = function () {
-            // force the list to re-order as the child indicies may have changed.
-            this._unorderedChildren.value = __spread(this._unorderedChildren.value);
-        };
-        Object.defineProperty(AbstractPopupMenuComponent.prototype, "faceAdapter", {
-            get: function () {
-                return this.faceAdapterModel.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractPopupMenuComponent.prototype.isRoot = function () {
-            return !this.parent;
-        };
-        // @Trace()
-        AbstractPopupMenuComponent.prototype.register = function (component) {
-            var _this = this;
-            this._unorderedChildren.push(component);
-            return pectin.Disposable.disposableThatRuns(function () {
-                _this._unorderedChildren.remove(component);
-            });
-        };
-        AbstractPopupMenuComponent.prototype.onCommandFired = function () {
-            this.triggers.forEach(function (trigger) {
-                if (trigger.menuOpen) {
-                    trigger.closeMenu();
-                }
-            });
-        };
-        AbstractPopupMenuComponent.prototype.getFace = function () {
-            return this.faceAdapter.face;
-        };
-        return AbstractPopupMenuComponent;
-    }(PopupAwareComponent));
-    AbstractPopupMenuComponent.decorators = [
+        return CommandGroupComponent;
+    }(exports.CommandGroup));
+    CommandGroupComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aup-abstract-popup-menu',
-                    template: ''
+                    selector: 'aup-command-group',
+                    template: '',
+                    providers: [
+                        { provide: exports.CommandGroup, useExisting: CommandGroupComponent }
+                    ]
                 },] }
     ];
-    AbstractPopupMenuComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }] }
+    CommandGroupComponent.ctorParameters = function () { return [
+        { type: exports.CommandGroup, decorators: [{ type: i0.SkipSelf }] }
     ]; };
-    AbstractPopupMenuComponent.propDecorators = {
+    CommandGroupComponent.propDecorators = {
+        faceModel: [{ type: i0.Input }],
+        face: [{ type: i0.Input }],
         xPosition: [{ type: i0.Input }],
-        yPosition: [{ type: i0.Input }],
-        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
-    };
-
-    var PopupMenuRendererComponent = /** @class */ (function (_super) {
-        __extends(PopupMenuRendererComponent, _super);
-        function PopupMenuRendererComponent() {
-            var _this = _super.call(this) || this;
-            _this._childList = new pectin.DelegatingListModel();
-            _this.commandFired = new i0.EventEmitter();
-            _this.TrackBy = exports.TrackBy;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            // this.children = chain(this.groupViewDataModel).pluckList('children');
-            // this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
-            var faces = chain(_this._childList).map(function (child) {
-                return child.getFace();
-            }).rejectNil();
-            var icons = faces.select(function (face) { return !!exports.CommandFace.getIconOf(face); });
-            var iconCount = icons.count();
-            var totalFaces = faces.count();
-            _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
-            return _this;
-        }
-        Object.defineProperty(PopupMenuRendererComponent.prototype, "parent", {
-            get: function () {
-                return this._parentComponent;
-            },
-            set: function (comp) {
-                this._parentComponent = comp;
-                this._childList.setDelegate(comp.children);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PopupMenuRendererComponent.prototype, "children", {
-            get: function () {
-                return this.parent.children.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PopupMenuRendererComponent.prototype.executeCommand = function (data) {
-            var _this = this;
-            if (this.isCommand(data)) {
-                data.command.execute().finally(function () {
-                    _this.commandFired.emit();
-                });
-            }
-        };
-        PopupMenuRendererComponent.prototype.isEnabled = function (data) {
-            return true; //ViewData.getCommand(data).enabled.value;
-        };
-        // @Trace()
-        PopupMenuRendererComponent.prototype.onCommandFired = function () {
-            this.commandFired.emit();
-            this.triggers.forEach(function (trigger) {
-                if (trigger.menuOpen) {
-                    trigger.closeMenu();
-                }
-            });
-        };
-        PopupMenuRendererComponent.prototype.isCommand = function (child) {
-            return child instanceof CommandComponent;
-        };
-        PopupMenuRendererComponent.prototype.isPopupMenu = function (child) {
-            return child instanceof AbstractPopupMenuComponent;
-        };
-        PopupMenuRendererComponent.prototype.isSeparator = function (child) {
-            return child instanceof SeparatorComponent;
-        };
-        PopupMenuRendererComponent.prototype.getTooltip = function (child) {
-            return this.isCommand(child) ? exports.CommandFace.getTooltipOf(child.face) : undefined;
-        };
-        PopupMenuRendererComponent.prototype.getFaces = function (child) {
-            return this.isCommand(child) ?
-                child.faces.value :
-                this.isPopupMenu(child) ?
-                    [child.faceAdapter.face] :
-                    undefined;
-        };
-        return PopupMenuRendererComponent;
-    }(DisposableComponent));
-    PopupMenuRendererComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    PopupMenuRendererComponent.propDecorators = {
-        parent: [{ type: i0.Input }],
-        menuComponent: [{ type: i0.ViewChild, args: ['menu', { static: true },] }],
-        commandFired: [{ type: i0.Output }],
-        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+        yPosition: [{ type: i0.Input }]
     };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], CommandGroupComponent.prototype, "faceModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], CommandGroupComponent.prototype, "face", void 0);
 
     /**
      * Custom CSS:
@@ -1297,13 +1383,87 @@
         __metadata("design:type", Array)
     ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
+    /**
+     *
+     */
+    var CommandComponent = /** @class */ (function (_super) {
+        __extends(CommandComponent, _super);
+        function CommandComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            _this.CommandFace = exports.CommandFace;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
+            _this.faces = chain(_this.command.busy).mapToList(function (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(function (f) { return exports.CommandFace.getStyleOf(f); });
+            _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            if (parent) {
+                _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.faces));
+            }
+            return _this;
+        }
+        CommandComponent.prototype.isActive = function (face) {
+            return this.activeFace.query().equals(face);
+        };
+        CommandComponent.prototype.ngOnInit = function () {
+        };
+        return CommandComponent;
+    }(DisposableComponent));
+    CommandComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: exports.CommandGroup, decorators: [{ type: i0.Optional }] }
+    ]; };
+    CommandComponent.propDecorators = {
+        command: [{ type: i0.Input }],
+        faceModel: [{ type: i0.Input }],
+        face: [{ type: i0.Input }],
+        busyFaceModel: [{ type: i0.Input }],
+        busyFace: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], CommandComponent.prototype, "command", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], CommandComponent.prototype, "faceModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], CommandComponent.prototype, "face", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], CommandComponent.prototype, "busyFaceModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('busyFaceModel'),
+        __metadata("design:type", Object)
+    ], CommandComponent.prototype, "busyFace", void 0);
+
     /**
      *
      */
     var FlexComponent = /** @class */ (function (_super) {
         __extends(FlexComponent, _super);
-        function FlexComponent() {
-            return _super.call(this) || this;
+        function FlexComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            if (parent) {
+                parent.registerFlex(_this);
+            }
+            return _this;
         }
         FlexComponent.prototype.ngOnInit = function () {
         };
@@ -1315,48 +1475,51 @@
                     template: ""
                 },] }
     ];
-    FlexComponent.ctorParameters = function () { return []; };
+    FlexComponent.ctorParameters = function () { return [
+        { type: exports.CommandGroup }
+    ]; };
 
+    var ɵ0 = exports.CommandGroup.factory;
     /**
      *
      */
     var MoreMenuComponent = /** @class */ (function (_super) {
         __extends(MoreMenuComponent, _super);
-        function MoreMenuComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
+        function MoreMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
             _this.tooltipModel = new pectin.MutableValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.faceModelDelegate.setDelegate(chain(_this.tooltipModel).map(function (tooltip) {
-                return {
-                    icon: function () { return 'mat:more_vert'; },
-                    tooltip: function () {
-                        return tooltip;
+            group.xPosition = 'before'; // this should be the default unless overridden by the user.
+            group.faceListModel = chain(_this.tooltipModel).mapToList(function (tooltip) {
+                return [
+                    {
+                        icon: function () { return 'mat:more_vert'; },
+                        tooltip: function () {
+                            return tooltip;
+                        }
                     }
-                };
-            }, { allowNil: true }));
+                ];
+            }, { allowNil: true });
             return _this;
         }
-        Object.defineProperty(MoreMenuComponent.prototype, "face", {
-            get: function () {
-                return this.faceModelDelegate.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
+        MoreMenuComponent.prototype.ngOnInit = function () {
+        };
+        // @Trace()
+        MoreMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
         return MoreMenuComponent;
-    }(AbstractPopupMenuComponent));
+    }(DisposableComponent));
     MoreMenuComponent.decorators = [
         { type: i0.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: exports.CommandGroup, useFactory: ɵ0 }]
                 },] }
     ];
     MoreMenuComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
+        { type: exports.CommandGroup }
     ]; };
     MoreMenuComponent.propDecorators = {
         tooltip: [{ type: i0.Input }]
@@ -1366,38 +1529,47 @@
         __metadata("design:type", String)
     ], MoreMenuComponent.prototype, "tooltip", void 0);
 
+    var ɵ0$1 = exports.CommandGroup.factory;
     /**
      *
      */
     var PopupMenuComponent = /** @class */ (function (_super) {
         __extends(PopupMenuComponent, _super);
-        function PopupMenuComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
+        function PopupMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            group.faceListModel = chain(_this.faceModel).mapToList(function (face) { return [face]; });
             return _this;
-            // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
         }
+        // @Trace()
+        PopupMenuComponent.prototype.ngOnInit = function () {
+        };
+        // @Trace()
+        PopupMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        // @Trace()
+        PopupMenuComponent.prototype.ngAfterViewInit = function () {
+        };
         return PopupMenuComponent;
-    }(AbstractPopupMenuComponent));
+    }(DisposableComponent));
     PopupMenuComponent.decorators = [
         { type: i0.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",
-                    providers: [
-                        { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
-                    ]
+                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                    providers: [{ provide: exports.CommandGroup, useFactory: ɵ0$1 }]
                 },] }
     ];
     PopupMenuComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
+        { type: exports.CommandGroup }
     ]; };
     PopupMenuComponent.propDecorators = {
         faceModel: [{ type: i0.Input }],
         face: [{ type: i0.Input }]
     };
     __decorate([
-        pectin.TrackExternal({ delegateTo: 'faceModelDelegate' }),
+        pectin.TrackExternal(),
         __metadata("design:type", pectin.ValueModel)
     ], PopupMenuComponent.prototype, "faceModel", void 0);
     __decorate([
@@ -1405,6 +1577,71 @@
         __metadata("design:type", Object)
     ], PopupMenuComponent.prototype, "face", void 0);
 
+    /**
+     *
+     */
+    var SeparatorComponent = /** @class */ (function (_super) {
+        __extends(SeparatorComponent, _super);
+        function SeparatorComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            if (parent) {
+                parent.registerSeparator(_this);
+            }
+            return _this;
+        }
+        SeparatorComponent.prototype.isVertical = function () {
+            return this === null || this === void 0 ? void 0 : this.parent.isRoot();
+        };
+        SeparatorComponent.prototype.ngOnInit = function () {
+        };
+        return SeparatorComponent;
+    }(DisposableComponent));
+    SeparatorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-separator',
+                    template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
+                },] }
+    ];
+    SeparatorComponent.ctorParameters = function () { return [
+        { type: exports.CommandGroup, decorators: [{ type: i0.Optional }] }
+    ]; };
+
+    var ɵ0$2 = exports.CommandGroup.factory;
+    /**
+     *
+     */
+    var ToolBarComponent = /** @class */ (function (_super) {
+        __extends(ToolBarComponent, _super);
+        function ToolBarComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
+            return _this;
+        }
+        // @Trace()
+        ToolBarComponent.prototype.ngOnInit = function () {
+        };
+        // @Trace()
+        ToolBarComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        // @Trace()
+        ToolBarComponent.prototype.ngAfterViewInit = function () {
+        };
+        return ToolBarComponent;
+    }(DisposableComponent));
+    ToolBarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-tool-bar',
+                    template: '<aup-command-group-renderer [renderRootNode]="false" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                    providers: [{ provide: exports.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 = function () { return [
+        { type: exports.CommandGroup }
+    ]; };
+
     var FocusContainerComponent = /** @class */ (function (_super) {
         __extends(FocusContainerComponent, _super);
         function FocusContainerComponent(focusManager) {
@@ -2531,7 +2768,7 @@
 
     var noop = function () {
     };
-    var ɵ0 = noop;
+    var ɵ0$3 = noop;
     var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
     var ColumnModel = /** @class */ (function () {
         function ColumnModel(columnId, defaults) {
@@ -3485,12 +3722,13 @@
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
+                        CommandGroupComponent,
                         CommandFaceComponent,
                         MoreMenuComponent,
                         SeparatorComponent,
                         FlexComponent,
-                        AbstractPopupMenuComponent,
-                        PopupMenuRendererComponent
+                        CommandGroupMenuRendererComponent,
+                        CommandGroupRendererComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -3537,6 +3775,7 @@
                         exports.IconComponent,
                         SectionHeaderComponent,
                         TableRowMenuComponent,
+                        CommandGroupComponent,
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
@@ -7727,17 +7966,23 @@
         // @Trace()
         PlaceGuard.prototype.canActivate = function (activatedRoute, state) {
             return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition_1, redirectLocation, nextPlaceDef, redirectLocation, nextPlaceDef, result;
+                var placeDefinition_1, needsAuth, proceed, _a, redirectLocation, nextPlaceDef, redirectLocation, nextPlaceDef, result;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
                             placeDefinition_1 = exports.PlaceComponent.getDefinition(activatedRoute.component);
-                            if (!placeDefinition_1.authenticate) return [3 /*break*/, 2];
+                            needsAuth = placeDefinition_1.authenticate;
+                            _a = !needsAuth;
+                            if (_a) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.placeAuthService.isAuthenticated()];
                         case 1:
-                            if (!(_a.sent())) {
+                            _a = (_b.sent());
+                            _b.label = 2;
+                        case 2:
+                            proceed = _a;
+                            if (!proceed) {
                                 redirectLocation = this.placeAuthService.handleNotAuthenticated(activatedRoute, state);
                                 nextPlaceDef = this.getPlaceDefinition(redirectLocation);
                                 if (nextPlaceDef.authenticate) {
@@ -7753,36 +7998,35 @@
                                 }
                                 return [2 /*return*/, this.createUrlTree(redirectLocation)];
                             }
-                            _a.label = 2;
-                        case 2: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
-                                var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                                            parsedParams = placeDefinition_1.parseRouteParams(params);
-                                            navigationSession = this.placeRouter.navigationSession;
-                                            initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, parsedParams);
-                                            sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
-                                            return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
-                                        case 1:
-                                            sanitisedVisit = _a.sent();
-                                            // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                                            navigationSession.storeVisit(sanitisedVisit);
-                                            if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                                                urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
-                                                // console.log('##### Place Guard Redirect', urlSnapshot);
-                                                return [2 /*return*/, urlSnapshot];
-                                            }
-                                            else {
-                                                return [2 /*return*/, true];
-                                            }
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); })];
+                            return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
+                                    var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                                parsedParams = placeDefinition_1.parseRouteParams(params);
+                                                navigationSession = this.placeRouter.navigationSession;
+                                                initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, parsedParams);
+                                                sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
+                                                return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                            case 1:
+                                                sanitisedVisit = _a.sent();
+                                                // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                                                navigationSession.storeVisit(sanitisedVisit);
+                                                if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                                    urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                                                    // console.log('##### Place Guard Redirect', urlSnapshot);
+                                                    return [2 /*return*/, urlSnapshot];
+                                                }
+                                                else {
+                                                    return [2 /*return*/, true];
+                                                }
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); })];
                         case 3:
-                            result = _a.sent();
+                            result = _b.sent();
                             return [2 /*return*/, result instanceof exports.UrlSnapshot ? result.urlTree : result];
                         case 4: return [2 /*return*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
                     }
@@ -7986,7 +8230,6 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
-    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
@@ -8011,6 +8254,9 @@
     exports.CommandComponent = CommandComponent;
     exports.CommandDirective = CommandDirective;
     exports.CommandFaceComponent = CommandFaceComponent;
+    exports.CommandGroupComponent = CommandGroupComponent;
+    exports.CommandGroupMenuRendererComponent = CommandGroupMenuRendererComponent;
+    exports.CommandGroupRendererComponent = CommandGroupRendererComponent;
     exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
@@ -8056,7 +8302,6 @@
     exports.NoopComponent = NoopComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PLACE_AUTH_SERVICE = PLACE_AUTH_SERVICE;
-    exports.POPUP_CONTAINER = POPUP_CONTAINER;
     exports.PORTAL_EDITOR_COMPONENT = PORTAL_EDITOR_COMPONENT;
     exports.PORTAL_RENDERER_COMPONENT = PORTAL_RENDERER_COMPONENT;
     exports.PasswordInputComponent = PasswordInputComponent;
@@ -8070,10 +8315,8 @@
     exports.Point = Point;
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
-    exports.PopupAwareComponent = PopupAwareComponent;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
     exports.PopupMenuComponent = PopupMenuComponent;
-    exports.PopupMenuRendererComponent = PopupMenuRendererComponent;
     exports.PropertyColumnModel = PropertyColumnModel;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.RemoveLastInteractionFromUrlNavigationSession = RemoveLastInteractionFromUrlNavigationSession;