@coolon/angular-ui-powerups 1.0.1 → 1.1.0

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

@@ -239,7 +239,7 @@
             pectin.assert.notNil(this.pectinCommand);
             if (this.pectinCommand instanceof pectin.UnaryCommand) {
                 if (!this._commandParameterProvided) {
-                    pectin.lang.illegalState('UnaryCommands required the command parameter to be specified.');
+                    pectin.lang.illegalState('UnaryCommands require the command parameter to be specified.');
                 }
             }
             else {
@@ -252,8 +252,8 @@
             var _this = this;
             // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
             // we need to do this.
-            var chain = pectin.Dsl.disposeWith(this).chain;
-            chain(this._commandEnabled).subscribe(function (enabled) {
+            var when = pectin.Dsl.disposeWith(this).when;
+            when.valueOf(this._commandEnabled).changes(function (enabled) {
                 if (enabled) {
                     _this.elementRef.nativeElement.removeAttribute('disabled');
                     if (_this.elementRef.nativeElement.tagName === 'A') {
@@ -266,7 +266,7 @@
                         _this.elementRef.nativeElement.removeAttribute('href');
                     }
                 }
-            });
+            }, { initialValue: 'triggerChange' });
         };
         CommandDirective.prototype.ngOnDestroy = function () {
             this.dispose();
@@ -356,12 +356,12 @@
             var _this = this;
             // TODO: Make this also track the current enabled/disabled state.
             if (this.hasBinding()) {
-                var chain = pectin.Dsl.disposeWith(this).chain;
-                chain(this.pectinFocusBinding.focusContext.focused).subscribe(function (focused) {
+                var when = pectin.Dsl.disposeWith(this).when;
+                when.valueOf(this.pectinFocusBinding.focusContext.focused).changes(function (focused) {
                     if (focused && !_this.alreadyHasFocus()) {
                         _this.tryAndFocus();
                     }
-                });
+                }, { initialValue: 'triggerChange' });
             }
             else {
                 pectin.Logger.get(this).warn('pectinFocusBinding was nil');
@@ -489,7 +489,18 @@
         __extends(AbstractInputComponent, _super);
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
-            _this.delegatingFormValueModel = new pectin.DelegatingFormValueModel();
+            /**
+             * A backing model for all our @Input() valueModel properties which should be defined as follows.
+             *
+             *    @Input() @TrackExternal({useExisting: "delegatingFormValueModel"})
+             *    valueModel: FormValueModel<string> | MutableValueModel<string>;
+             *
+             * This approach allows the input to accept plain or form models but all backed by a form
+             * friendly delegate.  We have to use an existing delegate for union types as pectin just
+             * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+             */
+            // We have to register it as a disposable so it ditches any listeners when we're disposed.
+            _this.delegatingFormValueModel = _this.registerDisposable(new pectin.DelegatingFormValueModel());
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
             _this.focus = new core.EventEmitter();
@@ -645,7 +656,7 @@
         NumberInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.UseDelegate({ useExisting: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
             __metadata("design:type", Object)
         ], NumberInputComponent.prototype, "valueModel", void 0);
         NumberInputComponent = __decorate([
@@ -667,7 +678,7 @@
         PasswordInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.UseDelegate({ useExisting: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
             __metadata("design:type", Object)
         ], PasswordInputComponent.prototype, "valueModel", void 0);
         PasswordInputComponent = __decorate([
@@ -691,11 +702,11 @@
         SelectInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.UseDelegate({ useExisting: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
             __metadata("design:type", Object)
         ], SelectInputComponent.prototype, "valueModel", void 0);
         __decorate([
-            core.Input(), pectin.UseDelegate(),
+            core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.ListModel)
         ], SelectInputComponent.prototype, "optionsModel", void 0);
         __decorate([
@@ -747,11 +758,11 @@
         StringInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.UseDelegate({ useExisting: "delegatingFormValueModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
             __metadata("design:type", Object)
         ], StringInputComponent.prototype, "valueModel", void 0);
         __decorate([
-            core.Input(), pectin.UseDelegate({ defaultValue: false }),
+            core.Input(), pectin.TrackExternal({ defaultValue: false }),
             __metadata("design:type", pectin.ValueModel)
         ], StringInputComponent.prototype, "enableClearModel", void 0);
         __decorate([
@@ -799,6 +810,142 @@
         return ScrollContainerComponent;
     }());
 
+    var SwitchCaseOption = /** @class */ (function () {
+        function SwitchCaseOption(templateRef) {
+            this.templateRef = templateRef;
+        }
+        Object.defineProperty(SwitchCaseOption.prototype, "name", {
+            get: function () {
+                return this.constructor.name;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return SwitchCaseOption;
+    }());
+    var SwitchCaseWhenDirective = /** @class */ (function (_super) {
+        __extends(SwitchCaseWhenDirective, _super);
+        function SwitchCaseWhenDirective(templateRef) {
+            var _this = _super.call(this, templateRef) || this;
+            _this.isDefault = false;
+            return _this;
+        }
+        SwitchCaseWhenDirective_1 = SwitchCaseWhenDirective;
+        SwitchCaseWhenDirective.prototype.matches = function (value) {
+            return this.aupSwitchCaseWhen === value;
+        };
+        var SwitchCaseWhenDirective_1;
+        SwitchCaseWhenDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
+        SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
+            core.Directive({
+                selector: '[aupSwitchCaseWhen]',
+                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
+            }),
+            __metadata("design:paramtypes", [core.TemplateRef])
+        ], SwitchCaseWhenDirective);
+        return SwitchCaseWhenDirective;
+    }(SwitchCaseOption));
+    var SwitchCaseDefaultDirective = /** @class */ (function (_super) {
+        __extends(SwitchCaseDefaultDirective, _super);
+        function SwitchCaseDefaultDirective(templateRef) {
+            var _this = _super.call(this, templateRef) || this;
+            _this.isDefault = true;
+            return _this;
+        }
+        SwitchCaseDefaultDirective_1 = SwitchCaseDefaultDirective;
+        SwitchCaseDefaultDirective.prototype.matches = function (value) {
+            return false;
+        };
+        var SwitchCaseDefaultDirective_1;
+        SwitchCaseDefaultDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
+            core.Directive({
+                selector: '[aupSwitchCaseDefault]',
+                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+            }),
+            __metadata("design:paramtypes", [core.TemplateRef])
+        ], SwitchCaseDefaultDirective);
+        return SwitchCaseDefaultDirective;
+    }(SwitchCaseOption));
+    var SwitchCaseComponent = /** @class */ (function (_super) {
+        __extends(SwitchCaseComponent, _super);
+        function SwitchCaseComponent(cdr) {
+            var _this = _super.call(this) || this;
+            _this.cdr = cdr;
+            _this.selectedIndex = 0;
+            return _this;
+        }
+        SwitchCaseComponent.prototype.ngOnInit = function () {
+        };
+        SwitchCaseComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            var subscription = this.switchCaseOptions.changes.subscribe(function (change) { return _this.updateSelection(); });
+            this.onDispose(function () { return subscription.unsubscribe(); });
+            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
+            when.valueOf(this.switchModel).changes(function () { return _this.updateSelection(); }, { initialValue: 'triggerChange' });
+            this.cdr.detectChanges();
+        };
+        SwitchCaseComponent.prototype.updateSelection = function () {
+            var _this = this;
+            var matchingIndicies = [];
+            this.switchCaseOptions.forEach(function (option, index) {
+                if (option.matches(_this.switchModel.value)) {
+                    matchingIndicies.push(index);
+                }
+            });
+            if (matchingIndicies.length > 1) {
+                console.warn("found " + matchingIndicies.length + " matching case values, displaying the first.");
+            }
+            if (matchingIndicies.length === 0) {
+                this.switchCaseOptions.forEach(function (option, index) {
+                    matchingIndicies.push(index);
+                });
+                if (matchingIndicies.length > 1) {
+                    console.warn("found " + matchingIndicies.length + " default case values, displaying the first.");
+                }
+            }
+            if (matchingIndicies.length > 0) {
+                this.selectedIndex = matchingIndicies[0];
+            }
+            else {
+                console.warn("found no matching or default case values.");
+                this.selectedIndex = -1;
+            }
+        };
+        SwitchCaseComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], SwitchCaseComponent.prototype, "switchModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('switchModel'),
+            __metadata("design:type", Object)
+        ], SwitchCaseComponent.prototype, "switch", void 0);
+        __decorate([
+            core.ContentChildren(SwitchCaseOption),
+            __metadata("design:type", core.QueryList)
+        ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+        SwitchCaseComponent = __decorate([
+            core.Component({
+                selector: 'aup-switch-case',
+                template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], SwitchCaseComponent);
+        return SwitchCaseComponent;
+    }(DisposableComponent));
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -811,7 +958,10 @@
                     SelectInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
-                    AbstractInputComponent
+                    AbstractInputComponent,
+                    SwitchCaseComponent,
+                    SwitchCaseWhenDirective,
+                    SwitchCaseDefaultDirective
                 ],
                 imports: [
                     common.CommonModule,
@@ -831,7 +981,10 @@
                     PasswordInputComponent,
                     SelectInputComponent,
                     ScrollContainerComponent,
-                    NoopComponent
+                    NoopComponent,
+                    SwitchCaseComponent,
+                    SwitchCaseWhenDirective,
+                    SwitchCaseDefaultDirective
                 ]
             })
         ], ComponentsModule);
@@ -903,7 +1056,7 @@
             core.Component({
                 selector: 'aup-alert-dialog',
                 template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
             }),
             __param(0, core.Inject(ACTIVITY_DATA)),
             __metadata("design:paramtypes", [Object])
@@ -944,7 +1097,7 @@
             core.Component({
                 selector: 'aup-confirmation-dialog',
                 template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
             }),
             __param(0, core.Inject(ACTIVITY_DATA)),
             __metadata("design:paramtypes", [Object])
@@ -972,7 +1125,7 @@
             core.Component({
                 selector: 'aup-confirmation-dialog',
                 template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
             }),
             __param(0, core.Inject(ACTIVITY_DATA)),
             __metadata("design:paramtypes", [Object])
@@ -1375,7 +1528,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵv = /** @class */ (function () {
+    exports.ɵz = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -1535,7 +1688,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵv || (exports.ɵv = {}));
+    })(exports.ɵz || (exports.ɵz = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -1579,7 +1732,7 @@
             return this.activityContainerComponent.startActivity(activityType, data);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵv }
+            { type: exports.ɵz }
         ]; };
         __decorate([
             core.ViewChild('activityContainer', { static: true }),
@@ -1591,7 +1744,7 @@
                 template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
-            __metadata("design:paramtypes", [exports.ɵv])
+            __metadata("design:paramtypes", [exports.ɵz])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -1629,7 +1782,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵv,
+                    exports.ɵz,
                 ]
             })
         ], InteractionModule);
