@coolon/angular-ui-powerups 16.1.0-aplpha.141 → 16.1.0-aplpha.143

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -40,9 +40,9 @@ import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4$2 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
-import { __decorate, __metadata, __param } from 'tslib';
 import * as i1$3 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Trace, proxify, ValueModel, Proxify, Logger, StoreInValueModel, Command, MutableListModel, StoreInListModel, ListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, ProxyRegistry, DirtyTrackingForm, DependsOnOptions, DelegatingCommand, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, proxify, ValueModel, Proxify, Logger, StoreInValueModel, Command, MutableListModel, StoreInListModel, ListModel, Disposable, Trace, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, ProxyRegistry, DirtyTrackingForm, DependsOnOptions, DelegatingCommand, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
+import { __decorate, __metadata, __param } from 'tslib';
 import * as i1 from '@angular/platform-browser';
 import escapeStringRegexp from 'escape-string-regexp';
 import { escape, isEmpty, isString, isFunction, isNil, isInteger, isObject, isEqual, join, last, first, uniq, findLast, isNumber, isNaN as isNaN$1 } from 'lodash-es';
@@ -167,12 +167,6 @@ class CommandDirective extends GarbageCollector {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandDirective, deps: [{ token: ElementRef }, { token: i2.MatButton, host: true, optional: true }, { token: i2$1.MatMenuItem, host: true, optional: true }, { token: i2$1.MatMenu, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: CommandDirective, selector: "[pectinCommand]", inputs: { pectinCommand: "pectinCommand", commandParameter: "commandParameter", preventDefault: "preventDefault" }, host: { listeners: { "click": "notifyClick($event)" } }, usesInheritance: true, ngImport: i0 });
 }
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], CommandDirective.prototype, "notifyClick", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandDirective, decorators: [{
             type: Directive,
             args: [{
@@ -6700,146 +6694,16 @@ class AbstractCellRenderer extends LoadableComponent {
  */
 
 /**
- * @example
- * <aup-activity-actions [confirmFace]="saveFace" [cancelFace]="cancelFace">
- * </aup-activity-actions>
- *
- *  <aup-activity-actions [faces]="{confirm: saveFace, cancel: cancelFace}">
- *  </aup-activity-actions>
- *
- * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
- * // style definitions
- * <aup-activity-actions [faces]="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"
- *     [faces]="I18n.aup.components.activityActions.styles.okCancelIcons">
- *     <span>This content will be between the two commands</span>
- * </aup-activity-actions>
+ * @deprecated, inject ActivityContext instead
  */
-class ActivityActionsComponent extends DisposableComponent {
-    confirmCommandComponent;
-    cancelCommandComponent;
-    #confirmCommand_accessor_storage = proxify((Command));
-    /**
-     * @deprecated activity actions now use the confirm command of the activity automatically
-     */
-    get confirmCommand() { return this.#confirmCommand_accessor_storage; }
-    set confirmCommand(value) { this.#confirmCommand_accessor_storage = value; }
-    #cancelCommand_accessor_storage = proxify((Command));
-    /**
-     * @deprecated activity actions now use the cancel command of the activity automatically
-     */
-    get cancelCommand() { return this.#cancelCommand_accessor_storage; }
-    set cancelCommand(value) { this.#cancelCommand_accessor_storage = value; }
-    set faces(faces) {
-        this.confirmFace = faces.confirm;
-        this.cancelFace = faces.cancel;
-    }
-    confirmFace;
-    cancelFace;
-    /**
-     * @deprecated use #faces instead.
-     */
-    set style(style) {
-        this.faces = style;
-    }
-    layout = ActivityActionsComponent.Layout.BLOCK;
-    align = ActivityActionsComponent.Align.STRETCH;
-    alignContent = ActivityActionsComponent.AlignContent.CENTER;
-    constructor() {
-        super();
-    }
-    hasConfirmFace() {
-        return !!this.confirmFace;
-    }
-    hasCancelFace() {
-        return !!this.cancelFace;
-    }
-    initCommands(activity) {
-        this.confirmCommand = activity.confirmCommand;
-        this.cancelCommand = activity.cancelCommand;
-        this.cdr.detectChanges();
-    }
-    focusConfirm() {
-        this.confirmCommandComponent.requestFocus();
-    }
-    focusCancel() {
-        this.cancelCommandComponent.requestFocus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align", alignContent: "alignContent" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align", "attr.align-content": "this.alignContent" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px);grid-gap:var(--resolved-activity-actions-gap)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}:host .cancel{grid-area:cancel}:host .confirm{grid-area:confirm}:host .content{display:flex;flex-direction:row;align-items:center}:host[align-content=start] .content{justify-items:start}:host[align-content=end]{justify-items:end}:host[align-content=center]{justify-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
-}
-__decorate([
-    Proxify(),
-    __metadata("design:type", Object)
-], ActivityActionsComponent.prototype, "confirmCommand", null);
-__decorate([
-    Proxify(),
-    __metadata("design:type", Object)
-], ActivityActionsComponent.prototype, "cancelCommand", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px);grid-gap:var(--resolved-activity-actions-gap)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}:host .cancel{grid-area:cancel}:host .confirm{grid-area:confirm}:host .content{display:flex;flex-direction:row;align-items:center}:host[align-content=start] .content{justify-items:start}:host[align-content=end]{justify-items:end}:host[align-content=center]{justify-items:center}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { confirmCommandComponent: [{
-                type: ViewChild,
-                args: ["confirmCommandComponent"]
-            }], cancelCommandComponent: [{
-                type: ViewChild,
-                args: ["cancelCommandComponent"]
-            }], confirmCommand: [{
-                type: Input
-            }], cancelCommand: [{
-                type: Input
-            }], faces: [{
-                type: Input
-            }], confirmFace: [{
-                type: Input
-            }], cancelFace: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.layout']
-            }], align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.align']
-            }], alignContent: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.align-content']
-            }] } });
-(function (ActivityActionsComponent) {
-    ActivityActionsComponent.Layout = Enum({
-        INLINE: 'inline',
-        BLOCK: 'block'
-    });
-    ActivityActionsComponent.Align = Enum({
-        START: 'start',
-        STRETCH: 'stretch',
-        END: 'end'
-    });
-    ActivityActionsComponent.AlignContent = Enum({
-        START: 'start',
-        CENTER: 'center',
-        END: 'end'
-    });
-})(ActivityActionsComponent || (ActivityActionsComponent = {}));
-
 const INTERACTION_CONTEXT_PROVIDER = new InjectionToken("INTERACTION_CONTEXT_PROVIDER");
 
 const ACTIVITY_DATA = new InjectionToken("InteractionActivityData");
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class Activity extends LoadableComponent {
+    /**
+     * @deprecated, inject ActivityContext instead
+     */
     static asInteractionContextProvider() {
         return {
             provide: INTERACTION_CONTEXT_PROVIDER, useExisting: this
@@ -6848,10 +6712,10 @@ class Activity extends LoadableComponent {
     activityData = inject(ACTIVITY_DATA);
     activityReadyListeners = new EventListenerList();
     _busy$ = this.registerDisposable(new DelegatingValueModel().withDefault(false));
+    #disableClose$ = this.registerDisposable(new DelegatingValueModel().withDefault(false));
     _focused$ = this.registerDisposable(new DelegatingValueModel());
     _activityContext;
     _ready$ = new MutableValueModel(false);
-    activityActions;
     #confirmCommand_accessor_storage = proxify((Command));
     get confirmCommand() { return this.#confirmCommand_accessor_storage; }
     set confirmCommand(value) { this.#confirmCommand_accessor_storage = value; }
@@ -6878,14 +6742,6 @@ class Activity extends LoadableComponent {
             this.notifyActivityReady();
         });
     }
-    ngAfterViewInit() {
-        if (this.activityActions) {
-            this.initialiseActivityAction(this.activityActions);
-        }
-    }
-    initialiseActivityAction(activityActions) {
-        activityActions.initCommands(this);
-    }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
         return this._interactionContext;
@@ -6901,6 +6757,9 @@ class Activity extends LoadableComponent {
         this._ready$.value = true;
     }
     onActivityReady(callback) {
+        if (this.ready$.value) {
+            callback(this);
+        }
         return this.activityReadyListeners.add(callback);
     }
     autoFocus(focusable) {
@@ -6919,6 +6778,9 @@ class Activity extends LoadableComponent {
     get busy$() {
         return this._busy$.readonly$;
     }
+    get disableClose$() {
+        return this.#disableClose$.readonly$;
+    }
     get focused$() {
         return this._focused$.readonly$;
     }
@@ -6928,6 +6790,12 @@ class Activity extends LoadableComponent {
     isBusy() {
         return this._busy$.value;
     }
+    get disableClose() {
+        return this.#disableClose$.value;
+    }
+    disableCloseWhile(condition) {
+        this.#disableClose$.setDelegate(condition);
+    }
     isInitialised() {
         return !!this._activityContext;
     }
@@ -6935,7 +6803,7 @@ class Activity extends LoadableComponent {
         return this.interactionContext;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: Activity, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
 }
 __decorate([
     Proxify(),
@@ -6950,10 +6818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{
                     template: "",
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { activityActions: [{
-                type: ViewChild,
-                args: [ActivityActionsComponent]
-            }], confirmCommand: [], cancelCommand: [], class: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { confirmCommand: [], cancelCommand: [], class: [{
                 type: HostBinding,
                 args: ["class"]
             }], isFocused: [{
@@ -6978,36 +6843,11 @@ var Alert;
     Alert.getColor = getColor;
 })(Alert || (Alert = {}));
 
-const ALERT_CONFIG = new InjectionToken('AlertConfig');
-class AbstractDialogComponent extends Activity {
-    config;
-    confirmFace;
-    title;
-    content;
-    color;
-    constructor(config) {
-        super();
-        this.config = config;
-        assert.notNil(config);
-        this.title = Alert.getTitle(config);
-        this.color = this.checkColor(Alert.getColor(config));
-        this.content = Alert.getContent(config);
-        this.confirmFace = {
-            text: () => config.ok(),
-            color: () => this.color || 'primary',
-            style: () => 'raised'
-        };
-        this.onActivityReady(() => {
-            if (this.activityActions) {
-                this.isDestructive() ? this.activityActions.focusCancel() : this.activityActions.focusConfirm();
-            }
-        });
-    }
-    getConfig() {
-        return lang$1.abstractMethod(this.constructor);
-    }
-    checkColor(rawColor) {
-        if (this.isDestructive()) {
+var Confirm;
+(function (Confirm) {
+    function checkColor(config) {
+        const rawColor = Alert.getColor(config);
+        if (isDestructive(config)) {
             return 'warn';
         }
         else {
@@ -7020,8 +6860,20 @@ class AbstractDialogComponent extends Activity {
             }
         }
     }
-    isDestructive() {
-        return isFunction(this.config['destructive']) && this.config["destructive"]();
+    Confirm.checkColor = checkColor;
+    function isDestructive(config) {
+        return isFunction(config['destructive']) && config["destructive"]();
+    }
+    Confirm.isDestructive = isDestructive;
+})(Confirm || (Confirm = {}));
+
+const ALERT_CONFIG = new InjectionToken('AlertConfig');
+class AbstractDialogComponent extends Activity {
+    config;
+    constructor(config) {
+        super();
+        this.config = config;
+        assert.notNil(config);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
@@ -7041,9 +6893,6 @@ class AbstractConfirmDialogComponent extends AbstractDialogComponent {
     confirmClass = "aup-confirm-activity";
     constructor(config) {
         super(config);
-        this.cancelFace = {
-            text: () => config.cancel()
-        };
         this.cancelCommand = Command.create(() => {
             return this.cancel();
         });
@@ -7056,7 +6905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: Confirm, decorators: [{
                     type: Inject,
                     args: [ALERT_CONFIG]
                 }] }]; }, propDecorators: { confirmClass: [{
@@ -7064,6 +6913,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ["class"]
             }] } });
 
+class ActivityContext {
+}
+
+/**
+ * @example
+ * <aup-activity-actions [confirmFace]="saveFace" [cancelFace]="cancelFace">
+ * </aup-activity-actions>
+ *
+ *  <aup-activity-actions [faces]="{confirm: saveFace, cancel: cancelFace}">
+ *  </aup-activity-actions>
+ *
+ * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
+ * // style definitions
+ * <aup-activity-actions [faces]="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"
+ *     [faces]="I18n.aup.components.activityActions.styles.okCancelIcons">
+ *     <span>This content will be between the two commands</span>
+ * </aup-activity-actions>
+ */
+class ActivityActionsComponent extends DisposableComponent {
+    activityContext;
+    confirmCommandComponent;
+    cancelCommandComponent;
+    #confirmCommand_accessor_storage = proxify((Command));
+    /**
+     * @deprecated activity actions now use the confirm command of the activity automatically
+     */
+    get confirmCommand() { return this.#confirmCommand_accessor_storage; }
+    set confirmCommand(value) { this.#confirmCommand_accessor_storage = value; }
+    #cancelCommand_accessor_storage = proxify((Command));
+    /**
+     * @deprecated activity actions now use the cancel command of the activity automatically
+     */
+    get cancelCommand() { return this.#cancelCommand_accessor_storage; }
+    set cancelCommand(value) { this.#cancelCommand_accessor_storage = value; }
+    set faces(faces) {
+        this.confirmFace = faces.confirm;
+        this.cancelFace = faces.cancel;
+    }
+    confirmFace;
+    cancelFace;
+    /**
+     * @deprecated use #faces instead.
+     */
+    set style(style) {
+        this.faces = style;
+    }
+    layout = ActivityActionsComponent.Layout.BLOCK;
+    align = ActivityActionsComponent.Align.STRETCH;
+    alignContent = ActivityActionsComponent.AlignContent.CENTER;
+    constructor(activityContext) {
+        super();
+        this.activityContext = activityContext;
+        console.log(activityContext);
+        if (activityContext) {
+            this.confirmCommand = activityContext.confirmCommand;
+            this.cancelCommand = activityContext.cancelCommand;
+        }
+    }
+    hasConfirmFace() {
+        return !!this.confirmFace;
+    }
+    hasCancelFace() {
+        return !!this.cancelFace;
+    }
+    focusConfirm() {
+        this.confirmCommandComponent.requestFocus();
+    }
+    focusCancel() {
+        this.cancelCommandComponent.requestFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: ActivityContext, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align", alignContent: "alignContent" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align", "attr.align-content": "this.alignContent" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px);grid-gap:var(--resolved-activity-actions-gap)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}:host .cancel{grid-area:cancel}:host .confirm{grid-area:confirm}:host .content{display:flex;flex-direction:row;align-items:center}:host[align-content=start] .content{justify-items:start}:host[align-content=end]{justify-items:end}:host[align-content=center]{justify-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
+}
+__decorate([
+    Proxify(),
+    __metadata("design:type", Object)
+], ActivityActionsComponent.prototype, "confirmCommand", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", Object)
+], ActivityActionsComponent.prototype, "cancelCommand", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px);grid-gap:var(--resolved-activity-actions-gap)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}:host .cancel{grid-area:cancel}:host .confirm{grid-area:confirm}:host .content{display:flex;flex-direction:row;align-items:center}:host[align-content=start] .content{justify-items:start}:host[align-content=end]{justify-items:end}:host[align-content=center]{justify-items:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: ActivityContext, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { confirmCommandComponent: [{
+                type: ViewChild,
+                args: ["confirmCommandComponent"]
+            }], cancelCommandComponent: [{
+                type: ViewChild,
+                args: ["cancelCommandComponent"]
+            }], confirmCommand: [{
+                type: Input
+            }], cancelCommand: [{
+                type: Input
+            }], faces: [{
+                type: Input
+            }], confirmFace: [{
+                type: Input
+            }], cancelFace: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.layout']
+            }], align: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.align']
+            }], alignContent: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.align-content']
+            }] } });
+(function (ActivityActionsComponent) {
+    ActivityActionsComponent.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+    ActivityActionsComponent.Align = Enum({
+        START: 'start',
+        STRETCH: 'stretch',
+        END: 'end'
+    });
+    ActivityActionsComponent.AlignContent = Enum({
+        START: 'start',
+        CENTER: 'center',
+        END: 'end'
+    });
+})(ActivityActionsComponent || (ActivityActionsComponent = {}));
+
 class ActivityBodyComponent extends DisposableComponent {
     fullWidth = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -9647,7 +9639,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['attr.color']
             }] } });
 
+class AlertRendererComponent extends DisposableComponent {
+    config;
+    #confirmCommand_accessor_storage = proxify(Command);
+    get confirmCommand() { return this.#confirmCommand_accessor_storage; }
+    set confirmCommand(value) { this.#confirmCommand_accessor_storage = value; }
+    confirmFace;
+    title;
+    content;
+    color;
+    constructor(activityContext) {
+        super();
+        this.onInit(() => {
+            assert.notNil(this.config);
+            this.title = Alert.getTitle(this.config);
+            this.color = Confirm.checkColor(this.config);
+            this.content = Alert.getContent(this.config);
+            this.confirmFace = {
+                text: () => this.config.ok(),
+                color: () => this.color || 'primary',
+                style: () => 'raised'
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AlertRendererComponent, deps: [{ token: ActivityContext, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AlertRendererComponent, selector: "aup-alert-renderer", inputs: { config: "config", confirmCommand: "confirmCommand" }, usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+}
+__decorate([
+    Proxify(),
+    __metadata("design:type", Command)
+], AlertRendererComponent.prototype, "confirmCommand", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AlertRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-alert-renderer', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n" }]
+        }], ctorParameters: function () { return [{ type: ActivityContext, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { config: [{
+                type: Input
+            }], confirmCommand: [{
+                type: Input
+            }] } });
+
 class AlertDialogComponent extends AbstractDialogComponent {
+    confirmFace;
+    title;
+    content;
+    color;
     constructor(alert) {
         super(alert);
         this.confirmCommand = Command.create(() => {
@@ -9655,16 +9692,56 @@ class AlertDialogComponent extends AbstractDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AlertDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AlertDialogComponent, selector: "aup-alert-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AlertDialogComponent, selector: "aup-alert-dialog", usesInheritance: true, ngImport: i0, template: "<aup-alert-renderer [config]=\"activityData\"></aup-alert-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: AlertRendererComponent, selector: "aup-alert-renderer", inputs: ["config", "confirmCommand"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-alert-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'aup-alert-dialog', template: "<aup-alert-renderer [config]=\"activityData\"></aup-alert-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: Alert, decorators: [{
                     type: Inject,
                     args: [ACTIVITY_DATA]
                 }] }]; } });
 
+class ConfirmRendererComponent extends AlertRendererComponent {
+    #cancelCommand_accessor_storage = proxify(Command);
+    get cancelCommand() { return this.#cancelCommand_accessor_storage; }
+    set cancelCommand(value) { this.#cancelCommand_accessor_storage = value; }
+    activityActions;
+    cancelFace;
+    constructor(activityContext) {
+        super(activityContext);
+        if (activityContext) {
+            activityContext.onActivityReady(() => {
+                if (this.activityActions) {
+                    Confirm.isDestructive(this.config) ? this.activityActions.focusCancel() : this.activityActions.focusConfirm();
+                }
+            });
+        }
+        this.onInit(() => {
+            this.cancelFace = {
+                text: () => this.config.cancel(),
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmRendererComponent, deps: [{ token: ActivityContext, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmRendererComponent, selector: "aup-confirm-renderer", inputs: { cancelCommand: "cancelCommand" }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+}
+__decorate([
+    Proxify(),
+    __metadata("design:type", Command)
+], ConfirmRendererComponent.prototype, "cancelCommand", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-confirm-renderer', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n" }]
+        }], ctorParameters: function () { return [{ type: ActivityContext, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { cancelCommand: [{
+                type: Input
+            }], activityActions: [{
+                type: ViewChild,
+                args: [ActivityActionsComponent]
+            }] } });
+
 class ConfirmThenDialogComponent extends AbstractConfirmDialogComponent {
     constructor(config) {
         super(config.confirm);
@@ -9675,11 +9752,11 @@ class ConfirmThenDialogComponent extends AbstractConfirmDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmThenDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmThenDialogComponent, selector: "aup-confirmation-then-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmThenDialogComponent, selector: "aup-confirmation-then-dialog", usesInheritance: true, ngImport: i0, template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ConfirmRendererComponent, selector: "aup-confirm-renderer", inputs: ["cancelCommand"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmThenDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-confirmation-then-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'aup-confirmation-then-dialog', template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ACTIVITY_DATA]
@@ -9699,11 +9776,11 @@ class ConfirmThenExecuteDialogComponent extends AbstractConfirmDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmThenExecuteDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmThenExecuteDialogComponent, selector: "aup-confirmation-execute-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmThenExecuteDialogComponent, selector: "aup-confirmation-execute-dialog", usesInheritance: true, ngImport: i0, template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ConfirmRendererComponent, selector: "aup-confirm-renderer", inputs: ["cancelCommand"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmThenExecuteDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-confirmation-execute-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'aup-confirmation-execute-dialog', template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ACTIVITY_DATA]
@@ -9719,12 +9796,12 @@ class ConfirmationDialogComponent extends AbstractConfirmDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmationDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align", "alignContent"] }, { kind: "component", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { kind: "component", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfirmationDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ConfirmRendererComponent, selector: "aup-confirm-renderer", inputs: ["cancelCommand"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-confirmation-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+            args: [{ selector: 'aup-confirmation-dialog', template: "<aup-confirm-renderer [config]=\"config\" [confirmCommand]=\"confirmCommand\" [cancelCommand]=\"cancelCommand\"></aup-confirm-renderer>\n", styles: [":host{display:block}.mat-mdc-dialog-content{margin:0;padding:0}.mat-mdc-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () { return [{ type: Confirm, decorators: [{
                     type: Inject,
                     args: [ACTIVITY_DATA]
                 }] }]; } });
@@ -9835,12 +9912,42 @@ class ActivityRef {
     }
 }
 
+const INTERACTION_CONTEXT = new InjectionToken('interactionContext');
+
+class ActivityContextImpl extends ActivityContext {
+    activityContainer;
+    readyListeners = [];
+    confirmCommand = new DelegatingCommand();
+    cancelCommand = new DelegatingCommand();
+    activity;
+    constructor(activityContainer) {
+        super();
+        this.activityContainer = activityContainer;
+    }
+    init(activity) {
+        this.activity = activity;
+        this.confirmCommand.setDelegate(activity.confirmCommand);
+        this.cancelCommand.setDelegate(activity.cancelCommand);
+        this.readyListeners.forEach((listener) => listener(this.activity));
+    }
+    get interactionContext() {
+        return this.activityContainer;
+    }
+    onActivityReady(callback) {
+        if (this.activity) {
+            this.activity.onActivityReady(callback);
+        }
+        else {
+            this.readyListeners.push(callback);
+        }
+    }
+}
 /**
  * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
  * external service.
  */
 class ActivityOutletComponent {
-    componentFactoryResolver;
+    interactionContext;
     viewContainerRef;
     injector;
     activityComponentRef;
@@ -9857,37 +9964,39 @@ class ActivityOutletComponent {
     get activityRef() {
         return this._activityRef;
     }
-    constructor(componentFactoryResolver, viewContainerRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
+    constructor(interactionContext, viewContainerRef, injector) {
+        this.interactionContext = interactionContext;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
     }
     loadActivity(activityRef) {
+        this.viewContainerRef.clear();
+        const activityContext = new ActivityContextImpl(this.interactionContext);
         const injector = Injector.create({
             providers: [
-                {
-                    provide: ACTIVITY_DATA,
-                    useValue: activityRef.activityData
-                }
+                { provide: ACTIVITY_DATA, useValue: activityRef.activityData },
+                { provide: ActivityContext, useValue: activityContext },
+                { provide: INTERACTION_CONTEXT_PROVIDER, useValue: activityContext }
             ],
             parent: this.injector
         });
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityRef.activityClass);
-        this.viewContainerRef.clear();
-        // console.log(`creating component -> ${activityRef.activityClass.name}`);
-        this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
+        this.activityComponentRef = this.viewContainerRef.createComponent(activityRef.activityClass, { index: 0, injector });
+        activityContext.init(this.activityComponentRef.instance);
         this.activityRef.notifyActivityCreated(this.activityComponentRef.instance, this.nestedInteractionContext);
     }
     get component() {
         return this.activityComponentRef.instance;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityOutletComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityOutletComponent, deps: [{ token: INTERACTION_CONTEXT }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: { nestedInteractionContext: "nestedInteractionContext", activityRef: "activityRef" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-activity-outlet', template: '', styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { nestedInteractionContext: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [INTERACTION_CONTEXT]
+                }] }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { nestedInteractionContext: [{
                 type: Input
             }], activityRef: [{
                 type: Input
@@ -9972,6 +10081,9 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         }
         return findLast(this.activityRefs, tab => !tab.isComplete());
     }
+    get disableClose() {
+        return this.getActiveActivityRef().activity.disableClose;
+    }
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
      * there is still another activity running.
@@ -10127,11 +10239,15 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         this.finaliseActivityStates();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight", animationDuration: "animationDuration" }, providers: [
+            { provide: INTERACTION_CONTEXT, useClass: ActivityContainerComponent },
+        ], viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-activity-container", template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
+            args: [{ selector: "aup-activity-container", providers: [
+                        { provide: INTERACTION_CONTEXT, useClass: ActivityContainerComponent },
+                    ], template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { dynamicHeight: [{
                 type: Input
             }], tabs: [{
@@ -10242,8 +10358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class.active']
             }] } });
 
-const INTERACTION_CONTEXT = new InjectionToken('interactionContext');
-
 const cssDurationRegex$1 = /(\d+)(m?s)/;
 /**
  * @example
@@ -11433,7 +11547,9 @@ class InteractionModule {
             AddCardActivityComponent,
             InlineStringEditorComponent,
             AbstractDialogComponent,
-            AbstractConfirmDialogComponent], imports: [CommonModule,
+            AbstractConfirmDialogComponent,
+            ConfirmRendererComponent,
+            AlertRendererComponent], imports: [CommonModule,
             MatButtonModule,
             MatDialogModule,
             MatTabsModule,
@@ -11461,9 +11577,11 @@ class InteractionModule {
             ModalActivityTriggerComponent,
             AddCardActivityComponent,
             InlineStringEditorComponent,
-            SlideDownInteractionContextComponent] });
+            SlideDownInteractionContextComponent,
+            ConfirmRendererComponent,
+            AlertRendererComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InteractionModule, providers: [
-            InteractionService
+            InteractionService,
             // {
             //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
             // }
@@ -11497,7 +11615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         FormsModule,
                         MatInputModule,
                         MatFormFieldModule,
-                        A11yModule
+                        A11yModule,
                     ],
                     declarations: [
                         ActivityContainerComponent,
@@ -11527,6 +11645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         InlineStringEditorComponent,
                         AbstractDialogComponent,
                         AbstractConfirmDialogComponent,
+                        ConfirmRendererComponent,
+                        AlertRendererComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -11546,13 +11666,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         AddCardActivityComponent,
                         InlineStringEditorComponent,
                         SlideDownInteractionContextComponent,
+                        ConfirmRendererComponent,
+                        AlertRendererComponent
                     ],
                     providers: [
-                        InteractionService
+                        InteractionService,
                         // {
                         //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                         // }
-                    ]
+                    ],
                 }]
         }] });
 
@@ -12316,7 +12438,7 @@ class DialogInteractionContext extends AbstractInteractionContext {
         const config = {
             ...this.config,
             ...{
-                disableClose,
+                disableClose: true,
                 panelClass: 'dialog-interaction-context'
             }
         };
@@ -12328,6 +12450,11 @@ class DialogInteractionContext extends AbstractInteractionContext {
         // we need to check if our onDone/onCancel methods above we called or if we were
         // closed by the user clicking the backdrop.  If the later then we need to cancel our
         // activity.
+        matDialogRef.backdropClick().subscribe(event => {
+            if (this.activityContainer.isActive() && (!this.activityContainer.disableClose && !disableClose)) {
+                activityContainer.cancelActiveActivity();
+            }
+        });
         matDialogRef.afterClosed().subscribe(promiseAlreadyFinished => {
             if (activityContainer.isActive()) {
                 activityContainer.cancelActiveActivity();
@@ -12813,5 +12940,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractCellRenderer, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, ButtonRendererComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellFooterPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FOOTER_CELL_RENDERER_PORTAL, FileDownloadComponent, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, FooterRowModel, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, INTERACTION_CONTEXT, INTERACTION_CONTEXT_PROVIDER, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, SlideDownInteractionContextComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableFooterRow, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowAttributesDirective, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideDownWhenOpenAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
+export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractCellRenderer, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityContext, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AlertRendererComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, ButtonRendererComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellFooterPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, Confirm, ConfirmRendererComponent, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FOOTER_CELL_RENDERER_PORTAL, FileDownloadComponent, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, FooterRowModel, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, INTERACTION_CONTEXT, INTERACTION_CONTEXT_PROVIDER, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, SlideDownInteractionContextComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableFooterRow, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowAttributesDirective, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideDownWhenOpenAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map