@coolon/angular-ui-powerups 12.3.1 → 12.4.0-alpha.0

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -2394,6 +2394,13 @@
     SwitchCaseDefaultDirective.ctorParameters = function () { return [
         { type: i0.TemplateRef }
     ]; };
+    /**
+     * @example
+     * <aup-switch-case [switchModel]="booleanModel">
+     *    <div *aupSwitchCaseWhen="true"></div>
+     *    <div *aupSwitchCaseDefault>The default content</div>
+     * </aup-switch-case>
+     */
     var SwitchCaseComponent = /** @class */ (function (_super) {
         __extends(SwitchCaseComponent, _super);
         function SwitchCaseComponent(cdr) {
@@ -3886,7 +3893,7 @@
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
                     providers: [
                         { provide: AbstractTableComponent, useExisting: TableComponent }
                     ],
@@ -4538,7 +4545,7 @@
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-tree-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
                     providers: [
                         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
                     ],
@@ -6525,6 +6532,7 @@
                 },] }
     ];
 
+    var PARAMETER_DEFINITION_KEY = Symbol("parameterDefinition");
     exports.ParameterDefinition = /** @class */ (function () {
         function ParameterDefinition(propertyName, options, urlFormat) {
             this.propertyName = propertyName;
@@ -6548,6 +6556,11 @@
             enumerable: false,
             configurable: true
         });
+        ParameterDefinition.prototype.createBackingModel = function () {
+            var model = this.backingModelFactory();
+            model[PARAMETER_DEFINITION_KEY] = this;
+            return model;
+        };
         ParameterDefinition.prototype.getOptionValue = function (key) {
             return this.options.getOptional(key, null);
         };
@@ -6561,7 +6574,7 @@
                         if (returningFromSomewhereElse) {
                             lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
                             if (this.remember && lastKnownVisit) {
-                                value = lastKnownVisit.getParameter(this.name);
+                                value = lastKnownVisit.getParameterValue(this);
                             }
                             return [2 /*return*/, this.isEmptyValue(value) ? this.defaultValue : value];
                         }
@@ -6572,7 +6585,7 @@
             });
         };
         ParameterDefinition.prototype.isMissingFrom = function (visit) {
-            return !visit.hasParameter(this.name);
+            return !visit.hasParameter(this);
         };
         return ParameterDefinition;
     }());
@@ -6583,6 +6596,7 @@
                 var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
                 _this.isRouteId = true;
                 _this.isArray = false;
+                _this.backingModelFactory = function () { return new pectin.MutableValueModel(); };
                 return _this;
             }
             RouteId.prototype.isEmptyValue = function (value) {
@@ -6600,6 +6614,7 @@
                 var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
                 _this.isRouteId = false;
                 _this.isArray = false;
+                _this.backingModelFactory = function () { return new pectin.MutableValueModel(); };
                 return _this;
             }
             ValueParameter.prototype.isEmptyValue = function (value) {
@@ -6617,6 +6632,7 @@
                 var _this = _super.call(this, parameterName, options, urlFormat) || this;
                 _this.isRouteId = false;
                 _this.isArray = true;
+                _this.backingModelFactory = function () { return new pectin.MutableListModel(); };
                 return _this;
             }
             ArrayParameter.prototype.isEmptyValue = function (value) {
@@ -6628,6 +6644,14 @@
             return ArrayParameter;
         }(ParameterDefinition));
         ParameterDefinition.ArrayParameter = ArrayParameter;
