@coolon/angular-ui-powerups 2.0.0-alpha.34 → 2.0.0-alpha.36

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, forwardRef, Optional, HostBinding, ViewEncapsulation, EventEmitter, Output, ViewChild, ChangeDetectorRef, Self, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChildren, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, EventEmitter, Optional, SkipSelf, ViewChild, Output, ViewChildren, QueryList, HostBinding, ViewEncapsulation, Self, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -12,13 +12,14 @@ import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenu, MatMenuTrigger, _MatMenuDirectivesModule, MatMenuModule } from '@angular/material/menu';
+import { MatMenu, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableListModel, Disposable, MutableValueModel, StoreInValueModel, ListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, StoreInListModel, ValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, Trace, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, StoreInListModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Functions } from '@coolon/pectin';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
 import { Enum } from 'typescript-string-enums';
@@ -29,8 +30,8 @@ import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
@@ -372,11 +373,16 @@ CardContainerComponent = __decorate([
     Component({
         selector: 'aup-card-container',
         template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-icon icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-        styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+        styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--aup-command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
     }),
     __metadata("design:paramtypes", [])
 ], CardContainerComponent);
 
+var TrackBy;
+(function (TrackBy) {
+    TrackBy.byIndex = (data, index) => index;
+})(TrackBy || (TrackBy = {}));
+
 var CommandFace;
 (function (CommandFace) {
     let Position;
@@ -384,6 +390,31 @@ var CommandFace;
         Position["START"] = "start";
         Position["END"] = "end";
     })(Position = CommandFace.Position || (CommandFace.Position = {}));
+    CommandFace.Style = Enum({
+        FLAT: 'flat',
+        STROKED: 'stroked',
+        RAISED: 'raised'
+    });
+    function getColorOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
+    }
+    CommandFace.getColorOf = getColorOf;
+    function getStyleOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
+    }
+    CommandFace.getStyleOf = getStyleOf;
+    function getIconOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
+    }
+    CommandFace.getIconOf = getIconOf;
+    function getTooltipOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
+    }
+    CommandFace.getTooltipOf = getTooltipOf;
+    function getTextOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
+    }
+    CommandFace.getTextOf = getTextOf;
     class Adapter {
         constructor(face) {
             this.face = face;
@@ -392,7 +423,7 @@ var CommandFace;
             return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
         }
         get icon() {
-            return ___default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+            return CommandFace.getIconOf(this.face);
         }
         get iconPosition() {
             return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
@@ -406,8 +437,11 @@ var CommandFace;
         get iconPositionEnd() {
             return this.iconPosition === CommandFace.Position.END;
         }
-        get destructive() {
-            return ___default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+        get color() {
+            return CommandFace.getColorOf(this.face);
+        }
+        get style() {
+            return CommandFace.getStyleOf(this.face);
         }
     }
     __decorate([
@@ -442,84 +476,413 @@ var CommandFace;
     ], Adapter.prototype, "iconPositionEnd", null);
     __decorate([
         Memoize(),
-        __metadata("design:type", Boolean),
+        __metadata("design:type", String),
         __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "destructive", null);
+    ], Adapter.prototype, "color", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "style", null);
     CommandFace.Adapter = Adapter;
 })(CommandFace || (CommandFace = {}));
 
