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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global.___default, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, icon, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, ___default, typescriptStringEnums, typescriptUtilities, produce, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/list'), require('@angular/material/progress-spinner'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/list', '@angular/material/progress-spinner', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global.___default, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.list, global.ng.material.progressSpinner, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, ___default, typescriptStringEnums, typescriptUtilities, produce, flexLayout, dialog, router, overlay, ResizeObserver, list, progressSpinner, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -578,7 +578,7 @@
             core.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);
@@ -586,12 +586,42 @@
     }(DisposableComponent));
 
 
+    (function (TrackBy) {
+        TrackBy.byIndex = function (data, index) { return index; };
+    })(exports.TrackBy || (exports.TrackBy = {}));
+
+
     (function (CommandFace) {
         var Position;
         (function (Position) {
             Position["START"] = "start";
             Position["END"] = "end";
         })(Position = CommandFace.Position || (CommandFace.Position = {}));
+        CommandFace.Style = typescriptStringEnums.Enum({
+            FLAT: 'flat',
+            STROKED: 'stroked',
+            RAISED: 'raised'
+        });
+        function getColorOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
+        }
+        CommandFace.getColorOf = getColorOf;
+        function getStyleOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
+        }
+        CommandFace.getStyleOf = getStyleOf;
+        function getIconOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
+        }
+        CommandFace.getIconOf = getIconOf;
+        function getTooltipOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
+        }
+        CommandFace.getTooltipOf = getTooltipOf;
+        function getTextOf(face) {
+            return ___default__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;
@@ -605,7 +635,7 @@
             });
             Object.defineProperty(Adapter.prototype, "icon", {
                 get: function () {
-                    return ___default__default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+                    return CommandFace.getIconOf(this.face);
                 },
                 enumerable: true,
                 configurable: true
@@ -638,9 +668,16 @@
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(Adapter.prototype, "destructive", {
+            Object.defineProperty(Adapter.prototype, "color", {
                 get: function () {
-                    return ___default__default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+                    return CommandFace.getColorOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "style", {
+                get: function () {
+                    return CommandFace.getStyleOf(this.face);
                 },
                 enumerable: true,
                 configurable: true
@@ -677,75 +714,494 @@
             ], Adapter.prototype, "iconPositionEnd", null);
             __decorate([
                 src.Memoize(),
-                __metadata("design:type", Boolean),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "color", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", String),
                 __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "destructive", null);
+            ], Adapter.prototype, "style", null);
             return Adapter;
         }());
         CommandFace.Adapter = Adapter;
     })(exports.CommandFace || (exports.CommandFace = {}));
 
-    var CommandContainer = /** @class */ (function (_super) {
-        __extends(CommandContainer, _super);
-        function CommandContainer() {
+    exports.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 exports.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([
+                src.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 : pectin.lang.illegalState("expected instance of " + type.name + ", got " + viewData.constructor.name);
+        }
+        ViewData.as = as;
+        function getCommand(data) {
+            return as(CommandData, data).command;
+        }
+        ViewData.getCommand = getCommand;
+        function getTooltip(data) {
+            return as(FaceData, data).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;
+    })(exports.ViewData || (exports.ViewData = {}));
+
+    var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupMenuRendererComponent, _super);
+        function CommandGroupMenuRendererComponent(parent) {
             var _this = _super.call(this) || this;
-            _this._commandRegistrations = new pectin.MutableListModel();
+            _this.parent = parent;
+            _this.groupViewDataModel = new pectin.MutableValueModel();
+            _this.commandFired = new core.EventEmitter();
+            _this.ViewData = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.children = chain(_this.groupViewDataModel).pluckList('children');
+            _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
             return _this;
         }
-        Object.defineProperty(CommandContainer.prototype, "commandRegistrations", {
+        CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
+            var _this = this;
+            var command = exports.ViewData.getCommand(data);
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
+            return command;
+        };
+        CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+            { type: CommandGroupMenuRendererComponent, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }
+        ]; };
+        __decorate([
+            core.ViewChild('menu', { static: true }),
+            __metadata("design:type", menu.MatMenu)
+        ], CommandGroupMenuRendererComponent.prototype, "menuComponent", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('groupViewDataModel'),
+            __metadata("design:type", exports.ViewData.GroupData)
+        ], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
+        __decorate([
+            core.ViewChildren(menu.MatMenuTrigger),
+            __metadata("design:type", core.QueryList)
+        ], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
+        CommandGroupMenuRendererComponent = __decorate([
+            core.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, core.Optional()), __param(0, core.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 = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.childViewDataModels = chain(_this.groupViewDataModel).pluckList('children');
+            return _this;
+        }
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('groupViewDataModel'),
+            __metadata("design:type", exports.ViewData.GroupData)
+        ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+        __decorate([
+            core.Input(),
+            core.HostBinding('class.render-root'),
+            __metadata("design:type", Object)
+        ], CommandGroupRendererComponent.prototype, "renderRootNode", void 0);
+        CommandGroupRendererComponent = __decorate([
+            core.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));
+
+    exports.Registration = /** @class */ (function (_super) {
+        __extends(Registration, _super);
+        function Registration() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Registration;
+    }(pectin.GarbageCollector));
+    (function (Registration) {
+        var FaceRegistration = /** @class */ (function (_super) {
+            __extends(FaceRegistration, _super);
+            function FaceRegistration(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 exports.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 exports.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 exports.ViewData.SeparatorData();
+                return _this;
+            }
+            SeparatorRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return SeparatorRegistration;
+        }(Registration));
+        Registration.SeparatorRegistration = SeparatorRegistration;
+        var FlexRegistration = /** @class */ (function (_super) {
+            __extends(FlexRegistration, _super);
+            function FlexRegistration() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.template = new exports.ViewData.FlexData();
+                return _this;
+            }
+            FlexRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return FlexRegistration;
+        }(Registration));
+        Registration.FlexRegistration = FlexRegistration;
+        function hasFace(entry) {
+            return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+        }
+        Registration.hasFace = hasFace;
+    })(exports.Registration || (exports.Registration = {}));
+
+    exports.ɵbo = /** @class */ (function (_super) {
+        __extends(CommandGroup, _super);
+        function CommandGroup(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            _this._rootTemplate = new pectin.MutableValueModel();
+            _this._registrations = new pectin.MutableListModel();
+            _this._childFaceModels = new pectin.MutableListModel();
+            _this._faceChangeCount = new pectin.MutableValueModel(0);
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            var childFaces = chain(_this._childFaceModels)
+                .map(function (m) { return m.value; }, { dependsOn: _this._faceChangeCount })
+                .rejectNil();
+            var iconCount = childFaces
+                .select(function (face) { return !!exports.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;
+        }
+        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 exports.CommandFace.Adapter(face) };
-            this._commandRegistrations.push(registration);
-            return pectin.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();
+            }
         };
-        CommandContainer.prototype.getDefaultIconPosition = function () {
-            return exports.CommandFace.Position.START;
+        CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
+            this.notifyChanged();
         };
-        return CommandContainer;
-    }(pectin.GarbageCollector));
-
-    /**
-     *
-     */
-    var CommandBarComponent = /** @class */ (function (_super) {
-        __extends(CommandBarComponent, _super);
-        function CommandBarComponent() {
-            return _super.call(this) || this;
-        }
-        CommandBarComponent_1 = CommandBarComponent;
-        CommandBarComponent.prototype.ngOnInit = function () {
+        CommandGroup.prototype.rebuildTemplates = function () {
+            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+        };
+        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 exports.Registration.CommandRegistration(faceModel, command));
+        };
+        CommandGroup.prototype.registerGroup = function (group, faceModel) {
+            return this.register(new exports.Registration.GroupRegistration(faceModel, group));
+        };
+        CommandGroup.prototype.registerFlex = function (component) {
+            return this.register(new exports.Registration.FlexRegistration());
         };
-        CommandBarComponent.prototype.getButtonColor = function (registration) {
-            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        CommandGroup.prototype.registerSeparator = function (component) {
+            return this.register(new exports.Registration.SeparatorRegistration());
         };
-        var CommandBarComponent_1;
-        CommandBarComponent = CommandBarComponent_1 = __decorate([
+        CommandGroup.prototype.register = function (registration) {
+            var _this = this;
+            this._registrations.push(registration);
+            if (registration instanceof exports.Registration.FaceRegistration) {
+                this._childFaceModels.push(registration.faceModel);
+                var when = pectin.Dsl.disposeWith(registration).when;
+                when(registration.faceModel).changes(function (is, was) {
+                    _this.notifyChildFaceChanged(new exports.CommandFace.Adapter(is), new exports.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 CommandGroup;
+    }(pectin.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([
+                pectin.TrackExternal(),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "faceModel", void 0);
+            __decorate([
+                pectin.TrackExternal({ defaultValue: 'after' }),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "xPositionModel", void 0);
+            __decorate([
+                pectin.StoreInValueModel('xPositionModel'),
+                __metadata("design:type", String)
+            ], Root.prototype, "xPosition", void 0);
+            __decorate([
+                pectin.TrackExternal({ defaultValue: 'below' }),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "yPositionModel", void 0);
+            __decorate([
+                pectin.StoreInValueModel('yPositionModel'),
+                __metadata("design:type", String)
+            ], Root.prototype, "yPosition", void 0);
+            return Root;
+        }(CommandGroup));
+        CommandGroup.Root = Root;
+        function factory() {
+            return new Root();
+        }
+        CommandGroup.factory = factory;
+    })(exports.ɵbo || (exports.ɵbo = {}));
+
+    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;
+        }
+        CommandGroupComponent_1 = CommandGroupComponent;
+        var CommandGroupComponent_1;
+        CommandGroupComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo, decorators: [{ type: core.SkipSelf }] }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandGroupComponent.prototype, "faceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], CommandGroupComponent.prototype, "face", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], CommandGroupComponent.prototype, "xPosition", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], CommandGroupComponent.prototype, "yPosition", void 0);
+        CommandGroupComponent = CommandGroupComponent_1 = __decorate([
             core.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: core.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: exports.ɵbo, useExisting: CommandGroupComponent_1 }
+                ]
             }),
-            __metadata("design:paramtypes", [])
-        ], CommandBarComponent);
-        return CommandBarComponent;
-    }(CommandContainer));
+            __param(0, core.SkipSelf()),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], CommandGroupComponent);
+        return CommandGroupComponent;
+    }(exports.ɵbo));
 
     /**
-     *
+     * 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 pectin.MutableValueModel();
             _this.ignoreIcon = false;
             _this.ignoreText = false;
@@ -756,7 +1212,7 @@
             _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", {
@@ -770,8 +1226,8 @@
         };
         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 : exports.CommandFace.Position.START;
+                var _a;
+                return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : exports.CommandFace.Position.START;
             },
             enumerable: true,
             configurable: true
@@ -804,16 +1260,13 @@
             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: core.Optional }] }
-        ]; };
         __decorate([
             core.Input('face'), pectin.StoreInValueModel('faceModel'),
             __metadata("design:type", Object)
@@ -836,19 +1289,18 @@
             __metadata("design:paramtypes", [])
         ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
         __decorate([
-            core.HostBinding('class.destructive'),
-            __metadata("design:type", Boolean),
+            core.HostBinding('attr.color'),
+            __metadata("design:type", String),
             __metadata("design:paramtypes", [])
-        ], CommandFaceComponent.prototype, "destructive", null);
+        ], CommandFaceComponent.prototype, "color", null);
         CommandFaceComponent = __decorate([
             core.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: core.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, core.Optional()),
-            __metadata("design:paramtypes", [CommandContainer])
+            __metadata("design:paramtypes", [])
         ], CommandFaceComponent);
         return CommandFaceComponent;
     }(DisposableComponent));
@@ -858,31 +1310,41 @@
      */
     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 = exports.CommandFace;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.buttonStyle = chain(_this.faceModel).map(function (f) { return exports.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: exports.ɵbo, decorators: [{ type: core.Optional }] }
         ]; };
         __decorate([
             core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.Command)
         ], CommandComponent.prototype, "command", void 0);
         __decorate([
-            core.Input(),
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandComponent.prototype, "faceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
             __metadata("design:type", Object)
         ], CommandComponent.prototype, "face", void 0);
         CommandComponent = __decorate([
             core.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, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbo])
         ], CommandComponent);
         return CommandComponent;
     }(DisposableComponent));