+        function get(model) {
+            var parameterDefinition = model[PARAMETER_DEFINITION_KEY];
+            if (!parameterDefinition) {
+                typescriptUtilities.lang.illegalArgument("model hasn't been annotated with @VisitParameter, @VisitParameterList or @RouteId");
+            }
+            return parameterDefinition;
+        }
+        ParameterDefinition.get = get;
     })(exports.ParameterDefinition || (exports.ParameterDefinition = {}));
 
     var PlaceDefinition = /** @class */ (function () {
@@ -6679,7 +6703,7 @@
         };
         PlaceDefinition.prototype.getRouteIdFrom = function (visit) {
             var routeIdParameterDef = this.getRouteIdParameterDef();
-            return routeIdParameterDef ? visit.getParameter(routeIdParameterDef.name) : null;
+            return routeIdParameterDef ? visit.getParameterValue(routeIdParameterDef) : null;
         };
         PlaceDefinition.prototype.getFormattedRouteId = function (visit) {
             // Note: RouteIds are always present in the url and are just empty strings when not defined.  This is
@@ -6695,7 +6719,7 @@
                 includeRouteId: includeRouteId,
                 includeRouteParameters: true
             }).forEach(function (def) {
-                var value = visit.getParameter(def.name);
+                var value = visit.getParameterValue(def);
                 if (!def.isEmptyValue(value)) {
                     if (def.isArray) {
                         pectin.assert.isArray(value);
@@ -6712,7 +6736,7 @@
         PlaceDefinition.prototype.getNonRouteParameters = function (visit) {
             var result = {};
             this.getVisitParameterDefs({ includeNonRouteParameters: true }).forEach(function (def) {
-                var value = visit.getParameter(def.name);
+                var value = visit.getParameterValue(def);
                 if (!def.isEmptyValue(value)) {
                     result[def.name] = value;
                 }
@@ -6777,15 +6801,29 @@
     var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
     // this one seems ok.
     var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+    var ParameterChangeInterceptor = /** @class */ (function () {
+        function ParameterChangeInterceptor(parameterDef, model, callback, options) {
+        }
+        ParameterChangeInterceptor.prototype.canProceed = function (nextState, interactionContext) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
+        return ParameterChangeInterceptor;
+    }());
     exports.PlaceComponent = /** @class */ (function (_super) {
         __extends(PlaceComponent, _super);
         function PlaceComponent() {
             var _this = _super.call(this) || this;
+            _this._placeReadyCallbacks = [];
             _this.visitModel = new pectin.MutableValueModel();
             _this._inVisitUpdate = new pectin.Guard();
             _this._active = new pectin.MutableValueModel(false);
+            _this._parameterChangeInterceptors = [];
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
+            when(_this._active).becomesTruthy(function () { return _this._notifyPlaceReady(); });
             _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
@@ -6818,7 +6856,7 @@
             pectin.DebugContext.tag(model, this.placeDefinition.component.name + "." + parameterDef.propertyName);
             var binding = this.registerDisposable(new pectin.Binding(this.visitModel, model, {
                 toRight: function (visit) {
-                    var value = visit.getParameter(parameterDef.name);
+                    var value = visit.getParameterValue(parameterDef);
                     // console.log('push to component', { name: parameterDef.name, value, visit });
                     return value;
                 },
@@ -6831,7 +6869,11 @@
         };
         Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
             get: function () {
-                return PlaceComponent.getDefinition(this.constructor);
+                var definition = PlaceComponent.getDefinition(this.constructor);
+                if (!definition) {
+                    pectin.lang.illegalState(this.constructor.name + " extends PlaceComponent but doesn't have @Place({..}) decorator.");
+                }
+                return definition;
             },
             enumerable: false,
             configurable: true
@@ -6843,13 +6885,74 @@
             enumerable: false,
             configurable: true
         });
+        /**
+         * Called by the router to see if this component can deactivate.  This isn't called for route parameter changes.
+         * @param interactionContext
+         */
+        PlaceComponent.prototype._canLeavePlace = function (interactionContext) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.canDeactivate ? this.canDeactivate(interactionContext) : true];
+                });
+            });
+        };
+        /**
+         * Called by the router to see if this component can deactivate.  This isn't called for route parameter changes.
+         * @param interactionContext
+         * @param nextState
+         */
+        PlaceComponent.prototype._canChangeRouteParameters = function (interactionContext, nextState) {
+            return __awaiter(this, void 0, void 0, function () {
+                var visit, i, interceptor, keepGoing;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this._parameterChangeInterceptors.length > 0)) return [3 /*break*/, 4];
+                            visit = nextState.createVisitFor(this.placeDefinition);
+                            i = 0;
+                            _a.label = 1;
+                        case 1:
+                            if (!(i < this._parameterChangeInterceptors.length)) return [3 /*break*/, 4];
+                            interceptor = this._parameterChangeInterceptors[i];
+                            return [4 /*yield*/, interceptor.canProceed(visit, interactionContext)];
+                        case 2:
+                            keepGoing = _a.sent();
+                            if (!keepGoing) {
+                                return [2 /*return*/, false];
+                            }
+                            _a.label = 3;
+                        case 3:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [2 /*return*/, true];
+                    }
+                });
+            });
+        };
         /**
          * Called by the router when the place is ready to interact after any animations have run.
          */
         PlaceComponent.prototype._notifyActive = function (active) {
             this._active.value = active;
         };
