@coolon/angular-ui-powerups 0.0.60 → 0.0.62

package/fesm2015/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 { __decorate, __metadata, __awaiter } 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';
@@ -651,14 +651,34 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const INTERACTION_CONTEXT = new InjectionToken('InteractionContext');
 /**
  * @abstract
  */
-class InteractionContext {
+class InteractionContext extends GarbageCollector {
+    constructor() {
+        super();
+    }
+    /**
+     * Returns true if an activity is currently running.
+     * @return {?}
+     */
+    isActive() {
+        return this.activityList.length > 0;
+    }
 }
 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
@@ -673,6 +693,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
@@ -700,6 +730,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) { };
 }
 
 /**
@@ -760,6 +800,12 @@ class ActivityOutletComponent {
         this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
         this.activityComponentRef.instance.initialise(activityContext);
     }
+    /**
+     * @return {?}
+     */
+    get component() {
+        return this.activityComponentRef.instance;
+    }
     /**
      * @param {?} alert
      * @return {?}
@@ -774,6 +820,16 @@ class ActivityOutletComponent {
     confirm(confirm) {
         return this.interactionContext.confirm(confirm);
     }
+    /**
+     * @template D1, R1, E1
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    confirmThen(confirm, activityType, data) {
+        return this.interactionContext.confirmThen(confirm, activityType, data);
+    }
     /**
      * @template D1, R1, E1
      * @param {?} activityType
@@ -809,12 +865,6 @@ ActivityOutletComponent.propDecorators = {
     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);
 if (false) {
     /** @type {?} */
     ActivityOutletComponent.prototype.interactionContext;
@@ -840,50 +890,6 @@ if (false) {
     ActivityOutletComponent.prototype.injector;
     /* Skipping unhandled member: ;*/
 }
-(function (ActivityOutletComponent) {
-    /**
-     * @template D, R, E
-     */
-    class OutletInteractionContext {
-        /**
-         * @param {?} context
-         */
-        constructor(context) {
-            this.context = context;
-        }
-        /**
-         * @param {?} alert
-         * @return {?}
-         */
-        alert(alert) {
-            return lang.notImplemented();
-        }
-        /**
-         * @param {?} confirm
-         * @return {?}
-         */
-        confirm(confirm) {
-            return lang.notImplemented();
-        }
-        /**
-         * @template D1, R1, E1
-         * @param {?} activityType
-         * @param {?=} data
-         * @return {?}
-         */
-        startActivity(activityType, data) {
-            return lang.notImplemented();
-        }
-    }
-    ActivityOutletComponent.OutletInteractionContext = OutletInteractionContext;
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        OutletInteractionContext.prototype.context;
-    }
-})(ActivityOutletComponent || (ActivityOutletComponent = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -945,12 +951,6 @@ class AbstractActivity extends DisposableComponent {
         return this._busyModel.value;
     }
 }
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], AbstractActivity.prototype, "initialise", null);
 if (false) {
     /**
      * @type {?}
@@ -998,6 +998,93 @@ if (false) {
     AlertDialogComponent.prototype.alert;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template D, R, E
+ */
+class ConfirmThenDialogComponent extends AbstractActivity {
+    /**
+     * @param {?} config
+     * @param {?} interactionContext
+     */
+    constructor(config, interactionContext) {
+        super();
+        this.config = config;
+        this.interactionContext = interactionContext;
+        assert.notNil(config);
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+    /**
+     * @return {?}
+     */
+    get confirm() {
+        return this.config.confirm;
+    }
+    /**
+     * @return {?}
+     */
+    isDestructive() {
+        return this.confirm.destructive && this.confirm.destructive();
+    }
+    /**
+     * @return {?}
+     */
+    onConfirm() {
+        this.interactionContext.startActivity(this.config.activityType, this.config.data)
+            .then((/**
+         * @param {?} result
+         * @return {?}
+         */
+        (result) => this.done(result)))
+            .catch((/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => 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 = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] },
+    { type: InteractionContext }
+];
+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
@@ -1049,6 +1136,19 @@ class ActivityContainerComponent extends DisposableComponent {
         this.activityOutletTabs = new MutableListModel();
         this.obsoleteTabs = [];
         this.finished = false;
+        this._activityList = new MutableListModel();
+    }
+    /**
+     * @return {?}
+     */
+    isActive() {
+        return this.parentInteractionContext.isActive();
+    }
+    /**
+     * @return {?}
+     */
+    get activityList() {
+        return this._activityList.readonly;
     }
     /**
      * @return {?}
@@ -1060,11 +1160,39 @@ class ActivityContainerComponent extends DisposableComponent {
      */
     ngAfterViewInit() {
         const { observe } = Dsl.disposeWith(this);
+        this._activityList.value = this.outlets.toArray().map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        c => c.component));
+        observe.valuesFrom(this.outlets.changes).subscribe((/**
+         * @param {?} change
+         * @return {?}
+         */
+        (change) => {
+            this.safelyUpdateActivityList(change.map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            c => c.component)));
+        }));
         observe.valuesFrom(this.tabs.animationDone).subscribe((/**
          * @return {?}
          */
         () => this.onAnimationFinished()));
     }