@@ -890,188 +1352,224 @@
     /**
      *
      */
-    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 core.EventEmitter();
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            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 () {
-        };
-        PopupMenuRendererComponent.prototype.getPopupMenuCommandFor = function (item) {
-            var _this = this;
-            var when = pectin.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;
+        FlexComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ListModel)
-        ], PopupMenuRendererComponent.prototype, "commandRegistrations", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], PopupMenuRendererComponent.prototype, "xPosition", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], PopupMenuRendererComponent.prototype, "yPosition", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], PopupMenuRendererComponent.prototype, "commandExecuted", void 0);
-        __decorate([
-            core.ViewChild(menu.MatMenu),
-            __metadata("design:type", menu.MatMenu)
-        ], PopupMenuRendererComponent.prototype, "matMenu", void 0);
-        PopupMenuRendererComponent = __decorate([
+        FlexComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
+        ]; };
+        FlexComponent = __decorate([
             core.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", [exports.ɵbo])
+        ], FlexComponent);
+        return FlexComponent;
     }(DisposableComponent));
 
+    var ɵ0 = exports.ɵbo.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 pectin.MutableValueModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            group.xPosition = 'before'; // this should be the default unless overridden by the user.
+            group.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();
-        };
-        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();
+        MoreMenuComponent.prototype.ngOnInit = function () {
         };