-        PlaceComponent.prototype.onPlaceReady = function () {
+        /**
+         * Called by the router when the place is ready to interact after any animations have run.
+         */
+        PlaceComponent.prototype._notifyPlaceReady = function () {
+            if (this.onPlaceReady.length === 1) {
+                this._placeReadyCallbacks.forEach(function (callback) { return callback(); });
+            }
+            else {
+                console.warn('Overriding PlaceComponent.onPlaceReady has been deprecated.  Use PlaceComponent.onPlaceReady(() => {... do stuff...}) instead.');
+                this.onPlaceReady(undefined);
+            }
+        };
+        PlaceComponent.prototype.onPlaceReady = function (callback) {
+            this._placeReadyCallbacks.push(callback);
+        };
+        PlaceComponent.prototype.interceptVisitParameterChange = function (model, callback, options) {
+            var parameterDef = exports.ParameterDefinition.get(model);
+            this._parameterChangeInterceptors.push(new ParameterChangeInterceptor(parameterDef, model, callback, options));
         };
         return PlaceComponent;
     }(DisposableComponent));
@@ -6890,6 +6993,250 @@
         PlaceComponent.injectDefinition = injectDefinition;
     })(exports.PlaceComponent || (exports.PlaceComponent = {}));
 
+    /**
+     * This a work around for the fact that an activated route with multiple segments doesn't
+     * include the segment params in the paramMap as well as each segment returns an empty
+     * param map even when `parameter`s has content.
+     */
+    var ConsolidatedParameterMap = /** @class */ (function () {
+        function ConsolidatedParameterMap(urlSegments, paramMap) {
+            this.paramMaps = [];
+            // TODO: can we get all our params from teh url segments? If so we can drop the paramMap altogether.
+            var segmentParams = (urlSegments || []).map(function (s) { return new ParamMapAdapter(s.parameters); });
+            this.paramMaps = segmentParams
+                .concat(paramMap)
+                .filter(function (m) { return !!m; }); // the activated route param map can be null
+        }
+        ConsolidatedParameterMap.prototype.get = function (name) {
+            var paramMap = this.paramMaps.find(function (m) { return m.has(name); });
+            return paramMap.get(name);
+        };
+        ConsolidatedParameterMap.prototype.getAll = function (name) {
+            var paramMap = this.paramMaps.find(function (m) { return m.has(name); });
+            return paramMap.getAll(name);
+        };
+        ConsolidatedParameterMap.prototype.has = function (name) {
+            return !!this.paramMaps.find(function (m) { return m.has(name); });
+        };
+        Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
+            get: function () {
+                return this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ConsolidatedParameterMap;
+    }());
+    __decorate([
+        src.Memoize(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [])
+    ], ConsolidatedParameterMap.prototype, "keys", null);
+    var ParamMapAdapter = /** @class */ (function () {
+        function ParamMapAdapter(params) {
+            this.params = params;
+        }
+        ParamMapAdapter.prototype.get = function (name) {
+            return this.params[name];
+        };
+        ParamMapAdapter.prototype.getAll = function (name) {
+            var value = this.get(name);
+            return Array.isArray(value) ? value : [value];
+        };
+        ParamMapAdapter.prototype.has = function (name) {
+            return this.keys.includes(name);
+        };
+        Object.defineProperty(ParamMapAdapter.prototype, "keys", {
+            get: function () {
+                return Object.keys(this.params);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ParamMapAdapter;
+    }());
+
+    var Visit = /** @class */ (function () {
+        function Visit(placeDefinition, visitParameters) {
+            if (visitParameters === void 0) { visitParameters = {}; }
+            this.placeDefinition = placeDefinition;
+            this.visitParameters = visitParameters;
+        }
+        // @Trace()
+        Visit.prototype.getRouteId = function () {
+            return this.placeDefinition.getRouteIdFrom(this);
+        };
+        // @Trace()
+        Visit.prototype.hasRouteId = function () {
+            return !___namespace.isNil(this.getRouteId());
+        };
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param parameterDef the visit parameter definition
+         */
+        Visit.prototype.getParameterValue = function (parameterDef) {
+            return this.visitParameters[parameterDef.name];
+        };
+        // @Trace()
+        Visit.prototype.hasParameter = function (parameterDef) {
+            return Object.keys(this.visitParameters).includes(parameterDef.name);
+        };
+        Visit.prototype.replace = function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
+        };
+        Visit.prototype.mergeRouteParameters = function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            var routeParameterKeys = Object.keys(routeParams);
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                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.
+                    var value = _this.getParameterValue(def);
+                    if (_this.hasParameter(def)) {
+                        params[def.name] = value;
+                    }
+                }
+            });
+            return new Visit(this.placeDefinition, params);
+        };
+        Visit.prototype.hasRoutingChangedFrom = function (other) {
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = ___namespace.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        };
+        Visit.prototype.toDebugString = function () {
+            var _this = this;
+            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(',');
+        };
+        return Visit;
+    }());
+
+    function extractPrimarySegments(urlTree) {
+        return urlTree.root.children.primary.segments;
+    }
+    exports.UrlSnapshot = /** @class */ (function () {
+        // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
+        function UrlSnapshot(urlSerializer, url) {
+            this.urlSerializer = urlSerializer;
+            this.url = url;
+            this.urlTree = urlSerializer.parse(url);
+        }
+        UrlSnapshot.prototype.updateVisitSegments = function (visit) {
+            var newUrlTree = this.urlSerializer.parse(this.url);
+            // Ugly, but it works for now.
+            var segments = __spreadArray([], __read(extractPrimarySegments(newUrlTree)));
+            var visitSegments = this.getSegmentsFor(visit);
+            var replaceAt = segments.findIndex(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, __spreadArray([replaceAt, visitSegments.length], __read(visitSegments)));
+            newUrlTree.root.children.primary.segments = segments;
+            return new UrlSnapshot(this.urlSerializer, newUrlTree.toString());
+        };
+        UrlSnapshot.prototype.getPrimarySegments = function () {
+            return extractPrimarySegments(this.urlTree);
+        };
+        /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param visit
+         */
+        UrlSnapshot.prototype.getSegmentsFor = 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 i1$1.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
+                    new i1$1.UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
+                ]
+                :
+                    [
+                        new i1$1.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
+                    ];
+        };
+        UrlSnapshot.prototype.includesPathOf = function (placeDef) {
+            return this.getPrimarySegments().find(function (s) { return s.path === placeDef.path; });
+        };
+        UrlSnapshot.prototype.createVisitFor = function (placeDef) {
+            return new Visit(placeDef, new ConsolidatedParameterMap(this.getPrimarySegments()));
+        };
+        UrlSnapshot.prototype.getInteractionIds = function () {
+            var queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+            if (queryParam) {
+                return UrlSnapshot.parseInteractionIds(queryParam);
+            }
+            else {
+                return [];
+            }
+        };
+        UrlSnapshot.prototype.hasInteractions = function () {
+            return this.getInteractionIds().length > 0;
+        };
+        UrlSnapshot.prototype.hasInteractionIds = function (ids) {
+            return ___default['default'].isEqual(this.getInteractionIds(), ids);
+        };
+        // @Trace()
+        UrlSnapshot.prototype.updateInteractionIds = function (ids) {
+            if (ids.length === 0) {
+                return this.removeInteractionIds();
+            }
+            else {
+                var urlTree = this.urlSerializer.parse(this.url);
+                urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
+                return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+            }
+        };
+        // @Trace()
+        UrlSnapshot.prototype.removeInteractionIds = function () {
+            var urlTree = this.urlSerializer.parse(this.url);
+            if (urlTree.queryParams && urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM]) {
+                urlTree.queryParams = {}; //[UrlSnapshot.INTERACTION_ROUTER_OUTLET]
+            }
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+        };
+        UrlSnapshot.prototype.toString = function () {
+            return "UrlSnapshot(" + this.url + ")";
+        };
+        return UrlSnapshot;
+    }());
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Visit]),
+        __metadata("design:returntype", exports.UrlSnapshot)
+    ], exports.UrlSnapshot.prototype, "updateVisitSegments", null);
+    __decorate([
+        src.Memoize(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Array)
+    ], exports.UrlSnapshot.prototype, "getPrimarySegments", null);
+    (function (UrlSnapshot) {
+        UrlSnapshot.INTERACTION_QUERY_PARAM = 'aup-interactions';
+        UrlSnapshot.INTERACTION_ID_SEPARATOR = '--';
+        function parseInteractionIds(path) {
+            return path.split(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+        }
+        UrlSnapshot.parseInteractionIds = parseInteractionIds;
+        function createPathIdFor(interactionIds) {
+            return interactionIds.join(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+        }
+        UrlSnapshot.createPathIdFor = createPathIdFor;
+    })(exports.UrlSnapshot || (exports.UrlSnapshot = {}));
+
     /**
      * This class handles the logic around canDeactivate for a given router state transition.  It's core responsibilities are:
      * 1. Ensure we only ask the component to deactivate once on a given navigation cycle (since visit sanitisation can result in multiple round trips to through the router.)
@@ -6918,6 +7265,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "placeDefinition", {
+            get: function () {
+                return this.component.placeDefinition;
+            },
+            enumerable: false,
+            configurable: true
+        });
         // @Trace()
         PlaceComponentDeactivationHandler.prototype.canDeactivate = function (currentUrl, nextState) {
             return __awaiter(this, void 0, void 0, function () {
@@ -6933,10 +7287,9 @@
                 });
             });
         };
-        // @Trace()
         PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = function (currentUrl, nextState) {
             return __awaiter(this, void 0, void 0, function () {
-                var routeIds, currentIds;
+                var routeIds, currentIds, canLeave;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6957,27 +7310,26 @@
                             _a.sent();
                             return [2 /*return*/, false];
                         case 5:
-                            // Ok, so now we're really leaving, so we ask the component if we should.;
-                            if (this.isNotJustAChangeInRouteId(nextState)) {
-                                if (this.component.canDeactivate) {
-                                    // No interaction in progress, so ask the component .
-                                    // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
-                                    // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
-                                    return [2 /*return*/, this.component.canDeactivate(this.navigationSession.canDeactivateInteractionContext)];
-                                }
-                                // The component has an active interaction but no deactivation hook.  Rather than guessing what to do
-                                // we'll just cancel the navigation and print a warning.
-                                if (this.routerInteractionAdapter.isComponentInteracting(this.component)) {
-                                    console.warn('Route changed while component has active interaction, cancelling navigation');
-                                    return [2 /*return*/, false];
-                                }
+                            if (!this.isGoingToADifferentPlace(nextState)) return [3 /*break*/, 7];
+                            return [4 /*yield*/, this.component._canLeavePlace(this.navigationSession.canDeactivateInteractionContext)];
+                        case 6:
+                            canLeave = _a.sent();
+                            // The component has an active interaction but no deactivation hook.  Rather than guessing what to do
+                            // we'll just cancel the navigation and print a warning.
+                            if (canLeave && this.routerInteractionAdapter.isComponentInteracting(this.component)) {
+                                console.warn('Route changed while component has active interaction, cancelling navigation');
+                                return [2 /*return*/, false];
                             }
-                            return [2 /*return*/, true];
+                            return [2 /*return*/, canLeave];
+                        case 7: return [4 /*yield*/, this.component._canChangeRouteParameters(this.navigationSession.canDeactivateInteractionContext, nextState)];
+                        case 8: 
+                        // either an interaction or visit parameter change.
+                        return [2 /*return*/, _a.sent()];
                     }
                 });
             });
         };
