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

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

@@ -21,7 +21,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as _ from 'lodash';
@@ -1846,6 +1846,13 @@ SwitchCaseDefaultDirective.decorators = [
 SwitchCaseDefaultDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
+/**
+ * @example
+ * <aup-switch-case [switchModel]="booleanModel">
+ *    <div *aupSwitchCaseWhen="true"></div>
+ *    <div *aupSwitchCaseDefault>The default content</div>
+ * </aup-switch-case>
+ */
 class SwitchCaseComponent extends DisposableComponent {
     constructor(cdr) {
         super();
@@ -3205,7 +3212,7 @@ class TableComponent extends AbstractTableComponent {
 TableComponent.decorators = [
     { type: 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 }
                 ],
@@ -3795,7 +3802,7 @@ class TreeTableComponent extends AbstractTableComponent {
 TreeTableComponent.decorators = [
     { type: 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 }
                 ],
@@ -5568,6 +5575,7 @@ InteractionModule.decorators = [
             },] }
 ];
 
+const PARAMETER_DEFINITION_KEY = Symbol("parameterDefinition");
 class ParameterDefinition {
     constructor(propertyName, options, urlFormat) {
         this.propertyName = propertyName;
@@ -5583,6 +5591,11 @@ class ParameterDefinition {
     get isRouteParameter() {
         return !!this.urlFormat;
     }
+    createBackingModel() {
+        const model = this.backingModelFactory();
+        model[PARAMETER_DEFINITION_KEY] = this;
+        return model;
+    }
     getOptionValue(key) {
         return this.options.getOptional(key, null);
     }
@@ -5594,7 +5607,7 @@ class ParameterDefinition {
                 if (returningFromSomewhereElse) {
                     const lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
                     if (this.remember && lastKnownVisit) {
-                        value = lastKnownVisit.getParameter(this.name);
+                        value = lastKnownVisit.getParameterValue(this);
                     }
                     return this.isEmptyValue(value) ? this.defaultValue : value;
                 }
@@ -5604,7 +5617,7 @@ class ParameterDefinition {
         });
     }
     isMissingFrom(visit) {
-        return !visit.hasParameter(this.name);
+        return !visit.hasParameter(this);
     }
 }
 (function (ParameterDefinition) {
@@ -5613,6 +5626,7 @@ class ParameterDefinition {
             super(...arguments);
             this.isRouteId = true;
             this.isArray = false;
+            this.backingModelFactory = () => new MutableValueModel();
         }
         isEmptyValue(value) {
             return ___default.isNil(value);
@@ -5627,6 +5641,7 @@ class ParameterDefinition {
             super(...arguments);
             this.isRouteId = false;
             this.isArray = false;
+            this.backingModelFactory = () => new MutableValueModel();
         }
         isEmptyValue(value) {
             return ___default.isNil(value);
@@ -5641,6 +5656,7 @@ class ParameterDefinition {
             super(parameterName, options, urlFormat);
             this.isRouteId = false;
             this.isArray = true;
+            this.backingModelFactory = () => new MutableListModel();
         }
         isEmptyValue(value) {
             return ___default.isNil(value) || value.length < 1;
@@ -5650,6 +5666,14 @@ class ParameterDefinition {
         }
     }
     ParameterDefinition.ArrayParameter = ArrayParameter;
+    function get(model) {
+        const parameterDefinition = model[PARAMETER_DEFINITION_KEY];
+        if (!parameterDefinition) {
+            lang$1.illegalArgument("model hasn't been annotated with @VisitParameter, @VisitParameterList or @RouteId");
+        }
+        return parameterDefinition;
+    }
+    ParameterDefinition.get = get;
 })(ParameterDefinition || (ParameterDefinition = {}));
 
 class PlaceDefinition {
@@ -5699,7 +5723,7 @@ class PlaceDefinition {
     }
     getRouteIdFrom(visit) {
         const routeIdParameterDef = this.getRouteIdParameterDef();
-        return routeIdParameterDef ? visit.getParameter(routeIdParameterDef.name) : null;
+        return routeIdParameterDef ? visit.getParameterValue(routeIdParameterDef) : null;
     }
     getFormattedRouteId(visit) {
         // Note: RouteIds are always present in the url and are just empty strings when not defined.  This is
@@ -5713,7 +5737,7 @@ class PlaceDefinition {
         this.getVisitParameterDefs({
             includeRouteId, includeRouteParameters: true
         }).forEach(def => {
-            const value = visit.getParameter(def.name);
+            const value = visit.getParameterValue(def);
             if (!def.isEmptyValue(value)) {
                 if (def.isArray) {
                     assert.isArray(value);
@@ -5730,7 +5754,7 @@ class PlaceDefinition {
     getNonRouteParameters(visit) {
         const result = {};
         this.getVisitParameterDefs({ includeNonRouteParameters: true }).forEach(def => {
-            const value = visit.getParameter(def.name);
+            const value = visit.getParameterValue(def);
             if (!def.isEmptyValue(value)) {
                 result[def.name] = value;
             }
@@ -5794,14 +5818,25 @@ __decorate([
 const DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
 // this one seems ok.
 const ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+class ParameterChangeInterceptor {
+    constructor(parameterDef, model, callback, options) {
+    }
+    canProceed(nextState, interactionContext) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+        });
+    }
+}
 class PlaceComponent extends DisposableComponent {
     constructor() {
         super();
+        this._placeReadyCallbacks = [];
         this.visitModel = new MutableValueModel();
         this._inVisitUpdate = new Guard();
         this._active = new MutableValueModel(false);
+        this._parameterChangeInterceptors = [];
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        when(this._active).becomesTruthy(() => this.onPlaceReady());
+        when(this._active).becomesTruthy(() => this._notifyPlaceReady());
         this.childPlaces = this.placeDefinition.children.map(d => d.component);
     }
     // @Trace()
@@ -5831,7 +5866,7 @@ class PlaceComponent extends DisposableComponent {
         DebugContext.tag(model, `${this.placeDefinition.component.name}.${parameterDef.propertyName}`);
         const binding = this.registerDisposable(new Binding(this.visitModel, model, {
             toRight(visit) {
-                const value = visit.getParameter(parameterDef.name);
+                const value = visit.getParameterValue(parameterDef);
                 // console.log('push to component', { name: parameterDef.name, value, visit });
                 return value;
             },
@@ -5843,18 +5878,68 @@ class PlaceComponent extends DisposableComponent {
         binding.writeRight();
     }
     get placeDefinition() {
-        return PlaceComponent.getDefinition(this.constructor);
+        const definition = PlaceComponent.getDefinition(this.constructor);
+        if (!definition) {
+            lang.illegalState(`${this.constructor.name} extends PlaceComponent but doesn't have @Place({..}) decorator.`);
+        }
+        return definition;
     }
     get active() {
         return this._active.readonly;
     }
+    /**
+     * Called by the router to see if this component can deactivate.  This isn't called for route parameter changes.
+     * @param interactionContext
+     */
+    _canLeavePlace(interactionContext) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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
+     */
+    _canChangeRouteParameters(interactionContext, nextState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._parameterChangeInterceptors.length > 0) {
+                const visit = nextState.createVisitFor(this.placeDefinition);
+                for (let i = 0; i < this._parameterChangeInterceptors.length; i++) {
+                    const interceptor = this._parameterChangeInterceptors[i];
+                    const keepGoing = yield interceptor.canProceed(visit, interactionContext);
+                    if (!keepGoing) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
+    }
     /**
      * Called by the router when the place is ready to interact after any animations have run.
      */
     _notifyActive(active) {
         this._active.value = active;
     }
-    onPlaceReady() {
+    /**
+     * Called by the router when the place is ready to interact after any animations have run.
+     */
+    _notifyPlaceReady() {
+        if (this.onPlaceReady.length === 1) {
+            this._placeReadyCallbacks.forEach(callback => callback());
+        }
+        else {
+            console.warn('Overriding PlaceComponent.onPlaceReady has been deprecated.  Use PlaceComponent.onPlaceReady(() => {... do stuff...}) instead.');
+            this.onPlaceReady(undefined);
+        }
+    }
+    onPlaceReady(callback) {
+        this._placeReadyCallbacks.push(callback);
+    }
+    interceptVisitParameterChange(model, callback, options) {
+        const parameterDef = ParameterDefinition.get(model);
+        this._parameterChangeInterceptors.push(new ParameterChangeInterceptor(parameterDef, model, callback, options));
     }
 }
 PlaceComponent.decorators = [
@@ -5894,6 +5979,234 @@ __decorate([
     PlaceComponent.injectDefinition = injectDefinition;
 })(PlaceComponent || (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.
+ */
+class ConsolidatedParameterMap {
+    constructor(urlSegments, paramMap) {
+        this.paramMaps = [];
+        // TODO: can we get all our params from teh url segments? If so we can drop the paramMap altogether.
+        const segmentParams = (urlSegments || []).map(s => new ParamMapAdapter(s.parameters));
+        this.paramMaps = segmentParams
+            .concat(paramMap)
+            .filter(m => !!m); // the activated route param map can be null
+    }
+    get(name) {
+        const paramMap = this.paramMaps.find(m => m.has(name));
+        return paramMap.get(name);
+    }
+    getAll(name) {
+        const paramMap = this.paramMaps.find(m => m.has(name));
+        return paramMap.getAll(name);
+    }
+    has(name) {
+        return !!this.paramMaps.find(m => m.has(name));
+    }
+    get keys() {
+        return this.paramMaps.reduce((result, params) => result.concat(params.keys), []);
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [])
+], ConsolidatedParameterMap.prototype, "keys", null);
+class ParamMapAdapter {
+    constructor(params) {
+        this.params = params;
+    }
+    get(name) {
+        return this.params[name];
+    }
+    getAll(name) {
+        const value = this.get(name);
+        return Array.isArray(value) ? value : [value];
+    }
+    has(name) {
+        return this.keys.includes(name);
+    }
+    get keys() {
+        return Object.keys(this.params);
+    }
+}
+
+class Visit {
+    constructor(placeDefinition, visitParameters = {}) {
+        this.placeDefinition = placeDefinition;
+        this.visitParameters = visitParameters;
+    }
+    // @Trace()
+    getRouteId() {
+        return this.placeDefinition.getRouteIdFrom(this);
+    }
+    // @Trace()
+    hasRouteId() {
+        return !_.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
+     */
+    getParameterValue(parameterDef) {
+        return this.visitParameters[parameterDef.name];
+    }
+    // @Trace()
+    hasParameter(parameterDef) {
+        return Object.keys(this.visitParameters).includes(parameterDef.name);
+    }
+    replace(parameter, value) {
+        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
+    }
+    mergeRouteParameters(routeParams) {
+        // todo: whitelist parameters.
+        const routeParameterKeys = Object.keys(routeParams);
+        const params = {};
+        this.placeDefinition.getVisitParameterDefs().forEach(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.
+                const value = this.getParameterValue(def);
+                if (this.hasParameter(def)) {
+                    params[def.name] = value;
+                }
+            }
+        });
+        return new Visit(this.placeDefinition, params);
+    }
+    hasRoutingChangedFrom(other) {
+        const samePlace = other.placeDefinition === this.placeDefinition;
+        const sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
+    }
+    hasChangedFrom(other) {
+        const sameNonRouteParameters = _.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+    }
+    toDebugString() {
+        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(',');
+    }
+}
+
+function extractPrimarySegments(urlTree) {
+    return urlTree.root.children.primary.segments;
+}
+class UrlSnapshot {
+    // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
+    constructor(urlSerializer, url) {
+        this.urlSerializer = urlSerializer;
+        this.url = url;
+        this.urlTree = urlSerializer.parse(url);
+    }
+    updateVisitSegments(visit) {
+        const newUrlTree = this.urlSerializer.parse(this.url);
+        // Ugly, but it works for now.
+        const segments = [...extractPrimarySegments(newUrlTree)];
+        const visitSegments = this.getSegmentsFor(visit);
+        const replaceAt = segments.findIndex(segment => segment.path === visitSegments[0].path);
+        // do not use the return value, it's the items that were removed!
+        segments.splice(replaceAt, visitSegments.length, ...visitSegments);
+        newUrlTree.root.children.primary.segments = segments;
+        return new UrlSnapshot(this.urlSerializer, newUrlTree.toString());
+    }
+    getPrimarySegments() {
+        return extractPrimarySegments(this.urlTree);
+    }
+    /**
+     * Converts the visit into segments.  Please not that these segments are not e
+     * @param visit
+     */
+    getSegmentsFor(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))
+                ];
+    }
+    includesPathOf(placeDef) {
+        return this.getPrimarySegments().find(s => s.path === placeDef.path);
+    }
+    createVisitFor(placeDef) {
+        return new Visit(placeDef, new ConsolidatedParameterMap(this.getPrimarySegments()));
+    }
+    getInteractionIds() {
+        const queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+        if (queryParam) {
+            return UrlSnapshot.parseInteractionIds(queryParam);
+        }
+        else {
+            return [];
+        }
+    }
+    hasInteractions() {
+        return this.getInteractionIds().length > 0;
+    }
+    hasInteractionIds(ids) {
+        return ___default.isEqual(this.getInteractionIds(), ids);
+    }
+    // @Trace()
+    updateInteractionIds(ids) {
+        if (ids.length === 0) {
+            return this.removeInteractionIds();
+        }
+        else {
+            const urlTree = this.urlSerializer.parse(this.url);
+            urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+        }
+    }
+    // @Trace()
+    removeInteractionIds() {
+        const 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());
+    }
+    toString() {
+        return `UrlSnapshot(${this.url})`;
+    }
+}
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Visit]),
+    __metadata("design:returntype", UrlSnapshot)
+], UrlSnapshot.prototype, "updateVisitSegments", null);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Array)
+], 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;
+})(UrlSnapshot || (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.)
@@ -5914,6 +6227,9 @@ class PlaceComponentDeactivationHandler {
     get urlService() {
         return this.navigationSession.urlService;
     }
+    get placeDefinition() {
+        return this.component.placeDefinition;
+    }
     // @Trace()
     canDeactivate(currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -5927,7 +6243,6 @@ class PlaceComponentDeactivationHandler {
             return this.canDeactivatePromise;
         });
     }
-    // @Trace()
     canDeactivateComponent(currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
             // Automatically cancel any active activities if the navigation session was triggered by the back button.
@@ -5949,31 +6264,38 @@ class PlaceComponentDeactivationHandler {
                     }
                 }
             }
-            // 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 this.component.canDeactivate(this.navigationSession.canDeactivateInteractionContext);
-                }
+            // 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.
+            if (this.isGoingToADifferentPlace(nextState)) {
+                const canLeave = yield this.component._canLeavePlace(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)) {
+                if (canLeave && this.routerInteractionAdapter.isComponentInteracting(this.component)) {
                     console.warn('Route changed while component has active interaction, cancelling navigation');
                     return false;
                 }
+                return canLeave;
+            }
+            else {
+                // either an interaction or visit parameter change.
+                return yield this.component._canChangeRouteParameters(this.navigationSession.canDeactivateInteractionContext, nextState);
             }
-            return true;
         });
     }
-    isNotJustAChangeInRouteId(nextState) {
+    isGoingToADifferentPlace(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.
         return !nextState.includesPathOf(this.component.placeDefinition);
     }
 }
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UrlSnapshot, UrlSnapshot]),
+    __metadata("design:returntype", Promise)
+], PlaceComponentDeactivationHandler.prototype, "canDeactivateComponent", null);
 
 /**
  * Transient states
@@ -6803,99 +7125,6 @@ PlaceHistory.ctorParameters = () => [];
     // }
 })(PlaceHistory || (PlaceHistory = {}));
 
-class UrlSnapshot {
-    // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
-    constructor(urlSerializer, url) {
-        this.urlSerializer = urlSerializer;
-        this.url = url;
-        this.urlTree = urlSerializer.parse(url);
-    }
-    updateVisitSegments(visit) {
-        const urlTree = this.urlSerializer.parse(this.url);
-        // Ugly, but it works for now.
-        const segments = [...this.getPrimarySegments(urlTree)];
-        const visitSegments = this.getSegmentsFor(visit);
-        const replaceAt = segments.findIndex(segment => segment.path === visitSegments[0].path);
-        // do not use the return value, it's the items that were removed!
-        segments.splice(replaceAt, visitSegments.length, ...visitSegments);
-        urlTree.root.children.primary.segments = segments;
-        return new UrlSnapshot(this.urlSerializer, urlTree.toString());
-    }
-    getPrimarySegments(urlTree) {
-        return this.urlTree.root.children.primary.segments;
-    }
-    /**
-     * Converts the visit into segments.  Please not that these segments are not e
-     * @param visit
-     */
-    getSegmentsFor(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))
-                ];
-    }
-    includesPathOf(placeDef) {
-        return this.getPrimarySegments(this.urlTree).find(s => s.path === placeDef.path);
-    }
-    getInteractionIds() {
-        const queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
-        if (queryParam) {
-            return UrlSnapshot.parseInteractionIds(queryParam);
-        }
-        else {
-            return [];
-        }
-    }
-    hasInteractions() {
-        return this.getInteractionIds().length > 0;
-    }
-    hasInteractionIds(ids) {
-        return ___default.isEqual(this.getInteractionIds(), ids);
-    }
-    // @Trace()
-    updateInteractionIds(ids) {
-        if (ids.length === 0) {
-            return this.removeInteractionIds();
-        }
-        else {
-            const urlTree = this.urlSerializer.parse(this.url);
-            urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
-            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
-        }
-    }
-    // @Trace()
-    removeInteractionIds() {
-        const 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());
-    }
-    toString() {
-        return `UrlSnapshot(${this.url})`;
-    }
-}
-(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;
-})(UrlSnapshot || (UrlSnapshot = {}));
-
 class UrlService {
     constructor(angularRouter, angularLocation, urlSerializer) {
         this.angularRouter = angularRouter;
@@ -7152,7 +7381,7 @@ class PlaceRouter extends GarbageCollector {
         });
     }
     navigateByUrl(urlSnapshot, navigationExtras) {
-        // console.log(`### navigationByUrl -> ${urlSnapshot.urlTree.toString()}`);
+        console.log(`### navigationByUrl -> ${urlSnapshot.urlTree.toString()}`);
         return this.angularRouter.navigateByUrl(urlSnapshot.urlTree, navigationExtras);
     }
     get activeVisits() {
@@ -7218,7 +7447,6 @@ class PlaceRouter extends GarbageCollector {
      * 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()
     syncInteractionContextIdsWithRouter() {
         if (this.navigationSession) {
             // console.log(`Navigation active -> ${this.navigationSession.toString()}, sync delayed until finished.`);
@@ -7260,6 +7488,12 @@ PlaceRouter.ctorParameters = () => [
     { type: UrlService },
     { type: PlaceHistory }
 ];
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
 (function (PlaceRouter) {
     class State {
         constructor(activeVisits) {
@@ -7275,70 +7509,6 @@ PlaceRouter.ctorParameters = () => [
     PlaceRouter.State = State;
 })(PlaceRouter || (PlaceRouter = {}));
 
-class Visit {
-    constructor(placeDefinition, visitParameters = {}) {
-        this.placeDefinition = placeDefinition;
-        this.visitParameters = visitParameters;
-    }
-    // @Trace()
-    getRouteId() {
-        return this.placeDefinition.getRouteIdFrom(this);
-    }
-    // @Trace()
-    hasRouteId() {
-        return !_.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.
-     */
-    getParameter(parameterName) {
-        return this.visitParameters[parameterName];
-    }
-    // @Trace()
-    hasParameter(parameterName) {
-        return Object.keys(this.visitParameters).includes(parameterName);
-    }
-    replace(parameter, value) {
-        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
-    }
-    mergeRouteParameters(routeParams) {
-        // todo: whitelist parameters.
-        const routeParameterKeys = Object.keys(routeParams);
-        const params = {};
-        this.placeDefinition.getVisitParameterDefs().forEach(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.
-                const value = this.getParameter(def.name);
-                if (this.hasParameter(def.name)) {
-                    params[def.name] = value;
-                }
-            }
-        });
-        return new Visit(this.placeDefinition, params);
-    }
-    hasRoutingChangedFrom(other) {
-        const samePlace = other.placeDefinition === this.placeDefinition;
-        const sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    }
-    hasChangedFrom(other) {
-        const sameNonRouteParameters = _.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-    }
-    toDebugString() {
-        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(',');
-    }
-}
-
 const AUP_PLACE_CONFIG = new InjectionToken('AUP_PLACE_CONFIG');
 
 class NotAuthorisedNoticeComponent {
@@ -8000,54 +8170,6 @@ function Place(options) {
     };
 }
 
-/**
- * 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.
- */
-class ConsolidatedParameterMap {
-    constructor(paramMap, urlSegments) {
-        this.paramMaps = [paramMap].concat((urlSegments || []).map(s => new ParamMapAdapter(s.parameters))).filter(m => !!m); // the activated route param map can be null
-    }
-    get(name) {
-        const paramMap = this.paramMaps.find(m => m.has(name));
-        return paramMap.get(name);
-    }
-    getAll(name) {
-        const paramMap = this.paramMaps.find(m => m.has(name));
-        return paramMap.getAll(name);
-    }
-    has(name) {
-        return !!this.paramMaps.find(m => m.has(name));
-    }
-    get keys() {
-        return this.paramMaps.reduce((result, params) => result.concat(params.keys), []);
-    }
-}
-__decorate([
-    Memoize(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [])
-], ConsolidatedParameterMap.prototype, "keys", null);
-class ParamMapAdapter {
-    constructor(params) {
-        this.params = params;
-    }
-    get(name) {
-        return this.params[name];
-    }
-    getAll(name) {
-        const value = this.get(name);
-        return Array.isArray(value) ? value : [value];
-    }
-    has(name) {
-        return this.keys.includes(name);
-    }
-    get keys() {
-        return Object.keys(this.params);
-    }
-}
-
 class NoopAuthGuard {
     constructor() {
     }
@@ -8097,7 +8219,7 @@ class VisitSanitiser {
             let sanitisedVisit = visit;
             for (let i = 0; i < parameterDefs.length; i++) {
                 const def = parameterDefs[i];
-                const value = visit.getParameter(def.name);
+                const value = visit.getParameterValue(def);
                 const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector, this.navigationSession.isPopState);
                 if (def.hasChanged(value, sanitisedValue)) {
                     sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
@@ -8134,7 +8256,7 @@ class PlaceGuard {
                 }
                 const result = yield this.cleanInteractionState(activatedRoute, state, () => __awaiter(this, void 0, void 0, function* () {
                     // Parse our route params.
-                    const params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                    const params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
                     const parsedParams = placeDefinition.parseRouteParams(params);
                     const navigationSession = this.placeRouter.navigationSession;
                     const initialVisit = navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
@@ -8182,27 +8304,6 @@ class PlaceGuard {
         const visit = result instanceof Visit ? result : new Visit(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()
     cleanInteractionState(route, state, next) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -8263,12 +8364,14 @@ var Formatter;
     Formatter.BOOLEAN = new BooleanType();
 })(Formatter || (Formatter = {}));
 
-function installMechanics(prototype, propertyKey, backingModelFactory, tagPrefix, isEmpty) {
+function installMechanics(parameterDef, prototype, propertyKey, tagPrefix) {
+    Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
     function getMechanics(instance, propertyName) {
         const key = `__mechanics_${propertyName.toString()}`;
         if (!instance[key]) {
+            const backingModel = parameterDef.createBackingModel();
             instance[key] = {
-                backingModel: backingModelFactory(),
+                backingModel: backingModel,
                 binding: null
             };
             const tag = `${tagPrefix}(${prototype.constructor.name}.${propertyKey.toString()})`;
@@ -8292,12 +8395,12 @@ function installMechanics(prototype, propertyKey, backingModelFactory, tagPrefix
                     toLeft: Functions.identity,
                     toRight: 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
@@ -8308,25 +8411,22 @@ function installMechanics(prototype, propertyKey, backingModelFactory, tagPrefix
 }
 function RouteId(type, options) {
     return (prototype, propertyKey) => {
-        const param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, () => new MutableValueModel(), '@RouteId', m => m.query().isNil());
+        const parameterDef = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+        installMechanics(parameterDef, prototype, propertyKey, '@RouteId');
     };
 }
 function VisitParameter(options) {
     const opts = Opts.get(options);
     return (prototype, propertyKey) => {
-        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, () => new MutableValueModel(), '@VisitParameter', m => m.query().isNil());
+        const parameterDef = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
+        installMechanics(parameterDef, prototype, propertyKey, '@VisitParameter');
     };
 }
 function VisitParameterList(options) {
     const opts = Opts.get(options);
     return (prototype, propertyKey) => {
-        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, () => new MutableListModel(), '@VisitParameterList', m => m.query().isEmpty());
+        const parameterDef = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
+        installMechanics(parameterDef, prototype, propertyKey, '@VisitParameterList');
     };
 }