@@ -1663,22 +1816,22 @@
             return this.options.getOptional(key, null);
         };
         // @Trace()
-        ParameterDefinition.prototype.sanitise = function (value, visit, placeHistory, injector) {
+        ParameterDefinition.prototype.sanitise = function (value, visit, placeHistory, injector, isPopState) {
             return __awaiter(this, void 0, void 0, function () {
-                var previousVisit;
+                var returningFromSomewhereElse, lastKnownVisit;
                 return __generator(this, function (_a) {
                     if (this.isMissingFrom(visit)) {
-                        previousVisit = ___default__default.first(placeHistory.getHistory(visit.placeDefinition));
-                        if (this.remember && previousVisit) {
-                            value = previousVisit.getParameter(this.name);
+                        returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
+                        if (returningFromSomewhereElse) {
+                            lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
+                            if (this.remember && lastKnownVisit) {
+                                value = lastKnownVisit.getParameter(this.name);
+                            }
+                            return [2 /*return*/, this.isEmptyValue(value) ? this.defaultValue : value];
                         }
-                        return [2 /*return*/, this.isEmptyValue(value) ? this.defaultValue : value];
-                    }
-                    else {
-                        // todo: add custom sanitiser
-                        return [2 /*return*/, value];
                     }
-                    return [2 /*return*/];
+                    // todo: add custom sanitiser
+                    return [2 /*return*/, value];
                 });
             });
         };
@@ -1925,11 +2078,11 @@
             var binding = this.registerDisposable(new pectin.Binding(this.visitModel, model, {
                 toRight: function (visit) {
                     var value = visit.getParameter(parameterDef.name);
-                    console.log('push to component', { name: parameterDef.name, value: value, visit: visit });
+                    // console.log('push to component', { name: parameterDef.name, value, visit });
                     return value;
                 },
                 toLeft: function (value, currentVisit) {
-                    console.log('push to route', { name: parameterDef.name, value: value, currentVisit: currentVisit });
+                    // console.log('push to route', { name: parameterDef.name, value, currentVisit });
                     return currentVisit.replace(parameterDef, value);
                 }
             }));
@@ -2748,21 +2901,34 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    var PlaceHistory = /** @class */ (function () {
+    exports.ɵbc = /** @class */ (function () {
         function PlaceHistory() {
-            this._history = new Map();
+            this._archive = new Map();
+            this.placeHistoryDepth = 4;
         }
-        // @Trace()
-        PlaceHistory.prototype.add = function (state) {
-            var history = this.getHistory(state.placeDefinition);
-            var previousState = ___default__default.first(history);
-            if (!previousState || state.hasChangedFrom(previousState)) {
-                history.unshift(state); // LIFO
-                this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
+        PlaceHistory_1 = PlaceHistory;
+        PlaceHistory.prototype.notifyNavigationStarted = function () {
+            if (this._activeVisits) {
+                this.archive(this._activeVisits.visits);
+                this._previousVisits = this._activeVisits;
             }
         };
+        PlaceHistory.prototype.notifyNavigationFinished = function (visits) {
+            this._activeVisits = new PlaceHistory_1.VisitRecord(visits);
+        };
+        PlaceHistory.prototype.updateVisit = function (visit) {
+            pectin.assert.isTruthy(this._activeVisits);
+            this._activeVisits.update(visit);
+        };
+        PlaceHistory.prototype.lastVisitIncluded = function (placeDef) {
+            var _a;
+            return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
+        };
+        PlaceHistory.prototype.getMostRecentVisitFor = function (placeDef) {
+            return ___default__default.first(this.getHistory(placeDef));
+        };
         PlaceHistory.prototype.getHistory = function (placeDef) {
-            var history = this._history.get(placeDef);
+            var history = this._archive.get(placeDef);
             if (!history) {
                 history = [];
                 this.setHistory(placeDef, history);
@@ -2770,10 +2936,22 @@
             return history;
         };
         PlaceHistory.prototype.setHistory = function (placeDef, history) {
-            this._history.set(placeDef, history);
+            this._archive.set(placeDef, history);
         };
+        PlaceHistory.prototype.archive = function (visits) {
+            var _this = this;
+            visits.forEach(function (state) {
+                var history = _this.getHistory(state.placeDefinition);
+                var previousState = ___default__default.first(history);
+                if (!previousState || state.hasChangedFrom(previousState)) {
+                    history.unshift(state); // LIFO
+                    _this.setHistory(state.placeDefinition, history.slice(0, _this.placeHistoryDepth));
+                }
+            });
+        };
+        var PlaceHistory_1;
         PlaceHistory.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(); }, token: PlaceHistory, providedIn: "root" });
-        PlaceHistory = __decorate([
+        PlaceHistory = PlaceHistory_1 = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
@@ -2781,6 +2959,86 @@
         ], PlaceHistory);
         return PlaceHistory;
     }());
+    (function (PlaceHistory) {
+        var VisitRecord = /** @class */ (function () {
+            function VisitRecord(visits) {
+                this.visits = visits;
+            }
+            VisitRecord.prototype.update = function (visit) {
+                this.visits = this.visits.filter(function (v) { return v.placeDefinition !== visit.placeDefinition; }).concat(visit);
+            };
+            VisitRecord.prototype.getVisitFor = function (placeDef) {
+                return this.visits.find(function (v) { return v.placeDefinition === placeDef; });
+            };
+            return VisitRecord;
+        }());
+        PlaceHistory.VisitRecord = VisitRecord;
+        // export class Query {
+        //   private _history: Visit.State[];
+        //   private _places: Place[];
+        //   private _predicate: (visit: any) => boolean;
+        //   private _limit: number;
+        //
+        //   constructor(history, limit = history.length) {
+        //     this._history = history;
+        //     this._places = [];
+        //     this._predicate = (visit => true);
+        //     this._limit = limit;
+        //   }
+        //
+        //   to(...places:Place[]):this {
+        //     this._places = places;
+        //     return this;
+        //   }
+        //
+        //   with(parameters: { [parameter: string]: any }): this {
+        //     this.matching(state => {
+        //       return Object.keys(parameters).reduce((acc, key) => {
+        //         const matchValue = parameters[key];
+        //         const visitValue = state.get(key);
+        //         const matched = matchValue === '*' ? !_.isNil(visitValue) : visitValue == matchValue;
+        //         // Logger.get(this).info(`matched=${matched}`, parameters, visitValue);
+        //         return acc && matched;
+        //       }, true);
+        //     });
+        //     return this;
+        //   }
+        //
+        //   last(): Visit.State {
+        //     return _.findLast(this._history, visit => this._matches(visit))
+        //   }
+        //
+        //   // @trace
+        //   allThatMatch(): Visit.State[] {
+        //     return _.filter(this._history, visit => this._matches(visit)).slice(-this._limit);
+        //   }
+        //
+        //   // @trace
+        //   mostRecentValueOf<T=any>(param: string, defaultValue: T = null): T {
+        //     const lastStateWithParam = _.findLast(this.allThatMatch(), state => !_.isNil(state.get(param)));
+        //     return _.isNil(lastStateWithParam) ? defaultValue : lastStateWithParam.get(param);
+        //   }
+        //
+        //   limit(limit: number): this {
+        //     this._limit = limit;
+        //     return this;
+        //   }
+        //
+        //   matching(predicate: (visit: Visit.State) => boolean): this {
+        //     this._predicate = predicate;
+        //     return this;
+        //   }
+        //
+        //   _matches(visit: Visit.State) {
+        //     return this._isPlaceMatch(visit) && this._predicate(visit);
+        //   }
+        //
+        //   _isPlaceMatch(visit: Visit.State) {
+        //     return this._places.length < 1 || this._places.includes(visit.place)
+        //   }
+        //
+        // }
+    })(exports.ɵbc || (exports.ɵbc = {}));
 
     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.
@@ -2944,6 +3202,75 @@
         return UrlService;
     }());
 
+    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 !___default.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, __assign(__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 = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = ___default.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 PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
         function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
@@ -3139,14 +3466,11 @@
             enumerable: true,
             configurable: true
         });
-        // @Trace()
         PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
-                    // we have to push to history so our remember sanitisers don't pick up the previous value
-                    // when it's been cleared by the user.
-                    this.placeHistory.add(next);
+                    this.placeHistory.updateVisit(next);
                     // FIXME: no route id -> route id duplicates route parameters
                     if (next.hasRoutingChangedFrom(previous)) {
                         return [2 /*return*/, this.doNavigation(next, function (router) {
@@ -3168,6 +3492,9 @@
         // @Trace()
         PlaceRouter.prototype.transitionTo = function (next) {
             var previous = this.navigationSessionModel.value;
+            if (!previous) {
+                this.placeHistory.notifyNavigationStarted();
+            }
             pectin.assert.isTruthy(next !== previous);
             pectin.Logger.get(this).info("### Router State Transition: " + (previous ? previous.toString() : 'null') + " -> " + next.toString());
             this.navigationSessionModel.value = next;
@@ -3178,10 +3505,9 @@
         };
         // @Trace()
         PlaceRouter.prototype.routingSessionFinished = function (visits) {
-            var _this = this;
             if (visits && visits.length > 0) {
                 pectin.assert.isTruthy(this.navigationInProgress.value);
-                visits.forEach(function (v) { return _this.placeHistory.add(v); });
+                this.placeHistory.notifyNavigationFinished(visits);
                 // We update the active visits before we finish the session so the
                 // place outlets can ignore the incoming changes until things are
                 // settled. TODO: can we removed the event'ness here and just do a push?
@@ -3235,93 +3561,30 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵv },
+            { type: exports.ɵz },
             { type: UrlService },
-            { type: PlaceHistory }
+            { type: exports.ɵbc }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵv), core.ɵɵinject(UrlService), core.ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵz), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbc)); }, token: PlaceRouter, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit, Visit]),
+            __metadata("design:returntype", Promise)
+        ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵv,
+                exports.ɵz,
                 UrlService,