-class CommandContainer extends GarbageCollector {
+class ViewData {
+}
+(function (ViewData) {
+    class FaceData extends ViewData {
+        constructor(face) {
+            super();
+            this.faceAdapter = new CommandFace.Adapter(face);
+        }
+    }
+    ViewData.FaceData = FaceData;
+    class GroupData extends FaceData {
+        constructor(face, xPosition, yPosition, children) {
+            super(face);
+            this.xPosition = xPosition;
+            this.yPosition = yPosition;
+            this.children = children;
+        }
+        get hasMixedIcons() {
+            const hasFaces = this.children.filter(c => ViewData.hasFace(c));
+            const iconCount = hasFaces.filter(c => !!c.faceAdapter.icon).length;
+            return iconCount > 0 && hasFaces.length !== iconCount;
+        }
+    }
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], GroupData.prototype, "hasMixedIcons", null);
+    ViewData.GroupData = GroupData;
+    class CommandData extends FaceData {
+        constructor(face, command) {
+            super(face);
+            this.command = command;
+        }
+    }
+    ViewData.CommandData = CommandData;
+    class SeparatorData extends ViewData {
+    }
+    ViewData.SeparatorData = SeparatorData;
+    class FlexData extends ViewData {
+    }
+    ViewData.FlexData = FlexData;
+    function as(type, viewData) {
+        return viewData instanceof type ? viewData : 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).faceAdapter.tooltip;
+    }
+    ViewData.getTooltip = getTooltip;
+    function getStyle(data) {
+        return as(FaceData, data).faceAdapter.style;
+    }
+    ViewData.getStyle = getStyle;
+    function getColor(data) {
+        return as(FaceData, data).faceAdapter.color;
+    }
+    ViewData.getColor = getColor;
+    function hasText(data) {
+        return !!as(FaceData, data).faceAdapter.text;
+    }
+    ViewData.hasText = hasText;
+    function getFace(data) {
+        return as(FaceData, data).faceAdapter.face;
+    }
+    ViewData.getFace = getFace;
+    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;
+})(ViewData || (ViewData = {}));
+
+let CommandGroupMenuRendererComponent = 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.ctorParameters = () => [
+    { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+];
+__decorate([
+    ViewChild('menu', { static: true }),
+    __metadata("design:type", MatMenu)
+], CommandGroupMenuRendererComponent.prototype, "menuComponent", void 0);
+__decorate([
+    Input(), StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
+__decorate([
+    ViewChildren(MatMenuTrigger),
+    __metadata("design:type", QueryList)
+], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
+CommandGroupMenuRendererComponent = __decorate([
+    Component({
+        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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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"
+    }),
+    __param(0, Optional()), __param(0, SkipSelf()),
+    __metadata("design:paramtypes", [CommandGroupMenuRendererComponent])
+], CommandGroupMenuRendererComponent);
+
+let CommandGroupRendererComponent = class CommandGroupRendererComponent extends DisposableComponent {
     constructor() {
         super();
-        this._commandRegistrations = new MutableListModel();
+        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');
     }
-    get commandRegistrations() {
-        return this._commandRegistrations.readonly;
+};
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+__decorate([
+    Input(), StoreInValueModel('groupViewDataModel'),
+    __metadata("design:type", ViewData.GroupData)
+], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+__decorate([
+    Input(),
+    HostBinding('class.render-root'),
+    __metadata("design:type", Object)
+], CommandGroupRendererComponent.prototype, "renderRootNode", void 0);
+CommandGroupRendererComponent = __decorate([
+    Component({
+        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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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 [face]=\"ViewData.getFace(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{display:inline-flex;flex-direction:row;align-items:center}: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}"]
+    }),
+    __metadata("design:paramtypes", [])
+], CommandGroupRendererComponent);
+
+class Registration extends GarbageCollector {
+}
+(function (Registration) {
+    class FaceRegistration extends Registration {
+        constructor(faceModel) {
+            super();
+            this.faceModel = faceModel;
+        }
     }
-    registerCommand(command, face) {
-        const registration = { command, faceAdapter: new CommandFace.Adapter(face) };
-        this._commandRegistrations.push(registration);
-        return Disposable.disposableThatRuns(() => this._commandRegistrations.remove(registration));
+    Registration.FaceRegistration = FaceRegistration;
+    class CommandRegistration extends FaceRegistration {
+        constructor(faceModel, command) {
+            super(faceModel);
+            this.command = command;
+        }
+        toTemplate() {
+            return new ViewData.CommandData(this.faceModel.value, this.command);
+        }
     }
-    getDefaultIconPosition() {
-        return CommandFace.Position.START;
+    Registration.CommandRegistration = CommandRegistration;
+    class GroupRegistration extends FaceRegistration {
+        constructor(faceModel, group) {
+            super(faceModel);
+            this.group = group;
+        }
+        toTemplate() {
+            return new ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(r => r.toTemplate()));
+        }
     }
-}
+    Registration.GroupRegistration = GroupRegistration;
+    class SeparatorRegistration extends Registration {
+        constructor() {
+            super(...arguments);
+            this.template = new ViewData.SeparatorData();
+        }
+        toTemplate() {
+            return this.template;
+        }
+    }
+    Registration.SeparatorRegistration = SeparatorRegistration;
+    class FlexRegistration extends Registration {
+        constructor() {
+            super(...arguments);
+            this.template = new ViewData.FlexData();
+        }
+        toTemplate() {
+            return this.template;
+        }
+    }
+    Registration.FlexRegistration = FlexRegistration;
+    function hasFace(entry) {
+        return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+    }
+    Registration.hasFace = hasFace;
+})(Registration || (Registration = {}));
 
-var CommandBarComponent_1;
-/**
- *
- */
-let CommandBarComponent = CommandBarComponent_1 = class CommandBarComponent extends CommandContainer {
-    constructor() {
+class CommandGroup extends GarbageCollector {
+    constructor(parent) {
         super();
+        this.parent = parent;
+        this._rootTemplate = new MutableValueModel();
+        this._registrations = new MutableListModel();
+        this._childFaceModels = new MutableListModel();
+        this._faceChangeCount = new MutableValueModel(0);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        const childFaces = chain(this._childFaceModels)
+            .map(m => m.value, { dependsOn: this._faceChangeCount })
+            .rejectNil();
+        const iconCount = childFaces
+            .select(face => !!CommandFace.getIconOf(face))
+            .count();
+        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(childFaces.length)).areTruthy();
+        this.childTemplates = chain(this._rootTemplate).pluckList('children');
+        this.initialised = chain(this._rootTemplate).isNotNil();
+    }
+    initialise() {
+        this.rebuildTemplates();
+    }
+    get rootTemplate() {
+        return this._rootTemplate.readonly;
+    }
+    get registrations() {
+        return this._registrations.readonly;
+    }
+    notifyChanged() {
+        if (this.parent) {
+            this.parent.notifyChanged();
+        }
+        else {
+            this.rebuildTemplates();
+        }
     }
-    ngOnInit() {
+    notifyChildFaceChanged(is, was) {
+        this.notifyChanged();
+    }
+    rebuildTemplates() {
+        this._rootTemplate.value = new ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
     }
-    getButtonColor(registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    get depth() {
+        return this.isRoot() ? 0 : this.parent.depth + 1;
+    }
+    isRoot() {
+        return false;
+    }
+    registerCommand(command, faceModel) {
+        return this.register(new Registration.CommandRegistration(faceModel, command));
+    }
+    registerGroup(group, faceModel) {
+        return this.register(new Registration.GroupRegistration(faceModel, group));
+    }
+    registerFlex(component) {
+        return this.register(new Registration.FlexRegistration());
+    }
+    registerSeparator(component) {
+        return this.register(new Registration.SeparatorRegistration());
+    }
+    register(registration) {
+        this._registrations.push(registration);
+        if (registration instanceof Registration.FaceRegistration) {
+            this._childFaceModels.push(registration.faceModel);
+            const { when } = Dsl.disposeWith(registration);
+            when(registration.faceModel).changes((is, was) => {
+                this.notifyChildFaceChanged(new CommandFace.Adapter(is), new CommandFace.Adapter(was));
+            }, { asLongAs: this.initialised });
+            registration.onDispose(() => this._childFaceModels.remove(registration.faceModel));
+        }
+        registration.onDispose(() => this._registrations.remove(registration));
+        return registration;
+    }
+}
+(function (CommandGroup) {
+    class Root extends CommandGroup {
+        isRoot() {
+            return true;
+        }
+    }
+    __decorate([
+        TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], Root.prototype, "faceModel", void 0);
+    __decorate([
+        TrackExternal({ defaultValue: 'after' }),
+        __metadata("design:type", ValueModel)
+    ], Root.prototype, "xPositionModel", void 0);
+    __decorate([
+        StoreInValueModel('xPositionModel'),
+        __metadata("design:type", String)
+    ], Root.prototype, "xPosition", void 0);
+    __decorate([
+        TrackExternal({ defaultValue: 'below' }),
+        __metadata("design:type", ValueModel)
+    ], Root.prototype, "yPositionModel", void 0);
+    __decorate([
+        StoreInValueModel('yPositionModel'),
+        __metadata("design:type", String)
+    ], Root.prototype, "yPosition", void 0);
+    CommandGroup.Root = Root;
+    function factory() {
+        return new Root();
+    }
+    CommandGroup.factory = factory;
+})(CommandGroup || (CommandGroup = {}));
+
+var CommandGroupComponent_1;
+let CommandGroupComponent = CommandGroupComponent_1 = class CommandGroupComponent extends CommandGroup {
+    constructor(parent) {
+        super(parent);
+        this.parent = parent;
+        this.xPosition = 'after';
+        this.yPosition = 'below';
+        this.parent.registerGroup(this, this.faceModel);
     }
 };
-CommandBarComponent = CommandBarComponent_1 = __decorate([
+CommandGroupComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: SkipSelf }] }
+];
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandGroupComponent.prototype, "faceModel", void 0);
+__decorate([
+    Input(), StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], CommandGroupComponent.prototype, "face", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CommandGroupComponent.prototype, "xPosition", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CommandGroupComponent.prototype, "yPosition", void 0);
+CommandGroupComponent = CommandGroupComponent_1 = __decorate([
     Component({
-        selector: 'aup-command-bar',
-        template: `
-    <ng-container *ngFor="let registration of commandRegistrations.value">
-      <button *ngIf="registration.faceAdapter.icon && !registration.faceAdapter.text"
-              mat-icon-button
-              [color]="getButtonColor(registration)"
-              [pectinCommand]="registration.command"
-              [matTooltip]="registration.faceAdapter.tooltip"
-      >
-        <aup-command-face [face]="registration.faceAdapter.face"></aup-command-face>
-      </button>
-      <button *ngIf="registration.faceAdapter.text"
-              [color]="getButtonColor(registration)"
-              mat-button
-              [pectinCommand]="registration.command"
-              [matTooltip]="registration.tooltip"
-      >
-        <aup-command-face [face]="registration.faceAdapter.face"></aup-command-face>
-      </button>
-    </ng-container>
-  `,
-        providers: [{ provide: CommandContainer, useExisting: forwardRef(() => CommandBarComponent_1) }],
-        styles: [`:host {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-  }`]
+        selector: 'aup-command-group',
+        template: '',
+        providers: [
+            { provide: CommandGroup, useExisting: CommandGroupComponent_1 }
+        ]
     }),
-    __metadata("design:paramtypes", [])
-], CommandBarComponent);
+    __param(0, SkipSelf()),
+    __metadata("design:paramtypes", [CommandGroup])
+], CommandGroupComponent);
 
 /**
- *
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
  */
 let CommandFaceComponent = class CommandFaceComponent extends DisposableComponent {
-    constructor(commandContainer) {
+    constructor() {
         super();
-        this.commandContainer = commandContainer;
         this.faceModel = new MutableValueModel();
         this.ignoreIcon = false;
         this.ignoreText = false;
@@ -530,7 +893,7 @@ let CommandFaceComponent = class CommandFaceComponent extends DisposableComponen
         this.iconModel = faceAdapter.pluck('icon');
         this.textModel = faceAdapter.pluck('text');
         this.positionModel = faceAdapter.pluck('iconPosition');
-        this.destructiveModel = faceAdapter.pluck('destructive');
+        this.colorModel = faceAdapter.pluck('color');
     }
     get requiresMissingIconInLayout() {
         return this.includeMissingIconInLayout && !this.iconModel.value;
@@ -538,8 +901,8 @@ let CommandFaceComponent = class CommandFaceComponent extends DisposableComponen
     ngOnInit() {
     }
     get iconPosition() {
-        var _a, _b, _c;
-        return (_c = (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : (_b = this.commandContainer) === null || _b === void 0 ? void 0 : _b.getDefaultIconPosition()) !== null && _c !== void 0 ? _c : CommandFace.Position.START;
+        var _a;
+        return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : CommandFace.Position.START;
     }
     get shouldIncludeIcon() {
         return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
@@ -553,13 +916,10 @@ let CommandFaceComponent = class CommandFaceComponent extends DisposableComponen
     get text() {
         return this.ignoreText ? undefined : this.textModel.value;
     }
-    get destructive() {
-        return this.destructiveModel.value;
+    get color() {
+        return this.colorModel.value;
     }
 };
-CommandFaceComponent.ctorParameters = () => [
-    { type: CommandContainer, decorators: [{ type: Optional }] }
-];
 __decorate([
     Input('face'), StoreInValueModel('faceModel'),
     __metadata("design:type", Object)
@@ -582,235 +942,268 @@ __decorate([
     __metadata("design:paramtypes", [])
 ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
 __decorate([
-    HostBinding('class.destructive'),
-    __metadata("design:type", Boolean),
+    HostBinding('attr.color'),
+    __metadata("design:type", String),
     __metadata("design:paramtypes", [])
-], CommandFaceComponent.prototype, "destructive", null);
+], CommandFaceComponent.prototype, "color", null);
 CommandFaceComponent = __decorate([
     Component({
         selector: 'aup-command-face',
         template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
         encapsulation: ViewEncapsulation.None,
-        styles: ["aup-command-face{--icon-gap:var(--command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+        styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
     }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [CommandContainer])
+    __metadata("design:paramtypes", [])
 ], CommandFaceComponent);
 
 /**
  *
  */
 let CommandComponent = class CommandComponent extends DisposableComponent {
-    constructor(commandContainer) {
+    constructor(parent) {
         super();
-        this.commandContainer = commandContainer;
+        this.parent = parent;
+        this.CommandFace = CommandFace;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.buttonStyle = chain(this.faceModel).map(f => CommandFace.getStyleOf(f));
+        if (parent) {
+            this.registerDisposable(this.parent.registerCommand(this.command, this.faceModel));
+        }
     }
     ngOnInit() {
-        this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
     }
 };
 CommandComponent.ctorParameters = () => [
-    { type: CommandContainer }
+    { type: CommandGroup, decorators: [{ type: Optional }] }
 ];
 __decorate([
     Input(), TrackExternal(),
     __metadata("design:type", Command)
 ], CommandComponent.prototype, "command", void 0);
 __decorate([
-    Input(),
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], CommandComponent.prototype, "faceModel", void 0);
+__decorate([
+    Input(), StoreInValueModel('faceModel'),
     __metadata("design:type", Object)
 ], CommandComponent.prototype, "face", void 0);
 CommandComponent = __decorate([
     Component({
         selector: 'aup-command',
-        template: ``
+        template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
     }),
-    __metadata("design:paramtypes", [CommandContainer])
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [CommandGroup])
 ], CommandComponent);
 
 /**
  *
  */
-let PopupMenuRendererComponent = class PopupMenuRendererComponent extends DisposableComponent {
-    constructor() {
+let FlexComponent = class FlexComponent extends DisposableComponent {
+    constructor(parent) {
         super();
-        this.xPosition = 'after';
-        this.yPosition = 'below';
-        this.commandExecuted = new EventEmitter();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        const registrations = chain(this.commandRegistrations);
-        const iconCount = registrations.select(r => !!r.faceAdapter.icon).count();
-        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(registrations.length)).areTruthy();
+        this.parent = parent;
+        if (parent) {
+            parent.registerFlex(this);
+        }
     }
     ngOnInit() {
     }
-    getPopupMenuCommandFor(item) {
-        const { when } = Dsl.disposeWith(this);
-        when(item.command.busy).becomesFalsey(() => {
-            this.commandExecuted.emit();
-        });
-        return item.command;
+};
+FlexComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
+FlexComponent = __decorate([
+    Component({
+        selector: 'aup-flex',
+        template: ``
+    }),
+    __metadata("design:paramtypes", [CommandGroup])
+], FlexComponent);
+
+const ɵ0 = CommandGroup.factory;
+/**
+ *
+ */
+let MoreMenuComponent = class MoreMenuComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = 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.
+        group.faceModel = chain(this.tooltipModel).map(tooltip => {
+            return {
+                icon: () => 'mat:more_vert',
+                tooltip() {
+                    return tooltip;
+                }
+            };
+        }, { allowNil: true });
     }
-    getButtonColor(registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
     }
 };
+MoreMenuComponent.ctorParameters = () => [
+    { type: CommandGroup }
+];
 __decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ListModel)
-], PopupMenuRendererComponent.prototype, "commandRegistrations", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], PopupMenuRendererComponent.prototype, "xPosition", void 0);
-__decorate([
-    Input(),
+    Input(), StoreInValueModel('tooltipModel'),
     __metadata("design:type", String)
-], PopupMenuRendererComponent.prototype, "yPosition", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], PopupMenuRendererComponent.prototype, "commandExecuted", void 0);
+], MoreMenuComponent.prototype, "tooltip", void 0);
 __decorate([
-    ViewChild(MatMenu),
-    __metadata("design:type", MatMenu)
-], PopupMenuRendererComponent.prototype, "matMenu", void 0);
-PopupMenuRendererComponent = __decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], MoreMenuComponent.prototype, "ngAfterContentInit", null);
+MoreMenuComponent = __decorate([
     Component({
-        selector: 'aup-popup-menu-renderer',
-        template: "<mat-menu [xPosition]=\"xPosition\" [yPosition]=\"yPosition\" >\n  <button *ngFor=\"let registration of commandRegistrations.value\"\n          mat-menu-item\n          [pectinCommand]=\"getPopupMenuCommandFor(registration)\"\n  >\n    <aup-command-face [face]=\"registration.faceAdapter.face\" [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n  </button>\n</mat-menu>\n",
-        styles: [":host{display:inline-flex;flex-direction:row;align-items:center}"]
+        selector: 'aup-more-menu',
+        template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+        providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
     }),
-    __metadata("design:paramtypes", [])
-], PopupMenuRendererComponent);
+    __metadata("design:paramtypes", [CommandGroup])
+], MoreMenuComponent);
 
