@coolon/angular-ui-powerups 2.0.0-alpha.26 → 2.0.0-alpha.28

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('lodash'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), 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', 'lodash', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', '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.___default, global.typescriptUtilities, global.src, 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, ___default, typescriptUtilities, src, 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/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';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -578,13 +578,486 @@
             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}.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}.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}: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;--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}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
             }),
             __metadata("design:paramtypes", [])
         ], CardContainerComponent);
         return CardContainerComponent;
     }(DisposableComponent));
 
+
+    (function (CommandFace) {
+        var Position;
+        (function (Position) {
+            Position["START"] = "start";
+            Position["END"] = "end";
+        })(Position = CommandFace.Position || (CommandFace.Position = {}));
+        var Adapter = /** @class */ (function () {
+            function Adapter(face) {
+                this.face = face;
+            }
+            Object.defineProperty(Adapter.prototype, "text", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.text) ? this.face.text() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "icon", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPosition", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "tooltip", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionStart", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.START;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionEnd", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.END;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "destructive", {
+                get: function () {
+                    return ___default__default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "text", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "icon", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPosition", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "tooltip", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionStart", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionEnd", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "destructive", null);
+            return Adapter;
+        }());
+        CommandFace.Adapter = Adapter;
+    })(exports.CommandFace || (exports.CommandFace = {}));
+
+    var CommandContainer = /** @class */ (function (_super) {
+        __extends(CommandContainer, _super);
+        function CommandContainer() {
+            var _this = _super.call(this) || this;
+            _this._commandRegistrations = new pectin.MutableListModel();
+            return _this;
+        }
+        Object.defineProperty(CommandContainer.prototype, "commandRegistrations", {
+            get: function () {
+                return this._commandRegistrations.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); });
+        };
+        CommandContainer.prototype.getDefaultIconPosition = function () {
+            return exports.CommandFace.Position.START;
+        };
+        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 () {
+        };
+        CommandBarComponent.prototype.getButtonColor = function (registration) {
+            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        };
+        var CommandBarComponent_1;
+        CommandBarComponent = CommandBarComponent_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  }"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], CommandBarComponent);
+        return CommandBarComponent;
+    }(CommandContainer));
+
+    /**
+     *
+     */
+    var CommandFaceComponent = /** @class */ (function (_super) {
+        __extends(CommandFaceComponent, _super);
+        function CommandFaceComponent(commandContainer) {
+            var _this = _super.call(this) || this;
+            _this.commandContainer = commandContainer;
+            _this.faceModel = new pectin.MutableValueModel();
+            _this.ignoreIcon = false;
+            _this.ignoreText = false;
+            _this.includeMissingIconInLayout = false;
+            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;
+            // overkill /c: when all you have is a hammer...
+            var faceAdapter = chain(_this.faceModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            _this.iconModel = faceAdapter.pluck('icon');
+            _this.textModel = faceAdapter.pluck('text');
+            _this.positionModel = faceAdapter.pluck('iconPosition');
+            _this.destructiveModel = faceAdapter.pluck('destructive');
+            return _this;
+        }
+        Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
+            get: function () {
+                return this.includeMissingIconInLayout && !this.iconModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandFaceComponent.prototype.ngOnInit = function () {
+        };
+        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;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "shouldIncludeIcon", {
+            get: function () {
+                return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconStart", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.START;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.END;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "text", {
+            get: function () {
+                return this.ignoreText ? undefined : this.textModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "destructive", {
+            get: function () {
+                return this.destructiveModel.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)
+        ], CommandFaceComponent.prototype, "_rawFace", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreIcon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreText", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
+        __decorate([
+            core.HostBinding('class.hide-icon'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
+        __decorate([
+            core.HostBinding('class.destructive'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "destructive", 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}"]
+            }),
+            __param(0, core.Optional()),
+            __metadata("design:paramtypes", [CommandContainer])
+        ], CommandFaceComponent);
+        return CommandFaceComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var CommandComponent = /** @class */ (function (_super) {
+        __extends(CommandComponent, _super);
+        function CommandComponent(commandContainer) {
+            var _this = _super.call(this) || this;
+            _this.commandContainer = commandContainer;
+            return _this;
+        }
+        CommandComponent.prototype.ngOnInit = function () {
+            this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
+        };
+        CommandComponent.ctorParameters = function () { return [
+            { type: CommandContainer }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], CommandComponent.prototype, "command", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandComponent.prototype, "face", void 0);
+        CommandComponent = __decorate([
+            core.Component({
+                selector: 'aup-command',
+                template: ""
+            }),
+            __metadata("design:paramtypes", [CommandContainer])
+        ], CommandComponent);
+        return CommandComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var PopupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuRendererComponent, _super);
+        function PopupMenuRendererComponent() {
+            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();
+            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;
+        };
+        __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([
+            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}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], PopupMenuRendererComponent);
+        return PopupMenuRendererComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
+        __extends(AbstractPopupMenuComponent, _super);
+        function AbstractPopupMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.xPosition = 'after';
+            _this.yPosition = 'below';
+            return _this;
+        }
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "matMenuComponent", {
+            get: function () {
+                var _a;
+                return (_a = this.popupMenu) === null || _a === void 0 ? void 0 : _a.matMenu;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AbstractPopupMenuComponent.prototype.closeMenu = function () {
+            this.menuTrigger.closeMenu();
+        };
+        AbstractPopupMenuComponent.prototype.getButtonColor = function (registration) {
+            return registration.faceAdapter.destructive ? 'warn' : undefined;
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
+        __decorate([
+            core.ViewChild(PopupMenuRendererComponent),
+            __metadata("design:type", PopupMenuRendererComponent)
+        ], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+        __decorate([
+            core.ViewChild(menu.MatMenuTrigger),
+            __metadata("design:type", menu.MatMenuTrigger)
+        ], AbstractPopupMenuComponent.prototype, "menuTrigger", void 0);
+        AbstractPopupMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-abstract-popup-menu',
+                template: ''
+            }),
+            __metadata("design:paramtypes", [])
+        ], AbstractPopupMenuComponent);
+        return AbstractPopupMenuComponent;
+    }(CommandContainer));
+
+    /**
+     *
+     */
+    var PopupMenuComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuComponent, _super);
+        function PopupMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.faceModel = 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;
+            var faceAdapterModel = chain(_this.faceModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            _this.faceTooltipModel = faceAdapterModel.pluck('tooltip');
+            return _this;
+        }
+        PopupMenuComponent_1 = PopupMenuComponent;
+        PopupMenuComponent.prototype.getTooltip = function () {
+            return this.faceTooltipModel.value;
+        };
+        PopupMenuComponent.prototype.ngOnInit = function () {
+        };
+        var PopupMenuComponent_1;
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], PopupMenuComponent.prototype, "face", void 0);
+        PopupMenuComponent = PopupMenuComponent_1 = __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; }) }]
+            }),
+            __metadata("design:paramtypes", [])
+        ], PopupMenuComponent);
+        return PopupMenuComponent;
+    }(AbstractPopupMenuComponent));
+
+    /**
+     *
+     */
+    var MoreMenuComponent = /** @class */ (function (_super) {
+        __extends(MoreMenuComponent, _super);
+        function MoreMenuComponent() {
+            return _super.call(this) || this;
+        }
+        MoreMenuComponent_1 = MoreMenuComponent;
+        var MoreMenuComponent_1;
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], MoreMenuComponent.prototype, "tooltip", void 0);
+        MoreMenuComponent = MoreMenuComponent_1 = __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                             [yPosition]=\"yPosition\" [xPosition]=\"xPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
+                providers: [{ provide: CommandContainer, useExisting: core.forwardRef(function () { return MoreMenuComponent_1; }) }]
+            }),
+            __metadata("design:paramtypes", [])
+        ], MoreMenuComponent);
+        return MoreMenuComponent;
+    }(AbstractPopupMenuComponent));
+
     var FocusContainerComponent = /** @class */ (function (_super) {
         __extends(FocusContainerComponent, _super);
         function FocusContainerComponent(focusManager) {
@@ -1342,9 +1815,12 @@
         return TextInputComponent;
     }(AbstractValueInputComponent));
 
-    var IconComponent = /** @class */ (function () {
+    exports.ɵbk = /** @class */ (function () {
         function IconComponent() {
+            this.allowedPrefixes = typescriptStringEnums.Enum.values(IconComponent_1.IconPrefix).map(function (p) { return p + ":"; });
+            this.iconPrefix = IconComponent_1.IconPrefix;
         }
+        IconComponent_1 = IconComponent;
         Object.defineProperty(IconComponent.prototype, "icon", {
             get: function () {
                 return this._icon;
@@ -1364,25 +1840,33 @@
                 if (this.prefix) {
                     this.errorMessage = "Unknown icon \"" + iconName + "\"";
                 }
-                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
+                this.errorMessage = "Unknown icon prefix, expected one of [" + this.allowedPrefixes.join(',') + "] got \"" + this.prefix + ":\"";
             },
             enumerable: true,
             configurable: true
         });
+        var IconComponent_1;
         __decorate([
             core.Input(),
             __metadata("design:type", String),
             __metadata("design:paramtypes", [String])
         ], IconComponent.prototype, "icon", null);
-        IconComponent = __decorate([
+        IconComponent = IconComponent_1 = __decorate([
             core.Component({
                 selector: 'aup-icon',
-                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
+                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
                 styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
             })
         ], IconComponent);
         return IconComponent;
     }());
+    (function (IconComponent) {
+        IconComponent.IconPrefix = typescriptStringEnums.Enum({
+            SVG: 'svg',
+            FONT_AWESOME: 'fa',
+            MATERIAL: 'mat'
+        });
+    })(exports.ɵbk || (exports.ɵbk = {}));
 
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
@@ -2663,94 +3147,6 @@
         return TableHeaderCellRendererComponent;
     }());
 
-
-    (function (CommandFace) {
-        var Position;
-        (function (Position) {
-            Position["START"] = "start";
-            Position["END"] = "end";
-        })(Position = CommandFace.Position || (CommandFace.Position = {}));
-        var Adapter = /** @class */ (function () {
-            function Adapter(face) {
-                this.face = face;
-            }
-            Object.defineProperty(Adapter.prototype, "text", {
-                get: function () {
-                    return ___default__default.isFunction(this.face.text) ? this.face.text() : undefined;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(Adapter.prototype, "icon", {
-                get: function () {
-                    return ___default__default.isFunction(this.face.icon) ? this.face.icon() : undefined;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(Adapter.prototype, "iconPosition", {
-                get: function () {
-                    return ___default__default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : CommandFace.Position.START;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(Adapter.prototype, "tooltip", {
-                get: function () {
-                    return ___default__default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(Adapter.prototype, "iconPositionStart", {
-                get: function () {
-                    return this.iconPosition === CommandFace.Position.START;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(Adapter.prototype, "iconPositionEnd", {
-                get: function () {
-                    return this.iconPosition === CommandFace.Position.END;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Object),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "text", null);
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Object),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "icon", null);
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Object),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "iconPosition", null);
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Object),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "tooltip", null);
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Boolean),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "iconPositionStart", null);
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Boolean),
-                __metadata("design:paramtypes", [])
-            ], Adapter.prototype, "iconPositionEnd", null);
-            return Adapter;
-        }());
-        CommandFace.Adapter = Adapter;
-    })(exports.CommandFace || (exports.CommandFace = {}));
-
     var MenuItemData = /** @class */ (function (_super) {
         __extends(MenuItemData, _super);
         function MenuItemData(factory, face) {
@@ -2934,9 +3330,16 @@
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
-                    IconComponent,
+                    exports.ɵbk,
                     SectionHeaderComponent,
-                    TableRowMenuComponent
+                    TableRowMenuComponent,
+                    CommandBarComponent,
+                    CommandComponent,
+                    PopupMenuComponent,
+                    CommandFaceComponent,
+                    AbstractPopupMenuComponent,
+                    PopupMenuRendererComponent,
+                    MoreMenuComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -2980,9 +3383,16 @@
                     TableComponent,
                     EditRowControls,
                     ColumnTemplateDirective,
-                    IconComponent,
+                    exports.ɵbk,
                     SectionHeaderComponent,
-                    TableRowMenuComponent
+                    TableRowMenuComponent,
+                    CommandBarComponent,
+                    CommandComponent,
+                    AbstractPopupMenuComponent,
+                    PopupMenuComponent,
+                    CommandFaceComponent,
+                    PopupMenuRendererComponent,
+                    MoreMenuComponent
                 ],
                 providers: [
                     FocusBindingFactory
@@ -3633,7 +4043,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbx = /** @class */ (function () {
+    exports.ɵcf = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3778,7 +4188,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbx || (exports.ɵbx = {}));
+    })(exports.ɵcf || (exports.ɵcf = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3836,7 +4246,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbx },
+            { type: exports.ɵcf },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3854,7 +4264,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.ɵbx, Object])
+            __metadata("design:paramtypes", [exports.ɵcf, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -4393,7 +4803,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbx
+                    exports.ɵcf
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -5515,7 +5925,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵca = /** @class */ (function () {
+    exports.ɵci = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5652,7 +6062,7 @@
         //   }
         //
         // }
-    })(exports.ɵca || (exports.ɵca = {}));
+    })(exports.ɵci || (exports.ɵci = {}));
 
     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.
@@ -6107,20 +6517,20 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbx },
+            { type: exports.ɵcf },
             { type: UrlService },
-            { type: exports.ɵca }
+            { type: exports.ɵci }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbx), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵca)); }, 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.ɵcf), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵci)); }, token: PlaceRouter, providedIn: "root" });
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbx,
+                exports.ɵcf,
                 UrlService,