-        AbstractPopupMenuComponent.prototype.getButtonColor = function (registration) {
-            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        MoreMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
         };
-        AbstractPopupMenuComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
+        MoreMenuComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
         ]; };
         __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
-        __decorate([
-            core.Input(),
+            core.Input(), pectin.StoreInValueModel('tooltipModel'),
             __metadata("design:type", String)
-        ], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
-        __decorate([
-            core.ViewChild(PopupMenuRendererComponent),
-            __metadata("design:type", PopupMenuRendererComponent)
-        ], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+        ], MoreMenuComponent.prototype, "tooltip", void 0);
         __decorate([
-            core.ViewChild(menu.MatMenuTrigger),
-            __metadata("design:type", menu.MatMenuTrigger)
-        ], AbstractPopupMenuComponent.prototype, "menuTrigger", void 0);
-        AbstractPopupMenuComponent = __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], MoreMenuComponent.prototype, "ngAfterContentInit", null);
+        MoreMenuComponent = __decorate([
             core.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: exports.ɵbo, useFactory: ɵ0 }]
             }),
-            __metadata("design:paramtypes", [core.ChangeDetectorRef])
-        ], AbstractPopupMenuComponent);
-        return AbstractPopupMenuComponent;
-    }(CommandContainer));
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], MoreMenuComponent);
+        return MoreMenuComponent;
+    }(DisposableComponent));
 
