@coolon/angular-ui-powerups 3.16.0 → 3.17.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.17.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.16.0...v3.17.0) (2021-02-28)
+
+
+### Features
+
+* added initial visibility service ([e063efc](https://bitbucket.org/coolon/angular-ui-powerups/commit/e063efc930092648f60c80c5f640459e76305199))
+
+
+### Bug Fixes
+
+* for AUP-118 AUP-120 ([0f5a76a](https://bitbucket.org/coolon/angular-ui-powerups/commit/0f5a76ace1dd76a11eb621467e5d115f18c5bd3b))
+
 ## [3.16.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.16.0-alpha.0...v3.16.0) (2021-02-24)
 
 

package/assets/activities.scss

@@ -5,5 +5,8 @@ aup-activity-title {
   font-size:  mat-font-size($typographyConfig, title);
   line-height:  mat-line-height($typographyConfig, title);
   letter-spacing: mat-letter-spacing($typographyConfig, title);
-  margin-bottom: var(--default-padding);
+}
+
+aup-activity-body {
+  padding: var(--default-padding) 0;
 }

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

@@ -729,7 +729,7 @@
         { 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\" [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 = function () { return []; };
@@ -3287,6 +3287,19 @@
      * @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 {
@@ -4489,11 +4502,114 @@
         { type: angularFontawesome.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>
+     */
+    var ActivityActionsComponent = /** @class */ (function (_super) {
+        __extends(ActivityActionsComponent, _super);
+        function ActivityActionsComponent(cdr) {
+            var _this = _super.call(this) || this;
+            _this.cdr = cdr;
+            _this.align = 'stretch';
+            return _this;
+        }
+        Object.defineProperty(ActivityActionsComponent.prototype, "faces", {
+            set: function (faces) {
+                this.confirmFace = faces.confirm;
+                this.cancelFace = faces.cancel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActivityActionsComponent.prototype, "style", {
+            /**
+             * @deprecated use #commandFaces instead.
+             */
+            set: function (style) {
+                this.confirmFace = style.confirm;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
+            get: function () {
+                return this.align === 'end';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActivityActionsComponent.prototype, "alignStretch", {
+            get: function () {
+                return this.align === 'stretch';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ActivityActionsComponent.prototype.ngOnInit = function () {
+        };
+        ActivityActionsComponent.prototype.hasConfirmFace = function () {
+            return this.confirmFace;
+        };
+        ActivityActionsComponent.prototype.hasCancelFace = function () {
+            return this.cancelFace;
+        };
+        ActivityActionsComponent.prototype.initCommands = function (activity) {
+            this.confirmCommand = activity.confirmCommand;
+            this.cancelCommand = activity.cancelCommand;
+            this.cdr.detectChanges();
+        };
+        return ActivityActionsComponent;
+    }(DisposableComponent));
+    ActivityActionsComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    ActivityActionsComponent.propDecorators = {
+        confirmCommand: [{ type: i0.Input }],
+        cancelCommand: [{ type: i0.Input }],
+        faces: [{ type: i0.Input }],
+        confirmFace: [{ type: i0.Input }],
+        cancelFace: [{ type: i0.Input }],
+        style: [{ type: i0.Input }],
+        align: [{ type: i0.Input }],
+        alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
+        alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+
     var ACTIVITY_DATA = new i0.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.call(this) || this;
             _this._busyModel = new pectin.DelegatingValueModel().withDefault(false);
             _this._focusedModel = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.class = 'aup-activity';
@@ -4508,7 +4624,7 @@
         });
         Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
             var _this = this;
-            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
+            var _b = pectin.Dsl.disposeWith(this), chain = _b.chain, when = _b.when;
             typescriptUtilities.assert.isNil(this._activityContext);
             this._activityContext = activityContext;
             this._interactionContext = nestedInteractionContext;
@@ -4517,6 +4633,10 @@
                 _this.onActivityReady();
             });
         };
+        Activity.prototype.ngAfterViewInit = function () {
+            var _a;
+            (_a = this.activityActions) === null || _a === void 0 ? void 0 : _a.initCommands(this);
+        };
         Object.defineProperty(Activity.prototype, "interactionContext", {
             get: function () {
                 typescriptUtilities.assert.isTruthy(this.isInitialised());
@@ -4564,103 +4684,34 @@
                     template: ''
                 },] }
     ];
+    Activity.ctorParameters = function () { return []; };
     Activity.propDecorators = {
+        activityActions: [{ type: i0.ViewChild, args: [ActivityActionsComponent,] }],
         class: [{ type: i0.HostBinding, args: ['class',] }],
         isFocused: [{ type: i0.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>
-     */
-    var ActivityActionsComponent = /** @class */ (function (_super) {
-        __extends(ActivityActionsComponent, _super);
-        function ActivityActionsComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.align = 'start';
-            return _this;
-        }
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
-            get: function () {
-                return this.align === 'end';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignStretch", {
-            get: function () {
-                return this.align === 'stretch';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ActivityActionsComponent.prototype.ngOnInit = function () {
-        };
-        ActivityActionsComponent.prototype.hasConfirmCommand = function () {
-            return pectin.DelegatingCommand.hasDelegate(this.confirmCommand);
-        };
-        ActivityActionsComponent.prototype.hasCancelCommand = function () {
-            return pectin.DelegatingCommand.hasDelegate(this.cancelCommand);
-        };
-        return ActivityActionsComponent;
-    }(DisposableComponent));
-    ActivityActionsComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        cancelCommand: [{ type: i0.Input }],
-        style: [{ type: i0.Input }],
-        align: [{ type: i0.Input }],
-        alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
-        alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
-    };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    ], Activity.prototype, "confirmCommand", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    ], Activity.prototype, "cancelCommand", void 0);
 
     var AlertDialogComponent = /** @class */ (function (_super) {
         __extends(AlertDialogComponent, _super);
         function AlertDialogComponent(alert) {
             var _this = _super.call(this) || this;
             _this.alert = alert;
+            _this.confirmCommand = pectin.Command.create(function () {
+                _this.done();
+            });
+            _this.confirmFace = {
+                text: function () { return alert.ok(); },
+                color: function () { return "primary"; },
+                style: function () { return "raised"; }
+            };
             return _this;
         }
         AlertDialogComponent.prototype.ngOnInit = function () {
@@ -4670,7 +4721,7 @@
     AlertDialogComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4684,6 +4735,22 @@
             var _this = _super.call(this) || this;
             _this.config = config;
             pectin.assert.notNil(config);
+            _this.confirmCommand = pectin.Command.create(function () {
+                _this.interactionContext.startActivity(_this.config.activityType, _this.config.data)
+                    .then(function (result) { return _this.done(result); })
+                    .catch(function (error) { return _this.cancel(error); });
+            });
+            _this.cancelCommand = pectin.Command.create(function () {
+                return _this.cancel();
+            });
+            _this.confirmFace = {
+                text: function () { return _this.confirm.ok(); },
+                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
+                style: function () { return 'raised'; }
+            };
+            _this.cancelFace = {
+                text: function () { return _this.confirm.cancel(); },
+            };
             return _this;
         }
         ConfirmThenDialogComponent.prototype.ngOnInit = function () {
@@ -4698,18 +4765,12 @@
         ConfirmThenDialogComponent.prototype.isDestructive = function () {
             return this.confirm.destructive && this.confirm.destructive();
         };
-        ConfirmThenDialogComponent.prototype.onConfirm = function () {
-            var _this = this;
-            this.interactionContext.startActivity(this.config.activityType, this.config.data)
-                .then(function (result) { return _this.done(result); })
-                .catch(function (error) { return _this.cancel(error); });
-        };
         return ConfirmThenDialogComponent;
     }(Activity));
     ConfirmThenDialogComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4723,6 +4784,20 @@
             var _this = _super.call(this) || this;
             _this.confirm = confirm;
             pectin.assert.notNil(confirm);
+            _this.confirmCommand = pectin.Command.create(function () {
+                return _this.done();
+            });
+            _this.cancelCommand = pectin.Command.create(function () {
+                return _this.cancel();
+            });
+            _this.confirmFace = {
+                text: function () { return confirm.ok(); },
+                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
+                style: function () { return 'raised'; }
+            };
+            _this.cancelFace = {
+                text: function () { return confirm.cancel(); },
+            };
             return _this;
         }
         ConfirmationDialogComponent.prototype.ngOnInit = function () {
@@ -4735,7 +4810,7 @@
     ConfirmationDialogComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -5132,6 +5207,35 @@
         activityOutlets: [{ type: i0.ViewChildren, args: [ActivityOutletComponent,] }]
     };
 
+    var ActivityBodyComponent = /** @class */ (function (_super) {
+        __extends(ActivityBodyComponent, _super);
+        function ActivityBodyComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        // @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'
+        // }
+        ActivityBodyComponent.prototype.ngOnInit = function () {
+        };
+        return ActivityBodyComponent;
+    }(DisposableComponent));
+    ActivityBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-activity-body',
+                    template: "<ng-content></ng-content>\n",
+                    styles: ["<ng-content></ng-content>\n"]
+                },] }
+    ];
+
     var ActivityTitleComponent = /** @class */ (function (_super) {
         __extends(ActivityTitleComponent, _super);
         function ActivityTitleComponent() {
@@ -5701,7 +5805,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\"\n                          [style]=\"data.buttonStyle\"></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                          [faces]=\"data.buttonStyle\"></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -5735,7 +5839,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\"\n                          [style]=\"data.buttonStyle\"\n    ></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\" [faces]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -5865,7 +5969,9 @@
                         AbstractInputActivity,
                         InteractionContextTriggerFor,
                         Activity,
-                        ActivityTitleComponent
+                        ActivityTitleComponent,
+                        ActivityBodyComponent,
+                        ActivityActionsComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -5877,7 +5983,8 @@
                         PopupInteractionContextComponent,
                         InteractionContextTriggerFor,
                         StringInputActivity,
-                        SelectInputActivity
+                        SelectInputActivity,
+                        ActivityBodyComponent
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -8946,6 +9053,7 @@
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
     exports.ActivityActionsComponent = ActivityActionsComponent;
+    exports.ActivityBodyComponent = ActivityBodyComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.ActivityRef = ActivityRef;