@coolon/angular-ui-powerups 3.16.0 → 3.17.1

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

@@ -19,7 +19,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, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { find, filter, each, isNil, isEqual } from 'lodash';
@@ -520,7 +520,7 @@ 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\" [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)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.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 mat-form-field .mat-form-field-prefix{align-items:center;align-self:flex-end;display:inline-flex;flex-direction:row;height:35px}.aup-input-component mat-form-field .mat-form-field-suffix .mat-icon-button{line-height:2.5em}.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));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}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 tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}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)}"]
+                styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px}aup-activity-body{padding:var(--default-padding) 0}.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 mat-form-field .mat-form-field-prefix{align-items:center;align-self:flex-end;display:inline-flex;flex-direction:row;height:35px}.aup-input-component mat-form-field .mat-form-field-suffix .mat-icon-button{line-height:2.5em}.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));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}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 tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}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)}"]
             },] }
 ];
 CardContainerComponent.ctorParameters = () => [];
@@ -2660,6 +2660,19 @@ AbstractTableModel = __decorate([
  * @example
  * <aup-table [tableModel]="heroTableModel"></aup-table>
  *
+ * Column templates
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
  * Styling
  * @example
  * aup-table {
@@ -3752,10 +3765,94 @@ ComponentsModule.ctorParameters = () => [
     { type: FaIconLibrary }
 ];
 
+/**
+ * @example
+ * <aup-activity-actions [style]="{confirm: saveFace, cancel: cancelFace}">
+ * </aup-activity-actions>
+ *
+ * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
+ * // style definitions
+ * <aup-activity-actions [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
+ * </aup-activity-actions>
+ *
+ * // you can also add additional content that will be displayed along with the buttons.
+ * // The location of the content depends on the alignment attribute.
+ * <aup-activity-actions
+ *     align="stretch"
+ *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
+ *     <span>This content will be between the two commands</span>
+ * </aup-activity-actions>
+ */
+class ActivityActionsComponent extends DisposableComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.align = 'stretch';
+    }
+    set faces(faces) {
+        this.confirmFace = faces.confirm;
+        this.cancelFace = faces.cancel;
+    }
+    /**
+     * @deprecated use #commandFaces instead.
+     */
+    set style(style) {
+        this.faces = style;
+    }
+    get alignEnd() {
+        return this.align === 'end';
+    }
+    get alignStretch() {
+        return this.align === 'stretch';
+    }
+    ngOnInit() {
+    }
+    hasConfirmFace() {
+        return this.confirmFace;
+    }
+    hasCancelFace() {
+        return this.cancelFace;
+    }
+    initCommands(activity) {
+        this.confirmCommand = activity.confirmCommand;
+        this.cancelCommand = activity.cancelCommand;
+        this.cdr.detectChanges();
+    }
+}
+ActivityActionsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-activity-actions',
+                template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
+                styles: [":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]
+            },] }
+];
+ActivityActionsComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+ActivityActionsComponent.propDecorators = {
+    confirmCommand: [{ type: Input }],
+    cancelCommand: [{ type: Input }],
+    faces: [{ type: Input }],
+    confirmFace: [{ type: Input }],
+    cancelFace: [{ type: Input }],
+    style: [{ type: Input }],
+    align: [{ type: Input }],
+    alignEnd: [{ type: HostBinding, args: ['class.align-end',] }],
+    alignStretch: [{ type: HostBinding, args: ['class.align-stretch',] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+
 const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 class Activity extends DisposableComponent {
     constructor() {
-        super(...arguments);
+        super();
         this._busyModel = new DelegatingValueModel().withDefault(false);
         this._focusedModel = this.registerDisposable(new DelegatingValueModel());
         this.class = 'aup-activity';
@@ -3773,6 +3870,10 @@ class Activity extends DisposableComponent {
             this.onActivityReady();
         });
     }
+    ngAfterViewInit() {
+        var _a;
+        (_a = this.activityActions) === null || _a === void 0 ? void 0 : _a.initCommands(this);
+    }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
         return this._interactionContext;
@@ -3807,91 +3908,33 @@ Activity.decorators = [
                 template: ''
             },] }
 ];