-        PlaceComponentDeactivationHandler.prototype.isNotJustAChangeInRouteId = function (nextState) {
+        PlaceComponentDeactivationHandler.prototype.isGoingToADifferentPlace = function (nextState) {
             // Because places with a route-id cover two route segments we get asked to deactivate
             // if the route id is added or removed.  So if our path is still present the url
             // then we shouldn't deactivate the place.
@@ -6985,6 +7337,12 @@
         };
         return PlaceComponentDeactivationHandler;
     }());
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [exports.UrlSnapshot, exports.UrlSnapshot]),
+        __metadata("design:returntype", Promise)
+    ], PlaceComponentDeactivationHandler.prototype, "canDeactivateComponent", null);
 
     /**
      * Transient states
@@ -7901,100 +8259,6 @@
         // }
     })(exports.PlaceHistory || (exports.PlaceHistory = {}));
 
-    exports.UrlSnapshot = /** @class */ (function () {
-        // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
-        function UrlSnapshot(urlSerializer, url) {
-            this.urlSerializer = urlSerializer;
-            this.url = url;
-            this.urlTree = urlSerializer.parse(url);
-        }
-        UrlSnapshot.prototype.updateVisitSegments = function (visit) {
-            var urlTree = this.urlSerializer.parse(this.url);
-            // Ugly, but it works for now.
-            var segments = __spreadArray([], __read(this.getPrimarySegments(urlTree)));
-            var visitSegments = this.getSegmentsFor(visit);
-            var replaceAt = segments.findIndex(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, __spreadArray([replaceAt, visitSegments.length], __read(visitSegments)));
-            urlTree.root.children.primary.segments = segments;
-            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
-        };
-        UrlSnapshot.prototype.getPrimarySegments = function (urlTree) {
-            return this.urlTree.root.children.primary.segments;
-        };
-        /**
-         * Converts the visit into segments.  Please not that these segments are not e
-         * @param visit
-         */
-        UrlSnapshot.prototype.getSegmentsFor = 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 i1$1.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
-                    new i1$1.UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
-                ]
-                :
-                    [
-                        new i1$1.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
-                    ];
-        };
-        UrlSnapshot.prototype.includesPathOf = function (placeDef) {
-            return this.getPrimarySegments(this.urlTree).find(function (s) { return s.path === placeDef.path; });
-        };
-        UrlSnapshot.prototype.getInteractionIds = function () {
-            var queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
-            if (queryParam) {
-                return UrlSnapshot.parseInteractionIds(queryParam);
-            }
-            else {
-                return [];
-            }
-        };
-        UrlSnapshot.prototype.hasInteractions = function () {
-            return this.getInteractionIds().length > 0;
-        };
-        UrlSnapshot.prototype.hasInteractionIds = function (ids) {
-            return ___default['default'].isEqual(this.getInteractionIds(), ids);
-        };
-        // @Trace()
-        UrlSnapshot.prototype.updateInteractionIds = function (ids) {
-            if (ids.length === 0) {
-                return this.removeInteractionIds();
-            }
-            else {
-                var urlTree = this.urlSerializer.parse(this.url);
-                urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
-                return new UrlSnapshot(this.urlSerializer, urlTree.toString());
-            }
-        };
-        // @Trace()
-        UrlSnapshot.prototype.removeInteractionIds = function () {
-            var urlTree = this.urlSerializer.parse(this.url);
-            if (urlTree.queryParams && urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM]) {
-                urlTree.queryParams = {}; //[UrlSnapshot.INTERACTION_ROUTER_OUTLET]
-            }
-            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
-        };
-        UrlSnapshot.prototype.toString = function () {
-            return "UrlSnapshot(" + this.url + ")";
-        };
-        return UrlSnapshot;
-    }());
-    (function (UrlSnapshot) {
-        UrlSnapshot.INTERACTION_QUERY_PARAM = 'aup-interactions';
-        UrlSnapshot.INTERACTION_ID_SEPARATOR = '--';
-        function parseInteractionIds(path) {
-            return path.split(UrlSnapshot.INTERACTION_ID_SEPARATOR);
-        }
-        UrlSnapshot.parseInteractionIds = parseInteractionIds;
-        function createPathIdFor(interactionIds) {
-            return interactionIds.join(UrlSnapshot.INTERACTION_ID_SEPARATOR);
-        }
-        UrlSnapshot.createPathIdFor = createPathIdFor;
-    })(exports.UrlSnapshot || (exports.UrlSnapshot = {}));
-
     var UrlService = /** @class */ (function () {
         function UrlService(angularRouter, angularLocation, urlSerializer) {
             this.angularRouter = angularRouter;
@@ -8292,7 +8556,7 @@
             });
         };
         PlaceRouter.prototype.navigateByUrl = function (urlSnapshot, navigationExtras) {
-            // console.log(`### navigationByUrl -> ${urlSnapshot.urlTree.toString()}`);
+            console.log("### navigationByUrl -> " + urlSnapshot.urlTree.toString());
             return this.angularRouter.navigateByUrl(urlSnapshot.urlTree, navigationExtras);
         };
         Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
