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

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, ViewChild, InjectionToken, Injector, ComponentFactoryResolver, ViewChildren, Optional, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, forwardRef, Optional, HostBinding, ViewEncapsulation, ViewChild, Self, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChildren, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -18,10 +18,11 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, FocusManager, EventListenerList, Form, MutableListModel, Guard, Binding, DebugContext, MutableValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableListModel, Disposable, MutableValueModel, StoreInValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, StoreInListModel, ValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Functions } from '@coolon/pectin';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
+import { Enum } from 'typescript-string-enums';
 import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import produce from 'immer';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
@@ -371,11 +372,340 @@ CardContainerComponent = __decorate([
     Component({
         selector: 'aup-card-container',
         template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-icon icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-        styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.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);
 
+var CommandFace;
+(function (CommandFace) {
+    let Position;
+    (function (Position) {
+        Position["START"] = "start";
+        Position["END"] = "end";
+    })(Position = CommandFace.Position || (CommandFace.Position = {}));
+    class Adapter {
+        constructor(face) {
+            this.face = face;
+        }
+        get text() {
+            return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
+        }
+        get icon() {
+            return ___default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+        }
+        get iconPosition() {
+            return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
+        }
+        get tooltip() {
+            return ___default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
+        }
+        get iconPositionStart() {
+            return this.iconPosition === CommandFace.Position.START;
+        }
+        get iconPositionEnd() {
+            return this.iconPosition === CommandFace.Position.END;
+        }
+        get destructive() {
+            return ___default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+        }
+    }
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "text", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "icon", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "iconPosition", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "tooltip", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "iconPositionStart", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "iconPositionEnd", null);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], Adapter.prototype, "destructive", null);
+    CommandFace.Adapter = Adapter;
+})(CommandFace || (CommandFace = {}));
+
+var CommandContainer_1;
+let CommandContainer = CommandContainer_1 = class CommandContainer extends GarbageCollector {
+    constructor() {
+        super();
+        this._commandRegistrations = new MutableListModel();
+    }
+    get commandRegistrations() {
+        return this._commandRegistrations.readonly;
+    }
+    registerCommand(command, face) {
+        const registration = new CommandContainer_1.Registration(command, face);
+        this._commandRegistrations.push(registration);
+        return Disposable.disposableThatRuns(() => this._commandRegistrations.remove(registration));
+    }
+    getDefaultIconPosition() {
+        return CommandFace.Position.START;
+    }
+};
+CommandContainer = CommandContainer_1 = __decorate([
+    Component({
+        template: ''
+    }),
+    __metadata("design:paramtypes", [])
+], CommandContainer);
+(function (CommandContainer) {
+    class Registration extends CommandFace.Adapter {
+        constructor(command, face) {
+            super(face);
+            this.command = command;
+        }
+    }
+    CommandContainer.Registration = Registration;
+})(CommandContainer || (CommandContainer = {}));
+
+var CommandBarComponent_1;
+/**
+ *
+ */
+let CommandBarComponent = CommandBarComponent_1 = class CommandBarComponent extends CommandContainer {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+    getButtonColor(registration) {
+        return registration.destructive ? 'warn' : undefined;
+    }
+};
+__decorate([
+    ContentChild('moreMenu'),
+    __metadata("design:type", TemplateRef)
+], CommandBarComponent.prototype, "moreMenuTemplateRef", void 0);
+CommandBarComponent = CommandBarComponent_1 = __decorate([
+    Component({
+        selector: 'aup-command-bar',
+        template: `
+    <ng-container *ngFor="let registration of commandRegistrations.value">
+      <button *ngIf="registration.icon && !registration.text"
+              mat-icon-button
+              [color]="getButtonColor(registration)"
+              [pectinCommand]="registration.command"
+              [matTooltip]="registration.tooltip"
+      >
+        <aup-command-face [face]="registration.face"></aup-command-face>
+      </button>
+      <button *ngIf="registration.text"
+              [color]="getButtonColor(registration)"
+              mat-button
+              [pectinCommand]="registration.command"
+              [matTooltip]="registration.tooltip"
+      >
+        <aup-command-face [face]="registration.face"></aup-command-face>
+      </button>
+    </ng-container>
+  `,
+        providers: [{ provide: CommandContainer, useExisting: forwardRef(() => CommandBarComponent_1) }],
+        styles: [`:host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+  }`]
+    }),
+    __metadata("design:paramtypes", [])
+], CommandBarComponent);
+
+/**
+ *
+ */
+let CommandFaceComponent = class CommandFaceComponent extends DisposableComponent {
+    constructor(commandContainer) {
+        super();
+        this.commandContainer = commandContainer;
+        this.faceModel = new MutableValueModel();
+        this.ignoreIcon = false;
+        this.ignoreText = false;
+        this.includeMissingIconInLayout = false;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        // overkill /c: when all you have is a hammer...
+        const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));
+        this.iconModel = faceAdapter.pluck('icon');
+        this.textModel = faceAdapter.pluck('text');
+        this.positionModel = faceAdapter.pluck('iconPosition');
+        this.destructiveModel = faceAdapter.pluck('destructive');
+    }
+    get requiresMissingIconInLayout() {
+        return this.includeMissingIconInLayout && !this.iconModel.value;
+    }
+    ngOnInit() {
+    }
+    get iconPosition() {
+        var _a, _b, _c;
+        return (_c = (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : (_b = this.commandContainer) === null || _b === void 0 ? void 0 : _b.getDefaultIconPosition()) !== null && _c !== void 0 ? _c : CommandFace.Position.START;
+    }
+    get shouldIncludeIcon() {
+        return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+    }
+    get iconStart() {
+        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;
+    }
+    get iconEnd() {
+        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;
+    }
+    get text() {
+        return this.ignoreText ? undefined : this.textModel.value;
+    }
+    get destructive() {
+        return this.destructiveModel.value;
+    }
+};
+CommandFaceComponent.ctorParameters = () => [
+    { type: CommandContainer, decorators: [{ type: Optional }] }
+];
+__decorate([
+    Input('face'), StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], CommandFaceComponent.prototype, "_rawFace", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], CommandFaceComponent.prototype, "ignoreIcon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], CommandFaceComponent.prototype, "ignoreText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
+__decorate([
+    HostBinding('class.hide-icon'),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
+__decorate([
+    HostBinding('class.destructive'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], CommandFaceComponent.prototype, "destructive", null);
+CommandFaceComponent = __decorate([
+    Component({
+        selector: 'aup-command-face',
+        template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
+        encapsulation: ViewEncapsulation.None,
+        styles: ["aup-command-face{--icon-gap:var(--command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [CommandContainer])
+], CommandFaceComponent);
+
+/**
+ *
+ */
+let CommandComponent = class CommandComponent extends DisposableComponent {
+    constructor(commandContainer) {
+        super();
+        this.commandContainer = commandContainer;
+    }
+    ngOnInit() {
+        this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
+    }
+};
+CommandComponent.ctorParameters = () => [
+    { type: CommandContainer }
+];
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", Command)
+], CommandComponent.prototype, "command", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], CommandComponent.prototype, "face", void 0);
+CommandComponent = __decorate([
+    Component({
+        selector: 'aup-command',
+        template: ``
+    }),
+    __metadata("design:paramtypes", [CommandContainer])
+], CommandComponent);
+
+var CommandMenuComponent_1;
+/**
+ *
+ */
+let CommandMenuComponent = CommandMenuComponent_1 = class CommandMenuComponent extends CommandContainer {
+    constructor() {
+        super();
+        this.faceModel = new MutableValueModel();
+        this.xPosition = 'after';
+        this.yPosition = 'below';
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.tooltip = chain(this.faceModel).map(face => new CommandFace.Adapter(face)).pluck('tooltip');
+        const registrations = chain(this.commandRegistrations);
+        const iconCount = registrations.select(r => !!r.icon).count();
+        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(registrations.length)).areTruthy();
+    }
+    ngOnInit() {
+    }
+    createMoreMenuCommand(item) {
+        const { when } = Dsl.disposeWith(this);
+        when(item.command.busy).becomesFalsey(() => {
+            this.closeMoreMenu();
+        });
+        return item.command;
+    }
+    closeMoreMenu() {
+        this.menu.closeMenu();
+    }
+    getButtonColor(registration) {
+        return registration.destructive ? 'warn' : undefined;
+    }
+};
+__decorate([
+    Input(), StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], CommandMenuComponent.prototype, "face", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CommandMenuComponent.prototype, "xPosition", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CommandMenuComponent.prototype, "yPosition", void 0);
+__decorate([
+    ViewChild(MatMenuTrigger),
+    __metadata("design:type", MatMenuTrigger)
+], CommandMenuComponent.prototype, "menu", void 0);
+CommandMenuComponent = CommandMenuComponent_1 = __decorate([
+    Component({
+        selector: 'aup-command-menu',
+        template: "<button #trigger mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"tooltip.value\">\n  <aup-command-face [face]=\"face\"></aup-command-face>\n</button>\n<mat-menu #menu=\"matMenu\" [xPosition]=\"xPosition\" [yPosition]=\"yPosition\">\n  <button *ngFor=\"let registration of commandRegistrations.value\"\n          mat-menu-item\n          [pectinCommand]=\"createMoreMenuCommand(registration)\"\n  >\n    <aup-command-face [face]=\"registration.face\" [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n  </button>\n</mat-menu>\n",
+        providers: [{ provide: CommandContainer, useExisting: forwardRef(() => CommandMenuComponent_1) }],
+        styles: [":host{display:inline-flex;flex-direction:row;align-items:center}"]
+    }),
+    __metadata("design:paramtypes", [])
+], CommandMenuComponent);
+
 let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
     constructor(focusManager) {
         super();
@@ -1053,7 +1383,12 @@ TextInputComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], TextInputComponent);
 
-let IconComponent = class IconComponent {
+var IconComponent_1;
+let IconComponent = IconComponent_1 = class IconComponent {
+    constructor() {
+        this.allowedPrefixes = Enum.values(IconComponent_1.IconPrefix).map(p => `${p}:`);
+        this.iconPrefix = IconComponent_1.IconPrefix;
+    }
     set icon(iconName) {
         this._icon = iconName;
         if (!iconName) {
@@ -1069,7 +1404,7 @@ let IconComponent = class IconComponent {
         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}:"`;
     }
     get icon() {
         return this._icon;
@@ -1080,13 +1415,20 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], IconComponent.prototype, "icon", null);
-IconComponent = __decorate([
+IconComponent = IconComponent_1 = __decorate([
     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);
+(function (IconComponent) {
+    IconComponent.IconPrefix = Enum({
+        SVG: 'svg',
+        FONT_AWESOME: 'fa',
+        MATERIAL: 'mat'
+    });
+})(IconComponent || (IconComponent = {}));
 
 let NoopComponent = class NoopComponent {
     constructor() {
@@ -2258,69 +2600,6 @@ TableHeaderCellRendererComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], TableHeaderCellRendererComponent);
 
-var CommandFace;
-(function (CommandFace) {
-    let Position;
-    (function (Position) {
-        Position["START"] = "start";
-        Position["END"] = "end";
-    })(Position = CommandFace.Position || (CommandFace.Position = {}));
-    class Adapter {
-        constructor(face) {
-            this.face = face;
-        }
-        get text() {
-            return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
-        }
-        get icon() {
-            return ___default.isFunction(this.face.icon) ? this.face.icon() : undefined;
-        }
-        get iconPosition() {
-            return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : CommandFace.Position.START;
-        }
-        get tooltip() {
-            return ___default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
-        }
-        get iconPositionStart() {
-            return this.iconPosition === CommandFace.Position.START;
-        }
-        get iconPositionEnd() {
-            return this.iconPosition === CommandFace.Position.END;
-        }
-    }
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "text", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "icon", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "iconPosition", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "tooltip", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "iconPositionStart", null);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], Adapter.prototype, "iconPositionEnd", null);
-    CommandFace.Adapter = Adapter;
-})(CommandFace || (CommandFace = {}));
-
 class MenuItemData extends CommandFace.Adapter {
     constructor(factory, face) {
         super(face);
@@ -2520,7 +2799,12 @@ ComponentsModule = __decorate([
             TableHeaderCellRendererComponent,
             IconComponent,
             SectionHeaderComponent,
-            TableRowMenuComponent
+            TableRowMenuComponent,
+            CommandBarComponent,
+            CommandComponent,
+            CommandMenuComponent,
+            CommandFaceComponent,
+            CommandContainer
         ],
         imports: [
             CommonModule,
@@ -2566,7 +2850,12 @@ ComponentsModule = __decorate([
             ColumnTemplateDirective,
             IconComponent,
             SectionHeaderComponent,
-            TableRowMenuComponent
+            TableRowMenuComponent,
+            CommandBarComponent,
+            CommandComponent,
+            CommandMenuComponent,
+            CommandFaceComponent,
+            CommandContainer
         ],
         providers: [
             FocusBindingFactory
@@ -6400,5 +6689,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, CommandFace, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, PlaceModule as ɵbn, ComponentsModule as ɵbo, EmptyStateComponent as ɵbp, BusyOverlayComponent as ɵbq, PlaceOutletComponent as ɵbr, leftRightPlaceAnimation as ɵbs, LEFT_RIGHT_PLACE_ANIMATION as ɵbt, AUP_PLACE_CONFIG as ɵbu, PlaceRouter as ɵbw, InteractionService as ɵbx, ModalInteractionContextFactory as ɵby, UrlService as ɵbz, FocusBindingDirective as ɵc, PlaceHistory as ɵca, TabbedPlaceNavigationComponent as ɵcb, AbstractPlaceNavigationComponent as ɵcc, ListPlaceNavComponent as ɵcd, SidePlaceNavigationComponent as ɵce, InteractionModule as ɵcf, ActivityContainerComponent as ɵcg, AbstractInteractionContext as ɵch, ActivityOutletComponent as ɵci, ConfirmationDialogComponent as ɵcj, ACTIVITY_DATA as ɵck, Activity as ɵcl, ConfirmThenDialogComponent as ɵcn, AlertDialogComponent as ɵco, InPlaceInteractionContextComponent as ɵcq, AddItemInteractionContextComponent as ɵcr, ActivityActionsComponent as ɵcs, PopupInteractionContextComponent as ɵct, StringInputActivity as ɵcu, AbstractInputActivity as ɵcv, SelectInputActivity as ɵcw, InteractionContextTriggerFor as ɵcx, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandBarComponent, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, CommandMenuComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, CommandBarComponent as ɵbn, CommandContainer as ɵbo, CommandComponent as ɵbp, CommandMenuComponent as ɵbq, CommandFaceComponent as ɵbr, PlaceModule as ɵbs, ComponentsModule as ɵbt, EmptyStateComponent as ɵbu, BusyOverlayComponent as ɵbv, PlaceOutletComponent as ɵbw, leftRightPlaceAnimation as ɵbx, LEFT_RIGHT_PLACE_ANIMATION as ɵby, AUP_PLACE_CONFIG as ɵbz, FocusBindingDirective as ɵc, PlaceRouter as ɵcb, InteractionService as ɵcc, ModalInteractionContextFactory as ɵcd, UrlService as ɵce, PlaceHistory as ɵcf, TabbedPlaceNavigationComponent as ɵcg, AbstractPlaceNavigationComponent as ɵch, ListPlaceNavComponent as ɵci, SidePlaceNavigationComponent as ɵcj, InteractionModule as ɵck, ActivityContainerComponent as ɵcl, AbstractInteractionContext as ɵcm, ActivityOutletComponent as ɵcn, ConfirmationDialogComponent as ɵco, ACTIVITY_DATA as ɵcp, Activity as ɵcq, ConfirmThenDialogComponent as ɵcs, AlertDialogComponent as ɵct, InPlaceInteractionContextComponent as ɵcv, AddItemInteractionContextComponent as ɵcw, ActivityActionsComponent as ɵcx, PopupInteractionContextComponent as ɵcy, StringInputActivity as ɵcz, DisposableComponent as ɵd, AbstractInputActivity as ɵda, SelectInputActivity as ɵdb, InteractionContextTriggerFor as ɵdc, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map