@coolon/angular-ui-powerups 0.0.116 → 0.0.117

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

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule, MatDialog } from '@angular/material';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, DebugContext, Binding, Guard, StoreInValueModel, Command, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Guard, StoreInValueModel, Command, ValueHolder } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { PortalModule } from '@angular/cdk/portal';
 import { RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, Router, UrlSerializer } from '@angular/router';
@@ -2676,7 +2676,7 @@ class PlaceComponent extends DisposableComponent {
     initialiseBindings(visit) {
         assert.isNil(this.visit);
         this.visit = visit;
-        DebugContext.get(this.visit).tag(`${this.placeDefinition.component.name}.visit`);
+        // DebugContext.get(this.visit).tag(`${this.placeDefinition.component.name}.visit`);
         this.placeDefinition.getVisitParameterDefs().forEach((/**
          * @param {?} parameterDef
          * @return {?}
@@ -3061,6 +3061,7 @@ class NavigationState extends GarbageCollector {
         super();
         this.context = context;
         this._visits = new Map();
+        this.debugPropertyKeys = [];
     }
     /**
      * @return {?}
@@ -3197,14 +3198,18 @@ class NavigationState extends GarbageCollector {
     createTransitionStateFor(event) {
         /** @type {?} */
         const popstate = event.navigationTrigger === 'popstate';
-        return popstate ?
-            this.interactionService.isActive() ?
-                new NavigationState.InteractionPopStateTransition(this.context, this.currentRouterUrl()) :
-                new NavigationState.PopStateTransition(this.context, this.currentRouterUrl())
-            :
-                this.interactionService.isActive() ?
-                    new NavigationState.InteractionTransition(this.context, this.currentRouterUrl()) :
-                    new NavigationState.NavigationTransition(this.context, this.currentRouterUrl());
+        /** @type {?} */
+        const inInteraction = this.interactionService.isActive();
+        if (popstate) {
+            return inInteraction ?
+                new NavigationState.LeavingInteractionAfterPopStateTransition(this.context, this.currentRouterUrl(), event.url) :
+                new NavigationState.PopStateTransition(this.context, this.currentRouterUrl(), event.url);
+        }
+        else {
+            return inInteraction ?
+                new NavigationState.StartingInteractionTransition(this.context, this.currentRouterUrl()) :
+                new NavigationState.NavigationTransition(this.context, this.currentRouterUrl());
+        }
     }
     /**
      * @protected
@@ -3215,6 +3220,7 @@ class NavigationState extends GarbageCollector {
             new NavigationState.IdleDuringInteraction(this.context, this.currentRouterUrl()) :
             new NavigationState.Idle(this.context);
     }
+    //
     /**
      * @param {?} url
      * @return {?}
@@ -3222,11 +3228,35 @@ class NavigationState extends GarbageCollector {
     resetBrowserLocation(url) {
         this.placeRouter.resetBrowserLocation(url);
     }
+    /**
+     * @param {?} event
+     * @param {?=} reason
+     * @return {?}
+     */
+    ignore(event, reason) {
+        reason = reason ? ` -> ${reason}` : '';
+        Logger.get(this).info(`Ignoring router event${reason}: ${event.constructor.name} -> ${event.url} :: ${this.toString()}`);
+        return this;
+    }
     /**
      * @return {?}
      */
     toString() {
-        return this.constructor.name;
+        return `${this.constructor.name}(${this.debugState()})`;
+    }
+    /**
+     * @protected
+     * @param {?=} properties
+     * @return {?}
+     */
+    debugState(properties) {
+        return (properties || this.debugPropertyKeys).map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => {
+            return `${p}: ${this[p]}`;
+        })).join(', ');
     }
 }
 if (false) {
@@ -3241,6 +3271,8 @@ if (false) {
     NavigationState.prototype.startingUrl;
     /** @type {?} */
     NavigationState.prototype.isPopState;
+    /** @type {?} */
+    NavigationState.prototype.debugPropertyKeys;
     /**
      * @type {?}
      * @protected
@@ -3302,7 +3334,7 @@ if (false) {
             }
             if (this.placeRouter.hasActiveInteractionIds(event.url)) {
                 Logger.get(this).info(`navigation started with interaction outlet -> ${event.url}`);
-                return new InteractionTransition(this.context, event.url);
+                return new StartingInteractionTransition(this.context, event.url);
             }
             else {
                 return this.createTransitionStateFor(event);
@@ -3377,10 +3409,10 @@ if (false) {
             return new Idle(this.context);
         }
         /**
-         * @param {?} locationTriggerUrl
+         * @param {?} newUrl
          * @return {?}
          */
-        onBackClickedDuringNavigationInteraction(locationTriggerUrl) {
+        onBackClickedDuringNavigationInteraction(newUrl) {
             Logger.get(this).info(`back button pressed during navigation session interaction promise`);
             // detach the interaction from the session so it doesn't get disposed until the activity has completed.
             /** @type {?} */
@@ -3388,15 +3420,15 @@ if (false) {
             const { when } = Dsl.disposeWith(navigationInteraction);
             // TODO: I need to make the exclusive interaction context disallow nested activities or
             //       that would mess things up entirely. Or, can I do a context.abortAll().then(..)
+            Logger.get(this).info('cancelling current navigation activity..');
             navigationInteraction.cancelActiveActivity().then((/**
              * @return {?}
              */
             () => {
                 navigationInteraction.dispose();
             }));
-            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, this.isPopState, locationTriggerUrl);
+            return this.createNavigationInteractionCancelledState(newUrl);
         }
-        // @Trace()
         /**
          * @param {?} component
          * @param {?} currentUrl
@@ -3418,7 +3450,7 @@ if (false) {
             });
         }
         /**
-         * @private
+         * @protected
          * @return {?}
          */
         detachInteractionContext() {
@@ -3444,11 +3476,18 @@ if (false) {
         AbstractNavigationTransition.prototype._interactionContext;
         /** @type {?} */
         AbstractNavigationTransition.prototype.startingUrl;
+        /**
+         * @abstract
+         * @param {?} newUrl
+         * @return {?}
+         */
+        AbstractNavigationTransition.prototype.createNavigationInteractionCancelledState = function (newUrl) { };
     }
     class NavigationTransition extends AbstractNavigationTransition {
         constructor() {
             super(...arguments);
             this.isPopState = false;
+            this.debugPropertyKeys = ['startingUrl'];
         }
         /**
          * @param {?} event
@@ -3466,21 +3505,31 @@ if (false) {
             return new Idle(this.context);
         }
         /**
+         * @param {?} newUrl
          * @return {?}
          */
-        toString() {
-            return `${this.constructor.name}(startingUrl: ${this.startingUrl})`;
+        createNavigationInteractionCancelledState(newUrl) {
+            return new LinkTriggeredNavigationInteractionCancelled(this.context, this.startingUrl, newUrl);
         }
     }
     NavigationState.NavigationTransition = NavigationTransition;
     if (false) {
         /** @type {?} */
         NavigationTransition.prototype.isPopState;
+        /** @type {?} */
+        NavigationTransition.prototype.debugPropertyKeys;
     }
     class PopStateTransition extends AbstractNavigationTransition {
-        constructor() {
-            super(...arguments);
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         * @param {?} poppedHistoryUrl
+         */
+        constructor(context, startingUrl, poppedHistoryUrl) {
+            super(context, startingUrl);
+            this.poppedHistoryUrl = poppedHistoryUrl;
             this.isPopState = true;
+            this.debugPropertyKeys = ['startingUrl', 'poppedHistoryUrl'];
         }
         /**
          * @param {?} event
@@ -3490,7 +3539,8 @@ if (false) {
             // Angular doesn't preserve the url when a guard cancels the back button.
             // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
             Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
-            this.resetBrowserLocation(this.startingUrl);
+            this.resetBrowserLocation(this.poppedHistoryUrl); // put the popped history item back in.
+            this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
             return new Idle(this.context);
         }
         /**
@@ -3503,16 +3553,54 @@ if (false) {
                 // Angular doesn't preserve the url when a guard cancels the back button.
                 // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
                 Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
-                this.resetBrowserLocation(this.startingUrl);
+                this.resetBrowserLocation(this.poppedHistoryUrl); // put the popped history item back in.
+                this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
             }
             return new Idle(this.context);
         }
+        /**
+         * @param {?} locationTriggerUrl
+         * @return {?}
+         */
+        createNavigationInteractionCancelledState(locationTriggerUrl) {
+            return new PopStateTriggeredNavigationInteractionCancelled(this.context, this.startingUrl, locationTriggerUrl, this.poppedHistoryUrl);
+        }
     }
     NavigationState.PopStateTransition = PopStateTransition;
     if (false) {
         /** @type {?} */
         PopStateTransition.prototype.isPopState;
+        /** @type {?} */
+        PopStateTransition.prototype.debugPropertyKeys;
+        /** @type {?} */
+        PopStateTransition.prototype.poppedHistoryUrl;
     }
+    /**
+     * @abstract
+     */
+    class AbstractInteractionTransition extends AbstractNavigationTransition {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         */
+        constructor(context, startingUrl) {
+            super(context, startingUrl);
+            this.startingUrl = startingUrl;
+            this.isTransitional = true;
+        }
+    }
+    NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
+    if (false) {
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.isTransitional;
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.startingUrl;
+    }
+    // The following states exist to handle all events while any kind of navigation is in progress.  That way all other states can
+    // happily ignore interaction contexts.
+    /**
+     * This is the non transitional (i.e. rest) state that is used whenever an interaction context is active.
+     */
     class IdleDuringInteraction extends NavigationState {
         /**
          * @param {?} context
@@ -3523,6 +3611,7 @@ if (false) {
             this.startingUrl = startingUrl;
             this.isTransitional = false;
             this.isPopState = false;
+            this.debugPropertyKeys = ['startingUrl'];
         }
         /**
          * @param {?} visit
@@ -3530,26 +3619,26 @@ if (false) {
          * @return {?}
          */
         onPlaceNavigationStart(visit, initialUrl) {
+            // we're in an interaction and the user clicked back
             /** @type {?} */
-            const navigationTransition = new InteractionTransition(this.context, initialUrl);
+            const navigationTransition = new StartingInteractionTransition(this.context, initialUrl);
             navigationTransition.storeVisit(visit);
             return navigationTransition;
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
          */
         onRouterStarted(event) {
-            return new InteractionTransition(this.context, event.url);
+            return new StartingInteractionTransition(this.context, event.url);
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
          */
         onPopState(event) {
-            return new InteractionPopStateTransition(this.context, event.url);
+            // we're in an interaction and the user clicked back
+            return new LeavingInteractionAfterPopStateTransition(this.context, event.url, event.url);
         }
     }
     NavigationState.IdleDuringInteraction = IdleDuringInteraction;
@@ -3559,39 +3648,21 @@ if (false) {
         /** @type {?} */
         IdleDuringInteraction.prototype.isPopState;
         /** @type {?} */
-        IdleDuringInteraction.prototype.startingUrl;
-    }
-    /**
-     * @abstract
-     */
-    class AbstractInteractionTransition extends AbstractNavigationTransition {
-        /**
-         * @param {?} context
-         * @param {?} startingUrl
-         */
-        constructor(context, startingUrl) {
-            super(context, startingUrl);
-            this.startingUrl = startingUrl;
-            this.isTransitional = true;
-        }
-    }
-    NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
-    if (false) {
-        /** @type {?} */
-        AbstractInteractionTransition.prototype.isTransitional;
+        IdleDuringInteraction.prototype.debugPropertyKeys;
         /** @type {?} */
-        AbstractInteractionTransition.prototype.startingUrl;
+        IdleDuringInteraction.prototype.startingUrl;
     }
     /**
      * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
      * happily ignore interaction contexts.
+     * NOTE: This state is activated when ever an interaction is started.  It might be better to split it into
+     *       different states for different scenarios, e.g. starting model, starting model during route guard etc.
      */
-    class InteractionTransition extends AbstractInteractionTransition {
+    class StartingInteractionTransition extends AbstractInteractionTransition {
         constructor() {
             super(...arguments);
             this.isPopState = false;
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
@@ -3607,7 +3678,6 @@ if (false) {
                 return new Idle(this.context);
             }
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
@@ -3616,7 +3686,6 @@ if (false) {
             // navigation was aborted.
             return new IdleDuringInteraction(this.context, this.startingUrl);
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
@@ -3629,22 +3698,137 @@ if (false) {
                 return new Idle(this.context);
             }
         }
+        /**
+         * @param {?} locationTriggerUrl
+         * @return {?}
+         */
+        createNavigationInteractionCancelledState(locationTriggerUrl) {
+            return new LeavingInteractionTransitionCancelled(this.context, this.startingUrl, locationTriggerUrl);
+        }
     }
-    NavigationState.InteractionTransition = InteractionTransition;
+    NavigationState.StartingInteractionTransition = StartingInteractionTransition;
     if (false) {
         /** @type {?} */
-        InteractionTransition.prototype.isPopState;
+        StartingInteractionTransition.prototype.isPopState;
+    }
+    /**
+     * The sequence of router events are:
+     * Error -> url = url of navigation link
+     * End
+     * onPopState url = current intereaction url sans the query params
+     * Cancel url == same as above.
+     */
+    class LeavingInteractionTransitionCancelled extends NavigationState {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         * @param {?} locationChangeTriggerUrl
+         */
+        constructor(context, startingUrl, locationChangeTriggerUrl) {
+            super(context);
+            this.startingUrl = startingUrl;
+            this.locationChangeTriggerUrl = locationChangeTriggerUrl;
+            this.isPopState = false;
+            this.firstCancelHandled = false;
+            this.popStateHandled = false;
+            this.debugPropertyKeys = ['idle', 'startingUrl', 'poppedHistoryUrl', 'locationChangeTriggerUrl', 'popStateEventUrl', 'firstCancelHandled', 'popStateHandled'];
+        }
+        /**
+         * @return {?}
+         */
+        get isTransitional() {
+            return true;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterStarted(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterCancelled(event) {
+            // Angular doesn't preserve the url when a guard cancels the back button.
+            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+            Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+            if (this.interactionService.isActive()) {
+                /** @type {?} */
+                const interactionIds = this.interactionService.activeInteractionContextIds.value;
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+            }
+            else {
+                this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
+            }
+            return this.createIdleState();
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterEnd(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterError(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onPopState(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        canDeactivatePlace(component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function* () {
+                return false;
+            });
+        }
+    }
+    NavigationState.LeavingInteractionTransitionCancelled = LeavingInteractionTransitionCancelled;
+    if (false) {
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.isPopState;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.firstCancelHandled;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.popStateHandled;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.popStateEventUrl;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.debugPropertyKeys;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.startingUrl;
+        /** @type {?} */
+        LeavingInteractionTransitionCancelled.prototype.locationChangeTriggerUrl;
     }
     /**
      * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
      * happily ignore interaction contexts.
      */
-    class InteractionPopStateTransition extends AbstractInteractionTransition {
-        constructor() {
-            super(...arguments);
+    class LeavingInteractionAfterPopStateTransition extends AbstractInteractionTransition {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         * @param {?} poppedHistoryUrl
+         */
+        constructor(context, startingUrl, poppedHistoryUrl) {
+            super(context, startingUrl);
+            this.poppedHistoryUrl = poppedHistoryUrl;
             this.isPopState = true;
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
@@ -3660,7 +3844,6 @@ if (false) {
                 return new Idle(this.context);
             }
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
@@ -3673,26 +3856,124 @@ if (false) {
                 return new Idle(this.context);
             }
         }
+        /**
+         * @param {?} newUrl
+         * @return {?}
+         */
+        createNavigationInteractionCancelledState(newUrl) {
+            return this.illegalTransition("Leaving interaction after pop-state should't block so should never see a back button click");
+        }
     }
-    NavigationState.InteractionPopStateTransition = InteractionPopStateTransition;
+    NavigationState.LeavingInteractionAfterPopStateTransition = LeavingInteractionAfterPopStateTransition;
     if (false) {
         /** @type {?} */
-        InteractionPopStateTransition.prototype.isPopState;
-    }
-    class CancelledDuringNavigationInteraction extends NavigationState {
+        LeavingInteractionAfterPopStateTransition.prototype.isPopState;
+        /** @type {?} */
+        LeavingInteractionAfterPopStateTransition.prototype.poppedHistoryUrl;
+    }
+    // See LeavingInteractionAfterPopStateTransition.createNavigationInteractionCancelledState(...) above.
+    //
+    // export class LeavingInteractionAfterPopStateCancelled extends NavigationState {
+    //
+    //   readonly isPopState = false;
+    //   firstCancelHandled = false;
+    //   popStateHandled = false;
+    //   popStateEventUrl: string;
+    //   debugPropertyKeys = ['idle', 'startingUrl', 'poppedHistoryUrl', 'locationChangeTriggerUrl', 'popStateEventUrl', 'firstCancelHandled', 'popStateHandled'];
+    //
+    //   constructor(context: Context,
+    //               readonly startingUrl: string,
+    //               readonly locationChangeTriggerUrl: string,
+    //               readonly poppedHistoryUrl: string) {
+    //     super(context);
+    //   }
+    //
+    //   get isTransitional() {
+    //     return true;
+    //   }
+    //
+    //   onRouterStarted(event: NavigationStart): NavigationState {
+    //     return this.ignore(event);
+    //   }
+    //
+    //
+    //   onRouterCancelled(event: NavigationCancel): NavigationState {
+    //
+    //     // if (this.firstCancelHandled && this.popStateHandled) {
+    //     //   // Angular doesn't preserve the url when a guard cancels the back button.
+    //     //   // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+    //     //   Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+    //     //   this.resetBrowserLocation(this.locationChangeTriggerUrl); // put the second back click one back in.
+    //     //   this.resetBrowserLocation(this.poppedHistoryUrl); // put the first back click one back in.
+    //     //   if (this.interactionService.isActive()) {
+    //     //     const interactionIds = this.interactionService.activeInteractionContextIds.value;
+    //     //     this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+    //     //   } else {
+    //     //     this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
+    //     //   }
+    //     //   return this.createIdleState();
+    //     // } else {
+    //     //   this.firstCancelHandled = true;
+    //     return this.ignore(event);
+    //     // }
+    //   }
+    //
+    //
+    //   onRouterEnd(event: NavigationEnd): NavigationState {
+    //     return this.ignore(event);
+    //   }
+    //
+    //
+    //   onRouterError(event: NavigationError): NavigationState {
+    //     return this.ignore(event);
+    //   }
+    //
+    //
+    //   onPopState(event: NavigationStart): NavigationState {
+    //     // this.popStateHandled = true;
+    //     // this.popStateEventUrl = event.url;
+    //     return this.ignore(event);
+    //   }
+    //
+    //   async canDeactivatePlace(component: PlaceComponent, currentUrl: UrlSnapshot, nextUrl: UrlSnapshot): Promise<boolean | UrlSnapshot> {
+    //     return false;
+    //   }
+    // }
+    /**
+     * This state handles the scenario where a link navigation triggered an interaction and the user clicked back a to cancel it.
+     * The routing event sequence is different depending on the link that was clicked.
+     *
+     * If the link was the same as the previous history location (i.e. they've gone back via a link rather than clicking back) then the sequence is:
+     *
+     * -> Idle -> NavigationTransition
+     * -> confirm dialog shown.
+     * -> click back
+     * -> NavigationCancel -> clickedLinkUrl === cancel.url
+     * -> NavigationEnd
+     *
+     * Otherwise if the link is different from teh history location then the sequence is:
+     *
+     * -> Idle -> NavigationTransition
+     * -> confirm dialog shown.
+     * -> click back
+     * -> NavigationCancel -> clickedLinkUrl !== cancel.url
+     * -> NavigationEnd
+     * -> PopState
+     * -> NavigationCancel
+     */
+    class LinkTriggeredNavigationInteractionCancelled extends NavigationState {
         /**
          * @param {?} context
          * @param {?} startingUrl
-         * @param {?} startingEventWasAPopState
-         * @param {?} locationChangeTriggerUrl
+         * @param {?} clickedLinkUrl
          */
-        constructor(context, startingUrl, startingEventWasAPopState, locationChangeTriggerUrl) {
+        constructor(context, startingUrl, clickedLinkUrl) {
             super(context);
             this.startingUrl = startingUrl;
-            this.startingEventWasAPopState = startingEventWasAPopState;
-            this.locationChangeTriggerUrl = locationChangeTriggerUrl;
+            this.clickedLinkUrl = clickedLinkUrl;
             this.isPopState = false;
-            this.gotPopStateWithLeavingUrl = false;
+            this.clickedLinkMatchedBackButtonUrl = false;
+            this.debugPropertyKeys = ['idle', 'startingUrl', 'clickedLinkUrl', 'firstCancelEventUrl', 'clickedLinkMatchedBackButtonUrl', 'popStateEventUrl'];
         }
         /**
          * @return {?}
@@ -3707,29 +3988,35 @@ if (false) {
         onRouterStarted(event) {
             return this.ignore(event);
         }
-        // @Trace()
         /**
          * @param {?} event
          * @return {?}
          */
         onRouterCancelled(event) {
-            // Depending on the state of the router and what was done we get a different
-            // sequence of events.
-            // If the navigation change was triggered by clicking a link we'll get a cancel with the locationChangeTriggerUrl as the final event.
-            // If the navigation change was triggered with a pop state then we'll get an onPopState with the locationChangeTriggerUrl but no cancel event with it.
-            if (this.gotPopStateWithLeavingUrl && this.interactionService.isActive()) {
-                /** @type {?} */
-                const interactionIds = this.interactionService.activeInteractionContextIds.value;
-                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+            // TODO: should really split this into two sub states in the first cancel event.
+            if (!this.firstCancelEventUrl) {
+                this.firstCancelEventUrl = event.url;
+                this.clickedLinkMatchedBackButtonUrl = event.url === this.clickedLinkUrl;
+                return this.ignore(event);
+            }
+            else {
+                // we wait for our popped state to come in.
+                if (!this.clickedLinkMatchedBackButtonUrl && this.popStateEventUrl) {
+                    return this.finaliseRouting();
+                }
             }
-            return this.gotPopStateWithLeavingUrl || this.locationChangeTriggerUrl === event.url ? this.createIdleState() : this.ignore(event);
         }
         /**
          * @param {?} event
          * @return {?}
          */
         onRouterEnd(event) {
-            return this.ignore(event);
+            if (this.clickedLinkMatchedBackButtonUrl) {
+                return this.finaliseRouting();
+            }
+            else {
+                return this.ignore(event);
+            }
         }
         /**
          * @param {?} event
@@ -3743,10 +4030,27 @@ if (false) {
          * @return {?}
          */
         onPopState(event) {
-            this.gotPopStateWithLeavingUrl = this.gotPopStateWithLeavingUrl || event.url === this.locationChangeTriggerUrl;
+            this.popStateEventUrl = event.url;
             return this.ignore(event);
         }
-        // @Trace()
+        /**
+         * @return {?}
+         */
+        finaliseRouting() {
+            Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+            this.resetBrowserLocation(this.clickedLinkUrl); // put the back click one back in.
+            if (this.interactionService.isActive()) {
+                /** @type {?} */
+                const interactionIds = this.interactionService.activeInteractionContextIds.value;
+                // Angular doesn't preserve the url when a guard cancels the back button.
+                // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+            }
+            else {
+                this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
+            }
+            return this.createIdleState();
+        }
         /**
          * @param {?} component
          * @param {?} currentUrl
@@ -3758,38 +4062,144 @@ if (false) {
                 return false;
             });
         }
+    }
+    NavigationState.LinkTriggeredNavigationInteractionCancelled = LinkTriggeredNavigationInteractionCancelled;
+    if (false) {
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.isPopState;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.firstCancelEventUrl;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.popStateEventUrl;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.clickedLinkMatchedBackButtonUrl;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.debugPropertyKeys;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.startingUrl;
+        /** @type {?} */
+        LinkTriggeredNavigationInteractionCancelled.prototype.clickedLinkUrl;
+    }
+    /**
+     * This state handles the scenario where a pop state triggered and interaction and the user clickeb back a second time to cancel it.
+     * The sequence of routing events/state transitions is as follows.
+     * -> Idle -> PopStateTransition (poppedHistoryUrl == page to go to, startingUrl = page to stay on )
+     * -> confirm dialog shown.
+     * -> click back
+     * -> PopStateTransition -> CancelledDuringBackButtonNavigationInteraction(trigger url is the page before the popped history url)
+     * -> NavigationCancel (for the previous back)
+     * -> PopState
+     * -> NavigationCancel
+     */
+    class PopStateTriggeredNavigationInteractionCancelled extends NavigationState {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         * @param {?} locationChangeTriggerUrl
+         * @param {?} poppedHistoryUrl
+         */
+        constructor(context, startingUrl, locationChangeTriggerUrl, poppedHistoryUrl) {
+            super(context);
+            this.startingUrl = startingUrl;
+            this.locationChangeTriggerUrl = locationChangeTriggerUrl;
+            this.poppedHistoryUrl = poppedHistoryUrl;
+            this.isPopState = false;
+            this.firstCancelHandled = false;
+            this.popStateHandled = false;
+            this.debugPropertyKeys = ['idle', 'startingUrl', 'poppedHistoryUrl', 'locationChangeTriggerUrl', 'popStateEventUrl', 'firstCancelHandled', 'popStateHandled'];
+        }
+        /**
+         * @return {?}
+         */
+        get isTransitional() {
+            return true;
+        }
         /**
          * @param {?} event
-         * @param {?=} reason
          * @return {?}
          */
-        ignore(event, reason) {
-            reason = reason ? ` -> ${reason}` : '';
-            Logger.get(this).info(`ignoring router event${reason}: ${event.constructor.name} -> ${event.url}`);
-            return this;
+        onRouterStarted(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterCancelled(event) {
+            if (this.firstCancelHandled && this.popStateHandled) {
+                // Angular doesn't preserve the url when a guard cancels the back button.
+                // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+                this.resetBrowserLocation(this.locationChangeTriggerUrl); // put the second back click one back in.
+                this.resetBrowserLocation(this.poppedHistoryUrl); // put the first back click one back in.
+                if (this.interactionService.isActive()) {
+                    /** @type {?} */
+                    const interactionIds = this.interactionService.activeInteractionContextIds.value;
+                    this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                }
+                else {
+                    this.resetBrowserLocation(this.startingUrl); // and now put our own url back in.
+                }
+                return this.createIdleState();
+            }
+            else {
+                this.firstCancelHandled = true;
+                return this.ignore(event);
+            }
         }
         /**
+         * @param {?} event
          * @return {?}
          */
-        toString() {
-            return `${this.constructor.name}(isIdl: ${this.idle}, startingUrl: ${this.startingUrl}, locationChangeTriggerUrl:${this.locationChangeTriggerUrl})`;
+        onRouterEnd(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterError(event) {
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onPopState(event) {
+            this.popStateHandled = true;
+            this.popStateEventUrl = event.url;
+            return this.ignore(event);
+        }
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        canDeactivatePlace(component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function* () {
+                return false;
+            });
         }
     }
-    NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
+    NavigationState.PopStateTriggeredNavigationInteractionCancelled = PopStateTriggeredNavigationInteractionCancelled;
     if (false) {
         /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.isPopState;
-        /**
-         * @type {?}
-         * @private
-         */
-        CancelledDuringNavigationInteraction.prototype.gotPopStateWithLeavingUrl;
+        PopStateTriggeredNavigationInteractionCancelled.prototype.isPopState;
+        /** @type {?} */
+        PopStateTriggeredNavigationInteractionCancelled.prototype.firstCancelHandled;
+        /** @type {?} */
+        PopStateTriggeredNavigationInteractionCancelled.prototype.popStateHandled;
+        /** @type {?} */
+        PopStateTriggeredNavigationInteractionCancelled.prototype.popStateEventUrl;
+        /** @type {?} */
+        PopStateTriggeredNavigationInteractionCancelled.prototype.debugPropertyKeys;
         /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.startingUrl;
+        PopStateTriggeredNavigationInteractionCancelled.prototype.startingUrl;
         /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.startingEventWasAPopState;
+        PopStateTriggeredNavigationInteractionCancelled.prototype.locationChangeTriggerUrl;
         /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
+        PopStateTriggeredNavigationInteractionCancelled.prototype.poppedHistoryUrl;
     }
 })(NavigationState || (NavigationState = {}));
 
@@ -6440,7 +6850,8 @@ function RouteId(type, options) {
         /** @type {?} */
         const param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate({ tag: `@RouteId(${prototype.constructor.name}.${propertyKey.toString()})` })(prototype, propertyKey);
+        // UseDelegate({tag: `@RouteId(${prototype.constructor.name}.${propertyKey.toString()})`})(prototype, propertyKey);
+        UseDelegate()(prototype, propertyKey);
     });
 }
 /**
@@ -6460,7 +6871,8 @@ function VisitParameter(options) {
         /** @type {?} */
         const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate({ tag: `@VisitParameter(${prototype.constructor.name}.${propertyKey.toString()})` })(prototype, propertyKey);
+        // UseDelegate({tag: `@VisitParameter(${prototype.constructor.name}.${propertyKey.toString()})`})(prototype, propertyKey);
+        UseDelegate()(prototype, propertyKey);
     });
 }
 /**
@@ -6480,7 +6892,8 @@ function VisitParameterList(options) {
         /** @type {?} */
         const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate({ tag: `@VisitParameterList(${prototype.constructor.name}.${propertyKey.toString()})` })(prototype, propertyKey);
+        UseDelegate()(prototype, propertyKey);
+        // UseDelegate({tag: `@VisitParameterList(${prototype.constructor.name}.${propertyKey.toString()})`})(prototype, propertyKey);
     });
 }