@coolon/angular-ui-powerups 3.5.1 → 3.5.2

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

@@ -18,7 +18,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, StoreInListModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableValueModel, StoreInValueModel, ValueModel, MutableListModel, ListModel, StoreInListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { isEqual, isNil } from 'lodash';
@@ -492,7 +492,7 @@ class CardContainerComponent extends DisposableComponent {
 CardContainerComponent.decorators = [
     { type: Component, args: [{
                 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-command-face *ngIf=\"addCardFace\" [face]=\"addCardFace\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" 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",
+                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-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" 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-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top: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,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.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 .28s 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{border-bottom:0;padding-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{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;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{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}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{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
             },] }
 ];
@@ -516,22 +516,31 @@ class ViewData {
 }
 (function (ViewData) {
     class FaceData extends ViewData {
-        constructor(face) {
+        constructor(faces) {
             super();
-            this.faceAdapter = new CommandFace.Adapter(face);
+            this.faces = faces;
+            assert.notNil(faces);
+        }
+        get activeFaceAdapter() {
+            return new CommandFace.Adapter(this.faces.length > 0 ? this.faces[0] : undefined);
         }
     }
+    __decorate([
+        Memoize(),
+        __metadata("design:type", CommandFace.Adapter),
+        __metadata("design:paramtypes", [])
+    ], FaceData.prototype, "activeFaceAdapter", null);
     ViewData.FaceData = FaceData;
     class GroupData extends FaceData {
-        constructor(face, xPosition, yPosition, children) {
-            super(face);
+        constructor(faces, xPosition, yPosition, children) {
+            super(faces);
             this.xPosition = xPosition;
             this.yPosition = yPosition;
             this.children = children;
         }
         get hasMixedIcons() {
             const hasFaces = this.children.filter(c => ViewData.hasFace(c));
-            const iconCount = hasFaces.filter(c => !!c.faceAdapter.icon).length;
+            const iconCount = hasFaces.filter(c => !!c.activeFaceAdapter.icon).length;
             return iconCount > 0 && hasFaces.length !== iconCount;
         }
     }
@@ -542,8 +551,8 @@ class ViewData {
     ], GroupData.prototype, "hasMixedIcons", null);
     ViewData.GroupData = GroupData;
     class CommandData extends FaceData {
-        constructor(face, command) {
-            super(face);
+        constructor(command, faces) {
+            super(faces);
             this.command = command;
         }
     }
@@ -563,25 +572,25 @@ class ViewData {
     }
     ViewData.getCommand = getCommand;
     function getTooltip(data) {
-        return as(FaceData, data).faceAdapter.tooltip;
+        return as(FaceData, data).activeFaceAdapter.tooltip;
     }
     ViewData.getTooltip = getTooltip;
     function getStyle(data) {
-        return as(FaceData, data).faceAdapter.style;
+        return as(FaceData, data).activeFaceAdapter.style;
     }
     ViewData.getStyle = getStyle;
     function getColor(data) {
-        return as(FaceData, data).faceAdapter.color;
+        return as(FaceData, data).activeFaceAdapter.color;
     }
     ViewData.getColor = getColor;
     function hasText(data) {
-        return !!as(FaceData, data).faceAdapter.text;
+        return !!as(FaceData, data).activeFaceAdapter.text;
     }
     ViewData.hasText = hasText;
-    function getFace(data) {
-        return as(FaceData, data).faceAdapter.face;
+    function getFaces(data) {
+        return as(FaceData, data).faces;
     }
-    ViewData.getFace = getFace;
+    ViewData.getFaces = getFaces;
     function asGroup(viewData) {
         return as(GroupData, viewData);
     }
@@ -634,7 +643,7 @@ class CommandGroupMenuRendererComponent extends DisposableComponent {
 CommandGroupMenuRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command-group-menu',
-                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
+                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
             },] }
 ];
 CommandGroupMenuRendererComponent.ctorParameters = () => [
@@ -658,13 +667,14 @@ class CommandGroupRendererComponent extends DisposableComponent {
         this.ViewData = ViewData;
         this.TrackBy = TrackBy;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.childViewDataModels = chain(this.groupViewDataModel).pluckList('children');
+        this.childViewDataModels = chain(this.groupViewDataModel)
+            .pluckList('children');
     }
 }
 CommandGroupRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command-group-renderer',
-                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
+                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
                 styles: [":host{align-items:center;display:inline-flex;flex-direction:row}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
             },] }
 ];