+Activity.ctorParameters = () => [];
 Activity.propDecorators = {
+    activityActions: [{ type: ViewChild, args: [ActivityActionsComponent,] }],
     class: [{ type: HostBinding, args: ['class',] }],
     isFocused: [{ type: HostBinding, args: ['attr.focused',] }]
 };
-
-/**
- * @example
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
- *     [style]="{confirm: saveFace, cancel: cancelFace}">
- * </aup-activity-actions>
- *
- * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
- * // style definitions
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
- *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
- * </aup-activity-actions>
- *
- * // both commands are optional
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
- * </aup-activity-actions>
- *
- * // you can also add additional content that will be displayed along with the buttons.
- * // The location of the content depends on the alignment attribute.
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
- *     align="stretch"
- *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
- *     <span>This content will be between the two commands</span>
- * </aup-activity-actions>
- */
-class ActivityActionsComponent extends DisposableComponent {
-    constructor() {
-        super(...arguments);
-        this.align = 'start';
-    }
-    get alignEnd() {
-        return this.align === 'end';
-    }
-    get alignStretch() {
-        return this.align === 'stretch';
-    }
-    ngOnInit() {
-    }
-    hasConfirmCommand() {
-        return DelegatingCommand.hasDelegate(this.confirmCommand);
-    }
-    hasCancelCommand() {
-        return DelegatingCommand.hasDelegate(this.cancelCommand);
-    }
-}
-ActivityActionsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-activity-actions',
-                template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"style.cancel\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"style.confirm\"></aup-command>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-                styles: [":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]
-            },] }
-];
-ActivityActionsComponent.propDecorators = {
-    confirmCommand: [{ type: Input }],
-    cancelCommand: [{ type: Input }],
-    style: [{ type: Input }],
-    align: [{ type: Input }],
-    alignEnd: [{ type: HostBinding, args: ['class.align-end',] }],
-    alignStretch: [{ type: HostBinding, args: ['class.align-stretch',] }]
-};
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
-], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+], Activity.prototype, "confirmCommand", void 0);
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
-], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+], Activity.prototype, "cancelCommand", void 0);
 
 class AlertDialogComponent extends Activity {
     constructor(alert) {
         super();
         this.alert = alert;
+        this.confirmCommand = Command.create(() => {
+            this.done();
+        });
+        this.confirmFace = {
+            text: () => alert.ok(),
+            color: () => "primary",
+            style: () => "raised"
+        };
     }
     ngOnInit() {
     }
@@ -3899,7 +3942,7 @@ class AlertDialogComponent extends Activity {
 AlertDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-alert-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+                template: "<aup-activity-title *ngIf=\"alert.title\">{{alert.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n",
                 styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
             },] }
 ];
@@ -3912,6 +3955,22 @@ class ConfirmThenDialogComponent extends Activity {
         super();
         this.config = config;
         assert.notNil(config);
+        this.confirmCommand = Command.create(() => {
+            this.interactionContext.startActivity(this.config.activityType, this.config.data)
+                .then((result) => this.done(result))
+                .catch(error => this.cancel(error));
+        });
+        this.cancelCommand = Command.create(() => {
+            return this.cancel();
+        });
+        this.confirmFace = {
+            text: () => this.confirm.ok(),
+            color: () => this.isDestructive() ? 'warn' : 'primary',
+            style: () => 'raised'
+        };
+        this.cancelFace = {
+            text: () => this.confirm.cancel(),
+        };
     }
     ngOnInit() {
     }
