@coolon/angular-ui-powerups 3.5.3 → 3.7.0-alpha.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/list'), require('@angular/material/progress-spinner'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/list', '@angular/material/progress-spinner', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global._, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.list, global.ng.material.progressSpinner, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, _, typescriptStringEnums, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, ResizeObserver, list, progressSpinner, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/list'), require('@angular/material/progress-spinner'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/list', '@angular/material/progress-spinner', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global._, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.list, global.ng.material.progressSpinner, global.fastMemoizeDecorator, null, global.ng.animations));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, _, typescriptStringEnums, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, ResizeObserver, list, progressSpinner, fastMemoizeDecorator, reflectMetadata, animations$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2134,8 +2134,6 @@
         __extends(NumberInputComponent, _super);
         function NumberInputComponent() {
             var _this = _super.call(this) || this;
-            // @Input() @TrackExternal({ delegateTo: 'inputModel' })
-            // valueModel: Form.ValueModelBase<number> | MutableValueModel<number>;
             _this.min = Number.MIN_SAFE_INTEGER;
             _this.max = Number.MAX_SAFE_INTEGER;
             return _this;
@@ -2147,20 +2145,19 @@
     NumberInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-number-input',
-                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                     styles: [""]
                 },] }
     ];
     NumberInputComponent.ctorParameters = function () { return []; };
     NumberInputComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
         min: [{ type: i0.Input }],
         max: [{ type: i0.Input }]
     };
 
     var PasswordInputComponent = /** @class */ (function (_super) {
         __extends(PasswordInputComponent, _super);
-        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
-        // valueModel: Form.ValueModelBase<string> | MutableValueModel<string>;
         function PasswordInputComponent() {
             return _super.call(this) || this;
         }
@@ -2171,11 +2168,14 @@
     PasswordInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-password-input',
-                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
                     styles: [""]
                 },] }
     ];
     PasswordInputComponent.ctorParameters = function () { return []; };
+    PasswordInputComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }]
+    };
 
     /**
      * Using templates:
@@ -2239,12 +2239,13 @@
     StringInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-string-input',
-                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
                     styles: ["button[disabled]{visibility:hidden}"]
                 },] }
     ];
     StringInputComponent.ctorParameters = function () { return []; };
     StringInputComponent.propDecorators = {
+        autocomplete: [{ type: i0.Input }],
         enableClearModel: [{ type: i0.Input }],
         enableClear: [{ type: i0.Input }]
     };
@@ -4603,6 +4604,18 @@
         InteractionService.ApiAdapter = ApiAdapter;
     })(exports.InteractionService || (exports.InteractionService = {}));
 
+    /**
+     * @example
+     *   <aup-in-place-interaction-context #inPlaceInteractionContext>
+     *
+     *   </aup-in-place-interaction-context>
+     *
+     *   in your component
+     *     @ViewChild('inPlaceInteractionContext', { static: true })
+     *     interactionContext: InteractionContext;
+     *
+     *
+     */
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
         function InPlaceInteractionContextComponent(interactionService, tabConfig) {
@@ -5161,6 +5174,8 @@
                 },] }
     ];
 