-                PlaceHistory])
+                exports.ɵbc])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
 
-    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 !___default.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, __assign(__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 = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = ___default.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 core.InjectionToken('AUP_PLACE_CONFIG');
 
     // Freezes the state of the components at the start of the animation.
@@ -3530,11 +3793,11 @@
             __metadata("design:type", Boolean)
         ], PlaceOutletComponent.prototype, "animate", void 0);
         __decorate([
-            core.Input(), pectin.UseDelegate({ defaultValue: true }),
+            core.Input(), pectin.TrackExternal({ defaultValue: true }),
             __metadata("design:type", pectin.ValueModel)
         ], PlaceOutletComponent.prototype, "animateModel", void 0);
         __decorate([
-            core.Input('placeAnimationOrderModel'), pectin.UseDelegate(),
+            core.Input('placeAnimationOrderModel'), pectin.TrackExternal(),
             __metadata("design:type", pectin.ListModel)
         ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
         __decorate([
@@ -3604,7 +3867,7 @@
             __metadata("design:type", Array)
         ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
         __decorate([
-            core.Input(), pectin.UseDelegate(),
+            core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.ListModel)
         ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
         __decorate([
@@ -3612,7 +3875,7 @@
             __metadata("design:type", PlaceOutletComponent)
         ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
         __decorate([
-            core.Input(), pectin.UseDelegate(),
+            core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.ValueModel)
         ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
         __decorate([
@@ -3636,7 +3899,7 @@
         BusyOverlayComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.UseDelegate(),
+            core.Input(), pectin.TrackExternal(),
             __metadata("design:type", pectin.ValueModel)
         ], BusyOverlayComponent.prototype, "busyModel", void 0);
         __decorate([
@@ -4123,13 +4386,13 @@
     }());
 
     var VisitSanitiser = /** @class */ (function () {
-        function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
+        function VisitSanitiser(navigationSession, activatedRoute, router, placeHistory, injector) {
+            this.navigationSession = navigationSession;
             this.activatedRoute = activatedRoute;
             this.router = router;
             this.placeHistory = placeHistory;
             this.injector = injector;
         }
-        // @Trace()
         VisitSanitiser.prototype.sanitise = function (visit) {
             return __awaiter(this, void 0, void 0, function () {
                 var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
@@ -4140,10 +4403,10 @@
                             if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
                             routeIdDef = placeDef.getRouteIdParameterDef();
                             routeId = visit.getRouteId();
-                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
+                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector, this.navigationSession.isPopState)];
                         case 1:
                             sanitisedValue = _a.sent();
-                            // console.log({routeId, sanitisedValue});
+                            console.log({ routeId: routeId, sanitisedValue: sanitisedValue });
                             // ###------- EARLY EXIT --------###
                             if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
                                 // if the route id has changed we redirect immediately as other
@@ -4163,7 +4426,7 @@
                             if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
                             def = parameterDefs[i];
                             value = visit.getParameter(def.name);
-                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
+                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector, this.navigationSession.isPopState)];
                         case 4:
                             sanitisedValue = _a.sent();
                             if (def.hasChanged(value, sanitisedValue)) {
@@ -4178,6 +4441,12 @@
                 });
             });
         };
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit]),
+            __metadata("design:returntype", Promise)
+        ], VisitSanitiser.prototype, "sanitise", null);
         return VisitSanitiser;
     }());
 
