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

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __assign, __awaiter, __generator, __spread } 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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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';
@@ -409,13 +410,18 @@ var CardContainerComponent = /** @class */ (function (_super) {
         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);
     return CardContainerComponent;
 }(DisposableComponent));
 
+var TrackBy;
+(function (TrackBy) {
+    TrackBy.byIndex = function (data, index) { return index; };
+})(TrackBy || (TrackBy = {}));
+
 var CommandFace;
 (function (CommandFace) {
     var Position;
@@ -423,6 +429,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;
     var Adapter = /** @class */ (function () {
         function Adapter(face) {
             this.face = face;
@@ -436,7 +467,7 @@ var CommandFace;
         });
         Object.defineProperty(Adapter.prototype, "icon", {
             get: function () {
-                return ___default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+                return CommandFace.getIconOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -469,9 +500,16 @@ var CommandFace;
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(Adapter.prototype, "destructive", {
+        Object.defineProperty(Adapter.prototype, "color", {
+            get: function () {
+                return CommandFace.getColorOf(this.face);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "style", {
             get: function () {
-                return ___default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+                return CommandFace.getStyleOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -508,75 +546,494 @@ 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);
         return Adapter;
     }());
     CommandFace.Adapter = Adapter;
 })(CommandFace || (CommandFace = {}));
 
-var CommandContainer = /** @class */ (function (_super) {
-    __extends(CommandContainer, _super);
-    function CommandContainer() {
+var ViewData = /** @class */ (function () {
+    function ViewData() {
+    }
+    return ViewData;
+}());
+(function (ViewData) {
+    var FaceData = /** @class */ (function (_super) {
+        __extends(FaceData, _super);
+        function FaceData(face) {
+            var _this = _super.call(this) || this;
+            _this.faceAdapter = new CommandFace.Adapter(face);
+            return _this;
+        }
+        return FaceData;
+    }(ViewData));
+    ViewData.FaceData = FaceData;
+    var GroupData = /** @class */ (function (_super) {
+        __extends(GroupData, _super);
+        function GroupData(face, xPosition, yPosition, children) {
+            var _this = _super.call(this, face) || 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.faceAdapter.icon; }).length;
+                return iconCount > 0 && hasFaces.length !== iconCount;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], GroupData.prototype, "hasMixedIcons", null);
+        return GroupData;
+    }(FaceData));
+    ViewData.GroupData = GroupData;
+    var CommandData = /** @class */ (function (_super) {
+        __extends(CommandData, _super);
+        function CommandData(face, command) {
+            var _this = _super.call(this, face) || 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 : 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 = {}));
+
+var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupMenuRendererComponent, _super);
+    function CommandGroupMenuRendererComponent(parent) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        _this.groupViewDataModel = new MutableValueModel();
+        _this.commandFired = new EventEmitter();
+        _this.ViewData = ViewData;
+        _this.TrackBy = TrackBy;
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.children = chain(_this.groupViewDataModel).pluckList('children');
+        _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
+        return _this;
+    }
+    CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
+        var _this = this;
+        var command = ViewData.getCommand(data);
+        var when = Dsl.disposeWith(this).when;
+        when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
+        return command;
+    };
+    CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+        { 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);
+    return CommandGroupMenuRendererComponent;
+}(DisposableComponent));
+
+var CommandGroupRendererComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupRendererComponent, _super);
+    function CommandGroupRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.renderRootNode = true;
+        _this.ViewData = ViewData;
+        _this.TrackBy = TrackBy;
+        var _a = 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;
+    }
+    __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);
+    return CommandGroupRendererComponent;
+}(DisposableComponent));
+
+var Registration = /** @class */ (function (_super) {
+    __extends(Registration, _super);
+    function Registration() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Registration;
+}(GarbageCollector));
+(function (Registration) {
+    var FaceRegistration = /** @class */ (function (_super) {
+        __extends(FaceRegistration, _super);
+        function FaceRegistration(faceModel) {
+            var _this = _super.call(this) || this;
+            _this.faceModel = faceModel;
+            return _this;
+        }
+        return FaceRegistration;
+    }(Registration));
+    Registration.FaceRegistration = FaceRegistration;
+    var CommandRegistration = /** @class */ (function (_super) {
+        __extends(CommandRegistration, _super);
+        function CommandRegistration(faceModel, command) {
+            var _this = _super.call(this, faceModel) || this;
+            _this.command = command;
+            return _this;
+        }
+        CommandRegistration.prototype.toTemplate = function () {
+            return new ViewData.CommandData(this.faceModel.value, this.command);
+        };
+        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 ViewData.GroupData(this.faceModel.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 !== null && _super.apply(this, arguments) || this;
+            _this.template = new 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 !== null && _super.apply(this, arguments) || this;
+            _this.template = new 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;
+})(Registration || (Registration = {}));
+
+var CommandGroup = /** @class */ (function (_super) {
+    __extends(CommandGroup, _super);
+    function CommandGroup(parent) {
         var _this = _super.call(this) || this;
-        _this._commandRegistrations = new MutableListModel();
+        _this.parent = parent;
+        _this._rootTemplate = new MutableValueModel();
+        _this._registrations = new MutableListModel();
+        _this._childFaceModels = new MutableListModel();
+        _this._faceChangeCount = new MutableValueModel(0);
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        var childFaces = chain(_this._childFaceModels)
+            .map(function (m) { return m.value; }, { dependsOn: _this._faceChangeCount })
+            .rejectNil();
+        var iconCount = childFaces
+            .select(function (face) { return !!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();
         return _this;
     }
-    Object.defineProperty(CommandContainer.prototype, "commandRegistrations", {
+    CommandGroup.prototype.initialise = function () {
+        this.rebuildTemplates();
+    };
+    Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
         get: function () {
-            return this._commandRegistrations.readonly;
+            return this._rootTemplate.readonly;
         },
         enumerable: true,
         configurable: true
     });
-    CommandContainer.prototype.registerCommand = function (command, face) {
-        var _this = this;
-        var registration = { command: command, faceAdapter: new CommandFace.Adapter(face) };
-        this._commandRegistrations.push(registration);
-        return Disposable.disposableThatRuns(function () { return _this._commandRegistrations.remove(registration); });
+    Object.defineProperty(CommandGroup.prototype, "registrations", {
+        get: function () {
+            return this._registrations.readonly;
+        },
+        enumerable: true,
+        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 ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
     };
-    CommandContainer.prototype.getDefaultIconPosition = function () {
-        return CommandFace.Position.START;
+    Object.defineProperty(CommandGroup.prototype, "depth", {
+        get: function () {
+            return this.isRoot() ? 0 : this.parent.depth + 1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CommandGroup.prototype.isRoot = function () {
+        return false;
+    };
+    CommandGroup.prototype.registerCommand = function (command, faceModel) {
+        return this.register(new Registration.CommandRegistration(faceModel, command));
+    };
+    CommandGroup.prototype.registerGroup = function (group, faceModel) {
+        return this.register(new Registration.GroupRegistration(faceModel, group));
+    };
+    CommandGroup.prototype.registerFlex = function (component) {
+        return this.register(new Registration.FlexRegistration());
+    };
+    CommandGroup.prototype.registerSeparator = function (component) {
+        return this.register(new Registration.SeparatorRegistration());
+    };
+    CommandGroup.prototype.register = function (registration) {
+        var _this = this;
+        this._registrations.push(registration);
+        if (registration instanceof Registration.FaceRegistration) {
+            this._childFaceModels.push(registration.faceModel);
+            var when = Dsl.disposeWith(registration).when;
+            when(registration.faceModel).changes(function (is, was) {
+                _this.notifyChildFaceChanged(new CommandFace.Adapter(is), new CommandFace.Adapter(was));
+            }, { asLongAs: this.initialised });
+            registration.onDispose(function () { return _this._childFaceModels.remove(registration.faceModel); });
+        }
+        registration.onDispose(function () { return _this._registrations.remove(registration); });
+        return registration;
     };
-    return CommandContainer;
+    return CommandGroup;
 }(GarbageCollector));
+(function (CommandGroup) {
+    var Root = /** @class */ (function (_super) {
+        __extends(Root, _super);
+        function Root() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Root.prototype.isRoot = function () {
+            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);
+        return Root;
+    }(CommandGroup));
+    CommandGroup.Root = Root;
+    function factory() {
+        return new Root();
+    }
+    CommandGroup.factory = factory;
+})(CommandGroup || (CommandGroup = {}));
 
-/**
- *
- */
-var CommandBarComponent = /** @class */ (function (_super) {
-    __extends(CommandBarComponent, _super);
-    function CommandBarComponent() {
-        return _super.call(this) || this;
+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';
+        _this.parent.registerGroup(_this, _this.faceModel);
+        return _this;
     }
-    CommandBarComponent_1 = CommandBarComponent;
-    CommandBarComponent.prototype.ngOnInit = function () {
-    };
-    CommandBarComponent.prototype.getButtonColor = function (registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
-    };
-    var CommandBarComponent_1;
-    CommandBarComponent = CommandBarComponent_1 = __decorate([
+    CommandGroupComponent_1 = CommandGroupComponent;
+    var CommandGroupComponent_1;
+    CommandGroupComponent.ctorParameters = function () { return [
+        { 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: "\n    <ng-container *ngFor=\"let registration of commandRegistrations.value\">\n      <button *ngIf=\"registration.faceAdapter.icon && !registration.faceAdapter.text\"\n              mat-icon-button\n              [color]=\"getButtonColor(registration)\"\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.faceAdapter.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n      <button *ngIf=\"registration.faceAdapter.text\"\n              [color]=\"getButtonColor(registration)\"\n              mat-button\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n    </ng-container>\n  ",
-            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return CommandBarComponent_1; }) }],
-            styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+            selector: 'aup-command-group',
+            template: '',
+            providers: [
+                { provide: CommandGroup, useExisting: CommandGroupComponent_1 }
+            ]
         }),
-        __metadata("design:paramtypes", [])
-    ], CommandBarComponent);
-    return CommandBarComponent;
-}(CommandContainer));
+        __param(0, SkipSelf()),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], CommandGroupComponent);
+    return CommandGroupComponent;
+}(CommandGroup));
 
 /**
- *
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
  */
 var CommandFaceComponent = /** @class */ (function (_super) {
     __extends(CommandFaceComponent, _super);
-    function CommandFaceComponent(commandContainer) {
+    function CommandFaceComponent() {
         var _this = _super.call(this) || this;
-        _this.commandContainer = commandContainer;
         _this.faceModel = new MutableValueModel();
         _this.ignoreIcon = false;
         _this.ignoreText = false;
@@ -587,7 +1044,7 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         _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');
         return _this;
     }
     Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
@@ -601,8 +1058,8 @@ var CommandFaceComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(CommandFaceComponent.prototype, "iconPosition", {
         get: function () {
-            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;
         },
         enumerable: true,
         configurable: true
@@ -635,16 +1092,13 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommandFaceComponent.prototype, "destructive", {
+    Object.defineProperty(CommandFaceComponent.prototype, "color", {
         get: function () {
-            return this.destructiveModel.value;
+            return this.colorModel.value;
         },
         enumerable: true,
         configurable: true
     });
-    CommandFaceComponent.ctorParameters = function () { return [
-        { type: CommandContainer, decorators: [{ type: Optional }] }
-    ]; };
     __decorate([
         Input('face'), StoreInValueModel('faceModel'),
         __metadata("design:type", Object)
@@ -667,19 +1121,18 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         __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);
     return CommandFaceComponent;
 }(DisposableComponent));
@@ -689,31 +1142,41 @@ var CommandFaceComponent = /** @class */ (function (_super) {
  */
 var CommandComponent = /** @class */ (function (_super) {
     __extends(CommandComponent, _super);
-    function CommandComponent(commandContainer) {
+    function CommandComponent(parent) {
         var _this = _super.call(this) || this;
-        _this.commandContainer = commandContainer;
+        _this.parent = parent;
+        _this.CommandFace = CommandFace;
+        var _a = 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.buttonStyle = chain(_this.faceModel).map(function (f) { return CommandFace.getStyleOf(f); });
+        if (parent) {
+            _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.faceModel));
+        }
         return _this;
     }
     CommandComponent.prototype.ngOnInit = function () {
-        this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
     };
     CommandComponent.ctorParameters = function () { return [
-        { 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);
     return CommandComponent;
 }(DisposableComponent));
@@ -721,188 +1184,224 @@ var CommandComponent = /** @class */ (function (_super) {
 /**
  *
  */
-var PopupMenuRendererComponent = /** @class */ (function (_super) {
-    __extends(PopupMenuRendererComponent, _super);
-    function PopupMenuRendererComponent() {
+var FlexComponent = /** @class */ (function (_super) {
+    __extends(FlexComponent, _super);
+    function FlexComponent(parent) {
         var _this = _super.call(this) || this;
-        _this.xPosition = 'after';
-        _this.yPosition = 'below';
-        _this.commandExecuted = new EventEmitter();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        var registrations = chain(_this.commandRegistrations);
-        var iconCount = registrations.select(function (r) { return !!r.faceAdapter.icon; }).count();
-        _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(registrations.length)).areTruthy();
+        _this.parent = parent;
+        if (parent) {
+            parent.registerFlex(_this);
+        }
         return _this;
     }
-    PopupMenuRendererComponent.prototype.ngOnInit = function () {
+    FlexComponent.prototype.ngOnInit = function () {
     };
-    PopupMenuRendererComponent.prototype.getPopupMenuCommandFor = function (item) {
-        var _this = this;
-        var when = Dsl.disposeWith(this).when;
-        when(item.command.busy).becomesFalsey(function () {
-            _this.commandExecuted.emit();
-        });
-        return item.command;
-    };
-    PopupMenuRendererComponent.prototype.getButtonColor = function (registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
-    };
-    __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(),
-        __metadata("design:type", String)
-    ], PopupMenuRendererComponent.prototype, "yPosition", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", Object)
-    ], PopupMenuRendererComponent.prototype, "commandExecuted", void 0);
-    __decorate([
-        ViewChild(MatMenu),
-        __metadata("design:type", MatMenu)
-    ], PopupMenuRendererComponent.prototype, "matMenu", void 0);
-    PopupMenuRendererComponent = __decorate([
+    FlexComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
+    ]; };
+    FlexComponent = __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-flex',
+            template: ""
         }),
-        __metadata("design:paramtypes", [])
-    ], PopupMenuRendererComponent);
-    return PopupMenuRendererComponent;
+        __metadata("design:paramtypes", [CommandGroup])
+    ], FlexComponent);
+    return FlexComponent;
 }(DisposableComponent));
 
+var ɵ0 = CommandGroup.factory;
 /**
  *
  */
-var AbstractPopupMenuComponent = /** @class */ (function (_super) {
-    __extends(AbstractPopupMenuComponent, _super);
-    function AbstractPopupMenuComponent(cdr) {
+var MoreMenuComponent = /** @class */ (function (_super) {
+    __extends(MoreMenuComponent, _super);
+    function MoreMenuComponent(group) {
         var _this = _super.call(this) || this;
-        _this.cdr = cdr;
-        _this.xPosition = 'after';
-        _this.yPosition = 'below';
+        _this.group = group;
+        _this.tooltipModel = new MutableValueModel();
+        var _a = 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.faceModel = chain(_this.tooltipModel).map(function (tooltip) {
+            return {
+                icon: function () { return 'mat:more_vert'; },
+                tooltip: function () {
+                    return tooltip;
+                }
+            };
+        }, { allowNil: true });
         return _this;
     }
-    AbstractPopupMenuComponent.prototype.ngAfterViewInit = function () {
-        this.cdr.detectChanges();
+    MoreMenuComponent.prototype.ngOnInit = function () {
     };
-    Object.defineProperty(AbstractPopupMenuComponent.prototype, "matMenuComponent", {
-        get: function () {
-            var _a;
-            return (_a = this.popupMenu) === null || _a === void 0 ? void 0 : _a.matMenu;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AbstractPopupMenuComponent.prototype.closeMenu = function () {
-        this.menuTrigger.closeMenu();
-    };
-    AbstractPopupMenuComponent.prototype.getButtonColor = function (registration) {
-        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    MoreMenuComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
     };
-    AbstractPopupMenuComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
+    MoreMenuComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
     ]; };
     __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
-    __decorate([
-        Input(),
+        Input(), StoreInValueModel('tooltipModel'),
         __metadata("design:type", String)
-    ], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
-    __decorate([
-        ViewChild(PopupMenuRendererComponent),
-        __metadata("design:type", PopupMenuRendererComponent)
-    ], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+    ], MoreMenuComponent.prototype, "tooltip", void 0);
     __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)
+    ], MoreMenuComponent.prototype, "ngAfterContentInit", null);
+    MoreMenuComponent = __decorate([
         Component({
-            selector: 'aup-abstract-popup-menu',
-            template: ''
+            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", [ChangeDetectorRef])
-    ], AbstractPopupMenuComponent);
-    return AbstractPopupMenuComponent;
-}(CommandContainer));
+        __metadata("design:paramtypes", [CommandGroup])
+    ], MoreMenuComponent);
+    return MoreMenuComponent;
+}(DisposableComponent));
 
+var ɵ0$1 = CommandGroup.factory;
 /**
  *
  */
 var PopupMenuComponent = /** @class */ (function (_super) {
     __extends(PopupMenuComponent, _super);
-    function PopupMenuComponent(cdr) {
-        var _this = _super.call(this, cdr) || this;
-        _this.faceModel = new MutableValueModel();
+    function PopupMenuComponent(group) {
+        var _this = _super.call(this) || this;
+        _this.group = group;
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        var faceAdapterModel = chain(_this.faceModel).map(function (face) { return new CommandFace.Adapter(face); });
-        _this.faceTooltipModel = faceAdapterModel.pluck('tooltip');
+        group.faceModel = _this.faceModel;
         return _this;
     }
-    PopupMenuComponent_1 = PopupMenuComponent;
-    PopupMenuComponent.prototype.getTooltip = function () {
-        return this.faceTooltipModel.value;
-    };
     PopupMenuComponent.prototype.ngOnInit = function () {
     };
-    var PopupMenuComponent_1;
+    PopupMenuComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
+    };
+    PopupMenuComponent.prototype.ngAfterViewInit = function () {
+    };
     PopupMenuComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
+        { type: CommandGroup }
     ]; };
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], PopupMenuComponent.prototype, "faceModel", void 0);
     __decorate([
         Input(), StoreInValueModel('faceModel'),
         __metadata("design:type", Object)
     ], PopupMenuComponent.prototype, "face", void 0);
-    PopupMenuComponent = PopupMenuComponent_1 = __decorate([
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PopupMenuComponent.prototype, "ngOnInit", null);
+    __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-popup-menu',
-            template: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"getTooltip()\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\" [yPosition]=\"yPosition\"\n                             [xPosition]=\"xPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
-            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return PopupMenuComponent_1; }) }]
+            template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+            providers: [{ provide: CommandGroup, useFactory: ɵ0$1 }]
         }),
-        __metadata("design:paramtypes", [ChangeDetectorRef])
+        __metadata("design:paramtypes", [CommandGroup])
     ], PopupMenuComponent);
     return PopupMenuComponent;