+const ɵ0$1 = CommandGroup.factory;
 /**
  *
  */
-let AbstractPopupMenuComponent = class AbstractPopupMenuComponent extends CommandContainer {
-    constructor(cdr) {
+let PopupMenuComponent = class PopupMenuComponent extends DisposableComponent {
+    constructor(group) {
         super();
-        this.cdr = cdr;
-        this.xPosition = 'after';
-        this.yPosition = 'below';
-    }
-    ngAfterViewInit() {
-        this.cdr.detectChanges();
+        this.group = group;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        group.faceModel = this.faceModel;
     }
-    get matMenuComponent() {
-        var _a;
-        return (_a = this.popupMenu) === null || _a === void 0 ? void 0 : _a.matMenu;
+    ngOnInit() {
     }
-    closeMenu() {
-        this.menuTrigger.closeMenu();
+    ngAfterContentInit() {
+        this.group.initialise();
     }
-    getButtonColor(registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    ngAfterViewInit() {
     }
 };
-AbstractPopupMenuComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+PopupMenuComponent.ctorParameters = () => [
+    { type: CommandGroup }
 ];
 __decorate([
-    Input(),
-    __metadata("design:type", String)
-], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], PopupMenuComponent.prototype, "faceModel", void 0);
 __decorate([
-    Input(),
-    __metadata("design:type", String)
-], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
+    Input(), StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], PopupMenuComponent.prototype, "face", void 0);
 __decorate([
-    ViewChild(PopupMenuRendererComponent),
-    __metadata("design:type", PopupMenuRendererComponent)
-], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PopupMenuComponent.prototype, "ngOnInit", null);
 __decorate([
-    ViewChild(MatMenuTrigger),
-    __metadata("design:type", MatMenuTrigger)
-], AbstractPopupMenuComponent.prototype, "menuTrigger", void 0);
-AbstractPopupMenuComponent = __decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PopupMenuComponent.prototype, "ngAfterContentInit", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PopupMenuComponent.prototype, "ngAfterViewInit", null);
+PopupMenuComponent = __decorate([
     Component({
-        selector: 'aup-abstract-popup-menu',
-        template: ''
+        selector: 'aup-popup-menu',
+        template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+        providers: [{ provide: CommandGroup, useFactory: ɵ0$1 }]
     }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], AbstractPopupMenuComponent);
+    __metadata("design:paramtypes", [CommandGroup])
+], PopupMenuComponent);
 
-var PopupMenuComponent_1;
 /**
  *
  */
-let PopupMenuComponent = PopupMenuComponent_1 = class PopupMenuComponent extends AbstractPopupMenuComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.faceModel = new MutableValueModel();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        const faceAdapterModel = chain(this.faceModel).map(face => new CommandFace.Adapter(face));
-        this.faceTooltipModel = faceAdapterModel.pluck('tooltip');
+let SeparatorComponent = class SeparatorComponent extends DisposableComponent {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        if (parent) {
+            parent.registerSeparator(this);
+        }
     }
-    getTooltip() {
-        return this.faceTooltipModel.value;
+    isVertical() {
+        return this === null || this === void 0 ? void 0 : this.parent.isRoot();
     }
     ngOnInit() {
     }
 };
-PopupMenuComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+SeparatorComponent.ctorParameters = () => [
+    { type: CommandGroup, decorators: [{ type: Optional }] }
 ];
-__decorate([
-    Input(), StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], PopupMenuComponent.prototype, "face", void 0);
-PopupMenuComponent = PopupMenuComponent_1 = __decorate([
+SeparatorComponent = __decorate([
     Component({
-        selector: 'aup-popup-menu',
+        selector: 'aup-separator',
         template: `
-    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->
-    <button *ngIf="matMenuComponent" mat-icon-button [matMenuTriggerFor]="matMenuComponent" [matTooltip]="getTooltip()">
-      <aup-command-face [face]="face"></aup-command-face>
-    </button>
-    <aup-popup-menu-renderer [commandRegistrations]="commandRegistrations" [yPosition]="yPosition"
-                             [xPosition]="xPosition"
-                             (commandExecuted)="closeMenu()"></aup-popup-menu-renderer>
-  `,
-        providers: [{ provide: CommandContainer, useExisting: forwardRef(() => PopupMenuComponent_1) }]
+    <mat-divider [vertical]="isVertical()"></mat-divider>`
     }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], PopupMenuComponent);
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [CommandGroup])
+], SeparatorComponent);
 
-var MoreMenuComponent_1;
+const ɵ0$2 = CommandGroup.factory;
 /**
  *
  */
-let MoreMenuComponent = MoreMenuComponent_1 = class MoreMenuComponent extends AbstractPopupMenuComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.xPosition = "before"; // this should be the default unless overriden by the user.
+let ToolBarComponent = class ToolBarComponent extends DisposableComponent {
+    constructor(group) {
+        super();
+        this.group = group;
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.group.initialise();
+    }
+    ngAfterViewInit() {
     }
 };
-MoreMenuComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+ToolBarComponent.ctorParameters = () => [
+    { type: CommandGroup }
 ];
 __decorate([
-    Input(),
-    __metadata("design:type", String)
-], MoreMenuComponent.prototype, "tooltip", void 0);
-MoreMenuComponent = MoreMenuComponent_1 = __decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ToolBarComponent.prototype, "ngOnInit", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ToolBarComponent.prototype, "ngAfterContentInit", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ToolBarComponent.prototype, "ngAfterViewInit", null);
+ToolBarComponent = __decorate([
     Component({
-        selector: 'aup-more-menu',
-        template: `
-    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->
-    <button *ngIf="matMenuComponent" mat-icon-button [matMenuTriggerFor]="matMenuComponent" [matTooltip]="tooltip">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <aup-popup-menu-renderer [commandRegistrations]="commandRegistrations"
-                             [xPosition]="xPosition"
-                             [yPosition]="yPosition"
-                             (commandExecuted)="closeMenu()"></aup-popup-menu-renderer>
-  `,
-        providers: [{ provide: CommandContainer, useExisting: forwardRef(() => MoreMenuComponent_1) }]
+        selector: 'aup-tool-bar',
+        template: '<aup-command-group-renderer [renderRootNode]="false" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+        providers: [{ provide: CommandGroup, useFactory: ɵ0$2 }],
+        styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host span.flex{flex:1}:host>*+*{margin-left:8px}"]
     }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], MoreMenuComponent);
+    __metadata("design:paramtypes", [CommandGroup])
+], ToolBarComponent);
 
 let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
     constructor(focusManager) {
@@ -1949,7 +2342,7 @@ SelectHeaderCellRendererComponent = __decorate([
 
 const noop = () => {
 };
-const ɵ0 = noop;
+const ɵ0$3 = noop;
 const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 class ColumnModel {
     constructor(columnId, defaults) {
@@ -2412,12 +2805,14 @@ let TableModel = TableModel_1 = class TableModel {
         }
         return column;
     }
+    // removeColumn(column: ColumnModel<Row>) {
+    //
+    // }
     columnTextProperties(columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     }
     getColumnTextProperties(column) {
-        const factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
     }
     startEditSession(row) {
         const rowId = this.identityOf(row);
@@ -2706,10 +3101,10 @@ TableHeaderCellRendererComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], TableHeaderCellRendererComponent);
 
-class MenuItemData extends CommandFace.Adapter {
+class MenuItemData {
     constructor(factory, face) {
-        super(face);
         this.factory = factory;
+        this.face = face;
     }
 }
 /**
@@ -2753,24 +3148,16 @@ TableRowMenuComponent = __decorate([
     Component({
         selector: 'aup-table-row-menu',
         template: `
-    <button mat-icon-button *ngFor="let action of actions" [pectinCommand]="action.factory.create(value)">
-      <aup-icon [icon]="action.icon"></aup-icon>
-    </button>
-    <ng-container *ngIf="moreActions.length > 0">
-      <button #trigger mat-icon-button [matMenuTriggerFor]="menu">
-        <aup-icon icon="mat:more_vert"></aup-icon>
-      </button>
-      <mat-menu #menu="matMenu" xPosition="before" matTooltip="More options...">
-        <button *ngFor="let action of moreActions"
-                mat-menu-item
-                [pectinCommand]="createMoreMenuCommand(action, value)"
-        >
-          <aup-icon *ngIf="action.icon && action.iconPositionStart" [icon]="action.icon"></aup-icon>
-          {{action.text}}
-          <aup-icon *ngIf="action.icon && action.iconPositionEnd" [icon]="action.icon"></aup-icon>
-        </button>
-      </mat-menu>
-    </ng-container>
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.faceModel"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.faceModel"></aup-command>
+          </aup-more-menu>
+      </ng-container>
   `,
         styles: [`:host {
     display: inline-flex;
@@ -2906,13 +3293,16 @@ ComponentsModule = __decorate([
             IconComponent,
             SectionHeaderComponent,
             TableRowMenuComponent,
-            CommandBarComponent,
+            ToolBarComponent,
             CommandComponent,
             PopupMenuComponent,
+            CommandGroupComponent,
             CommandFaceComponent,
-            AbstractPopupMenuComponent,
-            PopupMenuRendererComponent,
-            MoreMenuComponent
+            MoreMenuComponent,
+            SeparatorComponent,
+            FlexComponent,
+            CommandGroupMenuRendererComponent,
+            CommandGroupRendererComponent
         ],
         imports: [
             CommonModule,
@@ -2932,8 +3322,8 @@ ComponentsModule = __decorate([
             FontAwesomeModule,
             MatTooltipModule,
             MatAutocompleteModule,
-            _MatMenuDirectivesModule,
-            MatMenuModule
+            MatMenuModule,
+            MatDividerModule
         ],
         exports: [
             NumberInputComponent,
@@ -2959,28 +3349,17 @@ ComponentsModule = __decorate([
             IconComponent,
             SectionHeaderComponent,
             TableRowMenuComponent,
-            CommandBarComponent,
+            CommandGroupComponent,
+            ToolBarComponent,
             CommandComponent,
-            AbstractPopupMenuComponent,
             PopupMenuComponent,
             CommandFaceComponent,
-            PopupMenuRendererComponent,
-            MoreMenuComponent
+            MoreMenuComponent,
+            SeparatorComponent,
+            FlexComponent
         ],
         providers: [
             FocusBindingFactory
-            // {
-            //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-            //     type: 'string',
-            //     editorClass: StringInputComponent
-            //   }, multi: true
-            // },
-            // {
-            //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-            //     type: 'number',
-            //     editorClass: NumberInputComponent
-            //   }, multi: true
-            // }
         ]
     }),
     __metadata("design:paramtypes", [FaIconLibrary])
@@ -6178,10 +6557,10 @@ let AbstractPlaceNavigationComponent = class AbstractPlaceNavigationComponent ex
         });
         this.activePlaceDefinition = chain(this._activePlaceComponent).pluck('placeDefinition');
     }
-    getNav(placeDef) {
+    getNavigationFace(placeDef) {
         const navItem = placeDef.getPlaceData('nav');
         return {
-            title: () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']),
+            text: () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']),
             tooltip: () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null),
             icon: () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null)
         };
@@ -6216,7 +6595,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", Object)
-], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
 AbstractPlaceNavigationComponent = __decorate([
     Component({
         template: ''
@@ -6277,29 +6656,12 @@ ListPlaceNavComponent.ctorParameters = () => [
 ListPlaceNavComponent = __decorate([
     Component({
         selector: 'aup-list-place-nav',
-        template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+        template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
         styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
     }),
     __metadata("design:paramtypes", [PlaceRouter])
 ], ListPlaceNavComponent);
 
-let TabbedPlaceNavigationComponent = class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
-    constructor(placeRouter) {
-        super(placeRouter);
-    }
-};
-TabbedPlaceNavigationComponent.ctorParameters = () => [
-    { type: PlaceRouter }
-];
-TabbedPlaceNavigationComponent = __decorate([
-    Component({
-        selector: 'aup-tabbed-place-navigation',
-        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</nav>\n",
-        styles: [""]
-    }),
-    __metadata("design:paramtypes", [PlaceRouter])
-], TabbedPlaceNavigationComponent);
-
 /**
  * @example
  * // Usage
@@ -6338,7 +6700,7 @@ TabbedPlaceNavigationComponent = __decorate([
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav()
+ *     nav: I18n.places.myPlace.nav
  *   }
  * })
  */
@@ -6373,12 +6735,29 @@ __decorate([
 SidePlaceNavigationComponent = __decorate([
     Component({
         selector: 'aup-side-place-navigation',
-        template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span\n      class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+        template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
         styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width, 56px);--resolved-nav-item-height:var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width, 235px);--resolved-color:var(--nav-color, rgba(255, 255, 255, 0.9));--resolved-background-color:var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
     }),
     __metadata("design:paramtypes", [Router, PlaceRouter])
 ], SidePlaceNavigationComponent);
 
+let TabbedPlaceNavigationComponent = class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
+    constructor(placeRouter) {
+        super(placeRouter);
+    }
+};
+TabbedPlaceNavigationComponent.ctorParameters = () => [
+    { type: PlaceRouter }
+];
+TabbedPlaceNavigationComponent = __decorate([
+    Component({
+        selector: 'aup-tabbed-place-navigation',
+        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</nav>\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [PlaceRouter])
+], TabbedPlaceNavigationComponent);
+
 let PlaceModule = class PlaceModule {
 };
 PlaceModule = __decorate([
@@ -6887,5 +7266,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-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, CommandBarComponent, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, 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, 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, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, CommandBarComponent as ɵbn, CommandContainer as ɵbo, CommandComponent as ɵbp, PopupMenuComponent as ɵbq, AbstractPopupMenuComponent as ɵbr, PopupMenuRendererComponent as ɵbs, CommandFaceComponent as ɵbt, MoreMenuComponent as ɵbu, PlaceModule as ɵbv, ComponentsModule as ɵbw, EmptyStateComponent as ɵbx, BusyOverlayComponent as ɵby, PlaceOutletComponent as ɵbz, FocusBindingDirective as ɵc, leftRightPlaceAnimation as ɵca, LEFT_RIGHT_PLACE_ANIMATION as ɵcb, AUP_PLACE_CONFIG as ɵcc, PlaceRouter as ɵce, InteractionService as ɵcf, ModalInteractionContextFactory as ɵcg, UrlService as ɵch, PlaceHistory as ɵci, TabbedPlaceNavigationComponent as ɵcj, AbstractPlaceNavigationComponent as ɵck, ListPlaceNavComponent as ɵcl, SidePlaceNavigationComponent as ɵcm, InteractionModule as ɵcn, ActivityContainerComponent as ɵco, AbstractInteractionContext as ɵcp, ActivityOutletComponent as ɵcq, ConfirmationDialogComponent as ɵcr, ACTIVITY_DATA as ɵcs, Activity as ɵct, ConfirmThenDialogComponent as ɵcv, AlertDialogComponent as ɵcw, InPlaceInteractionContextComponent as ɵcy, AddItemInteractionContextComponent as ɵcz, DisposableComponent as ɵd, ActivityActionsComponent as ɵda, PopupInteractionContextComponent as ɵdb, StringInputActivity as ɵdc, AbstractInputActivity as ɵdd, SelectInputActivity as ɵde, InteractionContextTriggerFor as ɵdf, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+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, 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, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, ToolBarComponent as ɵbn, CommandGroup as ɵbo, CommandComponent as ɵbp, PopupMenuComponent as ɵbq, CommandGroupComponent as ɵbr, CommandFaceComponent as ɵbs, MoreMenuComponent as ɵbt, SeparatorComponent as ɵbu, FlexComponent as ɵbv, CommandGroupMenuRendererComponent as ɵbw, CommandGroupRendererComponent as ɵbx, PlaceModule as ɵby, ComponentsModule as ɵbz, FocusBindingDirective as ɵc, EmptyStateComponent as ɵca, BusyOverlayComponent as ɵcb, PlaceOutletComponent as ɵcc, leftRightPlaceAnimation as ɵcd, LEFT_RIGHT_PLACE_ANIMATION as ɵce, AUP_PLACE_CONFIG as ɵcf, PlaceRouter as ɵch, InteractionService as ɵci, ModalInteractionContextFactory as ɵcj, UrlService as ɵck, PlaceHistory as ɵcl, TabbedPlaceNavigationComponent as ɵcm, AbstractPlaceNavigationComponent as ɵcn, ListPlaceNavComponent as ɵco, SidePlaceNavigationComponent as ɵcp, InteractionModule as ɵcq, ActivityContainerComponent as ɵcr, AbstractInteractionContext as ɵcs, ActivityOutletComponent as ɵct, ConfirmationDialogComponent as ɵcu, ACTIVITY_DATA as ɵcv, Activity as ɵcw, ConfirmThenDialogComponent as ɵcy, AlertDialogComponent as ɵcz, DisposableComponent as ɵd, InPlaceInteractionContextComponent as ɵdb, AddItemInteractionContextComponent as ɵdc, ActivityActionsComponent as ɵdd, PopupInteractionContextComponent as ɵde, StringInputActivity as ɵdf, AbstractInputActivity as ɵdg, SelectInputActivity as ɵdh, InteractionContextTriggerFor as ɵdi, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map