@coolon/angular-ui-powerups 3.7.0-alpha.7 → 3.7.0-alpha.9

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

@@ -713,6 +713,10 @@
         __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) {
@@ -853,437 +857,328 @@
         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 = {}));
-
-    exports.Registration = /** @class */ (function (_super) {
-        __extends(Registration, _super);
-        function Registration() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return Registration;
-    }(pectin.GarbageCollector));
-    (function (Registration) {
-        var FaceRegistration = /** @class */ (function (_super) {
-            __extends(FaceRegistration, _super);
-            function FaceRegistration(faceListModel) {
-                var _this = _super.call(this) || this;
-                _this.faceListModel = faceListModel;
-                return _this;
-            }
-            return FaceRegistration;
-        }(Registration));
-        Registration.FaceRegistration = FaceRegistration;
-        var CommandRegistration = /** @class */ (function (_super) {
-            __extends(CommandRegistration, _super);
-            function CommandRegistration(command, faceListModel) {
-                var _this = _super.call(this, faceListModel) || this;
-                _this.command = command;
-                return _this;
-            }
-            CommandRegistration.prototype.toTemplate = function () {
-                return new exports.ViewData.CommandData(this.command, this.faceListModel.value);
-            };
-            return CommandRegistration;
-        }(FaceRegistration));
-        Registration.CommandRegistration = CommandRegistration;
-        var GroupRegistration = /** @class */ (function (_super) {
-            __extends(GroupRegistration, _super);
-            function GroupRegistration(faceModel, group) {
-                var _this = _super.call(this, faceModel) || this;
-                _this.group = group;
-                return _this;
-            }
-            GroupRegistration.prototype.toTemplate = function () {
-                return new exports.ViewData.GroupData(this.faceListModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
-            };
-            return GroupRegistration;
-        }(FaceRegistration));
-        Registration.GroupRegistration = GroupRegistration;
-        var SeparatorRegistration = /** @class */ (function (_super) {
-            __extends(SeparatorRegistration, _super);
-            function SeparatorRegistration() {
-                var _this = _super.apply(this, __spread(arguments)) || this;
-                _this.template = new exports.ViewData.SeparatorData();
-                return _this;
-            }
-            SeparatorRegistration.prototype.toTemplate = function () {
-                return this.template;
-            };
-            return SeparatorRegistration;
-        }(Registration));
-        Registration.SeparatorRegistration = SeparatorRegistration;
-        var FlexRegistration = /** @class */ (function (_super) {
-            __extends(FlexRegistration, _super);
-            function FlexRegistration() {
-                var _this = _super.apply(this, __spread(arguments)) || this;
-                _this.template = new exports.ViewData.FlexData();
-                return _this;
-            }
-            FlexRegistration.prototype.toTemplate = function () {
-                return this.template;
-            };
-            return FlexRegistration;
-        }(Registration));
-        Registration.FlexRegistration = FlexRegistration;
-        function hasFace(entry) {
-            return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
-        }
-        Registration.hasFace = hasFace;
-    })(exports.Registration || (exports.Registration = {}));
-
-    exports.CommandGroup = /** @class */ (function (_super) {
-        __extends(CommandGroup, _super);
-        function CommandGroup(parent) {
+    var PopupAwareComponent = /** @class */ (function (_super) {
+        __extends(PopupAwareComponent, _super);
+        function PopupAwareComponent(element, parent) {
             var _this = _super.call(this) || this;
+            _this.element = element;
             _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();
-            // This is a hack to trigger re-rendering when a command is removed from it's parent using ng-if ng-for etc.
-            when(chain(_this._registrations)
-                .throttle(20)
-                .count())
-                .changes(function (is, was) {
-                if (_this.initialised.value) {
-                    _this.notifyChanged();
+            if (parent) {
+                _this.registerDisposable(_this.parent.register(_this));
+            }
+            return _this;
+        }
+        Object.defineProperty(PopupAwareComponent.prototype, "componentIndex", {
+            get: function () {
+                var node = this.element.nativeElement;
+                var index = 0;
+                while ((node = node.previousElementSibling)) {
+                    index++;
                 }
-            });
+                return index;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PopupAwareComponent.prototype.getFace = function () {
+            return undefined;
+        };
+        return PopupAwareComponent;
+    }(DisposableComponent));
+
+    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;
         }
-        CommandGroup.prototype.initialise = function () {
-            this.rebuildTemplates();
+        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;
         };
-        Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
+        return CommandComponent;
+    }(PopupAwareComponent));
+    CommandComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-command',
+                    template: "<ng-container [ngSwitch]=\"buttonStyle.value\">\n  <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n    <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n    <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
+                    styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
+                },] }
+    ];
+    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)
+    ], 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);
+
+    exports.CommandContainer = /** @class */ (function (_super) {
+        __extends(CommandContainer, _super);
+        function CommandContainer(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            return _this;
+        }
+        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() {
-                var _this = _super.call(this) || 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;
-                when(_this.faceListModel).changes(function () { return _this.notifyChanged(); });
-                return _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 = {}));
+        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(group) {
-            var _this = _super.call(this) || this;
-            _this.group = group;
-            _this.registerDisposable(group);
+        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;
+            // 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;
         }
-        Object.defineProperty(AbstractPopupMenuComponent.prototype, "xPosition", {
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "faceAdapter", {
             get: function () {
-                return this.group.xPosition;
-            },
-            set: function (position) {
-                this.group.xPosition = position;
+                return this.faceAdapterModel.value;
             },
             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.isRoot = function () {
+            return !this.parent;
         };
-        AbstractPopupMenuComponent.prototype.ngOnInit = function () {
+        AbstractPopupMenuComponent.prototype.register = function (component) {
+            var _this = this;
+            this._unorderedChildren.push(component);
+            return pectin.Disposable.disposableThatRuns(function () {
+                _this._unorderedChildren.remove(component);
+            });
         };
-        // @Trace()
-        AbstractPopupMenuComponent.prototype.closeMenu = function () {
+        AbstractPopupMenuComponent.prototype.onCommandFired = function () {
             this.triggers.forEach(function (trigger) {
                 if (trigger.menuOpen) {
                     trigger.closeMenu();
                 }
             });
         };
+        AbstractPopupMenuComponent.prototype.getFace = function () {
+            return this.faceAdapter.face;
+        };
         return AbstractPopupMenuComponent;
-    }(DisposableComponent));
+    }(PopupAwareComponent));
     AbstractPopupMenuComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aup-abstract-popup-menu-component',
+                    selector: 'aup-abstract-popup-menu',
                     template: ''
                 },] }
     ];
     AbstractPopupMenuComponent.ctorParameters = function () { return [
-        { type: exports.CommandGroup }
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }] }
     ]; };
     AbstractPopupMenuComponent.propDecorators = {
         xPosition: [{ type: i0.Input }],
         yPosition: [{ type: i0.Input }],
         triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
     };
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PopupAwareComponent]),
+        __metadata("design:returntype", void 0)
+    ], AbstractPopupMenuComponent.prototype, "register", null);
 
