@coolon/angular-ui-powerups 3.5.0 → 3.5.2

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

@@ -698,7 +698,7 @@
     CardContainerComponent.decorators = [
         { type: i0.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)}"]
                 },] }
     ];
@@ -865,18 +865,31 @@
     (function (ViewData) {
         var FaceData = /** @class */ (function (_super) {
             __extends(FaceData, _super);
-            function FaceData(face) {
+            function FaceData(faces) {
                 var _this = _super.call(this) || this;
-                _this.faceAdapter = new exports.CommandFace.Adapter(face);
+                _this.faces = faces;
+                pectin.assert.notNil(faces);
                 return _this;
             }
+            Object.defineProperty(FaceData.prototype, "activeFaceAdapter", {
+                get: function () {
+                    return new exports.CommandFace.Adapter(this.faces.length > 0 ? this.faces[0] : undefined);
+                },
+                enumerable: false,
+                configurable: true
+            });
             return FaceData;
         }(ViewData));
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", exports.CommandFace.Adapter),
+            __metadata("design:paramtypes", [])
+        ], FaceData.prototype, "activeFaceAdapter", null);
         ViewData.FaceData = FaceData;
         var GroupData = /** @class */ (function (_super) {
             __extends(GroupData, _super);
-            function GroupData(face, xPosition, yPosition, children) {
-                var _this = _super.call(this, face) || this;
+            function GroupData(faces, xPosition, yPosition, children) {
+                var _this = _super.call(this, faces) || this;
                 _this.xPosition = xPosition;
                 _this.yPosition = yPosition;
                 _this.children = children;
@@ -885,7 +898,7 @@
             Object.defineProperty(GroupData.prototype, "hasMixedIcons", {
                 get: function () {
                     var hasFaces = this.children.filter(function (c) { return ViewData.hasFace(c); });
-                    var iconCount = hasFaces.filter(function (c) { return !!c.faceAdapter.icon; }).length;
+                    var iconCount = hasFaces.filter(function (c) { return !!c.activeFaceAdapter.icon; }).length;
                     return iconCount > 0 && hasFaces.length !== iconCount;
                 },
                 enumerable: false,
@@ -901,8 +914,8 @@
         ViewData.GroupData = GroupData;
         var CommandData = /** @class */ (function (_super) {
             __extends(CommandData, _super);
-            function CommandData(face, command) {
-                var _this = _super.call(this, face) || this;
+            function CommandData(command, faces) {
+                var _this = _super.call(this, faces) || this;
                 _this.command = command;
                 return _this;
             }
@@ -934,25 +947,25 @@
         }
         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);
         }
@@ -1009,7 +1022,7 @@
     CommandGroupMenuRendererComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1034,7 +1047,8 @@
             _this.ViewData = exports.ViewData;
             _this.TrackBy = exports.TrackBy;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.childViewDataModels = chain(_this.groupViewDataModel).pluckList('children');
+            _this.childViewDataModels = chain(_this.groupViewDataModel)
+                .pluckList('children');
             return _this;
         }
         return CommandGroupRendererComponent;
@@ -1042,7 +1056,7 @@
     CommandGroupRendererComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -1071,9 +1085,9 @@
     (function (Registration) {
         var FaceRegistration = /** @class */ (function (_super) {
             __extends(FaceRegistration, _super);
-            function FaceRegistration(faceModel) {
+            function FaceRegistration(faceListModel) {
                 var _this = _super.call(this) || this;
-                _this.faceModel = faceModel;
+                _this.faceListModel = faceListModel;
                 return _this;
             }
             return FaceRegistration;
@@ -1081,13 +1095,13 @@
         Registration.FaceRegistration = FaceRegistration;
         var CommandRegistration = /** @class */ (function (_super) {
             __extends(CommandRegistration, _super);
-            function CommandRegistration(faceModel, command) {
-                var _this = _super.call(this, faceModel) || this;
+            function CommandRegistration(command, faceListModel) {
+                var _this = _super.call(this, faceListModel) || this;
                 _this.command = command;
                 return _this;
             }
             CommandRegistration.prototype.toTemplate = function () {
-                return new exports.ViewData.CommandData(this.faceModel.value, this.command);
+                return new exports.ViewData.CommandData(this.command, this.faceListModel.value);
             };
             return CommandRegistration;
         }(FaceRegistration));
@@ -1100,7 +1114,7 @@
                 return _this;
             }
             GroupRegistration.prototype.toTemplate = function () {
-                return new exports.ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
+                return new exports.ViewData.GroupData(this.faceListModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
             };
             return GroupRegistration;
         }(FaceRegistration));
@@ -1178,7 +1192,7 @@
             this.notifyChanged();
         };
         CommandGroup.prototype.rebuildTemplates = function () {
-            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceListModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
         };
         Object.defineProperty(CommandGroup.prototype, "depth", {
             get: function () {
@@ -1190,8 +1204,8 @@
         CommandGroup.prototype.isRoot = function () {
             return false;
         };
-        CommandGroup.prototype.registerCommand = function (command, faceModel) {
-            return this.register(new exports.Registration.CommandRegistration(faceModel, command));
+        CommandGroup.prototype.registerCommand = function (command, faceListModel) {
+            return this.register(new exports.Registration.CommandRegistration(command, faceListModel));
         };
         CommandGroup.prototype.registerGroup = function (group, faceModel) {
             return this.register(new exports.Registration.GroupRegistration(faceModel, group));
@@ -1207,7 +1221,7 @@
             this._registrations.push(registration);
             if (registration instanceof exports.Registration.FaceRegistration) {
                 var when = pectin.Dsl.disposeWith(registration).when;
-                when(registration.faceModel).changes(function (is, was) {
+                when(registration.faceListModel).changes(function (is, was) {
                     _this.notifyChildFaceChanged(is, was);
                 }, { asLongAs: this.initialised });
             }
@@ -1220,7 +1234,7 @@
         var Root = /** @class */ (function (_super) {
             __extends(Root, _super);
             function Root() {
-                return _super !== null && _super.apply(this, arguments) || this;
+                return _super.call(this) || this;
             }
             Root.prototype.isRoot = function () {
                 return true;
@@ -1229,8 +1243,8 @@
         }(CommandGroup));
         __decorate([
             pectin.TrackExternal(),
-            __metadata("design:type", pectin.ValueModel)
-        ], Root.prototype, "faceModel", void 0);
+            __metadata("design:type", pectin.ListModel)
+        ], Root.prototype, "faceListModel", void 0);
         __decorate([
             pectin.TrackExternal({ defaultValue: 'after' }),
             __metadata("design:type", pectin.ValueModel)
@@ -1261,7 +1275,9 @@
             _this.parent = parent;
             _this.xPosition = 'after';
             _this.yPosition = 'below';
-            _this.parent.registerGroup(_this, _this.faceModel);
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.faceListModel = chain(_this.faceModel).mapToList(function (v) { return [v]; });
+            _this.parent.registerGroup(_this, _this.faceListModel);
             return _this;
         }
         return CommandGroupComponent;
@@ -1307,67 +1323,38 @@
         __extends(CommandFaceComponent, _super);
         function CommandFaceComponent() {
             var _this = _super.call(this) || this;
-            _this.faceModel = new pectin.MutableValueModel();
+            _this.facesModel = new pectin.MutableListModel();
             _this.ignoreIcon = false;
             _this.ignoreText = false;
             _this.includeMissingIconInLayout = false;
-            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.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.colorModel = faceAdapter.pluck('color');
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.faceAdapters = chain(_this.facesModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            var activeFace = _this.faceAdapters.first();
+            _this.activeIcon = activeFace.pluck("icon");
+            _this.activeColor = activeFace.pluck("color");
             return _this;
         }
         Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
             get: function () {
-                return this.includeMissingIconInLayout && !this.iconModel.value;
+                return this.includeMissingIconInLayout && !this.activeIcon.value;
             },
             enumerable: false,
             configurable: true
         });
         CommandFaceComponent.prototype.ngOnInit = function () {
         };
-        Object.defineProperty(CommandFaceComponent.prototype, "iconPosition", {
-            get: function () {
-                var _a;
-                return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : exports.CommandFace.Position.START;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommandFaceComponent.prototype, "shouldIncludeIcon", {
-            get: function () {
-                return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommandFaceComponent.prototype, "iconStart", {
-            get: function () {
-                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.START;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
-            get: function () {
-                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.END;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommandFaceComponent.prototype, "text", {
-            get: function () {
-                return this.ignoreText ? undefined : this.textModel.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
+        CommandFaceComponent.prototype.shouldIncludeIcon = function (face) {
+            return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
+        };
+        CommandFaceComponent.prototype.hasIconStart = function (face) {
+            return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === exports.CommandFace.Position.START);
+        };
+        CommandFaceComponent.prototype.hasIconEnd = function (face) {
+            return this.shouldIncludeIcon(face) && face.iconPosition === exports.CommandFace.Position.END;
+        };
         Object.defineProperty(CommandFaceComponent.prototype, "color", {
             get: function () {
-                return this.colorModel.value;
+                return this.activeColor.value;
             },
             enumerable: false,
             configurable: true
@@ -1377,14 +1364,14 @@
     CommandFaceComponent.decorators = [
         { type: i0.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: i0.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 = function () { return []; };
     CommandFaceComponent.propDecorators = {
-        _rawFace: [{ type: i0.Input, args: ['face',] }],
+        _rawFaces: [{ type: i0.Input, args: ['faces',] }],
         ignoreIcon: [{ type: i0.Input }],
         ignoreText: [{ type: i0.Input }],
         includeMissingIconInLayout: [{ type: i0.Input }],
@@ -1392,9 +1379,9 @@
         color: [{ type: i0.HostBinding, args: ['attr.color',] }]
     };
     __decorate([
-        pectin.StoreInValueModel('faceModel'),
-        __metadata("design:type", Object)
-    ], CommandFaceComponent.prototype, "_rawFace", void 0);
+        pectin.StoreInListModel('facesModel'),
+        __metadata("design:type", Array)
+    ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
     /**
      *
@@ -1406,17 +1393,23 @@
             _this.parent = parent;
             _this.CommandFace = exports.CommandFace;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
-            _this.activeFaceModel = switchOn(_this.command.busy).toValue(function (when) {
-                when.equalTo(true, _this.busyFaceModel);
-                when.otherwise(_this.faceModel);
-            }).otherwise(_this.faceModel);
-            _this.buttonStyle = chain(_this.activeFaceModel).map(function (f) { return exports.CommandFace.getStyleOf(f); });
-            _this.colorModel = chain(_this.activeFaceModel).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            _this.faces = chain(_this.command.busy).mapToList(function (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(function (f) { return exports.CommandFace.getStyleOf(f); });
+            _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
             if (parent) {
-                _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.activeFaceModel));
+                _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.faces));
             }
             return _this;
         }
+        CommandComponent.prototype.isActive = function (face) {
+            return this.activeFace.query().equals(face);
+        };
         CommandComponent.prototype.ngOnInit = function () {
         };
         return CommandComponent;
@@ -1424,7 +1417,7 @@
     CommandComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -1498,13 +1491,15 @@
             _this.tooltipModel = new pectin.MutableValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             group.xPosition = 'before'; // this should be the default unless overridden by the user.
-            group.faceModel = chain(_this.tooltipModel).map(function (tooltip) {
-                return {
-                    icon: function () { return 'mat:more_vert'; },
-                    tooltip: function () {
-                        return tooltip;
+            group.faceListModel = chain(_this.tooltipModel).mapToList(function (tooltip) {
+                return [
+                    {
+                        icon: function () { return 'mat:more_vert'; },
+                        tooltip: function () {
+                            return tooltip;
+                        }
                     }
-                };
+                ];
             }, { allowNil: true });
             return _this;
         }
@@ -1544,7 +1539,7 @@
             var _this = _super.call(this) || this;
             _this.group = group;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            group.faceModel = _this.faceModel;
+            group.faceListModel = chain(_this.faceModel).mapToList(function (face) { return [face]; });
             return _this;
         }
         // @Trace()
@@ -4955,7 +4950,7 @@
     StringInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-string-input-activity',
-                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions align=\"end\"\n                          [confirmCommand]=\"confirmCommand\"\n                          [cancelCommand]=\"cancelCommand\"></aup-activity-actions>\n  "
+                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions align=\"end\"\n                          [confirmCommand]=\"confirmCommand\"\n                          [cancelCommand]=\"cancelCommand\"\n                          [style]=\"data.buttonStyle\"></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -4989,7 +4984,7 @@
     SelectInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-select-input-activity',
-                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions align=\"end\"\n                          [confirmCommand]=\"confirmCommand\"\n                          [cancelCommand]=\"cancelCommand\"></aup-activity-actions>\n  "
+                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions align=\"end\"\n                          [confirmCommand]=\"confirmCommand\"\n                          [cancelCommand]=\"cancelCommand\"\n                          [style]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -7464,7 +7459,7 @@
     ListPlaceNavComponent.decorators = [
         { type: i0.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)}"]
                 },] }
     ];
@@ -7559,7 +7554,7 @@
     TabbedPlaceNavigationComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];