@coolon/angular-ui-powerups 0.0.60 → 0.0.62

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

@@ -1,18 +1,18 @@
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, Optional, ɵɵdefineInjectable, ɵɵinject, NgModule, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgressSpinnerModule, MatInputModule, MatFormFieldModule, MatSelectModule } from '@angular/material';
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __assign, __awaiter, __generator } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, Trace, DelegatingValueModel, MutableListModel, StoreInValueModel, Binding, MutableValueModel, Guard, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Guard, OptionsHelper, ValueHolder, Trace } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
+import { Router, RouterModule, NavigationEnd, NavigationError } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router, RouterModule } from '@angular/router';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
@@ -796,20 +796,46 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-var INTERACTION_CONTEXT = new InjectionToken('InteractionContext');
 /**
  * @abstract
  */
 var  /**
  * @abstract
  */
-InteractionContext = /** @class */ (function () {
+InteractionContext = /** @class */ (function (_super) {
+    __extends(InteractionContext, _super);
     function InteractionContext() {
+        return _super.call(this) || this;
     }
+    /**
+     * Returns true if an activity is currently running.
+     */
+    /**
+     * Returns true if an activity is currently running.
+     * @return {?}
+     */
+    InteractionContext.prototype.isActive = /**
+     * Returns true if an activity is currently running.
+     * @return {?}
+     */
+    function () {
+        return this.activityList.length > 0;
+    };
     return InteractionContext;
-}());
+}(GarbageCollector));
 if (false) {
+    /**
+     * Returns the activity that is currently active.
+     * This model is only updated in the next tick after the view has been updated.
+     * @type {?}
+     */
+    InteractionContext.prototype.currentActivity;
+    /**
+     * Returns the current list of activities that are in progress.
+     * This model is only updated in the next tick after the view has been updated.
+     * @type {?}
+     */
+    InteractionContext.prototype.activityList;
     /**
      * @abstract
      * @template D, R, E
@@ -824,6 +850,16 @@ if (false) {
      * @return {?}
      */
     InteractionContext.prototype.confirm = function (confirm) { };
+    /**
+     * Presents the confirmation to the user and runs the activity only if the user confirms.
+     * @abstract
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType the activity to run if confirmed.
+     * @param {?=} data the activity data.
+     * @return {?}
+     */
+    InteractionContext.prototype.confirmThen = function (confirm, activityType, data) { };
     /**
      * @abstract
      * @param {?} alert
@@ -851,6 +887,16 @@ if (false) {
      * @return {?}
      */
     Activity.prototype.initialise = function (activityContext) { };
+    /**
+     * @param {?} result
+     * @return {?}
+     */
+    Activity.prototype.done = function (result) { };
+    /**
+     * @param {?} e
+     * @return {?}
+     */
+    Activity.prototype.cancel = function (e) { };
 }
 
 /**
@@ -917,6 +963,16 @@ var ActivityOutletComponent = /** @class */ (function () {
         this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
         this.activityComponentRef.instance.initialise(activityContext);
     };
+    Object.defineProperty(ActivityOutletComponent.prototype, "component", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.activityComponentRef.instance;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @param {?} alert
      * @return {?}
@@ -939,6 +995,23 @@ var ActivityOutletComponent = /** @class */ (function () {
     function (confirm) {
         return this.interactionContext.confirm(confirm);
     };
+    /**
+     * @template D1, R1, E1
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    ActivityOutletComponent.prototype.confirmThen = /**
+     * @template D1, R1, E1
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    function (confirm, activityType, data) {
+        return this.interactionContext.confirmThen(confirm, activityType, data);
+    };
     /**
      * @template D1, R1, E1
      * @param {?} activityType
@@ -982,12 +1055,6 @@ var ActivityOutletComponent = /** @class */ (function () {
         interactionContext: [{ type: Input }],
         activityContext: [{ type: Input }]
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ActivityOutletComponent.prototype, "loadActivity", null);
     return ActivityOutletComponent;
 }());
 if (false) {
@@ -1015,65 +1082,6 @@ if (false) {
     ActivityOutletComponent.prototype.injector;
     /* Skipping unhandled member: ;*/
 }
-(function (ActivityOutletComponent) {
-    /**
-     * @template D, R, E
-     */
-    var /**
-     * @template D, R, E
-     */
-    OutletInteractionContext = /** @class */ (function () {
-        function OutletInteractionContext(context) {
-            this.context = context;
-        }
-        /**
-         * @param {?} alert
-         * @return {?}
-         */
-        OutletInteractionContext.prototype.alert = /**
-         * @param {?} alert
-         * @return {?}
-         */
-        function (alert) {
-            return lang.notImplemented();
-        };
-        /**
-         * @param {?} confirm
-         * @return {?}
-         */
-        OutletInteractionContext.prototype.confirm = /**
-         * @param {?} confirm
-         * @return {?}
-         */
-        function (confirm) {
-            return lang.notImplemented();
-        };
-        /**
-         * @template D1, R1, E1
-         * @param {?} activityType
-         * @param {?=} data
-         * @return {?}
-         */
-        OutletInteractionContext.prototype.startActivity = /**
-         * @template D1, R1, E1
-         * @param {?} activityType
-         * @param {?=} data
-         * @return {?}
-         */
-        function (activityType, data) {
-            return lang.notImplemented();
-        };
-        return OutletInteractionContext;
-    }());
-    ActivityOutletComponent.OutletInteractionContext = OutletInteractionContext;
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        OutletInteractionContext.prototype.context;
-    }
-})(ActivityOutletComponent || (ActivityOutletComponent = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -1082,7 +1090,10 @@ if (false) {
 /**
  * @template D, R, E
  */
-var AbstractActivity = /** @class */ (function (_super) {
+var  /**
+ * @template D, R, E
+ */
+AbstractActivity = /** @class */ (function (_super) {
     __extends(AbstractActivity, _super);
     function AbstractActivity() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -1165,12 +1176,6 @@ var AbstractActivity = /** @class */ (function (_super) {
     function () {
         return this._busyModel.value;
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], AbstractActivity.prototype, "initialise", null);
     return AbstractActivity;
 }(DisposableComponent));
 if (false) {
@@ -1223,6 +1228,106 @@ if (false) {
     AlertDialogComponent.prototype.alert;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template D, R, E
+ */
+var ConfirmThenDialogComponent = /** @class */ (function (_super) {
+    __extends(ConfirmThenDialogComponent, _super);
+    function ConfirmThenDialogComponent(config, interactionContext) {
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        _this.interactionContext = interactionContext;
+        assert.notNil(config);
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    ConfirmThenDialogComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.config.confirm;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    ConfirmThenDialogComponent.prototype.isDestructive = /**
+     * @return {?}
+     */
+    function () {
+        return this.confirm.destructive && this.confirm.destructive();
+    };
+    /**
+     * @return {?}
+     */
+    ConfirmThenDialogComponent.prototype.onConfirm = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.interactionContext.startActivity(this.config.activityType, this.config.data)
+            .then((/**
+         * @param {?} result
+         * @return {?}
+         */
+        function (result) { return _this.done(result); }))
+            .catch((/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) { return _this.cancel(error); }));
+    };
+    ConfirmThenDialogComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'angular-ui-powerups-confirmation-dialog',
+                    template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\">{{confirm.ok()}}</button>\n</p>\n\n",
+                    styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                }] }
+    ];
+    /** @nocollapse */
+    ConfirmThenDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] },
+        { type: InteractionContext }
+    ]; };
+    return ConfirmThenDialogComponent;
+}(AbstractActivity));
+if (false) {
+    /** @type {?} */
+    ConfirmThenDialogComponent.prototype.config;
+    /** @type {?} */
+    ConfirmThenDialogComponent.prototype.interactionContext;
+}
+(function (ConfirmThenDialogComponent) {
+    /**
+     * @record
+     * @template D, R, E
+     */
+    function Data() { }
+    ConfirmThenDialogComponent.Data = Data;
+    if (false) {
+        /** @type {?} */
+        Data.prototype.confirm;
+        /** @type {?} */
+        Data.prototype.activityType;
+        /** @type {?} */
+        Data.prototype.data;
+    }
+})(ConfirmThenDialogComponent || (ConfirmThenDialogComponent = {}));
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1281,8 +1386,28 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         _this.activityOutletTabs = new MutableListModel();
         _this.obsoleteTabs = [];
         _this.finished = false;
+        _this._activityList = new MutableListModel();
         return _this;
     }
+    /**
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.isActive = /**
+     * @return {?}
+     */
+    function () {
+        return this.parentInteractionContext.isActive();
+    };
+    Object.defineProperty(ActivityContainerComponent.prototype, "activityList", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activityList.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -1300,11 +1425,50 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     function () {
         var _this = this;
         var observe = Dsl.disposeWith(this).observe;
+        this._activityList.value = this.outlets.toArray().map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        function (c) { return c.component; }));
+        observe.valuesFrom(this.outlets.changes).subscribe((/**
+         * @param {?} change
+         * @return {?}
+         */
+        function (change) {
+            _this.safelyUpdateActivityList(change.map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return c.component; })));
+        }));
         observe.valuesFrom(this.tabs.animationDone).subscribe((/**
          * @return {?}
          */
         function () { return _this.onAnimationFinished(); }));
     };
