@coolon/angular-ui-powerups 13.2.1 → 13.3.0

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

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, EventEmitter, ViewChild, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
+import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$8 from '@angular/material/form-field';
@@ -20,7 +20,7 @@ import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
 import * as i1$9 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/material/divider';
@@ -40,7 +40,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$5 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$7 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, Functions, MultipleSelectionModel, AbstractComputedListModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, Trace, Deferred } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Trace, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, Functions, MultipleSelectionModel, AbstractComputedListModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred } from '@coolon/pectin';
 import { __decorate, __param, __metadata } from 'tslib';
 import * as i1$2 from '@angular/platform-browser';
 import * as _ from 'lodash';
@@ -1075,9 +1075,12 @@ class CommandComponent extends PopupAwareComponent {
     getFace() {
         return this.face;
     }
+    tryAndFocus() {
+        this.button.focus();
+    }
 }
 CommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, viewQueries: [{ propertyName: "button", first: true, predicate: MatButton, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -1098,6 +1101,12 @@ __decorate([
     StoreInValueModel('busyFaceModel'),
     __metadata("design:type", Object)
 ], CommandComponent.prototype, "busyFace", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CommandComponent.prototype, "tryAndFocus", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-command', template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"] }]
@@ -1121,7 +1130,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }, {
                 type: HostBinding,
                 args: ["class"]
-            }] } });
+            }], button: [{
+                type: ViewChild,
+                args: [MatButton]
+            }], tryAndFocus: [] } });
 
 /**
  *
@@ -4988,9 +5000,15 @@ class ActivityActionsComponent extends DisposableComponent {
         this.cancelCommand = activity.cancelCommand;
         this.cdr.detectChanges();
     }
+    focusConfirm() {
+        this.confirmCommandComponent.tryAndFocus();
+    }
+    focusCancel() {
+        this.cancelCommandComponent.tryAndFocus();
+    }
 }
 ActivityActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, usesInheritance: true, ngImport: i0, 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{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}: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)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, 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=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\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", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}: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)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -5001,8 +5019,14 @@ __decorate([
 ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", 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=\"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{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}: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)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommand: [{
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\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<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-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)}: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)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommandComponent: [{
+                type: ViewChild,
+                args: ["confirmCommandComponent"]
+            }], cancelCommandComponent: [{
+                type: ViewChild,
+                args: ["cancelCommandComponent"]
+            }], confirmCommand: [{
                 type: Input
             }], cancelCommand: [{
                 type: Input
@@ -5037,30 +5061,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
     });
 })(ActivityActionsComponent || (ActivityActionsComponent = {}));
 
-const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
+const ACTIVITY_DATA = new InjectionToken("InteractionActivityData");
 class Activity extends DisposableComponent {
     constructor() {
         super();
-        this._busyModel = this.registerDisposable(new DelegatingValueModel().withDefault(false));
-        this._focusedModel = this.registerDisposable(new DelegatingValueModel());
-        this.class = 'aup-activity';
+        this.activityReadyListeners = new EventListenerList();
+        this._busy$ = this.registerDisposable(new DelegatingValueModel().withDefault(false));
+        this._focused$ = this.registerDisposable(new DelegatingValueModel());
+        this.class = "aup-activity";
         this.busyWhile(this.confirmCommand.busy);
     }
     get isFocused() {
-        return this._focusedModel.value;
+        return this._focused$.value;
     }
     initialise(nestedInteractionContext, activityContext) {
         const { chain, when } = Dsl.disposeWith(this);
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
-        this._focusedModel.setDelegate(activityContext.focused);
-        when(this._focusedModel).becomesTruthy(() => {
-            this.onActivityReady();
+        this._focused$.setDelegate(activityContext.focused);
+        when(this._focused$).becomesTruthy(() => {
+            this.notifyActivityReady();
         });
     }
     ngAfterViewInit() {
-        this.activityActions?.initCommands(this);
+        if (this.activityActions) {
+            this.initialiseActivityAction(this.activityActions);
+        }
+    }
+    initialiseActivityAction(activityActions) {
+        activityActions.initCommands(this);
     }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
@@ -5072,27 +5102,30 @@ class Activity extends DisposableComponent {
     cancel(error) {
         this._activityContext.onCancel(error);
     }
-    // @Trace()
-    onActivityReady() {
+    notifyActivityReady() {
+        this.activityReadyListeners.fire(l => l(this));
     }
-    get busy() {
-        return this._busyModel.readonly;
+    onActivityReady(callback) {
+        return this.activityReadyListeners.add(callback);
     }
-    get focused() {
-        return this._focusedModel.readonly;
+    get busy$() {
+        return this._busy$.readonly;
+    }
+    get focused$() {
+        return this._focused$.readonly;
     }
     busyWhile(busyModel) {
-        this._busyModel.setDelegate(busyModel);
+        this._busy$.setDelegate(busyModel);
     }
     isBusy() {
-        return this._busyModel.value;
+        return this._busy$.value;
     }
     isInitialised() {
         return !!this._activityContext;
     }
 }
 Activity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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 });
+Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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 });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -5104,17 +5137,17 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: ""
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { activityActions: [{
                 type: ViewChild,
                 args: [ActivityActionsComponent]
             }], confirmCommand: [], cancelCommand: [], class: [{
                 type: HostBinding,
-                args: ['class']
+                args: ["class"]
             }], isFocused: [{
                 type: HostBinding,
-                args: ['attr.focused']
+                args: ["attr.focused"]
             }] } });
 
 var Alert;
@@ -5148,6 +5181,11 @@ class AbstractDialogComponent extends Activity {
             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);
@@ -7130,7 +7168,7 @@ class ActivityRef {
             },
             focused: this.focusedModel.readonly
         });
-        this._activityBusy.setDelegate(this._activity.busy);
+        this._activityBusy.setDelegate(this._activity.busy$);
     }
     finishActivity(resolveOrReject) {
         assert.isFalsey(this.isComplete());
@@ -7182,7 +7220,10 @@ class ActivityOutletComponent {
     loadActivity(activityRef) {
         const injector = Injector.create({
             providers: [
-                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
+                {
+                    provide: ACTIVITY_DATA,
+                    useValue: activityRef.activityData
+                }
             ],
             parent: this.injector
         });
@@ -7991,13 +8032,11 @@ class InputActivity extends Activity {
             this.cancel();
         });
         this.busyWhile(this.confirmCommand.busy);
+        this.onActivityReady(() => this.valueModel.focusContext.requestFocus());
     }
     get layout() {
         return this.data?.layout ?? InputActivity.Layout.BLOCK;
     }
-    onActivityReady() {
-        this.valueModel.focusContext.requestFocus();
-    }
     get additionalCssClassName() {
         return this.data.cssClassName ?? '';
     }