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

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

@@ -1,5 +1,5 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, EventEmitter, SkipSelf, ViewChild, Output, ViewChildren, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, ViewChildren, EventEmitter, SkipSelf, ViewChild, Output, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -18,7 +18,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, ListModel, StoreInListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, MutableListModel, ListModel, ValueModel, StoreInValueModel, StoreInListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { isNil, isEqual } from 'lodash';
@@ -506,11 +506,6 @@ __decorate([
     __metadata("design:type", Command)
 ], CardContainerComponent.prototype, "addCardCommand", void 0);
 
-var TrackBy;
-(function (TrackBy) {
-    TrackBy.byIndex = (data, index) => index;
-})(TrackBy || (TrackBy = {}));
-
 class ViewData {
 }
 (function (ViewData) {
@@ -620,78 +615,6 @@ class ViewData {
     ViewData.isFlex = isFlex;
 })(ViewData || (ViewData = {}));
 
-class CommandGroupMenuRendererComponent extends DisposableComponent {
-    constructor(parent) {
-        super();
-        this.parent = parent;
-        this.groupViewDataModel = new MutableValueModel();
-        this.commandFired = new EventEmitter();
-        this.ViewData = ViewData;
-        this.TrackBy = TrackBy;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.children = chain(this.groupViewDataModel).pluckList('children');
-        this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
-    }
-    getCommand(data) {
-        const command = ViewData.getCommand(data);
-        const { when } = Dsl.disposeWith(this);
-        when(command.busy).becomesFalsey(() => this.commandFired.emit());
-        return command;
-    }
-}
-CommandGroupMenuRendererComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-command-group-menu',
-                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
-            },] }
-];
-CommandGroupMenuRendererComponent.ctorParameters = () => [
-    { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
-];
-CommandGroupMenuRendererComponent.propDecorators = {
-    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
-    groupViewData: [{ type: Input }],
-    commandFired: [{ type: Output }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
-};
-__decorate([
-    StoreInValueModel('groupViewDataModel'),
-    __metadata("design:type", ViewData.GroupData)
-], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
-
-class CommandGroupRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this.renderRootNode = true;
-        this.ViewData = ViewData;
-        this.TrackBy = TrackBy;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.childViewDataModels = chain(this.groupViewDataModel)
-            .pluckList('children');
-    }
-}
-CommandGroupRendererComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-command-group-renderer',
-                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
-                styles: [":host{align-items:center;display:inline-flex;flex-direction:row}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
-            },] }
-];
-CommandGroupRendererComponent.ctorParameters = () => [];
-CommandGroupRendererComponent.propDecorators = {
-    groupViewDataModel: [{ type: Input }],
-    groupViewData: [{ type: Input }],
-    renderRootNode: [{ type: Input }, { type: HostBinding, args: ['class.render-root',] }]
-};
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", ValueModel)
-], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
-__decorate([
-    StoreInValueModel('groupViewDataModel'),
-    __metadata("design:type", ViewData.GroupData)
-], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
-
 class Registration extends GarbageCollector {
 }
 (function (Registration) {
@@ -815,6 +738,8 @@ class CommandGroup extends GarbageCollector {
     class Root extends CommandGroup {
         constructor() {
             super();
+            const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+            when(this.faceListModel).changes(() => this.notifyChanged());
         }
         isRoot() {
             return true;
@@ -847,6 +772,152 @@ class CommandGroup extends GarbageCollector {
     CommandGroup.factory = factory;
 })(CommandGroup || (CommandGroup = {}));
 
+class AbstractPopupMenuComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+    }
+    get xPosition() {
+        return this.group.xPosition;
+    }
+    set xPosition(position) {
+        this.group.xPosition = position;
+    }
+    get yPosition() {
+        return this.group.yPosition;
+    }
+    set yPosition(position) {
+        this.group.yPosition = position;
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    ngOnInit() {
+    }
+    // @Trace()
+    closeMenu() {
+        this.triggers.forEach(trigger => {
+            if (trigger.menuOpen) {
+                trigger.closeMenu();
+            }
+        });
+    }
+}
+AbstractPopupMenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-abstract-popup-menu-component',
+                template: ''
+            },] }
+];
+AbstractPopupMenuComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
+AbstractPopupMenuComponent.propDecorators = {
+    xPosition: [{ type: Input }],
+    yPosition: [{ type: Input }],
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+};
+
+var TrackBy;
+(function (TrackBy) {
+    TrackBy.byIndex = (data, index) => index;
+})(TrackBy || (TrackBy = {}));
+
+class CommandGroupMenuRendererComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this.groupViewDataModel = new MutableValueModel();
+        this.commandFired = new EventEmitter();
+        this.ViewData = ViewData;
+        this.TrackBy = TrackBy;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.children = chain(this.groupViewDataModel).pluckList('children');
+        this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
+    }
+    executeCommand(data) {
+        ViewData.getCommand(data).execute().finally(() => {
+            this.commandFired.emit();
+        });
+    }
+    isEnabled(data) {
+        return ViewData.getCommand(data).enabled.value;
+    }
+    // @Trace()
+    onCommandFired() {
+        this.commandFired.emit();
+        this.triggers.forEach(trigger => {
+            if (trigger.menuOpen) {
+                trigger.closeMenu();
+            }
+        });
+    }
+}
+CommandGroupMenuRendererComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-command-group-menu',
+                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            (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 = () => [
+    { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+];
+CommandGroupMenuRendererComponent.propDecorators = {
+    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
+    groupViewData: [{ type: Input }],
+    commandFired: [{ type: Output }],
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+};
+__decorate([
+    StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+
+class CommandGroupRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.renderRootNode = true;
+        this.commandFired = new EventEmitter();
+        this.ViewData = ViewData;
+        this.TrackBy = TrackBy;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.childViewDataModels = chain(this.groupViewDataModel)
+            .pluckList('children');
+    }
+    // @Trace()
+    onCommandFired() {
+        this.commandFired.emit();
+        this.triggers.forEach(trigger => {
+            if (trigger.menuOpen) {
+                trigger.closeMenu();
+            }
+        });
+    }
+}
+CommandGroupRendererComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-command-group-renderer',
+                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button 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 = () => [];
+CommandGroupRendererComponent.propDecorators = {
+    groupViewDataModel: [{ type: Input }],
+    groupViewData: [{ type: Input }],
+    renderRootNode: [{ type: Input }, { type: HostBinding, args: ['class.render-root',] }],
+    commandFired: [{ type: Output }],
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+__decorate([
+    StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+
 class CommandGroupComponent extends CommandGroup {
     constructor(parent) {
         super(parent);
@@ -856,6 +927,7 @@ class CommandGroupComponent extends CommandGroup {
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.faceListModel = chain(this.faceModel).mapToList(v => [v]);
         this.parent.registerGroup(this, this.faceListModel);
+        when(this.faceListModel).changes(() => this.notifyChanged());
     }
 }
 CommandGroupComponent.decorators = [
@@ -1042,10 +1114,9 @@ const ɵ0 = CommandGroup.factory;
 /**
  *
  */
-class MoreMenuComponent extends DisposableComponent {
+class MoreMenuComponent extends AbstractPopupMenuComponent {
     constructor(group) {
-        super();
-        this.group = group;
+        super(group);
         this.tooltipModel = new MutableValueModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         group.xPosition = 'before'; // this should be the default unless overridden by the user.
@@ -1060,17 +1131,11 @@ class MoreMenuComponent extends DisposableComponent {
             ];
         }, { allowNil: true });
     }
-    ngOnInit() {
-    }
-    // @Trace()
-    ngAfterContentInit() {
-        this.group.initialise();
-    }
 }
 MoreMenuComponent.decorators = [
     { type: 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: CommandGroup, useFactory: ɵ0 }]
             },] }
 ];
@@ -1089,28 +1154,17 @@ const ɵ0$1 = CommandGroup.factory;
 /**
  *
  */
-class PopupMenuComponent extends DisposableComponent {
+class PopupMenuComponent extends AbstractPopupMenuComponent {
     constructor(group) {
-        super();
-        this.group = group;
+        super(group);
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
-    // @Trace()
-    ngOnInit() {
-    }
-    // @Trace()
-    ngAfterContentInit() {
-        this.group.initialise();
-    }
-    // @Trace()
-    ngAfterViewInit() {
-    }
 }
 PopupMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-menu',
-                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate" (commandFired)="closeMenu()"></aup-command-group-renderer>',
                 providers: [{ provide: CommandGroup, useFactory: ɵ0$1 }]
             },] }
 ];
@@ -3093,7 +3147,8 @@ ComponentsModule.decorators = [
                     SeparatorComponent,
                     FlexComponent,
                     CommandGroupMenuRendererComponent,
-                    CommandGroupRendererComponent
+                    CommandGroupRendererComponent,
+                    AbstractPopupMenuComponent
                 ],
                 imports: [
                     CommonModule,
@@ -7130,5 +7185,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandDirective, CommandFace, CommandFaceComponent, CommandGroup, CommandGroupComponent, CommandGroupMenuRendererComponent, CommandGroupRendererComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PLACE_AUTH_SERVICE, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PopupMenuComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, Registration, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, UrlService, UrlSnapshot, VerticalFocusContainerComponent, ViewData, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandDirective, CommandFace, CommandFaceComponent, CommandGroup, CommandGroupComponent, CommandGroupMenuRendererComponent, CommandGroupRendererComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PLACE_AUTH_SERVICE, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PopupMenuComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, Registration, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, UrlService, UrlSnapshot, VerticalFocusContainerComponent, ViewData, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map