+    var PLACE_AUTH_SERVICE = new i0.InjectionToken("PlaceAuthService");
+
     exports.ParameterDefinition = /** @class */ (function () {
         function ParameterDefinition(propertyName, options, urlFormat) {
             this.propertyName = propertyName;
@@ -5267,10 +5282,11 @@
     })(exports.ParameterDefinition || (exports.ParameterDefinition = {}));
 
     var PlaceDefinition = /** @class */ (function () {
-        function PlaceDefinition(component, path, authenticate, data, routeParameters, children) {
+        function PlaceDefinition(component, path, authenticate, roles, data, routeParameters, children) {
             this.component = component;
             this.path = path;
             this.authenticate = authenticate;
+            this.roles = roles;
             this.data = data;
             this.routeParameters = routeParameters;
             this.children = children;
@@ -5512,8 +5528,17 @@
             return typescriptUtilities.Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
         }
         PlaceComponent.getRouteParameters = getRouteParameters;
-        function getDefinition(klass) {
-            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+        function getDefinition(snapshotOrConstructor) {
+            if (snapshotOrConstructor instanceof i1$1.ActivatedRouteSnapshot) {
+                var component = snapshotOrConstructor.component;
+                if (!isPlaceComponentConstructor(component)) {
+                    throw new Error("ActivatedRouteSnapshot component is not a PlaceComponent, got " + component);
+                }
+                return Reflect.getMetadata(DEFINITION_META_DATA_KEY, component);
+            }
+            else {
+                return Reflect.getMetadata(DEFINITION_META_DATA_KEY, snapshotOrConstructor);
+            }
         }
         PlaceComponent.getDefinition = getDefinition;
         function injectDefinition(klass, definition) {
@@ -5522,6 +5547,77 @@
         PlaceComponent.injectDefinition = injectDefinition;
     })(exports.PlaceComponent || (exports.PlaceComponent = {}));
 
+    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 !_.isNil(this.getRouteId());
+        };
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param parameterName the field name of the property model or the `as` option if specified.
+         */
+        Visit.prototype.getParameter = function (parameterName) {
+            return this.visitParameters[parameterName];
+        };
+        // @Trace()
+        Visit.prototype.hasParameter = function (parameterName) {
+            return Object.keys(this.visitParameters).includes(parameterName);
+        };
+        Visit.prototype.replace = function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
+        };
+        Visit.prototype.mergeRouteParameters = function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            var routeParameterKeys = Object.keys(routeParams);
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                else {
+                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                    // defaults and remember sanitisation process.
+                    var value = _this.getParameter(def.name);
+                    if (_this.hasParameter(def.name)) {
+                        params[def.name] = value;
+                    }
+                }
+            });
+            return new Visit(this.placeDefinition, params);
+        };
+        Visit.prototype.hasRoutingChangedFrom = function (other) {
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            var sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = _.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        };
+        Visit.prototype.toDebugString = function () {
+            var _this = this;
+            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(",");
+        };
+        return Visit;
+    }());
+
+    var AUP_PLACE_CONFIG = new i0.InjectionToken('AUP_PLACE_CONFIG');
+
     /**
      * This class handles the logic around canDeactivate for a given router state transition.  It's core responsibilities are:
      * 1. Ensure we only ask the component to deactivate once on a given navigation cycle (since visit sanitisation can result in multiple round trips to through the router.)
@@ -6696,6 +6792,9 @@
             _this.navigationSessionModel = new pectin.MutableValueModel();
             _this._activeVisits = new pectin.MutableListModel();
             _this.sessionFinishedJobs = [];
+            if (window['Cypress']) {
+                window['aup.PlaceRouter'] = _this;
+            }
             _this.routerInteractionAdapter = interactionService.registerPlaceRouter(_this);
             // TODO: Make this an interface and use 'this' instead.
             _this.navigationContext = new exports.NavigationContext.Impl(_this.urlService, _this.routerInteractionAdapter, function (urlSnapshot, options) {
@@ -6766,6 +6865,9 @@
             enumerable: false,
             configurable: true
         });
+        PlaceRouter.prototype.isNavigating = function () {
+            return this.navigationInProgress.value;
+        };
         // @Trace()
         PlaceRouter.prototype.onPopState = function (event) {
             pectin.assert.isTruthy(event.navigationTrigger === 'popstate');
@@ -6988,77 +7090,6 @@
         { type: exports.PlaceHistory }
     ]; };
 
-    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 !_.isNil(this.getRouteId());
-        };
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param parameterName the field name of the property model or the `as` option if specified.
-         */
-        Visit.prototype.getParameter = function (parameterName) {
-            return this.visitParameters[parameterName];
-        };
-        // @Trace()
-        Visit.prototype.hasParameter = function (parameterName) {
-            return Object.keys(this.visitParameters).includes(parameterName);
-        };
-        Visit.prototype.replace = function (parameter, value) {
-            var _a;
-            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
-        };
-        Visit.prototype.mergeRouteParameters = function (routeParams) {
-            var _this = this;
-            // todo: whitelist parameters.
-            var routeParameterKeys = Object.keys(routeParams);
-            var params = {};
-            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
-                if (def.isRouteId || def.isRouteParameter) {
-                    if (routeParameterKeys.includes(def.name)) {
-                        params[def.name] = routeParams[def.name];
-                    }
-                }
-                else {
-                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
-                    // defaults and remember sanitisation process.
-                    var value = _this.getParameter(def.name);
-                    if (_this.hasParameter(def.name)) {
-                        params[def.name] = value;
-                    }
-                }
-            });
-            return new Visit(this.placeDefinition, params);
-        };
-        Visit.prototype.hasRoutingChangedFrom = function (other) {
-            var samePlace = other.placeDefinition === this.placeDefinition;
-            var sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = _.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-        };
-        Visit.prototype.toDebugString = function () {
-            var _this = this;
-            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(",");
-        };
-        return Visit;
-    }());
-
-    var AUP_PLACE_CONFIG = new i0.InjectionToken('AUP_PLACE_CONFIG');
-
     // Freezes the state of the components at the start of the animation.
     var animationStartStyle = animations$1.style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
     var left = [
@@ -7336,11 +7367,13 @@
 
     var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         __extends(AbstractPlaceNavigationComponent, _super);
-        function AbstractPlaceNavigationComponent(placeRouter) {
+        function AbstractPlaceNavigationComponent(authService) {
             var _this = _super.call(this) || this;
             _this._activePlaceComponent = new pectin.DelegatingValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.placeDefinitions = chain(_this.placesModel).map(function (c) { return exports.PlaceComponent.getDefinition(c); });
+            _this.placeDefinitions = chain(_this.placesModel)
+                .map(function (c) { return exports.PlaceComponent.getDefinition(c); })
+                .select(function (d) { return authService.authoriserModel.value(d); }, { dependsOn: authService.authoriserModel });
             _this.commandFactory = pectin.Command.createFactory(function (placeDefinition) {
                 _this.placeOutlet.navigate(new Visit(placeDefinition));
             });
@@ -7374,7 +7407,7 @@
                 },] }
     ];
     AbstractPlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] }
     ]; };
     AbstractPlaceNavigationComponent.propDecorators = {
         places: [{ type: i0.Input }],
@@ -7451,8 +7484,8 @@
 
     var ListPlaceNavComponent = /** @class */ (function (_super) {
         __extends(ListPlaceNavComponent, _super);
-        function ListPlaceNavComponent(placeRouter) {
-            return _super.call(this, placeRouter) || this;
+        function ListPlaceNavComponent(authService) {
+            return _super.call(this, authService) || this;
         }
         return ListPlaceNavComponent;
     }(AbstractPlaceNavigationComponent));
@@ -7460,11 +7493,11 @@
         { type: i0.Component, args: [{
                     selector: 'aup-list-place-nav',
                     template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
-                    styles: [":host{--selected-background:#f1f1f1;--selected-border-color:#838383;--selected-color:inherit;display:flex;flex-direction:column}mat-nav-list{padding-top:0}a.active{background:var(--selected-background);border-right:2px solid var(--selected-border-color);color:var(--selected-color)}"]
+                    styles: [":host{--selected-background:#f1f1f1;--selected-border-color:#838383;--selected-color:inherit;display:flex;flex-direction:column}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{background:var(--selected-background);border-right:2px solid var(--selected-border-color);color:var(--selected-color)}"]
                 },] }
     ];
     ListPlaceNavComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] }
     ]; };
 
     /**
@@ -7511,8 +7544,8 @@
      */
     var SidePlaceNavigationComponent = /** @class */ (function (_super) {
         __extends(SidePlaceNavigationComponent, _super);
-        function SidePlaceNavigationComponent(router, placeRouter) {
-            var _this = _super.call(this, placeRouter) || this;
+        function SidePlaceNavigationComponent(router, authService) {
+            var _this = _super.call(this, authService) || this;
             _this.router = router;
             _this.expanded = false;
             return _this;
@@ -7537,7 +7570,7 @@
     ];
     SidePlaceNavigationComponent.ctorParameters = function () { return [
         { type: i1$1.Router },
-        { type: PlaceRouter }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] }
     ]; };
     SidePlaceNavigationComponent.propDecorators = {
         expanded: [{ type: i0.HostBinding, args: ['class.expanded',] }],
@@ -7546,8 +7579,8 @@
 
     var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
         __extends(TabbedPlaceNavigationComponent, _super);
-        function TabbedPlaceNavigationComponent(placeRouter) {
-            return _super.call(this, placeRouter) || this;
+        function TabbedPlaceNavigationComponent(authService) {
+            return _super.call(this, authService) || this;
         }
         return TabbedPlaceNavigationComponent;
     }(AbstractPlaceNavigationComponent));
@@ -7559,7 +7592,7 @@
                 },] }
     ];
     TabbedPlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] }
     ]; };
 
     var PlaceModule = /** @class */ (function () {
@@ -7765,7 +7798,7 @@
     function Place(options) {
         return function (target) {
             if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
-                exports.PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, _.isNil(options.authenticate) ? true : options.authenticate, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map(function (c) { return exports.PlaceComponent.getDefinition(c); })));
+                exports.PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, _.isNil(options.authenticate) ? true : options.authenticate, _.isNil(options.roles) ? [] : options.roles, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map(function (c) { return exports.PlaceComponent.getDefinition(c); })));
             }
             else {
                 pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
@@ -7912,63 +7945,74 @@
     }());
 
     var PlaceGuard = /** @class */ (function () {
-        function PlaceGuard(router, urlService, placeRouter, placeHistory, interactionService, injector) {
+        function PlaceGuard(router, urlService, placeRouter, placeHistory, placeAuthService, interactionService, injector) {
             this.router = router;
             this.urlService = urlService;
             this.placeRouter = placeRouter;
             this.placeHistory = placeHistory;
+            this.placeAuthService = placeAuthService;
             this.interactionService = interactionService;
             this.injector = injector;
         }
-        // @Trace()
         PlaceGuard.prototype.canActivate = function (activatedRoute, state) {
             return __awaiter(this, void 0, void 0, function () {
+                var placeDefinition_1, needsAuth, proceed, _a, result;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    // TODO: this is ugly now that I'm return UrlSnapshots and not UrlTrees.  It'd be better if the functions
-                    //        weren't nested or if I implemented a handler chain.
-                    return [2 /*return*/, this.authorisePlaceThen(activatedRoute, state, function (placeDefinition) { return __awaiter(_this, void 0, void 0, function () {
-                            var result;
-                            var _this = this;
-                            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, 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);
-                                                        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
-                                                        navigationSession.storeVisit(sanitisedVisit);
-                                                        if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                                                            urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
-                                                            // console.log('##### Place Guard Redirect', urlSnapshot);
-                                                            return [2 /*return*/, urlSnapshot];
-                                                        }
-                                                        else {
-                                                            return [2 /*return*/, true];
-                                                        }
-                                                        return [2 /*return*/];
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
+                            placeDefinition_1 = exports.PlaceComponent.getDefinition(activatedRoute.component);
+                            needsAuth = placeDefinition_1.authenticate;
+                            _a = !needsAuth;
+                            if (_a) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.placeAuthService.isAuthenticated()];
+                        case 1:
+                            _a = (_b.sent());
+                            _b.label = 2;
+                        case 2:
+                            proceed = _a;
+                            if (!proceed) {
+                                return [2 /*return*/, this.handleGuardResult(this.placeAuthService.handleNotAuthenticated(activatedRoute, state))];
+                            }
+                            if (!this.placeAuthService.isAuthorised(placeDefinition_1)) {
+                                return [2 /*return*/, this.handleGuardResult(this.placeAuthService.handleNotAuthorisation(activatedRoute, state))];
+                            }
+                            return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
+                                    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_1.parseRouteParams(params);
+                                                navigationSession = this.placeRouter.navigationSession;
+                                                initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, 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
+                                                navigationSession.storeVisit(sanitisedVisit);
+                                                if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                                    urlSnapshot = this.urlService.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                                                    // console.log('##### Place Guard Redirect', urlSnapshot);
+                                                    return [2 /*return*/, urlSnapshot];
                                                 }
-                                            });
-                                        }); })];
-                                    case 1:
-                                        result = _a.sent();
-                                        return [2 /*return*/, this.handleGuardResult(result)];
-                                }
-                            });
-                        }); })];
+                                                else {
+                                                    return [2 /*return*/, true];
+                                                }
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); })];
+                        case 3:
+                            result = _b.sent();
+                            return [2 /*return*/, result instanceof exports.UrlSnapshot ? result.urlTree : result];
+                        case 4: return [2 /*return*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
+                    }
                 });
             });
         };
-        // @Trace()
         PlaceGuard.prototype.canDeactivate = function (component, currentRoute, currentState, nextState) {
             return __awaiter(this, void 0, void 0, function () {
                 var currentUrl, nextUrl, result;
@@ -7980,66 +8024,41 @@
                             return [4 /*yield*/, this.placeRouter.navigationSession.canDeactivatePlace(component, currentUrl, nextUrl)];
                         case 1:
                             result = _a.sent();