@@ -8366,7 +8630,6 @@
          * to be able to capture the back button on the first page.  If we don't then the back click will exit
          * the app directly and we don't get to ask.
          */
-        // @Trace()
         PlaceRouter.prototype.syncInteractionContextIdsWithRouter = function () {
             var _this = this;
             if (this.navigationSession) {
@@ -8410,6 +8673,12 @@
         { type: UrlService },
         { type: exports.PlaceHistory }
     ]; };
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], exports.PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
     (function (PlaceRouter) {
         var State = /** @class */ (function () {
             function State(activeVisits) {
@@ -8426,75 +8695,6 @@
         PlaceRouter.State = State;
     })(exports.PlaceRouter || (exports.PlaceRouter = {}));
 
-    var Visit = /** @class */ (function () {
-        function Visit(placeDefinition, visitParameters) {
-            if (visitParameters === void 0) { visitParameters = {}; }
-            this.placeDefinition = placeDefinition;
-            this.visitParameters = visitParameters;
-        }
-        // @Trace()
-        Visit.prototype.getRouteId = function () {
-            return this.placeDefinition.getRouteIdFrom(this);
-        };
-        // @Trace()
-        Visit.prototype.hasRouteId = function () {
-            return !___namespace.isNil(this.getRouteId());
-        };
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param parameterName the field name of the property model or the `as` option if specified.
-         */
-        Visit.prototype.getParameter = function (parameterName) {
-            return this.visitParameters[parameterName];
-        };
-        // @Trace()
-        Visit.prototype.hasParameter = function (parameterName) {
-            return Object.keys(this.visitParameters).includes(parameterName);
-        };
-        Visit.prototype.replace = function (parameter, value) {
-            var _a;
-            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
-        };
-        Visit.prototype.mergeRouteParameters = function (routeParams) {
-            var _this = this;
-            // todo: whitelist parameters.
-            var routeParameterKeys = Object.keys(routeParams);
-            var params = {};
-            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
-                if (def.isRouteId || def.isRouteParameter) {
-                    if (routeParameterKeys.includes(def.name)) {
-                        params[def.name] = routeParams[def.name];
-                    }
-                }
-                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.
-                    var value = _this.getParameter(def.name);
-                    if (_this.hasParameter(def.name)) {
-                        params[def.name] = value;
-                    }
-                }
-            });
-            return new Visit(this.placeDefinition, params);
-        };
-        Visit.prototype.hasRoutingChangedFrom = function (other) {
-            var samePlace = other.placeDefinition === this.placeDefinition;
-            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = ___namespace.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-        };
-        Visit.prototype.toDebugString = function () {
-            var _this = this;
-            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(',');
-        };
-        return Visit;
-    }());
-
     var AUP_PLACE_CONFIG = new i0.InjectionToken('AUP_PLACE_CONFIG');
 
     var NotAuthorisedNoticeComponent = /** @class */ (function () {
@@ -9205,64 +9405,6 @@
         };
     }
 
