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

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

@@ -857,457 +857,371 @@
         CommandFace.Adapter = Adapter;
     })(exports.CommandFace || (exports.CommandFace = {}));
 
-    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 PopupAwareComponent = /** @class */ (function (_super) {
+        __extends(PopupAwareComponent, _super);
+        function PopupAwareComponent(element, parent) {
             var _this = _super.call(this) || this;
+            _this.element = element;
             _this.parent = parent;
-            _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');
+            if (parent) {
+                _this.registerDisposable(_this.parent.register(_this));
+            }
             return _this;
         }
-        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;
+        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;
         };
-        return CommandGroupMenuRendererComponent;
+        return PopupAwareComponent;
     }(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 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');
+    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); });
             return _this;
         }
-        return CommandGroupRendererComponent;
-    }(DisposableComponent));
-    CommandGroupRendererComponent.decorators = [
+        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 = [
         { type: i0.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}"]
+                    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}"]
                 },] }
     ];
-    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',] }]
+    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 }]
     };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], CommandComponent.prototype, "command", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.ValueModel)
-    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+    ], 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('groupViewDataModel'),
-        __metadata("design:type", exports.ViewData.GroupData)
-    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+        pectin.StoreInValueModel('busyFaceModel'),
+        __metadata("design:type", Object)
+    ], CommandComponent.prototype, "busyFace", void 0);
 