-                            return [2 /*return*/, this.handleGuardResult(result)];
+                            return [2 /*return*/, result instanceof exports.UrlSnapshot ? result.urlTree : result];
                     }
                 });
             });
         };
-        // @Trace()
         PlaceGuard.prototype.handleGuardResult = function (result) {
             if (result instanceof exports.UrlSnapshot) {
                 return result.urlTree;
             }
             else {
-                return result;
+                return this.urlService.createUrlSnapshot(result).urlTree;
             }
         };
+        // protected async ensureAuthenticatedThen(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot, next: (placeDefinition: PlaceDefinition) => Promise<boolean | UrlTree>): Promise<boolean | UrlTree> {
+        //   const authoriseResult = placeDefinition.authenticate ? await this.isAuthorised(activatedRoute, state) : true;
+        //   if (authoriseResult === true) {
+        //     // we're authorised, now run the place guards.
+        //     return next(placeDefinition);
+        //   } else {
+        //     console.log('not authorised result', authoriseResult);
+        //     return authoriseResult;
+        //   }
+        // }
+        //
+        // // @Trace()
+        // protected async ensureAuthorisedThen(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot, next: (placeDefinition: PlaceDefinition) => Promise<boolean | UrlTree>): Promise<boolean | UrlTree> {
+        //
+        // }
         // @Trace()
