@coolon/angular-ui-powerups 1.0.1 → 1.1.0

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, NgModule, EventEmitter, Output, Component, ContentChild, TemplateRef, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, QueryList, ɵɵdefineInjectable, ɵɵinject, Injectable, Optional, SkipSelf, HostBinding } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, NgModule, EventEmitter, Output, Component, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, ɵɵdefineInjectable, ɵɵinject, Injectable, Optional, SkipSelf, HostBinding } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -9,7 +9,7 @@ import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, Command, UseDelegate, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, Trace, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, Command, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, Trace, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -50,7 +50,7 @@ let CommandDirective = class CommandDirective extends GarbageCollector {
         assert.notNil(this.pectinCommand);
         if (this.pectinCommand instanceof UnaryCommand) {
             if (!this._commandParameterProvided) {
-                lang.illegalState('UnaryCommands required the command parameter to be specified.');
+                lang.illegalState('UnaryCommands require the command parameter to be specified.');
             }
         }
         else {
@@ -62,8 +62,8 @@ let CommandDirective = class CommandDirective extends GarbageCollector {
     ngAfterViewInit() {
         // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
         // we need to do this.
-        const { chain } = Dsl.disposeWith(this);
-        chain(this._commandEnabled).subscribe(enabled => {
+        const { when } = Dsl.disposeWith(this);
+        when.valueOf(this._commandEnabled).changes(enabled => {
             if (enabled) {
                 this.elementRef.nativeElement.removeAttribute('disabled');
                 if (this.elementRef.nativeElement.tagName === 'A') {
@@ -76,7 +76,7 @@ let CommandDirective = class CommandDirective extends GarbageCollector {
                     this.elementRef.nativeElement.removeAttribute('href');
                 }
             }
-        });
+        }, { initialValue: 'triggerChange' });
     }
     ngOnDestroy() {
         this.dispose();
@@ -157,12 +157,12 @@ let FocusBindingDirective = class FocusBindingDirective extends DisposableCompon
     ngAfterViewInit() {
         // TODO: Make this also track the current enabled/disabled state.
         if (this.hasBinding()) {
-            const { chain } = Dsl.disposeWith(this);
-            chain(this.pectinFocusBinding.focusContext.focused).subscribe((focused) => {
+            const { when } = Dsl.disposeWith(this);
+            when.valueOf(this.pectinFocusBinding.focusContext.focused).changes((focused) => {
                 if (focused && !this.alreadyHasFocus()) {
                     this.tryAndFocus();
                 }
-            });
+            }, { initialValue: 'triggerChange' });
         }
         else {
             Logger.get(this).warn('pectinFocusBinding was nil');
@@ -279,7 +279,18 @@ DirectivesModule = __decorate([
 let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
-        this.delegatingFormValueModel = new 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 DelegatingFormValueModel());
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
         this.focus = new EventEmitter();
@@ -421,7 +432,7 @@ let NumberInputComponent = class NumberInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), UseDelegate({ useExisting: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
     __metadata("design:type", Object)
 ], NumberInputComponent.prototype, "valueModel", void 0);
 NumberInputComponent = __decorate([
@@ -441,7 +452,7 @@ let PasswordInputComponent = class PasswordInputComponent extends AbstractInputC
     }
 };
 __decorate([
-    Input(), UseDelegate({ useExisting: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
     __metadata("design:type", Object)
 ], PasswordInputComponent.prototype, "valueModel", void 0);
 PasswordInputComponent = __decorate([
@@ -462,11 +473,11 @@ let SelectInputComponent = class SelectInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), UseDelegate({ useExisting: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
     __metadata("design:type", Object)
 ], SelectInputComponent.prototype, "valueModel", void 0);
 __decorate([
-    Input(), UseDelegate(),
+    Input(), TrackExternal(),
     __metadata("design:type", ListModel)
 ], SelectInputComponent.prototype, "optionsModel", void 0);
 __decorate([
@@ -515,11 +526,11 @@ let StringInputComponent = class StringInputComponent extends AbstractInputCompo
     }
 };
 __decorate([
-    Input(), UseDelegate({ useExisting: "delegatingFormValueModel" }),
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
     __metadata("design:type", Object)
 ], StringInputComponent.prototype, "valueModel", void 0);
 __decorate([
-    Input(), UseDelegate({ defaultValue: false }),
+    Input(), TrackExternal({ defaultValue: false }),
     __metadata("design:type", ValueModel)
 ], StringInputComponent.prototype, "enableClearModel", void 0);
 __decorate([
@@ -562,6 +573,123 @@ ScrollContainerComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], ScrollContainerComponent);
 
+var SwitchCaseWhenDirective_1, SwitchCaseDefaultDirective_1;
+class SwitchCaseOption {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    get name() {
+        return this.constructor.name;
+    }
+}
+let SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = class SwitchCaseWhenDirective extends SwitchCaseOption {
+    constructor(templateRef) {
+        super(templateRef);
+        this.isDefault = false;
+    }
+    matches(value) {
+        return this.aupSwitchCaseWhen === value;
+    }
+};
+SwitchCaseWhenDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
+SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
+    Directive({
+        selector: '[aupSwitchCaseWhen]',
+        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], SwitchCaseWhenDirective);
+let SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = class SwitchCaseDefaultDirective extends SwitchCaseOption {
+    constructor(templateRef) {
+        super(templateRef);
+        this.isDefault = true;
+    }
+    matches(value) {
+        return false;
+    }
+};
+SwitchCaseDefaultDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
+    Directive({
+        selector: '[aupSwitchCaseDefault]',
+        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], SwitchCaseDefaultDirective);
+let SwitchCaseComponent = class SwitchCaseComponent extends DisposableComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.selectedIndex = 0;
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        const subscription = this.switchCaseOptions.changes.subscribe(change => this.updateSelection());
+        this.onDispose(() => subscription.unsubscribe());
+        const { chain, when } = Dsl.disposeWith(this);
+        when.valueOf(this.switchModel).changes(() => this.updateSelection(), { initialValue: 'triggerChange' });
+        this.cdr.detectChanges();
+    }
+    updateSelection() {
+        const matchingIndicies = [];
+        this.switchCaseOptions.forEach((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((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 = () => [
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], SwitchCaseComponent.prototype, "switchModel", void 0);
+__decorate([
+    Input(), StoreInValueModel('switchModel'),
+    __metadata("design:type", Object)
+], SwitchCaseComponent.prototype, "switch", void 0);
+__decorate([
+    ContentChildren(SwitchCaseOption),
+    __metadata("design:type", QueryList)
+], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+SwitchCaseComponent = __decorate([
+    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", [ChangeDetectorRef])
+], SwitchCaseComponent);
+
 let ComponentsModule = class ComponentsModule {
 };
 ComponentsModule = __decorate([
@@ -573,7 +701,10 @@ ComponentsModule = __decorate([
             SelectInputComponent,
             ScrollContainerComponent,
             NoopComponent,
-            AbstractInputComponent
+            AbstractInputComponent,
+            SwitchCaseComponent,
+            SwitchCaseWhenDirective,
+            SwitchCaseDefaultDirective
         ],
         imports: [
             CommonModule,
@@ -593,7 +724,10 @@ ComponentsModule = __decorate([
             PasswordInputComponent,
             SelectInputComponent,
             ScrollContainerComponent,
-            NoopComponent
+            NoopComponent,
+            SwitchCaseComponent,
+            SwitchCaseWhenDirective,
+            SwitchCaseDefaultDirective
         ]
     })
 ], ComponentsModule);
@@ -651,7 +785,7 @@ AlertDialogComponent = __decorate([
     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, Inject(ACTIVITY_DATA)),
     __metadata("design:paramtypes", [Object])
@@ -684,7 +818,7 @@ ConfirmThenDialogComponent = __decorate([
     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, Inject(ACTIVITY_DATA)),
     __metadata("design:paramtypes", [Object])
@@ -709,7 +843,7 @@ ConfirmationDialogComponent = __decorate([
     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, Inject(ACTIVITY_DATA)),
     __metadata("design:paramtypes", [Object])
@@ -1327,19 +1461,20 @@ class ParameterDefinition {
         return this.options.getOptional(key, null);
     }
     // @Trace()
-    sanitise(value, visit, placeHistory, injector) {
+    sanitise(value, visit, placeHistory, injector, isPopState) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.isMissingFrom(visit)) {
-                const previousVisit = ___default.first(placeHistory.getHistory(visit.placeDefinition));
-                if (this.remember && previousVisit) {
-                    value = previousVisit.getParameter(this.name);
+                const returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
+                if (returningFromSomewhereElse) {
+                    const lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
+                    if (this.remember && lastKnownVisit) {
+                        value = lastKnownVisit.getParameter(this.name);
+                    }
+                    return this.isEmptyValue(value) ? this.defaultValue : value;
                 }
-                return this.isEmptyValue(value) ? this.defaultValue : value;
-            }
-            else {
-                // todo: add custom sanitiser
-                return value;
             }
+            // todo: add custom sanitiser
+            return value;
         });
     }
     isMissingFrom(visit) {
@@ -1567,11 +1702,11 @@ let PlaceComponent = PlaceComponent_1 = class PlaceComponent extends DisposableC
         const binding = this.registerDisposable(new Binding(this.visitModel, model, {
             toRight(visit) {
                 const value = visit.getParameter(parameterDef.name);
-                console.log('push to component', { name: parameterDef.name, value, visit });
+                // console.log('push to component', { name: parameterDef.name, value, visit });
                 return value;
             },
             toLeft(value, currentVisit) {
-                console.log('push to route', { name: parameterDef.name, value, currentVisit });
+                // console.log('push to route', { name: parameterDef.name, value, currentVisit });
                 return currentVisit.replace(parameterDef, value);
             }
         }));
@@ -2294,21 +2429,34 @@ class PopStateNavigation extends AbstractPopStateNavigation {
     }
 }
 
-let PlaceHistory = class PlaceHistory {
+var PlaceHistory_1;
+let PlaceHistory = PlaceHistory_1 = class PlaceHistory {
     constructor() {
-        this._history = new Map();
+        this._archive = new Map();
+        this.placeHistoryDepth = 4;
     }
-    // @Trace()
-    add(state) {
-        const history = this.getHistory(state.placeDefinition);
-        const previousState = ___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
+    notifyNavigationStarted() {
+        if (this._activeVisits) {
+            this.archive(this._activeVisits.visits);
+            this._previousVisits = this._activeVisits;
         }
     }
+    notifyNavigationFinished(visits) {
+        this._activeVisits = new PlaceHistory_1.VisitRecord(visits);
+    }
+    updateVisit(visit) {
+        assert.isTruthy(this._activeVisits);
+        this._activeVisits.update(visit);
+    }
+    lastVisitIncluded(placeDef) {
+        var _a;
+        return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
+    }
+    getMostRecentVisitFor(placeDef) {
+        return ___default.first(this.getHistory(placeDef));
+    }
     getHistory(placeDef) {
-        let history = this._history.get(placeDef);
+        let history = this._archive.get(placeDef);
         if (!history) {
             history = [];
             this.setHistory(placeDef, history);
@@ -2316,16 +2464,105 @@ let PlaceHistory = class PlaceHistory {
         return history;
     }
     setHistory(placeDef, history) {
-        this._history.set(placeDef, history);
+        this._archive.set(placeDef, history);
+    }
+    archive(visits) {
+        visits.forEach(state => {
+            const history = this.getHistory(state.placeDefinition);
+            const previousState = ___default.first(history);
+            if (!previousState || state.hasChangedFrom(previousState)) {
+                history.unshift(state); // LIFO
+                this.setHistory(state.placeDefinition, history.slice(0, this.placeHistoryDepth));
+            }
+        });
     }
 };
 PlaceHistory.ɵprov = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(); }, token: PlaceHistory, providedIn: "root" });
-PlaceHistory = __decorate([
+PlaceHistory = PlaceHistory_1 = __decorate([
     Injectable({
         providedIn: 'root'
     }),
     __metadata("design:paramtypes", [])
 ], PlaceHistory);
+(function (PlaceHistory) {
+    class VisitRecord {
+        constructor(visits) {
+            this.visits = visits;
+        }
+        update(visit) {
+            this.visits = this.visits.filter(v => v.placeDefinition !== visit.placeDefinition).concat(visit);
+        }
+        getVisitFor(placeDef) {
+            return this.visits.find(v => v.placeDefinition === placeDef);
+        }
+    }
+    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)
+    //   }
+    //
+    // }
+})(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.
@@ -2482,6 +2719,70 @@ UrlService = __decorate([
     __metadata("design:paramtypes", [Router, Location, UrlSerializer])
 ], UrlService);
 
+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(",");
+    }
+}
+
 let PlaceRouter = class PlaceRouter extends GarbageCollector {
     constructor(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
         super();
@@ -2643,12 +2944,9 @@ let PlaceRouter = class PlaceRouter extends GarbageCollector {
     get activeVisits() {
         return this._activeVisits.readonly;
     }
-    // @Trace()
     pushVisitChangesToRoute(previous, next) {
         return __awaiter(this, void 0, void 0, function* () {
-            // 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 this.doNavigation(next, router => {
@@ -2668,6 +2966,9 @@ let PlaceRouter = class PlaceRouter extends GarbageCollector {
     // @Trace()
     transitionTo(next) {
         const previous = this.navigationSessionModel.value;
+        if (!previous) {
+            this.placeHistory.notifyNavigationStarted();
+        }
         assert.isTruthy(next !== previous);
         Logger.get(this).info(`### Router State Transition: ${previous ? previous.toString() : 'null'} -> ${next.toString()}`);
         this.navigationSessionModel.value = next;
@@ -2680,7 +2981,7 @@ let PlaceRouter = class PlaceRouter extends GarbageCollector {
     routingSessionFinished(visits) {
         if (visits && visits.length > 0) {
             assert.isTruthy(this.navigationInProgress.value);
-            visits.forEach(v => 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?
@@ -2739,6 +3040,12 @@ PlaceRouter.ctorParameters = () => [
     { type: PlaceHistory }
 ];
 PlaceRouter.ɵprov = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location), ɵɵinject(InteractionService), ɵɵinject(UrlService), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Visit, Visit]),
+    __metadata("design:returntype", Promise)
+], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
 PlaceRouter = __decorate([
     Injectable({
         providedIn: 'root'
@@ -2750,70 +3057,6 @@ PlaceRouter = __decorate([
         PlaceHistory])
 ], 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');
 
 // Freezes the state of the components at the start of the animation.
@@ -3003,11 +3246,11 @@ __decorate([
     __metadata("design:type", Boolean)
 ], PlaceOutletComponent.prototype, "animate", void 0);
 __decorate([
-    Input(), UseDelegate({ defaultValue: true }),
+    Input(), TrackExternal({ defaultValue: true }),
     __metadata("design:type", ValueModel)
 ], PlaceOutletComponent.prototype, "animateModel", void 0);
 __decorate([
-    Input('placeAnimationOrderModel'), UseDelegate(),
+    Input('placeAnimationOrderModel'), TrackExternal(),
     __metadata("design:type", ListModel)
 ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
 __decorate([
@@ -3074,7 +3317,7 @@ __decorate([
     __metadata("design:type", Array)
 ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
 __decorate([
-    Input(), UseDelegate(),
+    Input(), TrackExternal(),
     __metadata("design:type", ListModel)
 ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
 __decorate([
@@ -3082,7 +3325,7 @@ __decorate([
     __metadata("design:type", PlaceOutletComponent)
 ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
 __decorate([
-    Input(), UseDelegate(),
+    Input(), TrackExternal(),
     __metadata("design:type", ValueModel)
 ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
 __decorate([
@@ -3105,7 +3348,7 @@ let BusyOverlayComponent = class BusyOverlayComponent {
     }
 };
 __decorate([
-    Input(), UseDelegate(),
+    Input(), TrackExternal(),
     __metadata("design:type", ValueModel)
 ], BusyOverlayComponent.prototype, "busyModel", void 0);
 __decorate([
@@ -3541,21 +3784,21 @@ NoopAuthGuard = __decorate([
 ], NoopAuthGuard);
 
 class VisitSanitiser {
-    constructor(activatedRoute, router, placeHistory, injector) {
+    constructor(navigationSession, activatedRoute, router, placeHistory, injector) {
+        this.navigationSession = navigationSession;
         this.activatedRoute = activatedRoute;
         this.router = router;
         this.placeHistory = placeHistory;
         this.injector = injector;
     }
-    // @Trace()
     sanitise(visit) {
         return __awaiter(this, void 0, void 0, function* () {
             const placeDef = visit.placeDefinition;
             if (placeDef.hasRouteId()) {
                 const routeIdDef = placeDef.getRouteIdParameterDef();
                 const routeId = visit.getRouteId();
-                const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector);
-                // console.log({routeId, sanitisedValue});
+                const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector, this.navigationSession.isPopState);
+                console.log({ routeId, sanitisedValue });
                 // ###------- EARLY EXIT --------###
                 if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
                     // if the route id has changed we redirect immediately as other
@@ -3572,7 +3815,7 @@ class VisitSanitiser {
             for (let i = 0; i < parameterDefs.length; i++) {
                 const def = parameterDefs[i];
                 const value = visit.getParameter(def.name);
-                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
+                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector, this.navigationSession.isPopState);
                 if (def.hasChanged(value, sanitisedValue)) {
                     sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
                 }
@@ -3581,6 +3824,12 @@ class VisitSanitiser {
         });
     }
 }
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Visit]),
+    __metadata("design:returntype", Promise)
+], VisitSanitiser.prototype, "sanitise", null);
 
 class PlaceGuard {
     constructor(router, urlService, placeRouter, placeHistory, interactionService, injector) {
@@ -3601,11 +3850,12 @@ class PlaceGuard {
                     // Parse our route params.
                     const params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
                     const parsedParams = placeDefinition.parseRouteParams(params);
-                    const initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                    const sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                    const navigationSession = this.placeRouter.navigationSession;
+                    const initialVisit = navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                    const sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                     const sanitisedVisit = yield sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams));
                     // 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)) {
                         // Regenerate the url
                         const urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
@@ -3779,5 +4029,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBindingDirective, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, StringInputComponent, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, UrlService, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, AbstractPlaceNavigationComponent as ɵba, ListPlaceNavComponent as ɵbb, InteractionModule as ɵbc, ActivityContainerComponent as ɵbd, AbstractInteractionContext as ɵbe, ActivityOutletComponent as ɵbf, ConfirmationDialogComponent as ɵbg, ACTIVITY_DATA as ɵbh, Activity as ɵbi, ConfirmThenDialogComponent as ɵbk, AlertDialogComponent as ɵbl, InPlaceInteractionContextComponent as ɵbn, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, ScrollContainerComponent as ɵk, NoopComponent as ɵl, PlaceModule as ɵm, EmptyStateComponent as ɵn, BusyOverlayComponent as ɵo, PlaceOutletComponent as ɵp, leftRightPlaceAnimation as ɵq, LEFT_RIGHT_PLACE_ANIMATION as ɵr, AUP_PLACE_CONFIG as ɵs, PlaceRouter as ɵu, InteractionService as ɵv, ModalInteractionContextFactory as ɵw, UrlService as ɵx, PlaceHistory as ɵy, TabbedPlaceNavigationComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBindingDirective, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, UrlService, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, ModalInteractionContextFactory as ɵba, UrlService as ɵbb, PlaceHistory as ɵbc, TabbedPlaceNavigationComponent as ɵbd, AbstractPlaceNavigationComponent as ɵbe, ListPlaceNavComponent as ɵbf, InteractionModule as ɵbg, ActivityContainerComponent as ɵbh, AbstractInteractionContext as ɵbi, ActivityOutletComponent as ɵbj, ConfirmationDialogComponent as ɵbk, ACTIVITY_DATA as ɵbl, Activity as ɵbm, ConfirmThenDialogComponent as ɵbo, AlertDialogComponent as ɵbp, InPlaceInteractionContextComponent as ɵbr, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, ScrollContainerComponent as ɵk, NoopComponent as ɵl, SwitchCaseOption as ɵm, SwitchCaseWhenDirective as ɵn, SwitchCaseDefaultDirective as ɵo, SwitchCaseComponent as ɵp, PlaceModule as ɵq, EmptyStateComponent as ɵr, BusyOverlayComponent as ɵs, PlaceOutletComponent as ɵt, leftRightPlaceAnimation as ɵu, LEFT_RIGHT_PLACE_ANIMATION as ɵv, AUP_PLACE_CONFIG as ɵw, PlaceRouter as ɵy, InteractionService as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map