@coolon/angular-ui-powerups 3.7.0-alpha.4 → 3.7.0-alpha.5

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.7.0-alpha.5](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.7.0-alpha.4...v3.7.0-alpha.5) (2020-12-28)
+
+
+### Bug Fixes
+
+* nested popup menus no closing properly ([85230d0](https://bitbucket.org/coolon/angular-ui-powerups/commit/85230d06787f001d7b92471732ee7d8eb75b4f11))
+
 ## [3.7.0-alpha.4](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.7.0-alpha.3...v3.7.0-alpha.4) (2020-12-16)
 
 

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

@@ -713,10 +713,6 @@
         __metadata("design:type", pectin.Command)
     ], CardContainerComponent.prototype, "addCardCommand", void 0);
 
-    (function (TrackBy) {
-        TrackBy.byIndex = function (data, index) { return index; };
-    })(exports.TrackBy || (exports.TrackBy = {}));
-
     (function (CommandFace) {
         var Position;
         (function (Position) {
@@ -996,85 +992,6 @@
         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.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');
-            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;
-        };
-        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 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;
-        }
-        return CommandGroupRendererComponent;
-    }(DisposableComponent));
-    CommandGroupRendererComponent.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}"]
-                },] }
-    ];
-    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.ValueModel)
-    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('groupViewDataModel'),
-        __metadata("design:type", exports.ViewData.GroupData)
-    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
-
     exports.Registration = /** @class */ (function (_super) {
         __extends(Registration, _super);
         function Registration() {
@@ -1268,6 +1185,169 @@
         CommandGroup.factory = factory;
     })(exports.CommandGroup || (exports.CommandGroup = {}));
 
+    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
+        __extends(AbstractPopupMenuComponent, _super);
+        function AbstractPopupMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
+            return _this;
+        }
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "xPosition", {
+            get: function () {
+                return this.group.xPosition;
+            },
+            set: function (position) {
+                this.group.xPosition = position;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "yPosition", {
+            get: function () {
+                return this.group.yPosition;
+            },
+            set: function (position) {
+                this.group.yPosition = position;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractPopupMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        AbstractPopupMenuComponent.prototype.ngOnInit = function () {
+        };
+        // @Trace()
+        AbstractPopupMenuComponent.prototype.closeMenu = function () {
+            this.triggers.forEach(function (trigger) {
+                if (trigger.menuOpen) {
+                    trigger.closeMenu();
+                }
+            });
+        };
+        return AbstractPopupMenuComponent;
+    }(DisposableComponent));
+    AbstractPopupMenuComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-popup-menu-component',
+                    template: ''
+                },] }
+    ];
+    AbstractPopupMenuComponent.ctorParameters = function () { return [
+        { type: exports.CommandGroup }
+    ]; };
+    AbstractPopupMenuComponent.propDecorators = {
+        xPosition: [{ type: i0.Input }],
+        yPosition: [{ type: i0.Input }],
+        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+    };
+
+    (function (TrackBy) {
+        TrackBy.byIndex = function (data, index) { return index; };
+    })(exports.TrackBy || (exports.TrackBy = {}));
+
+    var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupMenuRendererComponent, _super);
+        function CommandGroupMenuRendererComponent(parent) {
+            var _this = _super.call(this) || this;
+            _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');
+            return _this;
+        }
+        CommandGroupMenuRendererComponent.prototype.executeCommand = function (data) {
+            var _this = this;
+            exports.ViewData.getCommand(data).execute().finally(function () {
+                _this.commandFired.emit();
+            });
+        };
+        CommandGroupMenuRendererComponent.prototype.isEnabled = function (data) {
+            return exports.ViewData.getCommand(data).enabled.value;
+        };
+        // @Trace()
+        CommandGroupMenuRendererComponent.prototype.onCommandFired = function () {
+            this.commandFired.emit();
+            this.triggers.forEach(function (trigger) {
+                if (trigger.menuOpen) {
+                    trigger.closeMenu();
+                }
+            });
+        };
+        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            (click)=\"executeCommand(data)\"\n            [disabled]=\"!isEnabled(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              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)=\"onCommandFired()\"></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.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.childViewDataModels = chain(_this.groupViewDataModel)
+                .pluckList('children');
+            return _this;
+        }
+        // @Trace()
+        CommandGroupRendererComponent.prototype.onCommandFired = function () {
+            this.commandFired.emit();
+            this.triggers.forEach(function (trigger) {
+                if (trigger.menuOpen) {
+                    trigger.closeMenu();
+                }
+            });
+        };
+        return CommandGroupRendererComponent;
+    }(DisposableComponent));
+    CommandGroupRendererComponent.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 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\n                              [groupViewData]=\"group\"\n                              (commandFired)=\"onCommandFired()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\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\n                              [groupViewData]=\"group\"\n                              (commandFired)=\"onCommandFired()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button 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\n                              [groupViewData]=\"group\"\n                              (commandFired)=\"onCommandFired()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\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\n                            [groupViewData]=\"group\"\n                            (commandFired)=\"onCommandFired()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
+                    styles: [":host{align-items:center;display:inline-flex;flex-direction:row}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
+                },] }
+    ];
+    CommandGroupRendererComponent.ctorParameters = function () { return []; };
+    CommandGroupRendererComponent.propDecorators = {
+        groupViewDataModel: [{ type: i0.Input }],
+        groupViewData: [{ type: i0.Input }],
+        renderRootNode: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.render-root',] }],
+        commandFired: [{ type: i0.Output }],
+        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('groupViewDataModel'),
+        __metadata("design:type", exports.ViewData.GroupData)
+    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+
     var CommandGroupComponent = /** @class */ (function (_super) {
         __extends(CommandGroupComponent, _super);
         function CommandGroupComponent(parent) {
@@ -1486,8 +1566,7 @@
     var MoreMenuComponent = /** @class */ (function (_super) {
         __extends(MoreMenuComponent, _super);
         function MoreMenuComponent(group) {
-            var _this = _super.call(this) || this;
-            _this.group = group;
+            var _this = _super.call(this, group) || 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.
@@ -1503,18 +1582,12 @@
             }, { allowNil: true });
             return _this;
         }
-        MoreMenuComponent.prototype.ngOnInit = function () {
-        };
-        // @Trace()
-        MoreMenuComponent.prototype.ngAfterContentInit = function () {
-            this.group.initialise();
-        };
         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>',
+                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate" (commandFired)="closeMenu()"></aup-command-group-renderer>',
                     providers: [{ provide: exports.CommandGroup, useFactory: ɵ0 }]
                 },] }
     ];
@@ -1536,28 +1609,17 @@
     var PopupMenuComponent = /** @class */ (function (_super) {
         __extends(PopupMenuComponent, _super);
         function PopupMenuComponent(group) {
-            var _this = _super.call(this) || this;
-            _this.group = group;
+            var _this = _super.call(this, group) || 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;
         }
-        // @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>',
+                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate" (commandFired)="closeMenu()"></aup-command-group-renderer>',
                     providers: [{ provide: exports.CommandGroup, useFactory: ɵ0$1 }]
                 },] }
     ];
@@ -3728,7 +3790,8 @@
                         SeparatorComponent,
                         FlexComponent,
                         CommandGroupMenuRendererComponent,
-                        CommandGroupRendererComponent
+                        CommandGroupRendererComponent,
+                        AbstractPopupMenuComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -8225,6 +8288,7 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
+    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;