+    /**
+     * Update in the next tick to avoid changing state in the current change detection cycle.
+     * @private
+     * @param {?} activities
+     * @return {?}
+     */
+    safelyUpdateActivityList(activities) {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => this._activityList.value = activities));
+    }
     /**
      * @template D, R, E
      * @param {?} initialContext
@@ -1162,6 +1290,20 @@ class ActivityContainerComponent extends DisposableComponent {
     confirm(confirm) {
         return this.startActivity(ConfirmationDialogComponent, confirm);
     }
+    /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    confirmThen(confirm, activityType, data) {
+        return this.startActivity(ConfirmThenDialogComponent, {
+            confirm,
+            activityType: activityType,
+            data: data
+        });
+    }
     /**
      * @private
      * @return {?}
@@ -1208,6 +1350,8 @@ if (false) {
     /** @type {?} */
     ActivityContainerComponent.prototype.initialActivityOutletContext;
     /** @type {?} */
+    ActivityContainerComponent.prototype.currentActivity;
+    /** @type {?} */
     ActivityContainerComponent.prototype.tabs;
     /** @type {?} */
     ActivityContainerComponent.prototype.outlets;
@@ -1223,6 +1367,11 @@ if (false) {
      * @private
      */
     ActivityContainerComponent.prototype.finished;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityContainerComponent.prototype._activityList;
 }
 (function (ActivityContainerComponent) {
     /**
@@ -1252,15 +1401,55 @@ const DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTI
 class DialogInteractionService extends InteractionContext {
     /**
      * @param {?} dialogService
+     * @param {?} router
      * @param {?} dialogServiceDefaults
      * @param {?} matDialogDefaultConfig
      */
-    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+    constructor(dialogService, router, dialogServiceDefaults, matDialogDefaultConfig) {
         super();
         this.dialogService = dialogService;
+        this.router = router;
         this.dialogServiceDefaults = dialogServiceDefaults;
         this.matDialogDefaultConfig = matDialogDefaultConfig;
+        this._activityList = new DelegatingListModel();
+        this._active = false;
         assert$1.notNil(dialogService);
+        const { chain, observe } = Dsl.disposeWith(this);
+        this.currentActivity = chain(this.activityList).last();
+        // 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 {?}
+     */
+    cancelActivity() {
+        this.currentActivity.value.cancel(null);
+    }
+    /**
+     * @return {?}
+     */
+    get activityList() {
+        return this._activityList.readonly;
     }
     /**
      * @template D, R, E
@@ -1280,8 +1469,18 @@ class DialogInteractionService extends InteractionContext {
      * @return {?}
      */
     _startActivity(activityType, data, disableClose = true) {
+        if (this.isActive()) {
+            lang.illegalState(`Activity already in progress: ${this.activityList.value.map((/**
+             * @param {?} a
+             * @return {?}
+             */
+            a => a.constructor.name)).join(', ')}`);
+        }
+        this._active = true;
         /** @type {?} */
-        const config = Object.assign({ autoFocus: false, hasBackdrop: true }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
+        const self = this;
+        /** @type {?} */
+        const config = Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
             data,
             disableClose,
             panelClass: 'dialog-interaction-service'
@@ -1297,6 +1496,7 @@ class DialogInteractionService extends InteractionContext {
             /** @type {?} */
             const activityContainer = matDialogRef.componentInstance;
             activityContainer.parentInteractionContext = this;
+            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
             activityContainer.initialise({
                 activityClass: activityType,
                 activityData: data,
@@ -1320,8 +1520,25 @@ class DialogInteractionService extends InteractionContext {
                 }
             });
             matDialogRef.updateSize();
+        })).finally((/**
+         * @return {?}
+         */
+        () => {
+            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
+     * @return {?}
+     */
+    safelyUpdateActivityListDelegate(delegate) {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => this._activityList.setDelegate(delegate)));
+    }
     /**
      * @param {?} alert
      * @return {?}
@@ -1336,6 +1553,20 @@ class DialogInteractionService extends InteractionContext {
     confirm(confirm) {
         return this._startActivity(ConfirmationDialogComponent, confirm, true);
     }
+    /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    confirmThen(confirm, activityType, data) {
+        return this._startActivity(ConfirmThenDialogComponent, {
+            confirm,
+            activityType: activityType,
+            data: data
+        }, true);
+    }
 }
 DialogInteractionService.decorators = [
     { type: Injectable, args: [{
@@ -1345,16 +1576,34 @@ DialogInteractionService.decorators = [
 /** @nocollapse */
 DialogInteractionService.ctorParameters = () => [
     { 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" });
 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 {?} */
@@ -1379,16 +1628,18 @@ InteractionModule.decorators = [
                 declarations: [
                     ActivityContainerComponent,
                     ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
                     AlertDialogComponent,
                     ActivityOutletComponent
                 ],
                 exports: [
                     ActivityContainerComponent,
-                    ActivityOutletComponent
+                    ActivityOutletComponent,
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
                     ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
                     AlertDialogComponent
                 ],
                 providers: [
@@ -3456,6 +3707,62 @@ if (false) {
     ActivityOutletContext.prototype.onCancel;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CloseInteractionGuard {
+    /**
+     * @param {?} router
+     * @param {?} injector
+     * @param {?} interactionContext
+     */
+    constructor(router, injector, interactionContext) {
+        this.router = router;
+        this.injector = injector;
+        this.interactionContext = interactionContext;
+    }
+    /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    canDeactivate(component, currentRoute, currentState, nextState) {
+        return !this.interactionContext.isActive();
+    }
+}
+CloseInteractionGuard.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+CloseInteractionGuard.ctorParameters = () => [
+    { 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" });
+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
@@ -3560,10 +3867,36 @@ class LeavePlaceGuard {
     /**
      * @param {?} router
      * @param {?} injector
+     * @param {?} interactionContext
+     * @param {?} location
      */
-    constructor(router, injector) {
+    constructor(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 {?} */
+        const self = this;
+        this.router.events.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        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
@@ -3573,27 +3906,85 @@ class LeavePlaceGuard {
      * @return {?}
      */
     canDeactivate(component, currentRoute, currentState, nextState) {
-        // HACK: this will break with child routes...
         /** @type {?} */
-        const 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();
+        const 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 {?} */
+                const self = this;
+                return Promise.resolve(component.canDeactivate()).then((/**
+                 * @param {?} canLeave
+                 * @return {?}
+                 */
+                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._alreadyAccepted.push(component);
+                    }
+                    return canLeave;
+                }));
+            }
             return true;
         }
     }
+    /**
+     * @param {?} placeComponent
+     * @return {?}
+     */
+    alreadyAccepted(placeComponent) {
+        return this._alreadyAccepted.includes(placeComponent);
+    }
 }
 LeavePlaceGuard.decorators = [
     { type: Injectable, args: [{
@@ -3603,10 +3994,23 @@ LeavePlaceGuard.decorators = [
 /** @nocollapse */
 LeavePlaceGuard.ctorParameters = () => [
     { 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);
 if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    LeavePlaceGuard.prototype._alreadyAccepted;
     /**
      * @type {?}
      * @private
@@ -3617,6 +4021,10 @@ if (false) {
      * @private
      */
     LeavePlaceGuard.prototype.injector;
+    /** @type {?} */
+    LeavePlaceGuard.prototype.interactionContext;
+    /** @type {?} */
+    LeavePlaceGuard.prototype.location;
 }
 
 /**
@@ -3889,5 +4297,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