@@ -687,19 +697,19 @@ class Registration extends GarbageCollector {
 }
 (function (Registration) {
     class FaceRegistration extends Registration {
-        constructor(faceModel) {
+        constructor(faceListModel) {
             super();
-            this.faceModel = faceModel;
+            this.faceListModel = faceListModel;
         }
     }
     Registration.FaceRegistration = FaceRegistration;
     class CommandRegistration extends FaceRegistration {
-        constructor(faceModel, command) {
-            super(faceModel);
+        constructor(command, faceListModel) {
+            super(faceListModel);
             this.command = command;
         }
         toTemplate() {
-            return new ViewData.CommandData(this.faceModel.value, this.command);
+            return new ViewData.CommandData(this.command, this.faceListModel.value);
         }
     }
     Registration.CommandRegistration = CommandRegistration;
@@ -709,7 +719,7 @@ class Registration extends GarbageCollector {
             this.group = group;
         }
         toTemplate() {
-            return new ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(r => r.toTemplate()));
+            return new ViewData.GroupData(this.faceListModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(r => r.toTemplate()));
         }
     }
     Registration.GroupRegistration = GroupRegistration;
@@ -770,7 +780,7 @@ class CommandGroup extends GarbageCollector {
         this.notifyChanged();
     }
     rebuildTemplates() {
-        this._rootTemplate.value = new ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
+        this._rootTemplate.value = new ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(r => r.toTemplate()));
     }
     get depth() {
         return this.isRoot() ? 0 : this.parent.depth + 1;
@@ -778,8 +788,8 @@ class CommandGroup extends GarbageCollector {
     isRoot() {
         return false;
     }
-    registerCommand(command, faceModel) {
-        return this.register(new Registration.CommandRegistration(faceModel, command));
+    registerCommand(command, faceListModel) {
+        return this.register(new Registration.CommandRegistration(command, faceListModel));
     }
     registerGroup(group, faceModel) {
         return this.register(new Registration.GroupRegistration(faceModel, group));
@@ -794,7 +804,7 @@ class CommandGroup extends GarbageCollector {
         this._registrations.push(registration);
         if (registration instanceof Registration.FaceRegistration) {
             const { when } = Dsl.disposeWith(registration);
-            when(registration.faceModel).changes((is, was) => {
+            when(registration.faceListModel).changes((is, was) => {
                 this.notifyChildFaceChanged(is, was);
             }, { asLongAs: this.initialised });
         }
@@ -804,14 +814,17 @@ class CommandGroup extends GarbageCollector {
 }
 (function (CommandGroup) {
     class Root extends CommandGroup {
+        constructor() {
+            super();
+        }
         isRoot() {
             return true;
         }
     }
     __decorate([
         TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], Root.prototype, "faceModel", void 0);
+        __metadata("design:type", ListModel)
+    ], Root.prototype, "faceListModel", void 0);
     __decorate([
         TrackExternal({ defaultValue: 'after' }),
         __metadata("design:type", ValueModel)
@@ -841,7 +854,9 @@ class CommandGroupComponent extends CommandGroup {
         this.parent = parent;
         this.xPosition = 'after';
         this.yPosition = 'below';
-        this.parent.registerGroup(this, this.faceModel);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.faceListModel = chain(this.faceModel).mapToList(v => [v]);
+        this.parent.registerGroup(this, this.faceListModel);
     }
 }
 CommandGroupComponent.decorators = [
@@ -884,54 +899,45 @@ __decorate([
 class CommandFaceComponent extends DisposableComponent {
     constructor() {
         super();
-        this.faceModel = new MutableValueModel();
+        this.facesModel = new MutableListModel();
         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.colorModel = faceAdapter.pluck('color');
+        this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));
+        const activeFace = this.faceAdapters.first();
+        this.activeIcon = activeFace.pluck("icon");
+        this.activeColor = activeFace.pluck("color");
     }
     get requiresMissingIconInLayout() {
-        return this.includeMissingIconInLayout && !this.iconModel.value;
+        return this.includeMissingIconInLayout && !this.activeIcon.value;
     }
     ngOnInit() {
     }
-    get iconPosition() {
-        var _a;
-        return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : CommandFace.Position.START;
-    }
-    get shouldIncludeIcon() {
-        return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
-    }
-    get iconStart() {
-        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;
+    shouldIncludeIcon(face) {
+        return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
     }
-    get iconEnd() {
-        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;
+    hasIconStart(face) {
+        return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);
     }
-    get text() {
-        return this.ignoreText ? undefined : this.textModel.value;
+    hasIconEnd(face) {
+        return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;
     }
     get color() {
-        return this.colorModel.value;
+        return this.activeColor.value;
     }
 }
 CommandFaceComponent.decorators = [
     { type: Component, args: [{
                 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",
+                template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);align-items:center;display:inline-flex;flex-direction:row}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}"]
             },] }
 ];
 CommandFaceComponent.ctorParameters = () => [];
 CommandFaceComponent.propDecorators = {
-    _rawFace: [{ type: Input, args: ['face',] }],
+    _rawFaces: [{ type: Input, args: ['faces',] }],
     ignoreIcon: [{ type: Input }],
     ignoreText: [{ type: Input }],
     includeMissingIconInLayout: [{ type: Input }],
@@ -939,9 +945,9 @@ CommandFaceComponent.propDecorators = {
     color: [{ type: HostBinding, args: ['attr.color',] }]
 };
 __decorate([
-    StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], CommandFaceComponent.prototype, "_rawFace", void 0);
+    StoreInListModel('facesModel'),
+    __metadata("design:type", Array)
+], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
 /**
  *
@@ -952,23 +958,29 @@ class CommandComponent extends DisposableComponent {
         this.parent = parent;
         this.CommandFace = CommandFace;
         const { chain, switchOn } = Dsl.disposeWith(this);
-        this.activeFaceModel = switchOn(this.command.busy).toValue(when => {
-            when.equalTo(true, this.busyFaceModel);
-            when.otherwise(this.faceModel);
-        }).otherwise(this.faceModel);
-        this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));
-        this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));
+        this.faces = chain(this.command.busy).mapToList(busy => {
+            return busy ?
+                [this.busyFaceModel.value, this.faceModel.value] :
+                [this.faceModel.value, this.busyFaceModel.value];
+        }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })
+            .rejectNil();
+        this.activeFace = this.faces.first();
+        this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
+        this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
         if (parent) {
-            this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));
+            this.registerDisposable(this.parent.registerCommand(this.command, this.faces));
         }
     }
+    isActive(face) {
+        return this.activeFace.query().equals(face);
+    }
     ngOnInit() {
     }
 }
 CommandComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command',
-                template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
+                template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n          <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n          <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
                 styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
             },] }
 ];
@@ -1038,13 +1050,15 @@ class MoreMenuComponent extends DisposableComponent {
         this.tooltipModel = new MutableValueModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         group.xPosition = 'before'; // this should be the default unless overridden by the user.
-        group.faceModel = chain(this.tooltipModel).map(tooltip => {
-            return {
-                icon: () => 'mat:more_vert',
-                tooltip() {
-                    return tooltip;
+        group.faceListModel = chain(this.tooltipModel).mapToList(tooltip => {
+            return [
+                {
+                    icon: () => 'mat:more_vert',
+                    tooltip() {
+                        return tooltip;
+                    }
                 }
-            };
+            ];
         }, { allowNil: true });
     }
     ngOnInit() {
@@ -1081,7 +1095,7 @@ class PopupMenuComponent extends DisposableComponent {
         super();
         this.group = group;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        group.faceModel = this.faceModel;
+        group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
     // @Trace()
     ngOnInit() {
@@ -4170,7 +4184,8 @@ StringInputActivity.decorators = [
                       [command.escape]="cancelCommand"></aup-string-input>
     <aup-activity-actions align="end"
                           [confirmCommand]="confirmCommand"
-                          [cancelCommand]="cancelCommand"></aup-activity-actions>
+                          [cancelCommand]="cancelCommand"
+                          [style]="data.buttonStyle"></aup-activity-actions>
   `
             },] }
 ];
@@ -4205,7 +4220,9 @@ SelectInputActivity.decorators = [
     ></aup-select-input>
     <aup-activity-actions align="end"
                           [confirmCommand]="confirmCommand"
-                          [cancelCommand]="cancelCommand"></aup-activity-actions>
+                          [cancelCommand]="cancelCommand"
+                          [style]="data.buttonStyle"
+    ></aup-activity-actions>
   `
             },] }
 ];
@@ -6440,7 +6457,7 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
 ListPlaceNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-list-place-nav',
-                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
+                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
                 styles: [":host{--selected-background:#f1f1f1;--selected-border-color:#838383;--selected-color:inherit;display:flex;flex-direction:column}mat-nav-list{padding-top:0}a.active{background:var(--selected-background);border-right:2px solid var(--selected-border-color);color:var(--selected-color)}"]
             },] }
 ];
@@ -6530,7 +6547,7 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</nav>\n",
+                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</nav>\n",
                 styles: [""]
             },] }
 ];