-    (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 PopupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuRendererComponent, _super);
+        function PopupMenuRendererComponent() {
             var _this = _super.call(this) || this;
-            _this.parent = parent;
-            _this.groupViewDataModel = new pectin.MutableValueModel();
+            _this._childList = new pectin.DelegatingListModel();
             _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');
+            // 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;
         }
-        CommandGroupMenuRendererComponent.prototype.executeCommand = function (data) {
+        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;
-            exports.ViewData.getCommand(data).execute().finally(function () {
-                _this.commandFired.emit();
-            });
+            if (this.isCommand(data)) {
+                data.command.execute().finally(function () {
+                    _this.commandFired.emit();
+                });
+            }
         };
-        CommandGroupMenuRendererComponent.prototype.isEnabled = function (data) {
-            return exports.ViewData.getCommand(data).enabled.value;
+        PopupMenuRendererComponent.prototype.isEnabled = function (data) {
+            return true; //ViewData.getCommand(data).enabled.value;
         };
         // @Trace()
-        CommandGroupMenuRendererComponent.prototype.onCommandFired = function () {
+        PopupMenuRendererComponent.prototype.onCommandFired = function () {
             this.commandFired.emit();
             this.triggers.forEach(function (trigger) {
                 if (trigger.menuOpen) {
@@ -1291,117 +1186,40 @@
                 }
             });
         };
-        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();
-                }
-            });
+        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;
         };