-}(AbstractPopupMenuComponent));
+}(DisposableComponent));
 
 /**
  *
  */
-var MoreMenuComponent = /** @class */ (function (_super) {
-    __extends(MoreMenuComponent, _super);
-    function MoreMenuComponent(cdr) {
-        var _this = _super.call(this, cdr) || this;
-        _this.xPosition = "before"; // this should be the default unless overriden by the user.
+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;
     }
-    MoreMenuComponent_1 = MoreMenuComponent;
-    var MoreMenuComponent_1;
-    MoreMenuComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
+    SeparatorComponent.prototype.isVertical = function () {
+        return this === null || this === void 0 ? void 0 : this.parent.isRoot();
+    };
+    SeparatorComponent.prototype.ngOnInit = function () {
+    };
+    SeparatorComponent.ctorParameters = function () { return [
+        { type: CommandGroup, decorators: [{ type: Optional }] }
+    ]; };
+    SeparatorComponent = __decorate([
+        Component({
+            selector: 'aup-separator',
+            template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], SeparatorComponent);
+    return SeparatorComponent;
+}(DisposableComponent));
+
+var ɵ0$2 = CommandGroup.factory;
+/**
+ *
+ */
+var ToolBarComponent = /** @class */ (function (_super) {
+    __extends(ToolBarComponent, _super);
+    function ToolBarComponent(group) {
+        var _this = _super.call(this) || this;
+        _this.group = group;
+        return _this;
+    }
+    ToolBarComponent.prototype.ngOnInit = function () {
+    };
+    ToolBarComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
+    };
+    ToolBarComponent.prototype.ngAfterViewInit = function () {
+    };
+    ToolBarComponent.ctorParameters = function () { return [
+        { 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: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"tooltip\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\"\n                             [xPosition]=\"xPosition\"\n                             [yPosition]=\"yPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
-            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return 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);
-    return MoreMenuComponent;
-}(AbstractPopupMenuComponent));
+        __metadata("design:paramtypes", [CommandGroup])
+    ], ToolBarComponent);
+    return ToolBarComponent;
+}(DisposableComponent));
 
 var FocusContainerComponent = /** @class */ (function (_super) {
     __extends(FocusContainerComponent, _super);
@@ -2189,7 +2688,7 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
 
 var noop = function () {
 };
-var ɵ0 = noop;
+var ɵ0$3 = noop;
 var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 var ColumnModel = /** @class */ (function () {
     function ColumnModel(columnId, defaults) {
@@ -2687,12 +3186,14 @@ var TableModel = /** @class */ (function () {
         }
         return column;
     };
+    // removeColumn(column: ColumnModel<Row>) {
+    //
+    // }
     TableModel.prototype.columnTextProperties = function (columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     };
     TableModel.prototype.getColumnTextProperties = function (column) {
-        var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
     };
     TableModel.prototype.startEditSession = function (row) {
         var _this = this;
@@ -2993,15 +3494,13 @@ var TableHeaderCellRendererComponent = /** @class */ (function () {
     return TableHeaderCellRendererComponent;
 }());
 
-var MenuItemData = /** @class */ (function (_super) {
-    __extends(MenuItemData, _super);
+var MenuItemData = /** @class */ (function () {
     function MenuItemData(factory, face) {
-        var _this = _super.call(this, face) || this;
-        _this.factory = factory;
-        return _this;
+        this.factory = factory;
+        this.face = face;
     }
     return MenuItemData;
-}(CommandFace.Adapter));
+}());
 /**
  *
  */
@@ -3044,7 +3543,7 @@ var TableRowMenuComponent = /** @class */ (function (_super) {
     TableRowMenuComponent = __decorate([
         Component({
             selector: 'aup-table-row-menu',
-            template: "\n    <button mat-icon-button *ngFor=\"let action of actions\" [pectinCommand]=\"action.factory.create(value)\">\n      <aup-icon [icon]=\"action.icon\"></aup-icon>\n    </button>\n    <ng-container *ngIf=\"moreActions.length > 0\">\n      <button #trigger mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <aup-icon icon=\"mat:more_vert\"></aup-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\" xPosition=\"before\" matTooltip=\"More options...\">\n        <button *ngFor=\"let action of moreActions\"\n                mat-menu-item\n                [pectinCommand]=\"createMoreMenuCommand(action, value)\"\n        >\n          <aup-icon *ngIf=\"action.icon && action.iconPositionStart\" [icon]=\"action.icon\"></aup-icon>\n          {{action.text}}\n          <aup-icon *ngIf=\"action.icon && action.iconPositionEnd\" [icon]=\"action.icon\"></aup-icon>\n        </button>\n      </mat-menu>\n    </ng-container>\n  ",
+            template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.faceModel\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.faceModel\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
             styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
         }),
         __metadata("design:paramtypes", [])
@@ -3179,13 +3678,16 @@ var ComponentsModule = /** @class */ (function () {
                 IconComponent,
                 SectionHeaderComponent,
                 TableRowMenuComponent,
-                CommandBarComponent,
+                ToolBarComponent,
                 CommandComponent,
                 PopupMenuComponent,
+                CommandGroupComponent,
                 CommandFaceComponent,
-                AbstractPopupMenuComponent,
-                PopupMenuRendererComponent,
-                MoreMenuComponent
+                MoreMenuComponent,
+                SeparatorComponent,
+                FlexComponent,
+                CommandGroupMenuRendererComponent,
+                CommandGroupRendererComponent
             ],
             imports: [
                 CommonModule,
@@ -3205,8 +3707,8 @@ var ComponentsModule = /** @class */ (function () {
                 FontAwesomeModule,
                 MatTooltipModule,
                 MatAutocompleteModule,
-                _MatMenuDirectivesModule,
-                MatMenuModule
+                MatMenuModule,
+                MatDividerModule
             ],
             exports: [
                 NumberInputComponent,
@@ -3232,28 +3734,17 @@ var ComponentsModule = /** @class */ (function () {
                 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])
@@ -6816,10 +7307,10 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
         return _this;
     }
-    AbstractPlaceNavigationComponent.prototype.getNav = function (placeDef) {
+    AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
         var navItem = placeDef.getPlaceData('nav');
         return {
-            title: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
+            text: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
             tooltip: function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); },
             icon: function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); }
         };
@@ -6853,7 +7344,7 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [PlaceDefinition]),
         __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+    ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
     AbstractPlaceNavigationComponent = __decorate([
         Component({
             template: ''
@@ -6914,7 +7405,7 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
     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])
@@ -6922,25 +7413,6 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
     return ListPlaceNavComponent;
 }(AbstractPlaceNavigationComponent));
 
-var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(TabbedPlaceNavigationComponent, _super);
-    function TabbedPlaceNavigationComponent(placeRouter) {
-        return _super.call(this, placeRouter) || this;
-    }
-    TabbedPlaceNavigationComponent.ctorParameters = function () { return [
-        { 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);
-    return TabbedPlaceNavigationComponent;
-}(AbstractPlaceNavigationComponent));
-
 /**
  * @example
  * // Usage
@@ -6979,7 +7451,7 @@ var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav()
+ *     nav: I18n.places.myPlace.nav
  *   }
  * })
  */
@@ -7015,7 +7487,7 @@ var SidePlaceNavigationComponent = /** @class */ (function (_super) {
     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])
@@ -7023,6 +7495,25 @@ var SidePlaceNavigationComponent = /** @class */ (function (_super) {
     return SidePlaceNavigationComponent;
 }(AbstractPlaceNavigationComponent));
 
+var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+    __extends(TabbedPlaceNavigationComponent, _super);
+    function TabbedPlaceNavigationComponent(placeRouter) {
+        return _super.call(this, placeRouter) || this;
+    }
+    TabbedPlaceNavigationComponent.ctorParameters = function () { return [
+        { 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);
+    return TabbedPlaceNavigationComponent;
+}(AbstractPlaceNavigationComponent));
+
 var PlaceModule = /** @class */ (function () {
     function PlaceModule() {
     }
@@ -7631,5 +8122,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