-                exports.ɵca])
+                exports.ɵci])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -7270,6 +7680,7 @@
     exports.AbstractListInputComponent = AbstractListInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
+    exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
@@ -7291,7 +7702,11 @@
     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.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
@@ -7319,16 +7734,17 @@
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
-    exports.IconComponent = IconComponent;
+    exports.IconComponent = exports.ɵbk;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbx;
+    exports.InteractionService = exports.ɵcf;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
+    exports.MoreMenuComponent = MoreMenuComponent;
     exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
     exports.Navigating = Navigating;
     exports.NavigatingDuringInteraction = NavigatingDuringInteraction;
@@ -7343,7 +7759,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵca;
+    exports.PlaceHistory = exports.ɵci;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -7351,6 +7767,8 @@
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     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;
@@ -7404,43 +7822,50 @@
     exports.ɵbh = SelectHeaderCellRendererComponent;
     exports.ɵbi = DefaultHeaderCellRendererComponent;
     exports.ɵbj = TableHeaderCellRendererComponent;
-    exports.ɵbk = IconComponent;
     exports.ɵbl = SectionHeaderComponent;
     exports.ɵbm = TableRowMenuComponent;
-    exports.ɵbn = PlaceModule;
-    exports.ɵbo = ComponentsModule;
-    exports.ɵbp = EmptyStateComponent;
-    exports.ɵbq = BusyOverlayComponent;
-    exports.ɵbr = PlaceOutletComponent;
-    exports.ɵbs = leftRightPlaceAnimation;
-    exports.ɵbt = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbu = AUP_PLACE_CONFIG;
-    exports.ɵbw = PlaceRouter;
-    exports.ɵby = ModalInteractionContextFactory;
-    exports.ɵbz = UrlService;
+    exports.ɵbn = CommandBarComponent;
+    exports.ɵbo = CommandContainer;
+    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.ɵc = FocusBindingDirective;
-    exports.ɵcb = TabbedPlaceNavigationComponent;
-    exports.ɵcc = AbstractPlaceNavigationComponent;
-    exports.ɵcd = ListPlaceNavComponent;
-    exports.ɵce = SidePlaceNavigationComponent;
-    exports.ɵcf = InteractionModule;
-    exports.ɵcg = ActivityContainerComponent;
-    exports.ɵch = AbstractInteractionContext;
-    exports.ɵci = ActivityOutletComponent;
-    exports.ɵcj = ConfirmationDialogComponent;
-    exports.ɵck = ACTIVITY_DATA;
-    exports.ɵcl = Activity;
-    exports.ɵcn = ConfirmThenDialogComponent;
-    exports.ɵco = AlertDialogComponent;
-    exports.ɵcq = InPlaceInteractionContextComponent;
-    exports.ɵcr = AddItemInteractionContextComponent;
-    exports.ɵcs = ActivityActionsComponent;
-    exports.ɵct = PopupInteractionContextComponent;
-    exports.ɵcu = StringInputActivity;
-    exports.ɵcv = AbstractInputActivity;
-    exports.ɵcw = SelectInputActivity;
-    exports.ɵcx = InteractionContextTriggerFor;
+    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.ɵd = DisposableComponent;
+    exports.ɵda = ActivityActionsComponent;
+    exports.ɵdb = PopupInteractionContextComponent;
+    exports.ɵdc = StringInputActivity;
+    exports.ɵdd = AbstractInputActivity;
+    exports.ɵde = SelectInputActivity;
+    exports.ɵdf = InteractionContextTriggerFor;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
     exports.ɵg = AbstractInputComponent;