@@ -4203,19 +4472,20 @@
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
-                                            var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                            var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
                                             return __generator(this, function (_a) {
                                                 switch (_a.label) {
                                                     case 0:
                                                         params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
                                                         parsedParams = placeDefinition.parseRouteParams(params);
-                                                        initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                                                        sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                                                        navigationSession = this.placeRouter.navigationSession;
+                                                        initialVisit = navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                                                        sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                                                         return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
                                                     case 1:
                                                         sanitisedVisit = _a.sent();
                                                         // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                                                        this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
+                                                        navigationSession.storeVisit(sanitisedVisit);
                                                         if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
                                                             urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
                                                             // console.log('##### Place Guard Redirect', urlSnapshot);
@@ -4457,7 +4727,7 @@
     exports.FocusBindingDirective = FocusBindingDirective;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵv;
+    exports.InteractionService = exports.ɵz;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -4473,7 +4743,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = PlaceHistory;
+    exports.PlaceHistory = exports.ɵbc;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -4487,6 +4757,10 @@
     exports.ScrollContainerComponent = ScrollContainerComponent;
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
+    exports.SwitchCaseComponent = SwitchCaseComponent;
+    exports.SwitchCaseDefaultDirective = SwitchCaseDefaultDirective;
+    exports.SwitchCaseOption = SwitchCaseOption;
+    exports.SwitchCaseWhenDirective = SwitchCaseWhenDirective;
     exports.SynchroniseInteractionContextIdsWithRoute = SynchroniseInteractionContextIdsWithRoute;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
     exports.UrlService = UrlService;
@@ -4502,18 +4776,21 @@
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = AbstractPlaceNavigationComponent;
-    exports.ɵbb = ListPlaceNavComponent;
-    exports.ɵbc = InteractionModule;
-    exports.ɵbd = ActivityContainerComponent;
-    exports.ɵbe = AbstractInteractionContext;
-    exports.ɵbf = ActivityOutletComponent;
-    exports.ɵbg = ConfirmationDialogComponent;
-    exports.ɵbh = ACTIVITY_DATA;
-    exports.ɵbi = Activity;
-    exports.ɵbk = ConfirmThenDialogComponent;
-    exports.ɵbl = AlertDialogComponent;
-    exports.ɵbn = InPlaceInteractionContextComponent;
+    exports.ɵba = ModalInteractionContextFactory;
+    exports.ɵbb = UrlService;
+    exports.ɵbd = TabbedPlaceNavigationComponent;
+    exports.ɵbe = AbstractPlaceNavigationComponent;
+    exports.ɵbf = ListPlaceNavComponent;
+    exports.ɵbg = InteractionModule;
+    exports.ɵbh = ActivityContainerComponent;
+    exports.ɵbi = AbstractInteractionContext;
+    exports.ɵbj = ActivityOutletComponent;
+    exports.ɵbk = ConfirmationDialogComponent;
+    exports.ɵbl = ACTIVITY_DATA;
+    exports.ɵbm = Activity;
+    exports.ɵbo = ConfirmThenDialogComponent;
+    exports.ɵbp = AlertDialogComponent;
+    exports.ɵbr = InPlaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = ComponentsModule;
@@ -4524,18 +4801,18 @@
     exports.ɵj = SelectInputComponent;
     exports.ɵk = ScrollContainerComponent;
     exports.ɵl = NoopComponent;
-    exports.ɵm = PlaceModule;
-    exports.ɵn = EmptyStateComponent;
-    exports.ɵo = BusyOverlayComponent;
-    exports.ɵp = PlaceOutletComponent;
-    exports.ɵq = leftRightPlaceAnimation;
-    exports.ɵr = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵs = AUP_PLACE_CONFIG;
-    exports.ɵu = PlaceRouter;
-    exports.ɵw = ModalInteractionContextFactory;
-    exports.ɵx = UrlService;
-    exports.ɵy = PlaceHistory;
-    exports.ɵz = TabbedPlaceNavigationComponent;
+    exports.ɵm = SwitchCaseOption;
+    exports.ɵn = SwitchCaseWhenDirective;
+    exports.ɵo = SwitchCaseDefaultDirective;
+    exports.ɵp = SwitchCaseComponent;
+    exports.ɵq = PlaceModule;
+    exports.ɵr = EmptyStateComponent;
+    exports.ɵs = BusyOverlayComponent;
+    exports.ɵt = PlaceOutletComponent;
+    exports.ɵu = leftRightPlaceAnimation;
+    exports.ɵv = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵw = AUP_PLACE_CONFIG;
+    exports.ɵy = PlaceRouter;
 
     Object.defineProperty(exports, '__esModule', { value: true });