-        PlaceGuard.prototype.authorisePlaceThen = function (activatedRoute, state, runPlaceGuards) {
-            return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition, authoriseResult, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
-                            placeDefinition = exports.PlaceComponent.getDefinition(activatedRoute.component);
-                            if (!placeDefinition.authenticate) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.isAuthorised(activatedRoute, state)];
-                        case 1:
-                            _a = _b.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            _a = true;
-                            _b.label = 3;
-                        case 3:
-                            authoriseResult = _a;
-                            if (authoriseResult === true) {
-                                // we're authorised, now run the place guards.
-                                return [2 /*return*/, runPlaceGuards(placeDefinition)];
-                            }
-                            else {
-                                console.log('not authorised result', authoriseResult);
-                                return [2 /*return*/, authoriseResult];
-                            }
-                            return [3 /*break*/, 5];
-                        case 4: return [2 /*return*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        // @Trace()
-        PlaceGuard.prototype.isAuthorised = function (activatedRoute, state) {
-            return __awaiter(this, void 0, void 0, function () {
-                var authorised;
-                return __generator(this, function (_a) {
-                    authorised = this.getAuthGuard(this.injector).canActivate(activatedRoute, state);
-                    return [2 /*return*/, (authorised instanceof rxjs.Observable) ? authorised.toPromise() : authorised];
-                });
-            });
-        };
-        // @Trace()
-        PlaceGuard.prototype.cleanInteractionState = function (route, state, then) {
+        // async isAuthorised(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
+        //   const authorised = this.getAuthGuard(this.injector).canActivate(activatedRoute, state);
+        //   return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
+        // }
+        // abstract getAuthGuard(injector: Injector): CanActivate;
+        PlaceGuard.prototype.cleanInteractionState = function (route, state, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var url;
                 return __generator(this, function (_a) {
@@ -8050,7 +8069,7 @@
                         return [2 /*return*/, url.removeInteractionIds()];
                     }
                     else {
-                        return [2 /*return*/, then()];
+                        return [2 /*return*/, next()];
                     }
                     return [2 /*return*/];
                 });
@@ -8058,6 +8077,43 @@
         };
         return PlaceGuard;
     }());