+    /**
+     * Update in the next tick to avoid changing state in the current change detection cycle.
+     * @param activities
+     */
+    /**
+     * Update in the next tick to avoid changing state in the current change detection cycle.
+     * @private
+     * @param {?} activities
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.safelyUpdateActivityList = /**
+     * Update in the next tick to avoid changing state in the current change detection cycle.
+     * @private
+     * @param {?} activities
+     * @return {?}
+     */
+    function (activities) {
+        var _this = this;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () { return _this._activityList.value = activities; }));
+    };
     /**
      * @template D, R, E
      * @param {?} initialContext
@@ -1422,6 +1586,27 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     function (confirm) {
         return this.startActivity(ConfirmationDialogComponent, confirm);
     };
+    /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.confirmThen = /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    function (confirm, activityType, data) {
+        return this.startActivity(ConfirmThenDialogComponent, {
+            confirm: confirm,
+            activityType: activityType,
+            data: data
+        });
+    };
     /**
      * @private
      * @return {?}
@@ -1478,6 +1663,8 @@ if (false) {
     /** @type {?} */
     ActivityContainerComponent.prototype.initialActivityOutletContext;
     /** @type {?} */
+    ActivityContainerComponent.prototype.currentActivity;
+    /** @type {?} */
     ActivityContainerComponent.prototype.tabs;
     /** @type {?} */
     ActivityContainerComponent.prototype.outlets;