-    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) {
+    exports.CommandContainer = /** @class */ (function (_super) {
+        __extends(CommandContainer, _super);
+        function CommandContainer(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;
         }
-        CommandGroup.prototype.initialise = function () {
-            this.rebuildTemplates();
-        };
-        Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
+        Object.defineProperty(CommandContainer.prototype, "depth", {
             get: function () {
-                return this._rootTemplate.readonly;
+                return this.hasParent() ? this.parent.depth + 1 : 0;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommandGroup.prototype, "registrations", {
+        CommandContainer.prototype.hasParent = function () {
+            return !!this.parent;
+        };
+        Object.defineProperty(CommandContainer.prototype, "orientation", {
             get: function () {
-                return this._registrations.readonly;
+                return CommandContainer.Orientation.VERTICAL;
             },
             enumerable: false,
             configurable: true
         });
-        CommandGroup.prototype.notifyChanged = function () {
-            if (this.parent) {
-                this.parent.notifyChanged();
-            }
-            else {
-                this.rebuildTemplates();
-            }
-        };
-        CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
-            this.notifyChanged();
-        };
-        CommandGroup.prototype.rebuildTemplates = function () {
-            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
-        };
-        Object.defineProperty(CommandGroup.prototype, "depth", {
+        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", {
             get: function () {
-                return this.isRoot() ? 0 : this.parent.depth + 1;
+                return exports.CommandContainer.Orientation.HORIZONTAL;
             },
             enumerable: false,
             configurable: true
         });
-        CommandGroup.prototype.isRoot = function () {
-            return false;
-        };
-        CommandGroup.prototype.registerCommand = function (command, faceListModel) {
-            return this.register(new exports.Registration.CommandRegistration(command, faceListModel));
+        // @Trace()
+        ToolBarComponent.prototype.ngOnInit = function () {
         };
-        CommandGroup.prototype.registerGroup = function (group, faceModel) {
-            return this.register(new exports.Registration.GroupRegistration(faceModel, group));
+        // @Trace()
+        ToolBarComponent.prototype.ngAfterContentInit = function () {
+            // this.group.initialise();
         };
-        CommandGroup.prototype.registerFlex = function (component) {
-            return this.register(new exports.Registration.FlexRegistration());
+        // @Trace()
+        ToolBarComponent.prototype.ngAfterViewInit = function () {
         };
-        CommandGroup.prototype.registerSeparator = function (component) {
-            return this.register(new exports.Registration.SeparatorRegistration());
+        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.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;
+        SeparatorComponent.prototype.ngOnInit = function () {
         };
-        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;
+        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();
             _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;
-            _this.faceListModel = chain(_this.faceModel).mapToList(function (v) { return [v]; });
-            _this.parent.registerGroup(_this, _this.faceListModel);
+            // 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');
             return _this;
         }
-        return CommandGroupComponent;
-    }(exports.CommandGroup));
-    CommandGroupComponent.decorators = [
+        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 = [
         { type: i0.Component, args: [{
-                    selector: 'aup-command-group',
-                    template: '',
-                    providers: [
-                        { provide: exports.CommandGroup, useExisting: CommandGroupComponent }
-                    ]
+                    selector: 'aup-abstract-popup-menu',
+                    template: ''
                 },] }
     ];
-    CommandGroupComponent.ctorParameters = function () { return [
-        { type: exports.CommandGroup, decorators: [{ type: i0.SkipSelf }] }
+    AbstractPopupMenuComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }] }
     ]; };
-    CommandGroupComponent.propDecorators = {
-        faceModel: [{ type: i0.Input }],
-        face: [{ type: i0.Input }],
+    AbstractPopupMenuComponent.propDecorators = {
         xPosition: [{ type: i0.Input }],
-        yPosition: [{ 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,] }]
     };
-    __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:
@@ -1383,87 +1297,13 @@
         __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(parent) {
-            var _this = _super.call(this) || this;
-            _this.parent = parent;
-            if (parent) {
-                parent.registerFlex(_this);
-            }
-            return _this;
+        function FlexComponent() {
+            return _super.call(this) || this;
         }
         FlexComponent.prototype.ngOnInit = function () {
         };
@@ -1475,51 +1315,48 @@
                     template: ""
                 },] }
     ];
-    FlexComponent.ctorParameters = function () { return [
-        { type: exports.CommandGroup }
-    ]; };
+    FlexComponent.ctorParameters = function () { return []; };
 
-    var ɵ0 = exports.CommandGroup.factory;
     /**
      *
      */
     var MoreMenuComponent = /** @class */ (function (_super) {
         __extends(MoreMenuComponent, _super);
-        function MoreMenuComponent(group) {
-            var _this = _super.call(this) || this;
-            _this.group = group;
+        function MoreMenuComponent(element, parent) {
+            var _this = _super.call(this, element, parent) || this;
             _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;
-            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;
-                        }
+            _this.faceModelDelegate.setDelegate(chain(_this.tooltipModel).map(function (tooltip) {
+                return {
+                    icon: function () { return 'mat:more_vert'; },
+                    tooltip: function () {
+                        return tooltip;
                     }
-                ];
-            }, { allowNil: true });
+                };
+            }, { allowNil: true }));
             return _this;
         }
-        MoreMenuComponent.prototype.ngOnInit = function () {
-        };
-        // @Trace()
-        MoreMenuComponent.prototype.ngAfterContentInit = function () {
-            this.group.initialise();
-        };
+        Object.defineProperty(MoreMenuComponent.prototype, "face", {
+            get: function () {
+                return this.faceModelDelegate.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return MoreMenuComponent;
-    }(DisposableComponent));
+    }(AbstractPopupMenuComponent));
     MoreMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-more-menu',