-    /**
-     * This a work around for the fact that an activated route with multiple segments doesn't
-     * include the segment params in the paramMap as well as each segment returns an empty
-     * param map even when `parameter`s has content.
-     */
-    var ConsolidatedParameterMap = /** @class */ (function () {
-        function ConsolidatedParameterMap(paramMap, urlSegments) {
-            this.paramMaps = [paramMap].concat((urlSegments || []).map(function (s) { return new ParamMapAdapter(s.parameters); })).filter(function (m) { return !!m; }); // the activated route param map can be null
-        }
-        ConsolidatedParameterMap.prototype.get = function (name) {
-            var paramMap = this.paramMaps.find(function (m) { return m.has(name); });
-            return paramMap.get(name);
-        };
-        ConsolidatedParameterMap.prototype.getAll = function (name) {
-            var paramMap = this.paramMaps.find(function (m) { return m.has(name); });
-            return paramMap.getAll(name);
-        };
-        ConsolidatedParameterMap.prototype.has = function (name) {
-            return !!this.paramMaps.find(function (m) { return m.has(name); });
-        };
-        Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
-            get: function () {
-                return this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return ConsolidatedParameterMap;
-    }());
-    __decorate([
-        src.Memoize(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [])
-    ], ConsolidatedParameterMap.prototype, "keys", null);
-    var ParamMapAdapter = /** @class */ (function () {
-        function ParamMapAdapter(params) {
-            this.params = params;
-        }
-        ParamMapAdapter.prototype.get = function (name) {
-            return this.params[name];
-        };
-        ParamMapAdapter.prototype.getAll = function (name) {
-            var value = this.get(name);
-            return Array.isArray(value) ? value : [value];
-        };
-        ParamMapAdapter.prototype.has = function (name) {
-            return this.keys.includes(name);
-        };
-        Object.defineProperty(ParamMapAdapter.prototype, "keys", {
-            get: function () {
-                return Object.keys(this.params);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return ParamMapAdapter;
-    }());
-
     var NoopAuthGuard = /** @class */ (function () {
         function NoopAuthGuard() {
         }
@@ -9324,7 +9466,7 @@
                         case 3:
                             if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
                             def = parameterDefs[i];
-                            value = visit.getParameter(def.name);
+                            value = visit.getParameterValue(def);
                             return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector, this.navigationSession.isPopState)];
                         case 4:
                             sanitisedValue = _a.sent();
@@ -9379,7 +9521,7 @@
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
-                                            params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                            params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
                                             parsedParams = placeDefinition_1.parseRouteParams(params);
                                             navigationSession = this.placeRouter.navigationSession;
                                             initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, parsedParams);
@@ -9440,27 +9582,6 @@
             var visit = result instanceof Visit ? result : new Visit(exports.PlaceComponent.getDefinition(result), {});
             return this.urlService.createUrlSnapshot(visit).urlTree;
         };
-        // protected async ensureAuthenticatedThen(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot, next: (placeDefinition: PlaceDefinition) => Promise<boolean | UrlTree>): Promise<boolean | UrlTree> {
-        //   const authoriseResult = placeDefinition.authenticate ? await this.isAuthorised(activatedRoute, state) : true;
-        //   if (authoriseResult === true) {
-        //     // we're authorised, now run the place guards.
-        //     return next(placeDefinition);
-        //   } else {
-        //     console.log('not authorised result', authoriseResult);
-        //     return authoriseResult;
-        //   }
-        // }
-        //
-        // // @Trace()
-        // protected async ensureAuthorisedThen(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot, next: (placeDefinition: PlaceDefinition) => Promise<boolean | UrlTree>): Promise<boolean | UrlTree> {
-        //
-        // }
-        // @Trace()
-        // async isAuthorised(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
-        //   const authorised = this.getAuthGuard(this.injector).canActivate(activatedRoute, state);
-        //   return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
-        // }
-        // abstract getAuthGuard(injector: Injector): CanActivate;
         // @Trace()
         PlaceGuard.prototype.cleanInteractionState = function (route, state, next) {
             return __awaiter(this, void 0, void 0, function () {
@@ -9535,12 +9656,14 @@
         Formatter.BOOLEAN = new BooleanType();
     })(exports.Formatter || (exports.Formatter = {}));
 
-    function installMechanics(prototype, propertyKey, backingModelFactory, tagPrefix, isEmpty) {
+    function installMechanics(parameterDef, prototype, propertyKey, tagPrefix) {
+        typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
         function getMechanics(instance, propertyName) {
             var key = "__mechanics_" + propertyName.toString();
             if (!instance[key]) {
+                var backingModel = parameterDef.createBackingModel();
                 instance[key] = {
-                    backingModel: backingModelFactory(),
+                    backingModel: backingModel,
                     binding: null
                 };
                 var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
@@ -9564,12 +9687,12 @@
                         toLeft: pectin.Functions.identity,
                         toRight: pectin.Functions.identity
                     });
-                    if (isEmpty(userModel)) {
+                    if (parameterDef.isEmptyValue(userModel.value)) {
                         // console.log(`Push visit to model for ${tag}`, {value: mechanics.backingModel.value});
                         mechanics.binding.writeRight(); // push the visit into the user model;
                     }
                     else {
-                        if (!isEmpty(mechanics.backingModel)) {
+                        if (!parameterDef.isEmptyValue(mechanics.backingModel.value)) {
                             console.warn('Assigning a visit model with an existing value to a visit parameter with an existing value.  Visit parameter will be overridden');
                         }
                         mechanics.binding.writeLeft(); // push the user model into the visit
@@ -9580,25 +9703,22 @@
     }
     function RouteId(type, options) {
         return function (prototype, propertyKey) {
-            var param = new exports.ParameterDefinition.RouteId(propertyKey.toString(), options, type);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            installMechanics(prototype, propertyKey, function () { return new pectin.MutableValueModel(); }, '@RouteId', function (m) { return m.query().isNil(); });
+            var parameterDef = new exports.ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+            installMechanics(parameterDef, prototype, propertyKey, '@RouteId');
         };
     }
     function VisitParameter(options) {
         var opts = typescriptUtilities.Opts.get(options);
         return function (prototype, propertyKey) {
-            var param = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            installMechanics(prototype, propertyKey, function () { return new pectin.MutableValueModel(); }, '@VisitParameter', function (m) { return m.query().isNil(); });
+            var parameterDef = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
+            installMechanics(parameterDef, prototype, propertyKey, '@VisitParameter');
         };
     }
     function VisitParameterList(options) {
         var opts = typescriptUtilities.Opts.get(options);
         return function (prototype, propertyKey) {
-            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            installMechanics(prototype, propertyKey, function () { return new pectin.MutableListModel(); }, '@VisitParameterList', function (m) { return m.query().isEmpty(); });
+            var parameterDef = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
+            installMechanics(parameterDef, prototype, propertyKey, '@VisitParameterList');
         };
     }