@@ -1493,6 +1680,11 @@ if (false) {
      * @private
      */
     ActivityContainerComponent.prototype.finished;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityContainerComponent.prototype._activityList;
 }
 (function (ActivityContainerComponent) {
     /**
@@ -1521,14 +1713,60 @@ if (false) {
 var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
 var DialogInteractionService = /** @class */ (function (_super) {
     __extends(DialogInteractionService, _super);
-    function DialogInteractionService(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+    function DialogInteractionService(dialogService, router, dialogServiceDefaults, matDialogDefaultConfig) {
         var _this = _super.call(this) || this;
         _this.dialogService = dialogService;
+        _this.router = router;
         _this.dialogServiceDefaults = dialogServiceDefaults;
         _this.matDialogDefaultConfig = matDialogDefaultConfig;
+        _this._activityList = new DelegatingListModel();
+        _this._active = false;
         assert$1.notNil(dialogService);
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, observe = _a.observe;
+        _this.currentActivity = chain(_this.activityList).last();
         return _this;
+        // observe.valuesFrom(this.router.events)
+        //   .tap((event:RouterEvent) => {
+        //     const nav = router.getCurrentNavigation();
+        //     console.log({
+        //       previousUrl: nav.previousNavigation && nav.previousNavigation.finalUrl,
+        //       initialUrl: nav.initialUrl,
+        //       finalUrl: nav.finalUrl,
+        //     });
+        //
+        //   })
+        //   .filter(event => event instanceof NavigationStart)
+        //   .subscribe((event: NavigationStart) => {
+        //     console.log(event.navigationTrigger);
+        //     if (event.navigationTrigger === 'popstate' && this.isActive()) {
+        //       const prev = router.getCurrentNavigation().previousNavigation.finalUrl;
+        //       // this.router.navigateByUrl(prev.toString(), {
+        //       //   replaceUrl: true,
+        //       //   skipLocationChange: false
+        //       // });
+        //       // this.cancelActivity();
+        //     }
+        //   });
     }
+    /**
+     * @return {?}
+     */
+    DialogInteractionService.prototype.cancelActivity = /**
+     * @return {?}
+     */
+    function () {
+        this.currentActivity.value.cancel(null);
+    };
+    Object.defineProperty(DialogInteractionService.prototype, "activityList", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activityList.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @template D, R, E
      * @param {?} activityType
@@ -1563,8 +1801,18 @@ var DialogInteractionService = /** @class */ (function (_super) {
     function (activityType, data, disableClose) {
         var _this = this;
         if (disableClose === void 0) { disableClose = true; }
+        if (this.isActive()) {
+            lang.illegalState("Activity already in progress: " + this.activityList.value.map((/**
+             * @param {?} a
+             * @return {?}
+             */
+            function (a) { return a.constructor.name; })).join(', '));
+        }
+        this._active = true;
         /** @type {?} */
-        var config = __assign({ autoFocus: false, hasBackdrop: true }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
+        var self = this;
+        /** @type {?} */
+        var config = __assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
             data: data,
             disableClose: disableClose,
             panelClass: 'dialog-interaction-service'
@@ -1580,6 +1828,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
             /** @type {?} */
             var activityContainer = matDialogRef.componentInstance;
             activityContainer.parentInteractionContext = _this;
+            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
             activityContainer.initialise({
                 activityClass: activityType,
                 activityData: data,
@@ -1603,8 +1852,35 @@ var DialogInteractionService = /** @class */ (function (_super) {
                 }
             });
             matDialogRef.updateSize();
+        })).finally((/**
+         * @return {?}
+         */
+        function () {
+            self.safelyUpdateActivityListDelegate(null);
+            self._active = false;
         }));
     };
+    /**
+     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+     * @param delegate
+     */
+    /**
+     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+     * @param {?} delegate
+     * @return {?}
+     */
+    DialogInteractionService.prototype.safelyUpdateActivityListDelegate = /**
+     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+     * @param {?} delegate
+     * @return {?}
+     */
+    function (delegate) {
+        var _this = this;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () { return _this._activityList.setDelegate(delegate); }));
+    };
     /**
      * @param {?} alert
      * @return {?}
@@ -1627,6 +1903,27 @@ var DialogInteractionService = /** @class */ (function (_super) {
     function (confirm) {
         return this._startActivity(ConfirmationDialogComponent, confirm, true);
     };
+    /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    DialogInteractionService.prototype.confirmThen = /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    function (confirm, activityType, data) {
+        return this._startActivity(ConfirmThenDialogComponent, {
+            confirm: confirm,
+            activityType: activityType,
+            data: data
+        }, true);
+    };
     DialogInteractionService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -1635,18 +1932,36 @@ var DialogInteractionService = /** @class */ (function (_super) {
     /** @nocollapse */
     DialogInteractionService.ctorParameters = function () { return [
         { type: MatDialog },
+        { type: Router },
         { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
         { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
     ]; };
-    /** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
+    /** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(Router), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
     return DialogInteractionService;
 }(InteractionContext));
 if (false) {
+    /** @type {?} */
+    DialogInteractionService.prototype.currentActivity;
+    /**
+     * @type {?}
+     * @private
+     */
+    DialogInteractionService.prototype._activityList;
+    /**
+     * @type {?}
+     * @private
+     */
+    DialogInteractionService.prototype._active;
     /**
      * @type {?}
      * @private
      */
     DialogInteractionService.prototype.dialogService;
+    /**
+     * @type {?}
+     * @private
+     */
+    DialogInteractionService.prototype.router;
     /** @type {?} */
     DialogInteractionService.prototype.dialogServiceDefaults;
     /** @type {?} */
@@ -1672,16 +1987,18 @@ var InteractionModule = /** @class */ (function () {
                     declarations: [
                         ActivityContainerComponent,
                         ConfirmationDialogComponent,
+                        ConfirmThenDialogComponent,
                         AlertDialogComponent,
                         ActivityOutletComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
-                        ActivityOutletComponent
+                        ActivityOutletComponent,
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
                         ConfirmationDialogComponent,
+                        ConfirmThenDialogComponent,
                         AlertDialogComponent
                     ],
                     providers: [
@@ -4125,6 +4442,65 @@ if (false) {
     ActivityOutletContext.prototype.onCancel;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CloseInteractionGuard = /** @class */ (function () {
+    function CloseInteractionGuard(router, injector, interactionContext) {
+        this.router = router;
+        this.injector = injector;
+        this.interactionContext = interactionContext;
+    }
+    /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    CloseInteractionGuard.prototype.canDeactivate = /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    function (component, currentRoute, currentState, nextState) {
+        return !this.interactionContext.isActive();
+    };
+    CloseInteractionGuard.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    CloseInteractionGuard.ctorParameters = function () { return [
+        { type: Router },
+        { type: Injector },
+        { type: InteractionContext }
+    ]; };
+    /** @nocollapse */ CloseInteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function CloseInteractionGuard_Factory() { return new CloseInteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext)); }, token: CloseInteractionGuard, providedIn: "root" });
+    return CloseInteractionGuard;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    CloseInteractionGuard.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    CloseInteractionGuard.prototype.injector;
+    /**
+     * @type {?}
+     * @private
+     */
+    CloseInteractionGuard.prototype.interactionContext;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -4226,9 +4602,33 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var LeavePlaceGuard = /** @class */ (function () {
-    function LeavePlaceGuard(router, injector) {
+    function LeavePlaceGuard(router, injector, interactionContext, location) {
         this.router = router;
         this.injector = injector;
+        this.interactionContext = interactionContext;
+        this.location = location;
+        // TODO: should probably replace this with a RouteTracker thingy.
+        this._alreadyAccepted = [];
+        console.log('***** Created new guard ******');
+        /** @type {?} */
+        var self = this;
+        this.router.events.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            // NavigationStart -> .... -> NavigationCancel === redirect (so don't ask again)
+            // NavigationStart -> .... -> NavigationEnd === navigated (so ask next time)
+            // NavigationStart -> .... -> NavigationError === canceled (guard cancelled so ask next time)
+            if (event instanceof NavigationEnd) {
+                console.log("navigation ended");
+                self._alreadyAccepted = [];
+            }
+            if (event instanceof NavigationError) {
+                console.log("navigation errored");
+                self._alreadyAccepted = [];
+            }
+        }));
     }
     /**
      * @param {?} component
@@ -4245,27 +4645,90 @@ var LeavePlaceGuard = /** @class */ (function () {
      * @return {?}
      */
     function (component, currentRoute, currentState, nextState) {
-        // HACK: this will break with child routes...
+        var _this = this;
         /** @type {?} */
-        var path = "/" + component.placeDefinition.path;
-        // let thisTree = this.router.parseUrl(currentState.url);
-        // let nextTree = this.router.parseUrl(nextState.url);
-        // console.log({
-        //   placePath: path,
-        //   currentRoute: currentRoute.toString(),
-        //   currentStateUrl: currentState.url,
-        //   nextStateUrl: nextState.url,
-        //   currentStateUrlTree: thisTree.root.children[PRIMARY_OUTLET].segments,
-        //   nextStateUrlTree: nextTree.root.children[PRIMARY_OUTLET].segments
-        // });
-        // nextState is the full path...
-        if (!nextState.url.startsWith(path)) {
-            return component.canDeactivate();
+        var placeDefinitionPath = "/" + component.placeDefinition.path;
+        console.log('canDeactivate', {
+            staticPath: placeDefinitionPath,
+            currentStateUrl: currentState.url,
+            nextStateUrl: nextState.url,
+            alreadyDeclined: this._alreadyAccepted
+        });
+        // Example of the above when navigating to a different child route.
+        // canDeactivate {staticPath: "/hero-details",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-details",
+        //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats"
+        // }
+        // Example clicking on router tab of the parent component (de-activates the parent due to route param changes)
+        // canDeactivate {
+        //    staticPath: "/hero-stats",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+        //    nextStateUrl: "/route-parameters/"
+        // }
+        // canDeactivate {
+        //    staticPath: "/route-parameters",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+        //    nextStateUrl: "/route-parameters/"
+        // }
+        // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: undefined, dl: Array(0), …}
+        // parameter-snapshot.ts:20 {name: "idModel", mine: -1, theirs: null}
+        // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+        // canDeactivate {
+        //    staticPath: "/hero-stats",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+        //    nextStateUrl: "/route-parameters/-1"
+        // }
+        // canDeactivate {
+        //    staticPath: "/route-parameters",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+        //    nextStateUrl: "/route-parameters/-1"
+        // }
+        // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: "A", dl: Array(3), …}
+        // parameter-snapshot.ts:20 {name: "dv", mine: "A", theirs: undefined}
+        // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+        // canDeactivate {
+        //    staticPath: "/hero-stats",
+        //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+        //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c"
+        // }
+        // HACK: this will break with child routes...
+        if (this.alreadyAccepted(component)) {
+            return true;
         }
         else {
+            if (!nextState.url.startsWith(placeDefinitionPath)) {
+                /** @type {?} */
+                var self_1 = this;
+                return Promise.resolve(component.canDeactivate()).then((/**
+                 * @param {?} canLeave
+                 * @return {?}
+                 */
+                function (canLeave) {
+                    if (!canLeave) {
+                        // Angular doesn't preserve the url when a guard cancels the back button.
+                        // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                        _this.location.go(currentState.url);
+                    }
+                    else {
+                        self_1._alreadyAccepted.push(component);
+                    }
+                    return canLeave;
+                }));
+            }
             return true;
         }
     };
+    /**
+     * @param {?} placeComponent
+     * @return {?}
+     */
+    LeavePlaceGuard.prototype.alreadyAccepted = /**
+     * @param {?} placeComponent
+     * @return {?}
+     */
+    function (placeComponent) {
+        return this._alreadyAccepted.includes(placeComponent);
+    };
     LeavePlaceGuard.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -4274,12 +4737,25 @@ var LeavePlaceGuard = /** @class */ (function () {
     /** @nocollapse */
     LeavePlaceGuard.ctorParameters = function () { return [
         { type: Router },
-        { type: Injector }
+        { type: Injector },
+        { type: InteractionContext },
+        { type: Location }
     ]; };
-    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: LeavePlaceGuard, providedIn: "root" });
+    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext), ɵɵinject(Location)); }, token: LeavePlaceGuard, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PlaceComponent]),
+        __metadata("design:returntype", Boolean)
+    ], LeavePlaceGuard.prototype, "alreadyAccepted", null);
     return LeavePlaceGuard;
 }());
 if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    LeavePlaceGuard.prototype._alreadyAccepted;
     /**
      * @type {?}
      * @private
@@ -4290,6 +4766,10 @@ if (false) {
      * @private
      */
     LeavePlaceGuard.prototype.injector;
+    /** @type {?} */
+    LeavePlaceGuard.prototype.interactionContext;
+    /** @type {?} */
+    LeavePlaceGuard.prototype.location;
 }
 
 /**
@@ -4598,5 +5078,5 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterValue, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, AlertDialogComponent as ɵba, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbc, DialogInteractionService as ɵbd, InteractionContext as ɵbe, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, ActivityOutletComponent as ɵv, ConfirmationDialogComponent as ɵw, AbstractActivity as ɵx, ACTIVITY_DATA as ɵy };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CloseInteractionGuard, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterValue, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, ConfirmThenDialogComponent as ɵba, InteractionContext as ɵbb, AlertDialogComponent as ɵbc, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbe, DialogInteractionService as ɵbf, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, ActivityOutletComponent as ɵv, ConfirmationDialogComponent as ɵw, AbstractActivity as ɵx, ACTIVITY_DATA as ɵy };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map