+    var ɵ0$1 = exports.ɵbo.factory;
     /**
      *
      */
     var PopupMenuComponent = /** @class */ (function (_super) {
         __extends(PopupMenuComponent, _super);
-        function PopupMenuComponent(cdr) {
-            var _this = _super.call(this, cdr) || this;
-            _this.faceModel = new pectin.MutableValueModel();
+        function PopupMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            var faceAdapterModel = chain(_this.faceModel).map(function (face) { return new exports.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: core.ChangeDetectorRef }
+            { type: exports.ɵbo }
         ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], PopupMenuComponent.prototype, "faceModel", void 0);
         __decorate([
             core.Input(), pectin.StoreInValueModel('faceModel'),
             __metadata("design:type", Object)
         ], PopupMenuComponent.prototype, "face", void 0);
-        PopupMenuComponent = PopupMenuComponent_1 = __decorate([
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngOnInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngAfterContentInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngAfterViewInit", null);
+        PopupMenuComponent = __decorate([
             core.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: core.forwardRef(function () { return PopupMenuComponent_1; }) }]
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: exports.ɵbo, useFactory: ɵ0$1 }]
             }),
-            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+            __metadata("design:paramtypes", [exports.ɵbo])
         ], 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: core.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: exports.ɵbo, decorators: [{ type: core.Optional }] }