-        return CommandGroupRendererComponent;
+        PopupMenuRendererComponent.prototype.getFaces = function (child) {
+            return this.isCommand(child) ?
+                child.faces.value :
+                this.isPopupMenu(child) ?
+                    [child.faceAdapter.face] :
+                    undefined;
+        };
+        return PopupMenuRendererComponent;
     }(DisposableComponent));
-    CommandGroupRendererComponent.decorators = [
+    PopupMenuRendererComponent.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}"]
+                    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"
                 },] }
     ];
-    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',] }],
+    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)
-    ], 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) {
-            var _this = _super.call(this, parent) || this;
-            _this.parent = parent;
-            _this.xPosition = 'after';
-            _this.yPosition = 'below';
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.faceListModel = chain(_this.faceModel).mapToList(function (v) { return [v]; });
-            _this.parent.registerGroup(_this, _this.faceListModel);
-            when(_this.faceListModel).changes(function () { return _this.notifyChanged(); });
-            return _this;
-        }
-        return CommandGroupComponent;
-    }(exports.CommandGroup));
-    CommandGroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-command-group',
-                    template: '',
-                    providers: [
-                        { provide: exports.CommandGroup, useExisting: CommandGroupComponent }
-                    ]
-                },] }
-    ];
-    CommandGroupComponent.ctorParameters = function () { return [
-        { type: exports.CommandGroup, decorators: [{ type: i0.SkipSelf }] }
-    ]; };
-    CommandGroupComponent.propDecorators = {
-        faceModel: [{ type: i0.Input }],
-        face: [{ type: i0.Input }],
-        xPosition: [{ type: i0.Input }],
-        yPosition: [{ type: i0.Input }]
-    };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.ValueModel)
-    ], CommandGroupComponent.prototype, "faceModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandGroupComponent.prototype, "face", void 0);
 
     /**
      * Custom CSS:
@@ -1477,92 +1295,13 @@
         __metadata("design:type", Array)
     ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
-    /**
-     *
-     */
-    var CommandComponent = /** @class */ (function (_super) {
-        __extends(CommandComponent, _super);
-        function CommandComponent(element, parent) {
-            var _this = _super.call(this) || this;
-            _this.element = element;
-            _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 () {
-        };
-        CommandComponent.prototype.ngAfterViewInit = function () {
-            // console.log(this.element.nativeElement)
-        };
-        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: i0.ElementRef },
-        { 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 () {
         };
@@ -1574,44 +1313,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, group) || this;
+        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;
         }
+        Object.defineProperty(MoreMenuComponent.prototype, "face", {
+            get: function () {
+                return this.faceModelDelegate.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return MoreMenuComponent;
     }(AbstractPopupMenuComponent));
     MoreMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-more-menu',
-                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate" (commandFired)="closeMenu()"></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 }]
@@ -1621,36 +1364,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, group) || this;
+        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]);
         }
         return PopupMenuComponent;
     }(AbstractPopupMenuComponent));
     PopupMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-popup-menu',
-                    template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate" (commandFired)="closeMenu()"></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([
@@ -1658,72 +1403,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;
-            _this.registerDisposable(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) {
@@ -2850,7 +2529,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) {
@@ -3804,14 +3483,12 @@
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
-                        CommandGroupComponent,
                         CommandFaceComponent,
                         MoreMenuComponent,
                         SeparatorComponent,
                         FlexComponent,
-                        CommandGroupMenuRendererComponent,
-                        CommandGroupRendererComponent,
-                        AbstractPopupMenuComponent
+                        AbstractPopupMenuComponent,
+                        PopupMenuRendererComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -3858,7 +3535,6 @@
                         exports.IconComponent,
                         SectionHeaderComponent,
                         TableRowMenuComponent,
-                        CommandGroupComponent,
                         ToolBarComponent,
                         CommandComponent,
                         PopupMenuComponent,
@@ -8333,9 +8009,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;
@@ -8381,6 +8054,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;
@@ -8394,8 +8068,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;