-                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-                    providers: [{ provide: exports.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 = function () { return [
-        { type: exports.CommandGroup }
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
     ]; };
     MoreMenuComponent.propDecorators = {
         tooltip: [{ type: i0.Input }]
@@ -1529,47 +1366,38 @@
         __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(group) {
-            var _this = _super.call(this) || this;
-            _this.group = group;
+        function PopupMenuComponent(element, parent) {
+            var _this = _super.call(this, element, parent) || this;
             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;
-    }(DisposableComponent));
+    }(AbstractPopupMenuComponent));
     PopupMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-popup-menu',
-                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
-                    providers: [{ provide: exports.CommandGroup, useFactory: ɵ0$1 }]
+                    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 }
+                    ]
                 },] }
     ];
     PopupMenuComponent.ctorParameters = function () { return [
-        { type: exports.CommandGroup }
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
     ]; };
     PopupMenuComponent.propDecorators = {
         faceModel: [{ type: i0.Input }],
         face: [{ type: i0.Input }]
     };
     __decorate([
-        pectin.TrackExternal(),
+        pectin.TrackExternal({ delegateTo: 'faceModelDelegate' }),
         __metadata("design:type", pectin.ValueModel)
     ], PopupMenuComponent.prototype, "faceModel", void 0);
     __decorate([
@@ -1577,71 +1405,6 @@
         __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) {
@@ -2768,7 +2531,7 @@
 
     var noop = function () {
     };
-    var ɵ0$3 = noop;
+    var ɵ0 = noop;
     var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
     var ColumnModel = /** @class */ (function () {
         function ColumnModel(columnId, defaults) {
@@ -3722,13 +3485,12 @@
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
-                        CommandGroupComponent,
                         CommandFaceComponent,
                         MoreMenuComponent,
                         SeparatorComponent,
                         FlexComponent,
-                        CommandGroupMenuRendererComponent,
-                        CommandGroupRendererComponent
+                        AbstractPopupMenuComponent,
+                        PopupMenuRendererComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -3775,7 +3537,6 @@
                         exports.IconComponent,
                         SectionHeaderComponent,
                         TableRowMenuComponent,
-                        CommandGroupComponent,
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
@@ -7136,10 +6897,11 @@
 
     var PlaceOutletComponent = /** @class */ (function (_super) {
         __extends(PlaceOutletComponent, _super);
-        function PlaceOutletComponent(router, placeRouter, placeConfig, parentOutlet) {
+        function PlaceOutletComponent(router, placeRouter, placeAuthService, placeConfig, parentOutlet) {
             var _this = _super.call(this) || this;
             _this.router = router;
             _this.placeRouter = placeRouter;
+            _this.placeAuthService = placeAuthService;
             _this.placeConfig = placeConfig;
             _this.placeChanged = new i0.EventEmitter();
             _this.outletActivated = new pectin.MutableValueModel(false);
@@ -7184,6 +6946,13 @@
             chain(_this._activePlaceModel)
                 .postponeWhile(_this.navigationInProgress)
                 .subscribe(function (place) { return _this.placeChanged.emit(place); });
+            when(placeAuthService.authoriserModel).changes(function (isAuthorised) {
+                var activePlace = _this._activePlaceModel.value;
+                if (activePlace && !isAuthorised(activePlace.placeDefinition)) {
+                    var visitOrPlace = placeAuthService.handleNotAuthorised(_this._activatedRouteModel.value.snapshot, _this.router.routerState.snapshot);
+                    _this.placeRouter.navigate(visitOrPlace instanceof Visit ? visitOrPlace : new Visit(exports.PlaceComponent.getDefinition(visitOrPlace)));
+                }
+            });
             return _this;
         }
         // @Trace()
@@ -7325,6 +7094,7 @@
     PlaceOutletComponent.ctorParameters = function () { return [
         { type: i1$1.Router },
         { type: PlaceRouter },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [AUP_PLACE_CONFIG,] }] },
         { type: PlaceOutletComponent, decorators: [{ type: i0.SkipSelf }, { type: i0.Optional }] }
     ]; };
@@ -7954,65 +7724,72 @@
             this.interactionService = interactionService;
             this.injector = injector;
         }
+        // @Trace()
         PlaceGuard.prototype.canActivate = function (activatedRoute, state) {
             return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition_1, needsAuth, proceed, _a, result;
+                var placeDefinition_1, redirectLocation, nextPlaceDef, redirectLocation, nextPlaceDef, result;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
                             placeDefinition_1 = exports.PlaceComponent.getDefinition(activatedRoute.component);
-                            needsAuth = placeDefinition_1.authenticate;
-                            _a = !needsAuth;
-                            if (_a) return [3 /*break*/, 2];
+                            if (!placeDefinition_1.authenticate) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.placeAuthService.isAuthenticated()];
                         case 1:
-                            _a = (_b.sent());
-                            _b.label = 2;
-                        case 2:
-                            proceed = _a;
-                            if (!proceed) {
-                                return [2 /*return*/, this.handleGuardResult(this.placeAuthService.handleNotAuthenticated(activatedRoute, state))];
+                            if (!(_a.sent())) {
+                                redirectLocation = this.placeAuthService.handleNotAuthenticated(activatedRoute, state);
+                                nextPlaceDef = this.getPlaceDefinition(redirectLocation);
+                                if (nextPlaceDef.authenticate) {
+                                    pectin.lang.illegalState("handleNotAuthenticated hook returned place " + nextPlaceDef.component.name + " that requires authentication.");
+                                }
+                                return [2 /*return*/, this.createUrlTree(redirectLocation)];
                             }
                             if (!this.placeAuthService.isAuthorised(placeDefinition_1)) {
-                                return [2 /*return*/, this.handleGuardResult(this.placeAuthService.handleNotAuthorisation(activatedRoute, state))];
+                                redirectLocation = this.placeAuthService.handleNotAuthorised(activatedRoute, state);
+                                nextPlaceDef = this.getPlaceDefinition(redirectLocation);
+                                if (!this.placeAuthService.isAuthorised(nextPlaceDef)) {
+                                    pectin.lang.illegalState("handleNotAuthorised hook returned place " + nextPlaceDef.component.name + " that is not authorised for the current user.");
+                                }
+                                return [2 /*return*/, this.createUrlTree(redirectLocation)];
                             }
-                            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*/];
-                                        }
-                                    });
-                                }); })];
+                            _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*/];
+                                    }
+                                });
+                            }); })];
                         case 3:
-                            result = _b.sent();
+                            result = _a.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)];
                     }
                 });
             });
         };
+        // @Trace()
         PlaceGuard.prototype.canDeactivate = function (component, currentRoute, currentState, nextState) {
             return __awaiter(this, void 0, void 0, function () {
                 var currentUrl, nextUrl, result;
@@ -8029,13 +7806,14 @@
                 });
             });
         };
-        PlaceGuard.prototype.handleGuardResult = function (result) {
-            if (result instanceof exports.UrlSnapshot) {
-                return result.urlTree;
-            }
-            else {
-                return this.urlService.createUrlSnapshot(result).urlTree;
-            }
+        PlaceGuard.prototype.getPlaceDefinition = function (result) {
+            return result instanceof Visit ?
+                result.placeDefinition :
+                exports.PlaceComponent.getDefinition(result);
+        };
+        PlaceGuard.prototype.createUrlTree = function (result) {
+            var visit = result instanceof Visit ? result : new Visit(exports.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;
@@ -8058,6 +7836,7 @@
         //   return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
         // }
         // abstract getAuthGuard(injector: Injector): CanActivate;
+        // @Trace()
         PlaceGuard.prototype.cleanInteractionState = function (route, state, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var url;
@@ -8090,30 +7869,6 @@
         { type: exports.InteractionService },
         { type: i0.Injector }
     ]; };
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot]),
-        __metadata("design:returntype", Promise)
-    ], PlaceGuard.prototype, "canActivate", null);
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [exports.PlaceComponent, i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot, i1$1.RouterStateSnapshot]),
-        __metadata("design:returntype", Promise)
-    ], PlaceGuard.prototype, "canDeactivate", null);
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], PlaceGuard.prototype, "handleGuardResult", null);
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot, Function]),
-        __metadata("design:returntype", Promise)
-    ], PlaceGuard.prototype, "cleanInteractionState", null);
 
     (function (Formatter) {
         var StringType = /** @class */ (function () {
@@ -8231,6 +7986,7 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
+    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
@@ -8255,9 +8011,6 @@
     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;
@@ -8303,6 +8056,7 @@
     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;
@@ -8316,8 +8070,10 @@
     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;