@@ -3921,16 +3980,11 @@ class ConfirmThenDialogComponent extends Activity {
     isDestructive() {
         return this.confirm.destructive && this.confirm.destructive();
     }
-    onConfirm() {
-        this.interactionContext.startActivity(this.config.activityType, this.config.data)
-            .then((result) => this.done(result))
-            .catch(error => this.cancel(error));
-    }
 }
 ConfirmThenDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
+                template: "<aup-activity-title *ngIf=\"confirm.title\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n",
                 styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
             },] }
 ];
@@ -3943,6 +3997,20 @@ class ConfirmationDialogComponent extends Activity {
         super();
         this.confirm = confirm;
         assert.notNil(confirm);
+        this.confirmCommand = Command.create(() => {
+            return this.done();
+        });
+        this.cancelCommand = Command.create(() => {
+            return this.cancel();
+        });
+        this.confirmFace = {
+            text: () => confirm.ok(),
+            color: () => this.isDestructive() ? 'warn' : 'primary',
+            style: () => 'raised'
+        };
+        this.cancelFace = {
+            text: () => confirm.cancel(),
+        };
     }
     ngOnInit() {
     }
@@ -3953,7 +4021,7 @@ class ConfirmationDialogComponent extends Activity {
 ConfirmationDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
+                template: "<aup-activity-title *ngIf=\"confirm.title\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n",
                 styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
             },] }
 ];
@@ -4303,6 +4371,30 @@ ActivityContainerComponent.propDecorators = {
     activityOutlets: [{ type: ViewChildren, args: [ActivityOutletComponent,] }]
 };
 
+class ActivityBodyComponent extends DisposableComponent {
+    // @Input()
+    // align: 'start' | 'end' | 'stretch' = 'start';
+    //
+    // @HostBinding('class.align-end')
+    // get alignEnd():boolean {
+    //   return this.align === 'end'
+    // }
+    //
+    // @HostBinding('class.align-stretch')
+    // get alignStretch():boolean {
+    //   return this.align === 'stretch'
+    // }
+    ngOnInit() {
+    }
+}
+ActivityBodyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-activity-body',
+                template: "<ng-content></ng-content>\n",
+                styles: ["<ng-content></ng-content>\n"]
+            },] }
+];
+
 class ActivityTitleComponent extends DisposableComponent {
     // @Input()
     // align: 'start' | 'end' | 'stretch' = 'start';
@@ -4822,9 +4914,7 @@ StringInputActivity.decorators = [
                       [command.enter]="confirmCommand"
                       [command.escape]="cancelCommand"></aup-string-input>
     <aup-activity-actions align="end"
-                          [confirmCommand]="confirmCommand"
-                          [cancelCommand]="cancelCommand"
-                          [style]="data.buttonStyle"></aup-activity-actions>
+                          [faces]="data.buttonStyle"></aup-activity-actions>
   `
             },] }
 ];
@@ -4857,10 +4947,7 @@ SelectInputActivity.decorators = [
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
     ></aup-select-input>
-    <aup-activity-actions align="end"
-                          [confirmCommand]="confirmCommand"
-                          [cancelCommand]="cancelCommand"
-                          [style]="data.buttonStyle"
+    <aup-activity-actions align="end" [faces]="data.buttonStyle"
     ></aup-activity-actions>
   `
             },] }
@@ -4984,7 +5071,9 @@ InteractionModule.decorators = [
                     AbstractInputActivity,
                     InteractionContextTriggerFor,
                     Activity,
-                    ActivityTitleComponent
+                    ActivityTitleComponent,
+                    ActivityBodyComponent,
+                    ActivityActionsComponent
                 ],
                 exports: [
                     ActivityContainerComponent,
@@ -4996,7 +5085,8 @@ InteractionModule.decorators = [
                     PopupInteractionContextComponent,
                     InteractionContextTriggerFor,
                     StringInputActivity,
-                    SelectInputActivity
+                    SelectInputActivity,
+                    ActivityBodyComponent
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -7743,5 +7833,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, TreeToListModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, TreeToListModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map