+    PlaceGuard.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlaceGuard_Factory() { return new PlaceGuard(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(UrlService), i0.ɵɵinject(PlaceRouter), i0.ɵɵinject(exports.PlaceHistory), i0.ɵɵinject(PLACE_AUTH_SERVICE), i0.ɵɵinject(exports.InteractionService), i0.ɵɵinject(i0.INJECTOR)); }, token: PlaceGuard, providedIn: "root" });
+    PlaceGuard.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    PlaceGuard.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: UrlService },
+        { type: PlaceRouter },
+        { type: exports.PlaceHistory },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [PLACE_AUTH_SERVICE,] }] },
+        { type: exports.InteractionService },
+        { type: i0.Injector }
+    ]; };
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot]),
+        __metadata("design:returntype", Promise)
+    ], PlaceGuard.prototype, "canActivate", null);
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [exports.PlaceComponent, i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot, i1$1.RouterStateSnapshot]),
+        __metadata("design:returntype", Promise)
+    ], PlaceGuard.prototype, "canDeactivate", null);
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], PlaceGuard.prototype, "handleGuardResult", null);
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [i1$1.ActivatedRouteSnapshot, i1$1.RouterStateSnapshot, Function]),
+        __metadata("design:returntype", Promise)
+    ], PlaceGuard.prototype, "cleanInteractionState", null);
 
     (function (Formatter) {
         var StringType = /** @class */ (function () {
@@ -8246,6 +8302,7 @@
     exports.NoopAuthGuard = NoopAuthGuard;
     exports.NoopComponent = NoopComponent;
     exports.NumberInputComponent = NumberInputComponent;
+    exports.PLACE_AUTH_SERVICE = PLACE_AUTH_SERVICE;
     exports.PORTAL_EDITOR_COMPONENT = PORTAL_EDITOR_COMPONENT;
     exports.PORTAL_RENDERER_COMPONENT = PORTAL_RENDERER_COMPONENT;
     exports.PasswordInputComponent = PasswordInputComponent;