@coolon/angular-ui-powerups 0.0.88 → 0.0.90

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

@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule, MatFormFieldModule, MatSelectModule, MatDialog, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule } from '@angular/material';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __spread } from 'tslib';
-import { assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Trace, Guard as Guard$1, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { __extends, __decorate, __metadata, __awaiter, __generator, __assign, __spread } from 'tslib';
+import { assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, Binding, MutableValueModel, Trace, Guard as Guard$1, Command, StoreInValueModel, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import { Router, RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSerializer } from '@angular/router';
+import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, UrlSerializer, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
@@ -911,6 +911,33 @@ InteractionContext = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    /**
+     * @param {?} confirm
+     * @return {?}
+     */
+    InteractionContext.prototype.confirm = /**
+     * @param {?} confirm
+     * @return {?}
+     */
+    function (confirm) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.confirmOrReject(confirm)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/, true];
+                    case 2:
+                        _a = _b.sent();
+                        return [2 /*return*/, false];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
     return InteractionContext;
 }(GarbageCollector));
 if (false) {
@@ -939,7 +966,7 @@ if (false) {
      * @param {?} confirm
      * @return {?}
      */
-    InteractionContext.prototype.confirm = function (confirm) { };
+    InteractionContext.prototype.confirmOrReject = function (confirm) { };
     /**
      * Presents the confirmation to the user and runs the activity only if the user confirms.
      * @abstract
@@ -1727,7 +1754,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
      * @param {?} confirm
      * @return {?}
      */
-    ActivityContainerComponent.prototype.confirm = /**
+    ActivityContainerComponent.prototype.confirmOrReject = /**
      * @param {?} confirm
      * @return {?}
      */
@@ -1983,7 +2010,7 @@ var InplaceInteractionContextComponent = /** @class */ (function (_super) {
      * @param {?} confirm
      * @return {?}
      */
-    InplaceInteractionContextComponent.prototype.confirm = /**
+    InplaceInteractionContextComponent.prototype.confirmOrReject = /**
      * @param {?} confirm
      * @return {?}
      */
@@ -2359,7 +2386,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
      * @param {?} confirm
      * @return {?}
      */
-    DialogInteractionService.prototype.confirm = /**
+    DialogInteractionService.prototype.confirmOrReject = /**
      * @param {?} confirm
      * @return {?}
      */
@@ -2477,78 +2504,6 @@ var InteractionModule = /** @class */ (function () {
     return InteractionModule;
 }());
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var BusyOverlayComponent = /** @class */ (function () {
-    function BusyOverlayComponent() {
-    }
-    /**
-     * @return {?}
-     */
-    BusyOverlayComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    BusyOverlayComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-busy-overlay',
-                    template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
-                    styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:-ms-grid;display:grid;-ms-grid-columns:auto;grid-template-columns:auto;-ms-grid-rows:auto;grid-template-rows:auto;place-content:center}"]
-                }] }
-    ];
-    /** @nocollapse */
-    BusyOverlayComponent.ctorParameters = function () { return []; };
-    BusyOverlayComponent.propDecorators = {
-        busyModel: [{ type: Input }],
-        busy: [{ type: Input }]
-    };
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ValueModel)
-    ], BusyOverlayComponent.prototype, "busyModel", void 0);
-    __decorate([
-        StoreInValueModel('busyModel'),
-        __metadata("design:type", Boolean)
-    ], BusyOverlayComponent.prototype, "busy", void 0);
-    return BusyOverlayComponent;
-}());
-if (false) {
-    /** @type {?} */
-    BusyOverlayComponent.prototype.busyModel;
-    /** @type {?} */
-    BusyOverlayComponent.prototype.busy;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var EmptyStateComponent = /** @class */ (function () {
-    function EmptyStateComponent() {
-    }
-    /**
-     * @return {?}
-     */
-    EmptyStateComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    EmptyStateComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-empty-state',
-                    template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
-                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
-                }] }
-    ];
-    /** @nocollapse */
-    EmptyStateComponent.ctorParameters = function () { return []; };
-    return EmptyStateComponent;
-}());
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2984,49 +2939,25 @@ var PlaceDefinition = /** @class */ (function () {
         return routeIdParameterDef ? visit.getParameter(routeIdParameterDef.name) : null;
     };
     /**
-     * Returns angular router commands that specify the route id and any route parameters.  The result does
-     * not include any path information.
-     */
-    // getFormattedRouterCommands(visit: Visit): any[] {
-    //   return this.hasRouteId() ?
-    //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
-    //     [this.getFormattedRouteParameters(visit)];
-    // }
-    /**
-     * Returns angular router commands that specify the route id and any route parameters.  The result does
-     * not include any path information.
      * @param {?} visit
      * @return {?}
      */
-    // getFormattedRouterCommands(visit: Visit): any[] {
-    //   return this.hasRouteId() ?
-    //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
-    //     [this.getFormattedRouteParameters(visit)];
-    // }
     PlaceDefinition.prototype.getFormattedRouteId = /**
-     * Returns angular router commands that specify the route id and any route parameters.  The result does
-     * not include any path information.
      * @param {?} visit
      * @return {?}
      */
-    // getFormattedRouterCommands(visit: Visit): any[] {
-    //   return this.hasRouteId() ?
-    //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
-    //     [this.getFormattedRouteParameters(visit)];
-    // }
     function (visit) {
-        return visit.hasRouteId() ? this.getRouteIdParameterDef().urlFormat.format(visit.getRouteId()) : null;
+        // Note: RouteIds are always present in the url and are just empty strings when not defined.  This is
+        // mandated by the fact that redirects from <path> to <path>/:id always include the id parameter as
+        // an empty string.
+        return visit.hasRouteId() ? this.getRouteIdParameterDef().urlFormat.format(visit.getRouteId()) : "";
     };
-    // @Trace()
-    // @Trace()
     /**
      * @param {?} visit
      * @param {?=} includeRouteId
      * @return {?}
      */
-    PlaceDefinition.prototype.getFormattedRouteParameters = 
-    // @Trace()
-    /**
+    PlaceDefinition.prototype.getFormattedRouteParameters = /**
      * @param {?} visit
      * @param {?=} includeRouteId
      * @return {?}
@@ -3122,15 +3053,17 @@ var PlaceDefinition = /** @class */ (function () {
                 }
                 else {
                     /** @type {?} */
-                    var value = def.urlFormat.parse(params.get(def.name));
-                    // because our id routes redirect if the id isn't pressent we always have a id
-                    // parameter in our params.  This will bugger our remember and defaultvalue sanitisation
-                    // as it'll see that the id is present (event thought its null).  The sanitisation can't
-                    // check for null as that's a valid value for the id.
-                    /** @type {?} */
-                    var isEmptyRouteId = def.isRouteId && def.isEmptyValue(value);
-                    if (!isEmptyRouteId) {
-                        result[def.name] = value;
+                    var value = params.get(def.name);
+                    if (def.isRouteId) { // TODO: Move this to parameter def so it's a strategy pattern
+                        // because our id routes redirect if the id isn't present we always have a id
+                        // parameter in our params.  This will bugger our remember and defaultvalue sanitisation
+                        // as it'll see that the id is present (event thought its a blank string).
+                        if (!___default.isEmpty(value)) {
+                            result[def.name] = def.urlFormat.parse(value);
+                        }
+                    }
+                    else {
+                        result[def.name] = def.urlFormat.parse(value);
                     }
                 }
             }
@@ -3500,8 +3433,10 @@ var Visit = /** @class */ (function () {
             else {
                 // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
                 // defaults and remember sanitisation process.
+                /** @type {?} */
+                var value = _this.getParameter(def.name);
                 if (_this.hasParameter(def.name)) {
-                    params[def.name] = _this.getParameter(def.name);
+                    params[def.name] = value;
                 }
             }
         }));
@@ -3535,17 +3470,6 @@ var Visit = /** @class */ (function () {
         var sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
         return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
     };
-    /**
-     * @return {?}
-     */
-    Visit.prototype.getUrlSegments = /**
-     * @return {?}
-     */
-    function () {
-        return this.placeDefinition.hasRouteId() ?
-            [new UrlSegment(this.placeDefinition.path, {}), new UrlSegment(this.placeDefinition.getFormattedRouteId(this), this.placeDefinition.getFormattedRouteParameters(this))] :
-            [new UrlSegment(this.placeDefinition.path, this.placeDefinition.getFormattedRouteParameters(this))];
-    };
     return Visit;
 }());
 if (false) {
@@ -3847,9 +3771,10 @@ if (false) {
  */
 var PlaceRouter = /** @class */ (function (_super) {
     __extends(PlaceRouter, _super);
-    function PlaceRouter(router, angularLocation, placeHistory) {
+    function PlaceRouter(router, urlSerializer, angularLocation, placeHistory) {
         var _this = _super.call(this) || this;
         _this.router = router;
+        _this.urlSerializer = urlSerializer;
         _this.angularLocation = angularLocation;
         _this.placeHistory = placeHistory;
         _this.firstRoute = true;
@@ -4000,19 +3925,19 @@ var PlaceRouter = /** @class */ (function (_super) {
                          * @return {?}
                          */
                         function (router) {
-                            // we have to to use the definition for route id as our redirection always includes
-                            // the id in the url segements (but leaves it blank when there's no id). I.e. in the
-                            // no id case we're doing the following redirect [<placePath>, ""] -> ["..", <id>]
                             /** @type {?} */
-                            var relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
-                            /** @type {?} */
-                            var commands = __spread([
-                                relativePath
-                            ], _this.createRouteParameters(next), _this.extractChildPath(activatedRoute.snapshot));
-                            console.log('### Push Changes to route Redirect', { commands: commands, relativeTo: activatedRoute.snapshot.url });
-                            return router.navigate(commands, {
-                                relativeTo: activatedRoute
-                            });
+                            var commands = _this.createUrlManipulator(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
+                            // // we have to to use the definition for route id as our redirection always includes
+                            // // the id in the url segements (but leaves it blank when there's no id). I.e. in the
+                            // // no id case we're doing the following redirect [<placePath>, ""] -> ["..", <id>]
+                            // const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
+                            // const commands = [
+                            //   relativePath,
+                            //   ...this.createRouteParameters(next),
+                            //   ...this.extractChildPath(activatedRoute.snapshot)
+                            // ];
+                            console.log('### Push Changes to route Redirect', { commands: commands });
+                            return router.navigate(commands);
                         }))];
                 }
                 return [2 /*return*/];
@@ -4140,6 +4065,17 @@ var PlaceRouter = /** @class */ (function (_super) {
          */
         function (child) { return child.url; })));
     };
+    /**
+     * @param {?} snapshot
+     * @return {?}
+     */
+    PlaceRouter.prototype.createUrlManipulator = /**
+     * @param {?} snapshot
+     * @return {?}
+     */
+    function (snapshot) {
+        return new PlaceRouter.UrlManipulator(this.urlSerializer.parse(snapshot.url));
+    };
     PlaceRouter.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -4148,10 +4084,11 @@ var PlaceRouter = /** @class */ (function (_super) {
     /** @nocollapse */
     PlaceRouter.ctorParameters = function () { return [
         { type: Router },
+        { type: UrlSerializer },
         { type: Location },
         { type: PlaceHistory }
     ]; };
-    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
     __decorate([
         Trace(),
         __metadata("design:type", Function),
@@ -4185,11 +4122,125 @@ if (false) {
      * @private
      */
     PlaceRouter.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceRouter.prototype.urlSerializer;
     /** @type {?} */
     PlaceRouter.prototype.angularLocation;
     /** @type {?} */
     PlaceRouter.prototype.placeHistory;
 }
+(function (PlaceRouter) {
+    var UrlManipulator = /** @class */ (function () {
+        function UrlManipulator(urlTree) {
+            this.urlTree = urlTree;
+            console.log({ segments: this.urlTree.root.children.primary.segments });
+        }
+        /**
+         * @return {?}
+         */
+        UrlManipulator.prototype.cloneUrlSegmentList = /**
+         * @return {?}
+         */
+        function () {
+            return __spread(this.urlTree.root.children.primary.segments);
+        };
+        /**
+         * @param {?} visit
+         * @return {?}
+         */
+        UrlManipulator.prototype.updateVisitSegments = /**
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            // Ugly, but it works for now.
+            /** @type {?} */
+            var segments = this.cloneUrlSegmentList();
+            /** @type {?} */
+            var visitSegments = this.convertToUrlSegments(visit);
+            /** @type {?} */
+            var replaceAt = segments.findIndex((/**
+             * @param {?} segment
+             * @return {?}
+             */
+            function (segment) { return segment.path === visitSegments[0].path; }));
+            // do not use the return value, it's the items that were removed!
+            segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
+            return segments;
+        };
+        /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param visit
+         */
+        /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param {?} visit
+         * @return {?}
+         */
+        UrlManipulator.prototype.convertToUrlSegments = /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            return visit.placeDefinition.hasRouteId() ?
+                [
+                    // NOTE:
+                    // It's important to attach the params to the root path and not the id.  If we attach them
+                    // to an empty id then the angular router won't match the pattern.
+                    new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
+                    new UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
+                ]
+                :
+                    [
+                        new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
+                    ];
+        };
+        /**
+         * @param {?} visit
+         * @return {?}
+         */
+        UrlManipulator.prototype.createRedirectCommandsFor = /**
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            /** @type {?} */
+            var segments = this.updateVisitSegments(visit);
+            /** @type {?} */
+            var commands = [];
+            segments.forEach((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) {
+                commands.push(s.path);
+                if (s.parameterMap.keys.length > 0) {
+                    commands.push(s.parameters);
+                }
+            }));
+            return commands;
+        };
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit]),
+            __metadata("design:returntype", Array)
+        ], UrlManipulator.prototype, "createRedirectCommandsFor", null);
+        return UrlManipulator;
+    }());
+    PlaceRouter.UrlManipulator = UrlManipulator;
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        UrlManipulator.prototype.urlTree;
+    }
+})(PlaceRouter || (PlaceRouter = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -4752,6 +4803,13 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
      */
     function () {
     };
+    AbstractPlaceNavigationComponent.decorators = [
+        { type: Component, args: [{
+                    template: ''
+                }] }
+    ];
+    /** @nocollapse */
+    AbstractPlaceNavigationComponent.ctorParameters = function () { return []; };
     AbstractPlaceNavigationComponent.propDecorators = {
         places: [{ type: Input }],
         placesModel: [{ type: Input }],
@@ -4799,6 +4857,78 @@ if (false) {
     AbstractPlaceNavigationComponent.prototype.activePlaceDefinition;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var BusyOverlayComponent = /** @class */ (function () {
+    function BusyOverlayComponent() {
+    }
+    /**
+     * @return {?}
+     */
+    BusyOverlayComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    BusyOverlayComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-busy-overlay',
+                    template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
+                    styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:-ms-grid;display:grid;-ms-grid-columns:auto;grid-template-columns:auto;-ms-grid-rows:auto;grid-template-rows:auto;place-content:center}"]
+                }] }
+    ];
+    /** @nocollapse */
+    BusyOverlayComponent.ctorParameters = function () { return []; };
+    BusyOverlayComponent.propDecorators = {
+        busyModel: [{ type: Input }],
+        busy: [{ type: Input }]
+    };
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ValueModel)
+    ], BusyOverlayComponent.prototype, "busyModel", void 0);
+    __decorate([
+        StoreInValueModel('busyModel'),
+        __metadata("design:type", Boolean)
+    ], BusyOverlayComponent.prototype, "busy", void 0);
+    return BusyOverlayComponent;
+}());
+if (false) {
+    /** @type {?} */
+    BusyOverlayComponent.prototype.busyModel;
+    /** @type {?} */
+    BusyOverlayComponent.prototype.busy;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var EmptyStateComponent = /** @class */ (function () {
+    function EmptyStateComponent() {
+    }
+    /**
+     * @return {?}
+     */
+    EmptyStateComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    EmptyStateComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-empty-state',
+                    template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
+                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                }] }
+    ];
+    /** @nocollapse */
+    EmptyStateComponent.ctorParameters = function () { return []; };
+    return EmptyStateComponent;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -4902,7 +5032,8 @@ var PlaceModule = /** @class */ (function () {
                         BusyOverlayComponent,
                         PlaceOutletComponent,
                         TabbedPlaceNavigationComponent,
-                        ListPlaceNavComponent
+                        ListPlaceNavComponent,
+                        AbstractPlaceNavigationComponent
                     ],
                     entryComponents: [BusyOverlayComponent],
                     exports: [
@@ -4910,7 +5041,8 @@ var PlaceModule = /** @class */ (function () {
                         PlaceOutletComponent,
                         EmptyStateComponent,
                         TabbedPlaceNavigationComponent,
-                        ListPlaceNavComponent
+                        ListPlaceNavComponent,
+                        AbstractPlaceNavigationComponent
                     ],
                     providers: [
                     // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "2000ms"}}
@@ -5859,7 +5991,7 @@ var EnterPlaceGuard = /** @class */ (function () {
      */
     function (activatedRoute, state) {
         return __awaiter(this, void 0, void 0, function () {
-            var placeDefinition, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, routerStateUrlTree, commands;
+            var placeDefinition, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -5876,9 +6008,8 @@ var EnterPlaceGuard = /** @class */ (function () {
                         // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
                         this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
                         if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                            routerStateUrlTree = this.urlSerializer.parse(state.url);
                             // Regenerate the url
-                            commands = this.createRedirectCommands(sanitisedVisit, __spread(routerStateUrlTree.root.children.primary.segments)).commands;
+                            commands = this.placeRouter.createUrlManipulator(state).createRedirectCommandsFor(sanitisedVisit);
                             console.log('##### Place Guard Redirect', commands);
                             return [2 /*return*/, this.router.createUrlTree(commands, {
                                     replaceUrl: true,
@@ -5895,46 +6026,6 @@ var EnterPlaceGuard = /** @class */ (function () {
             });
         });
     };
-    /**
-     * @private
-     * @param {?} sanitisedVisit
-     * @param {?} path
-     * @return {?}
-     */
-    EnterPlaceGuard.prototype.createRedirectCommands = /**
-     * @private
-     * @param {?} sanitisedVisit
-     * @param {?} path
-     * @return {?}
-     */
-    function (sanitisedVisit, path) {
-        // Ugly, but it works for now.
-        /** @type {?} */
-        var newSegments = sanitisedVisit.getUrlSegments();
-        /** @type {?} */
-        var replaceAt = path.findIndex((/**
-         * @param {?} segment
-         * @return {?}
-         */
-        function (segment) { return segment.path === newSegments[0].path; }));
-        /** @type {?} */
-        var newPath = __spread(path);
-        newPath.splice.apply(newPath, __spread([replaceAt, newSegments.length], newSegments)); // do not use the return value, it's the items that were removed!
-        // do not use the return value, it's the items that were removed!
-        /** @type {?} */
-        var commands = [];
-        newPath.forEach((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) {
-            commands.push(s.path);
-            if (s.parameterMap.keys.length > 0) {
-                commands.push(s.parameters);
-            }
-        }));
-        return { newPath: newPath, commands: commands };
-    };
     EnterPlaceGuard.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'