+        ]; };
+        SeparatorComponent = __decorate([
+            core.Component({
+                selector: 'aup-separator',
+                template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
+            }),
+            __param(0, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], SeparatorComponent);
+        return SeparatorComponent;
+    }(DisposableComponent));
+
+    var ɵ0$2 = exports.ɵbo.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: exports.ɵbo }
         ]; };
         __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], MoreMenuComponent.prototype, "tooltip", void 0);
-        MoreMenuComponent = MoreMenuComponent_1 = __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngOnInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngAfterContentInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngAfterViewInit", null);
+        ToolBarComponent = __decorate([
             core.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: core.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: exports.ɵbo, 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", [core.ChangeDetectorRef])
-        ], MoreMenuComponent);
-        return MoreMenuComponent;
-    }(AbstractPopupMenuComponent));
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], ToolBarComponent);
+        return ToolBarComponent;
+    }(DisposableComponent));
 
     var FocusContainerComponent = /** @class */ (function (_super) {
         __extends(FocusContainerComponent, _super);
@@ -2358,7 +2856,7 @@
 
     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) {
@@ -2856,12 +3354,14 @@
             }
             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;
@@ -3162,15 +3662,13 @@
         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;
-    }(exports.CommandFace.Adapter));
+    }());
     /**
      *
      */
@@ -3213,7 +3711,7 @@
         TableRowMenuComponent = __decorate([
             core.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", [])
@@ -3348,13 +3846,16 @@
                     exports.ɵbk,
                     SectionHeaderComponent,
                     TableRowMenuComponent,
-                    CommandBarComponent,
+                    ToolBarComponent,
                     CommandComponent,
                     PopupMenuComponent,
+                    CommandGroupComponent,
                     CommandFaceComponent,
-                    AbstractPopupMenuComponent,
-                    PopupMenuRendererComponent,
-                    MoreMenuComponent
+                    MoreMenuComponent,
+                    SeparatorComponent,
+                    FlexComponent,
+                    CommandGroupMenuRendererComponent,
+                    CommandGroupRendererComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -3374,8 +3875,8 @@
                     angularFontawesome.FontAwesomeModule,
                     tooltip.MatTooltipModule,
                     autocomplete.MatAutocompleteModule,
-                    menu._MatMenuDirectivesModule,
-                    menu.MatMenuModule
+                    menu.MatMenuModule,
+                    divider.MatDividerModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -3401,28 +3902,17 @@
                     exports.ɵbk,
                     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", [angularFontawesome.FaIconLibrary])
@@ -4108,7 +4598,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵcf = /** @class */ (function () {
+    exports.ɵci = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -4253,7 +4743,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵcf || (exports.ɵcf = {}));
+    })(exports.ɵci || (exports.ɵci = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -4311,7 +4801,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵcf },
+            { type: exports.ɵci },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -4329,7 +4819,7 @@
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵcf, Object])
+            __metadata("design:paramtypes", [exports.ɵci, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -4868,7 +5358,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵcf
+                    exports.ɵci
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -6006,7 +6496,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵci = /** @class */ (function () {
+    exports.ɵcl = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -6143,7 +6633,7 @@
         //   }
         //
         // }
-    })(exports.ɵci || (exports.ɵci = {}));
+    })(exports.ɵcl || (exports.ɵcl = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -6598,20 +7088,20 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵcf },
+            { type: exports.ɵci },
             { type: UrlService },
-            { type: exports.ɵci }
+            { type: exports.ɵcl }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵcf), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵci)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵci), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵcl)); }, token: PlaceRouter, providedIn: "root" });
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵcf,
+                exports.ɵci,
                 UrlService,
-                exports.ɵci])
+                exports.ɵcl])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -6985,10 +7475,10 @@
             _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); }
             };
@@ -7022,7 +7512,7 @@
             __metadata("design:type", Function),
             __metadata("design:paramtypes", [PlaceDefinition]),
             __metadata("design:returntype", Object)
-        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+        ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
         AbstractPlaceNavigationComponent = __decorate([
             core.Component({
                 template: ''
@@ -7083,7 +7573,7 @@
         ListPlaceNavComponent = __decorate([
             core.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])
@@ -7091,25 +7581,6 @@
         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([
-            core.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
@@ -7148,7 +7619,7 @@
      * (at)Place({
      *   path: 'myPlace',
      *   data: {
-     *     nav: I18n.places.myPlace.nav()
+     *     nav: I18n.places.myPlace.nav
      *   }
      * })
      */
@@ -7184,7 +7655,7 @@
         SidePlaceNavigationComponent = __decorate([
             core.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.Router, PlaceRouter])
@@ -7192,6 +7663,25 @@
         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([
+            core.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() {
         }
@@ -7800,7 +8290,6 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
-    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
@@ -7822,11 +8311,13 @@
     exports.CheckboxInputComponent = CheckboxInputComponent;
     exports.ColumnModel = ColumnModel;
     exports.ColumnTemplateDirective = ColumnTemplateDirective;
-    exports.CommandBarComponent = CommandBarComponent;
     exports.CommandComponent = CommandComponent;
-    exports.CommandContainer = CommandContainer;
     exports.CommandDirective = CommandDirective;
     exports.CommandFaceComponent = CommandFaceComponent;
+    exports.CommandGroup = exports.ɵbo;
+    exports.CommandGroupComponent = CommandGroupComponent;
+    exports.CommandGroupMenuRendererComponent = CommandGroupMenuRendererComponent;
+    exports.CommandGroupRendererComponent = CommandGroupRendererComponent;
     exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
@@ -7848,6 +8339,7 @@
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
+    exports.FlexComponent = FlexComponent;
     exports.FocusBinding = FocusBinding;
     exports.FocusBindingDirective = FocusBindingDirective;
     exports.FocusBindingFactory = FocusBindingFactory;
@@ -7858,7 +8350,7 @@
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵcf;
+    exports.InteractionService = exports.ɵci;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -7879,7 +8371,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵci;
+    exports.PlaceHistory = exports.ɵcl;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -7888,7 +8380,6 @@
     exports.PopStateNavigation = PopStateNavigation;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
     exports.PopupMenuComponent = PopupMenuComponent;
-    exports.PopupMenuRendererComponent = PopupMenuRendererComponent;
     exports.PropertyColumnModel = PropertyColumnModel;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.RemoveLastInteractionFromUrlNavigationSession = RemoveLastInteractionFromUrlNavigationSession;
@@ -7901,6 +8392,7 @@
     exports.SelectInputActivity = SelectInputActivity;
     exports.SelectInputComponent = SelectInputComponent;
     exports.SelectionColumnModel = SelectionColumnModel;
+    exports.SeparatorComponent = SeparatorComponent;
     exports.SidePlaceNavigationComponent = SidePlaceNavigationComponent;
     exports.StringInputActivity = StringInputActivity;
     exports.StringInputComponent = StringInputComponent;
@@ -7917,6 +8409,7 @@
     exports.TableRowMenuComponent = TableRowMenuComponent;
     exports.TemplateCellRendererPortalRef = TemplateCellRendererPortalRef;
     exports.TextInputComponent = TextInputComponent;
+    exports.ToolBarComponent = ToolBarComponent;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
     exports.Visit = Visit;
@@ -7944,48 +8437,50 @@
     exports.ɵbj = TableHeaderCellRendererComponent;
     exports.ɵbl = SectionHeaderComponent;
     exports.ɵbm = TableRowMenuComponent;
-    exports.ɵbn = CommandBarComponent;
-    exports.ɵbo = CommandContainer;
+    exports.ɵbn = ToolBarComponent;
     exports.ɵbp = CommandComponent;
     exports.ɵbq = PopupMenuComponent;
-    exports.ɵbr = AbstractPopupMenuComponent;
-    exports.ɵbs = PopupMenuRendererComponent;
-    exports.ɵbt = CommandFaceComponent;
-    exports.ɵbu = MoreMenuComponent;
-    exports.ɵbv = PlaceModule;
-    exports.ɵbw = ComponentsModule;
-    exports.ɵbx = EmptyStateComponent;
-    exports.ɵby = BusyOverlayComponent;
-    exports.ɵbz = PlaceOutletComponent;
+    exports.ɵbr = CommandGroupComponent;
+    exports.ɵbs = CommandFaceComponent;
+    exports.ɵbt = MoreMenuComponent;
+    exports.ɵbu = SeparatorComponent;
+    exports.ɵbv = FlexComponent;
+    exports.ɵbw = CommandGroupMenuRendererComponent;
+    exports.ɵbx = CommandGroupRendererComponent;
+    exports.ɵby = PlaceModule;
+    exports.ɵbz = ComponentsModule;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = leftRightPlaceAnimation;
-    exports.ɵcb = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵcc = AUP_PLACE_CONFIG;
-    exports.ɵce = PlaceRouter;
-    exports.ɵcg = ModalInteractionContextFactory;
-    exports.ɵch = UrlService;
-    exports.ɵcj = TabbedPlaceNavigationComponent;
-    exports.ɵck = AbstractPlaceNavigationComponent;
-    exports.ɵcl = ListPlaceNavComponent;
-    exports.ɵcm = SidePlaceNavigationComponent;
-    exports.ɵcn = InteractionModule;
-    exports.ɵco = ActivityContainerComponent;
-    exports.ɵcp = AbstractInteractionContext;
-    exports.ɵcq = ActivityOutletComponent;
-    exports.ɵcr = ConfirmationDialogComponent;
-    exports.ɵcs = ACTIVITY_DATA;
-    exports.ɵct = Activity;
-    exports.ɵcv = ConfirmThenDialogComponent;
-    exports.ɵcw = AlertDialogComponent;
-    exports.ɵcy = InPlaceInteractionContextComponent;
-    exports.ɵcz = AddItemInteractionContextComponent;
+    exports.ɵca = EmptyStateComponent;
+    exports.ɵcb = BusyOverlayComponent;
+    exports.ɵcc = PlaceOutletComponent;
+    exports.ɵcd = leftRightPlaceAnimation;
+    exports.ɵce = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵcf = AUP_PLACE_CONFIG;
+    exports.ɵch = PlaceRouter;
+    exports.ɵcj = ModalInteractionContextFactory;
+    exports.ɵck = UrlService;
+    exports.ɵcm = TabbedPlaceNavigationComponent;
+    exports.ɵcn = AbstractPlaceNavigationComponent;
+    exports.ɵco = ListPlaceNavComponent;
+    exports.ɵcp = SidePlaceNavigationComponent;
+    exports.ɵcq = InteractionModule;
+    exports.ɵcr = ActivityContainerComponent;
+    exports.ɵcs = AbstractInteractionContext;
+    exports.ɵct = ActivityOutletComponent;
+    exports.ɵcu = ConfirmationDialogComponent;
+    exports.ɵcv = ACTIVITY_DATA;
+    exports.ɵcw = Activity;
+    exports.ɵcy = ConfirmThenDialogComponent;
+    exports.ɵcz = AlertDialogComponent;
     exports.ɵd = DisposableComponent;
-    exports.ɵda = ActivityActionsComponent;
-    exports.ɵdb = PopupInteractionContextComponent;
-    exports.ɵdc = StringInputActivity;
-    exports.ɵdd = AbstractInputActivity;
-    exports.ɵde = SelectInputActivity;
-    exports.ɵdf = InteractionContextTriggerFor;
+    exports.ɵdb = InPlaceInteractionContextComponent;
+    exports.ɵdc = AddItemInteractionContextComponent;
+    exports.ɵdd = ActivityActionsComponent;
+    exports.ɵde = PopupInteractionContextComponent;
+    exports.ɵdf = StringInputActivity;
+    exports.ɵdg = AbstractInputActivity;
+    exports.ɵdh = SelectInputActivity;
+    exports.ɵdi = InteractionContextTriggerFor;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
     exports.ɵg = AbstractInputComponent;