@coolon/angular-ui-powerups 3.18.1 → 11.0.0-alpha.11

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

@@ -645,7 +645,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-busy-overlay',
                     template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
-                    styles: [":host{position:relative}div.busy-overlay-backdrop{-ms-grid-columns:auto;-ms-grid-rows:auto;background-color:rgba(0,0,0,.2);bottom:0;display:-ms-grid;display:grid;grid-template-columns:auto;grid-template-rows:auto;left:0;place-content:center;position:absolute;right:0;top:0}"]
+                    styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}"]
                 },] }
     ];
     BusyOverlayComponent.ctorParameters = function () { return []; };
@@ -729,7 +729,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
                     template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                    styles: [":host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
+                    styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
                 },] }
     ];
     CardContainerComponent.ctorParameters = function () { return []; };
@@ -940,7 +940,7 @@
                     selector: 'aup-command-face',
                     template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}"]
+                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}"]
                 },] }
     ];
     CommandFaceComponent.ctorParameters = function () { return []; };
@@ -1009,6 +1009,9 @@
             _this.activeFace = _this.faces.first();
             _this.buttonStyle = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getStyleOf(f); });
             _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            _this.iconOnly = _this.faces.select(function (face) {
+                return ___default['default'].isEmpty(exports.CommandFace.getTextOf(face)) && !___default['default'].isEmpty(exports.CommandFace.getIconOf(face));
+            }).count().equals(_this.faces.count());
             return _this;
         }
         CommandComponent.prototype.isActive = function (face) {
@@ -1027,7 +1030,7 @@
     CommandComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-command',
-                    template: "<ng-container [ngSwitch]=\"buttonStyle.value\">\n  <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n    <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n    <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
+                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n    <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
                     styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
                 },] }
     ];
@@ -1204,7 +1207,11 @@
     ], MoreMenuComponent.prototype, "tooltip", void 0);
 
     (function (TrackBy) {
-        TrackBy.byIndex = function (data, index) { return index; };
+        TrackBy.byIndex = function (index, item) { return index; };
+        function trackByProperty(property) {
+            return function (index, item) { return item[property]; };
+        }
+        TrackBy.trackByProperty = trackByProperty;
     })(exports.TrackBy || (exports.TrackBy = {}));
 
     exports.CommandContainer = /** @class */ (function (_super) {
@@ -1269,7 +1276,7 @@
                     selector: 'aup-tool-bar',
                     template: '<div class="toolbar-content"><ng-content></ng-content></div>',
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: [":host{display:inline-block}.toolbar-content{align-items:center;display:inline-flex;flex-direction:row}.toolbar-content>aup-separator{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
+                    styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
                 },] }
     ];
     ToolBarComponent.ctorParameters = function () { return []; };
@@ -1450,7 +1457,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-empty-state',
                     template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
-                    styles: [":host{align-items:center;display:flex;flex-direction:column;justify-content:center}.container{border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300;padding:var(--aup-default-padding)}"]
+                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
                 },] }
     ];
     EmptyStateComponent.ctorParameters = function () { return []; };
@@ -1892,7 +1899,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-checkbox-input',
                     template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
-                    styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{font-size:12px;font-weight:400;line-height:13.5px;margin-left:24px;margin-top:4px}"]
+                    styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
                 },] }
     ];
     CheckboxInputComponent.ctorParameters = function () { return []; };
@@ -2135,7 +2142,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-icon',
                     template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-                    styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center}.faIconWrapper,.svgIcon{height:24px;width:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{height:inherit;width:inherit}"]
+                    styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center}.faIconWrapper,.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
                 },] }
     ];
     exports.IconComponent.propDecorators = {
@@ -2174,7 +2181,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-scroll-container',
                     template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n",
-                    styles: [":host{flex-direction:column;min-height:0}.container,:host{align-items:stretch;display:flex}.container{flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]
+                    styles: [":host{flex-direction:column;min-height:0}.container,:host{display:flex;align-items:stretch}.container{flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll}"]
                 },] }
     ];
     ScrollContainerComponent.ctorParameters = function () { return []; };
@@ -2191,7 +2198,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-section-header',
                     template: "<ng-content></ng-content>\n",
-                    styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));color:rgba(0,0,0,.5);display:block;font-size:12px;line-height:12px;padding:8px 16px}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+                    styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
                 },] }
     ];
     SectionHeaderComponent.ctorParameters = function () { return []; };
@@ -2310,7 +2317,7 @@
         { type: i0.Component, args: [{
                     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{align-items:stretch;display:flex;flex-direction:column}mat-tab-group{flex:1}"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
                 },] }
     ];
     SwitchCaseComponent.ctorParameters = function () { return [
@@ -2707,6 +2714,7 @@
             this._flex = false;
             this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
             this.installHeaderRenderer();
+            this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
         }
         ColumnModel.prototype.installHeaderRenderer = function () {
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
@@ -3332,15 +3340,32 @@
      *
      * Styling
      * @example
+     *  // global settings
+     * :root {
+     *   --aup-table-column-gap: 10px; // defaults to 24px
+     *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+     *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+     * }
+     *
+     * // per table settings.
      * aup-table {
      *   --column-gap: 10px; // defaults to 24px
      *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
      *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --first-column-padding-left: 18px // defaults to --column-gap
+     *   --last-column-padding-right: 18px // defaults to --column-gap
+     *
+     *   aup-table-header-cell-renderer,
      *   aup-table-cell-renderer {
-     *     &:first-column {
+     *     &.aup-col-my-dasherised-column-id {
+     *       // do stuff
+     *     }
+     *     &.first-visible-column {
      *       // do stuff
      *     }
-     *     &:last-column {
+     *     &.last-visible-column {
      *       // do stuff
      *     }
      *   }
@@ -3410,13 +3435,23 @@
             var _a;
             return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
+        TableComponent.prototype.getColumnClasses = function (columnId) {
+            var classes = ["aup-col-" + this.columnsById.get(columnId).dasherisedColumnId];
+            if (this.isFirstVisibleColumn(columnId)) {
+                classes.push('first-visible-column');
+            }
+            if (this.isLastVisibleColumn(columnId)) {
+                classes.push('last-visible-column');
+            }
+            return classes;
+        };
         return TableComponent;
     }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                        [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                 [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
-                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:scroll;display:flex;flex-direction:column;align-items:stretch}"]
                 },] }
     ];
     TableComponent.ctorParameters = function () { return [
@@ -3573,7 +3608,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-table-header-cell-renderer',
                     template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-                    styles: [":host{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center}"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
                 },] }
     ];
     TableHeaderCellRendererComponent.ctorParameters = function () { return []; };
@@ -3673,7 +3708,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-tree-inheritance-icon',
                     template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n",
-                    styles: [":host{color:inherit;position:relative}svg{color:var(--line-color);display:block}"]
+                    styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}"]
                 },] }
     ];
     exports.TreeInheritanceIconComponent.ctorParameters = function () { return []; };
@@ -3772,7 +3807,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-tree-label-cell-renderer',
                     template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let iconClass of iconList.value\" [type]=\"iconClass\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse(node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n",
-                    styles: [":host{--line-color:#ddd;--node-color:#999;align-items:stretch;display:inline-flex;flex-direction:row}:host div.label{align-items:center;display:flex;flex-direction:row;padding-left:6px;white-space:nowrap}:host div.tree-icons{-ms-grid-rows:1fr;align-items:stretch;display:-ms-grid;display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-template-rows:1fr;justify-content:stretch}:host div.tree-icons aup-icon{-ms-grid-row-align:center;align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-icon,:host div.tree-icons aup-tree-inheritance-icon{margin-left:4px}"]
+                    styles: [":host{--line-color:#ddd;--node-color:#999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-icon,:host div.tree-icons aup-tree-inheritance-icon{margin-left:4px}"]
                 },] }
     ];
     TreeLabelCellRendererComponent.ctorParameters = function () { return []; };
@@ -3914,7 +3949,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "decoratedSelf", {
             get: function () {
                 var _this = this;
-                return this.memoize("decoratedSelf", function () {
+                return this.memoize('decoratedSelf', function () {
                     return _this.parent ? _this.parent.children.find(function (child) { return child.node === _this.node; }) : exports.DecoratedTreeNode.createRoot(_this.node);
                 });
             },
@@ -3924,7 +3959,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "children", {
             get: function () {
                 var _this = this;
-                return this.memoize("children", function () {
+                return this.memoize('children', function () {
                     return _this.node.children ? _this.node.children.map(function (child) {
                         return typescriptUtilities.Mixin.createProxy(child, new DecoratedTreeNodeMixin(_this.decoratedSelf, child));
                     }) : [];
@@ -3935,7 +3970,7 @@
         });
         DecoratedTreeNodeMixin.prototype.descendants = function () {
             var _this = this;
-            return this.memoize("descendants", function () {
+            return this.memoize('descendants', function () {
                 var result = [];
                 _this.visitDescendants(function (child) { return result.push(child); });
                 return result;
@@ -3943,7 +3978,7 @@
         };
         DecoratedTreeNodeMixin.prototype.selfAndDescendants = function () {
             var _this = this;
-            return this.memoize("selfAndDescendants", function () {
+            return this.memoize('selfAndDescendants', function () {
                 var result = [];
                 _this.visitSelfAndDescendants(function (child) { return result.push(child); });
                 return result;
@@ -4014,29 +4049,24 @@
         };
         DecoratedTreeNodeMixin.prototype.ancestorsAndSelf = function () {
             var _this = this;
-            return this.memoize("ancestorsAndSelf", function () {
+            return this.memoize('ancestorsAndSelf', function () {
                 return _this.ancestors().concat([(_this.decoratedSelf)]);
             });
         };
         DecoratedTreeNodeMixin.prototype.pathToParent = function (parent) {
-            var _this = this;
-            return this.memoize("pathToParent", function () {
-                if (_this.node === parent.node) {
-                    return [];
-                }
-                else if (_this.parent) {
-                    return _this.parent.pathToParent(parent).concat([_this.parent]);
-                }
-                else {
-                    throw new Error('parent is not an ancestor');
-                }
-            });
+            if (this.node === parent.node) {
+                return [];
+            }
+            else if (this.parent) {
+                var pathToParent = this.parent.pathToParent(parent);
+                return pathToParent.concat([this.parent]);
+            }
+            else {
+                throw new Error('parent is not an ancestor');
+            }
         };
         DecoratedTreeNodeMixin.prototype.pathToParentAndSelf = function (parent) {
-            var _this = this;
-            return this.memoize("pathToParentAndSelf", function () {
-                return _this.pathToParent(parent).concat([_this.decoratedSelf]);
-            });
+            return this.pathToParent(parent).concat([this.decoratedSelf]);
         };
         DecoratedTreeNodeMixin.prototype.isRoot = function () {
             return !this.parent;
@@ -4052,20 +4082,20 @@
             return !this.isRoot() && this.node.children.length < 1;
         };
         DecoratedTreeNodeMixin.prototype.hasChildren = function () {
-            return this.node.children.length > 0;
+            return this.node.children && this.node.children.length > 0;
         };
         DecoratedTreeNodeMixin.prototype.depthFromParent = function (parent) {
             return this.pathToParent(parent).length;
         };
         DecoratedTreeNodeMixin.prototype.treeDepth = function () {
             var _this = this;
-            return this.memoize("treeDepth", function () {
+            return this.memoize('treeDepth', function () {
                 return 1 + _this.descendants().map(function (child) { return child.depthFromParent(_this); }).reduce(function (prev, current) { return Math.max(prev, current); });
             });
         };
         DecoratedTreeNodeMixin.prototype.flatten = function () {
             var _this = this;
-            return this.memoize("flatten", function () {
+            return this.memoize('flatten', function () {
                 return _this.flattenInto([]);
             });
         };
@@ -4275,27 +4305,45 @@
     var TreeTableComponent = /** @class */ (function (_super) {
         __extends(TreeTableComponent, _super);
         function TreeTableComponent() {
-            return _super.call(this) || this;
+            var _this = _super.call(this) || this;
+            /**
+             * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
+             * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
+             * containment area.
+             */
+            _this.enableScrolling = false;
+            return _this;
         }
         return TreeTableComponent;
     }(DisposableComponent));
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "aup-tree-table",
-                    template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
+                    template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
                     encapsulation: i0.ViewEncapsulation.None // allow us to target nested table styles
                     ,
-                    styles: ["td.mat-cell{border-bottom-width:0!important;border-top-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
+                    styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
                 },] }
     ];
     TreeTableComponent.ctorParameters = function () { return []; };
     TreeTableComponent.propDecorators = {
-        treeTableModel: [{ type: i0.Input }]
+        treeTableModel: [{ type: i0.Input }],
+        showHeaderModel: [{ type: i0.Input }],
+        showHeader: [{ type: i0.Input }],
+        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", TreeTableModel)
     ], TreeTableComponent.prototype, "treeTableModel", void 0);
+    __decorate([
+        pectin.TrackExternal({ defaultValue: true }),
+        __metadata("design:type", pectin.ValueModel)
+    ], TreeTableComponent.prototype, "showHeaderModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('showHeaderModel'),
+        __metadata("design:type", Boolean)
+    ], TreeTableComponent.prototype, "showHeader", void 0);
 
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
@@ -4403,7 +4451,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-paginator',
                     template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n",
-                    styles: [":host{align-items:center;color:rgba(0,0,0,.6);display:flex;flex-direction:row;font-size:12px;justify-content:flex-end;padding:0 8px}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{height:30px;margin:0;padding:0;width:30px}"]
+                    styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:rgba(0,0,0,.6)}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}"]
                 },] }
     ];
     PaginatorComponent.ctorParameters = function () { return []; };
@@ -4468,12 +4516,9 @@
                         TreeTableComponent,
                         exports.TreeInheritanceIconComponent,
                         TreeLabelCellRendererComponent,
-                        exports.IconComponent,
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        exports.IconComponent,
-                        exports.IconComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -4622,7 +4667,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-activity-actions',
                     template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
-                    styles: [":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]
+                    styles: [":host{display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.column{grid-area:content;text-align:left}"]
                 },] }
     ];
     ActivityActionsComponent.ctorParameters = function () { return [
@@ -4765,7 +4810,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-alert-dialog',
                     template: "<aup-activity-title *ngIf=\"alert.title\">{{alert.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n",
-                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
                 },] }
     ];
     AlertDialogComponent.ctorParameters = function () { return [
@@ -4821,7 +4866,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
                     template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n",
-                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
                 },] }
     ];
     ConfirmThenDialogComponent.ctorParameters = function () { return [
@@ -4868,7 +4913,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
                     template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n",
-                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
                 },] }
     ];
     ConfirmationDialogComponent.ctorParameters = function () { return [
@@ -5642,7 +5687,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-add-item-interaction-context',
                     template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
-                    styles: [":host{--def-link-background:var(--link-background,transparent);--def-link-background-hover:var(--link-background-hover,rgba(0,0,0,0.05));--def-link-border-radius:var(--link-border-radius,4px);--def-link-color:var(--link-color,currentColor);--def-link-color-hover:var(--link-color-hover,currentColor);--def-link-padding:var(--link-padding,calc(var(--aup-default-padding)/2));border-radius:var(--def-link-border-radius);box-sizing:border-box;display:flex;flex-direction:column;outline:none}:host:hover a.link{background-color:var(--def-link-background-hover);color:var(--def-link-color-hover)}a.link,aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{align-items:center;background:var(--def-link-background);color:var(--def-link-color);cursor:pointer;display:flex;flex-direction:row;padding:var(--def-link-padding);text-decoration:none}a.link mat-icon{margin-right:8px}"]
+                    styles: [":host{--def-link-color:var(--link-color,currentColor);--def-link-color-hover:var(--link-color-hover,currentColor);--def-link-background:var(--link-background,transparent);--def-link-background-hover:var(--link-background-hover,rgba(0,0,0,0.05));--def-link-border-radius:var(--link-border-radius,4px);--def-link-padding:var(--link-padding,calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}a.link,aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
                 },] }
     ];
     AddItemInteractionContextComponent.ctorParameters = function () { return []; };
@@ -5962,6 +6007,15 @@
      *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
      * });
      *
+     * Template columns
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+     *   table.addTemplateColumn("myTemplate");
+     * });
+     *
+     * <div *aupColumnTemplate="let hero; columnId: 'myTemplate'">{{hero.age}}</div>
+     *
      * I18n
      * @example
      * [table.yml]
@@ -6328,6 +6382,7 @@
             _this._active = new pectin.MutableValueModel(false);
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
+            _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
         // @Trace()
@@ -6377,13 +6432,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
-            get: function () {
-                return this.placeDefinition.children.map(function (d) { return d.component; });
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(PlaceComponent.prototype, "active", {
             get: function () {
                 return this._active.readonly;
@@ -6450,6 +6498,7 @@
             this.component = component;
             this.navigationSession = navigationSession;
             this.isPrimaryComponent = isPrimaryComponent;
+            pectin.assert.notNil(component);
         }
         Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "routerInteractionAdapter", {
             get: function () {
@@ -7617,7 +7666,7 @@
         { type: i1$1.UrlSerializer }
     ]; };
 
-    var PlaceRouter = /** @class */ (function (_super) {
+    exports.PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
         function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
             var _this = _super.call(this) || this;
@@ -7653,7 +7702,7 @@
                 .pluck('name')
                 .otherwise(idleStateName);
             pectin.DebugContext.tag(_this._activeVisits, 'PlaceRouter.activeVisits');
-            _this.activeVisitsByPlaceDefinition = chain(_this._activeVisits).indexBy('placeDefinition');
+            _this.state = chain(_this._activeVisits).reduce(function (visits) { return new PlaceRouter.State(visits); });
             // TODO: make setup the callbacks in during module initiation to make this testable.
             angularRouter.events.subscribe(function (event) {
                 // Routing event sequence
@@ -7717,9 +7766,6 @@
         PlaceRouter.prototype.getAuthenticationFailureRedirect = function (activatedRoute, state) {
             return this.redirections.onAuthenticationFailure(activatedRoute, state);
         };
-        PlaceRouter.prototype.getAuthorisationFailureRedirect = function (activatedRoute, state) {
-            return this.redirections.onAuthorisationFailure(activatedRoute, state);
-        };
         Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
             get: function () {
                 return this.navigationSessionModel.value;
@@ -7955,19 +8001,34 @@
         };
         return PlaceRouter;
     }(pectin.GarbageCollector));
-    PlaceRouter.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(i2.Location), i0.ɵɵinject(exports.InteractionService), i0.ɵɵinject(UrlService), i0.ɵɵinject(exports.PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
-    PlaceRouter.decorators = [
+    exports.PlaceRouter.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new exports.PlaceRouter(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(i2.Location), i0.ɵɵinject(exports.InteractionService), i0.ɵɵinject(UrlService), i0.ɵɵinject(exports.PlaceHistory)); }, token: exports.PlaceRouter, providedIn: "root" });
+    exports.PlaceRouter.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
-    PlaceRouter.ctorParameters = function () { return [
+    exports.PlaceRouter.ctorParameters = function () { return [
         { type: i1$1.Router },
         { type: i2.Location },
         { type: exports.InteractionService },
         { type: UrlService },
         { type: exports.PlaceHistory }
     ]; };
+    (function (PlaceRouter) {
+        var State = /** @class */ (function () {
+            function State(activeVisits) {
+                this.activeVisits = activeVisits;
+            }
+            State.prototype.isPlaceActive = function (placeDefinition) {
+                return !!this.getVisitFor(placeDefinition);
+            };
+            State.prototype.getVisitFor = function (placeDefinition) {
+                return this.activeVisits.find(function (v) { return v.placeDefinition === placeDefinition; });
+            };
+            return State;
+        }());
+        PlaceRouter.State = State;
+    })(exports.PlaceRouter || (exports.PlaceRouter = {}));
 
     var Visit = /** @class */ (function () {
         function Visit(placeDefinition, visitParameters) {
@@ -8040,6 +8101,20 @@
 
     var AUP_PLACE_CONFIG = new i0.InjectionToken('AUP_PLACE_CONFIG');
 
+    var NotAuthorisedNoticeComponent = /** @class */ (function () {
+        function NotAuthorisedNoticeComponent() {
+        }
+        return NotAuthorisedNoticeComponent;
+    }());
+    NotAuthorisedNoticeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-not-authorised-notice',
+                    template: "<p>You are not authorised to access this page</p>\n",
+                    styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}"]
+                },] }
+    ];
+    NotAuthorisedNoticeComponent.ctorParameters = function () { return []; };
+
     // 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 = [
@@ -8084,13 +8159,15 @@
     }
     var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
+    var AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = new i0.InjectionToken('AUP_UNAUTHORISED_PLACE_COMPONENT');
     var PlaceOutletComponent = /** @class */ (function (_super) {
         __extends(PlaceOutletComponent, _super);
-        function PlaceOutletComponent(router, placeRouter, placeConfig, parentOutlet) {
+        function PlaceOutletComponent(router, placeRouter, placeConfig, unauthorisedPlaceNotice, parentOutlet, cdr) {
             var _this = _super.call(this) || this;
             _this.router = router;
             _this.placeRouter = placeRouter;
             _this.placeConfig = placeConfig;
+            _this.cdr = cdr;
             _this.placeChanged = new i0.EventEmitter();
             _this.outletActivated = new pectin.MutableValueModel(false);
             _this._activatedRouteModel = new pectin.MutableValueModel();
@@ -8123,7 +8200,7 @@
             _this.animationEnabled = valueOf.all(_this.animateModel, _this.animationSupported).areTruthy();
             // Extract our visit model from the place router.
             _this._activePlaceDefinition = chain(_this._activePlaceModel).pluck('placeDefinition');
-            _this.routerVisitModel = _this._activePlaceDefinition.findIn(chain(placeRouter.activeVisitsByPlaceDefinition));
+            _this.routerVisitModel = chain(placeRouter.state).map(function (state) { return state.getVisitFor(_this._activePlaceDefinition.value); }, { dependsOn: _this._activePlaceDefinition });
             _this.navigationInProgress = chain(_this.placeRouter.navigationInProgress);
             when(_this.navigationInProgress).becomesFalsey(function () {
                 _this.checkStateAndInitialise();
@@ -8134,13 +8211,11 @@
             chain(_this._activePlaceModel)
                 .postponeWhile(_this.navigationInProgress)
                 .subscribe(function (place) { return _this.placeChanged.emit(place); });
-            when(placeRouter.accessGuard).changes(function (guard) {
-                var activePlace = _this._activePlaceModel.value;
-                if (activePlace && !guard.isAuthorised(activePlace.placeDefinition)) {
-                    var visit = placeRouter.getAuthorisationFailureRedirect(_this._activatedRouteModel.value.snapshot, _this.router.routerState.snapshot);
-                    _this.placeRouter.navigate(visit);
-                }
-            });
+            _this.authorised = chain(placeRouter.accessGuard).map(function (guard) { return guard.isAuthorised(_this._activePlaceDefinition.value); }, {
+                dependsOn: _this._activePlaceDefinition,
+                postponeWhile: chain(_this._activePlaceDefinition).isNil()
+            }).otherwise(true); // if we don't have a place def yet we need to show the outlet so we get one injected.
+            _this.notAuthorisedNoticePortal = new portal.ComponentPortal(unauthorisedPlaceNotice !== null && unauthorisedPlaceNotice !== void 0 ? unauthorisedPlaceNotice : NotAuthorisedNoticeComponent);
             return _this;
         }
         // @Trace()
@@ -8157,6 +8232,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PlaceOutletComponent.prototype, "isAuthorised", {
+            get: function () {
+                return this.authorised.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         // @Trace()
         PlaceOutletComponent.prototype.navigate = function (visit) {
             // const place = this.placesInAnimationOrder.query().findMatching(p => visit.placeDefinition.component === p);
@@ -8223,6 +8305,7 @@
                     pectin.lang.illegalState('wrong visit!!!');
                 }
                 this.initialisePlace(routerVisit, activePlace);
+                this.cdr.detectChanges();
             }
         };
         PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
@@ -8276,16 +8359,18 @@
     PlaceOutletComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-place-outlet',
-                    template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
+                    template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n",
                     animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                    styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{display:block;flex:1;min-height:0;overflow-x:hidden;overflow-y:scroll;position:relative}router-outlet{display:none}"]
+                    styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}"]
                 },] }
     ];
     PlaceOutletComponent.ctorParameters = function () { return [
         { type: i1$1.Router },
-        { type: PlaceRouter },
+        { type: exports.PlaceRouter },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [AUP_PLACE_CONFIG,] }] },
-        { type: PlaceOutletComponent, decorators: [{ type: i0.SkipSelf }, { type: i0.Optional }] }
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT,] }] },
+        { type: PlaceOutletComponent, decorators: [{ type: i0.SkipSelf }, { type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PlaceOutletComponent.propDecorators = {
         animate: [{ type: i0.Input }],
@@ -8293,7 +8378,8 @@
         customPlaceAnimationOrderModel: [{ type: i0.Input, args: ['placeAnimationOrderModel',] }],
         customPlaceAnimationOrder: [{ type: i0.Input, args: ['placeAnimationOrder',] }],
         placeChanged: [{ type: i0.Output }],
-        routerOut: [{ type: i0.ViewChild, args: ['routeOutlet', { static: true },] }]
+        routerOut: [{ type: i0.ViewChild, args: ['routeOutlet', { static: true },] }],
+        isAuthorised: [{ type: i0.HostBinding, args: ["class.authorised",] }]
     };
     __decorate([
         pectin.StoreInValueModel('animateModel'),
@@ -8318,13 +8404,15 @@
             var _this = _super.call(this) || this;
             _this.placeRouter = placeRouter;
             _this._activePlaceComponent = new pectin.DelegatingValueModel();
+            _this.trackByPlaceDef = function (data) { return data.place; };
             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); })
                 .select(function (d) {
                 var guard = placeRouter.accessGuard.value;
-                return guard.isAuthorised(d);
-            }, { dependsOn: placeRouter.accessGuard });
+                var state = placeRouter.state.value;
+                return guard.isAuthorised(d) || state.isPlaceActive(d);
+            }, { dependsOn: [placeRouter.accessGuard, placeRouter.state] });
             _this.commandFactory = pectin.Command.createFactory(function (placeDefinition) {
                 _this.placeOutlet.navigate(new Visit(placeDefinition));
             });
@@ -8333,9 +8421,22 @@
                 // values in the one change detection cycle. So instead we delay the update to a different
                 // tick.
                 setTimeout(function () { return _this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null); });
-            });
+            }, { initialValue: "triggerChange" });
             _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
+            _this.menuItems = chain(_this.placeDefinitions).map(function (d) {
+                return {
+                    place: d,
+                    active: _this.activePlaceDefinition.value === d
+                };
+            }, {
+                dependsOn: _this.activePlaceDefinition
+            });
             return _this;
+            // const txo = new TransactionObserver({ verbose: true }).onEvent(e => console.log(e.name, e.payload));
+            // txo.observe('this.placesModel', this.placesModel);
+            // txo.observe('this.placeDefinitions', this.placeDefinitions);
+            // txo.observe('this.activePlaceDefinition', this.activePlaceDefinition);
+            // txo.observe('this.menuItems', this.menuItems);
         }
         AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
             var navItem = placeDef.getPlaceData('nav');
@@ -8346,7 +8447,7 @@
             };
         };
         AbstractPlaceNavigationComponent.prototype.isActive = function (place) {
-            return this.activePlaceDefinition.query().equals(place);
+            return;
         };
         AbstractPlaceNavigationComponent.prototype.ngOnInit = function () {
         };
@@ -8358,7 +8459,7 @@
                 },] }
     ];
     AbstractPlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: exports.PlaceRouter }
     ]; };
     AbstractPlaceNavigationComponent.propDecorators = {
         places: [{ type: i0.Input }],
@@ -8399,12 +8500,12 @@
     ListPlaceNavComponent.decorators = [
         { 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{border-right:2px solid transparent}a.active{background:var(--selected-background);border-right:2px solid var(--selected-border-color);color:var(--selected-color)}"]
+                    template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
+                    styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
                 },] }
     ];
     ListPlaceNavComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: exports.PlaceRouter }
     ]; };
 
     /**
@@ -8470,12 +8571,12 @@
     SidePlaceNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-side-place-navigation',
-                    template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\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-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
-                    styles: [":host{--resolved-background-color:var(--nav-background-color,#555);--resolved-color:var(--nav-color,hsla(0,0%,100%,0.9));--resolved-expanded-width:var(--nav-expanded-width,235px);--resolved-nav-item-height:var(--nav-item-height,var(--resolved-nav-item-width));--resolved-nav-item-width:var(--nav-width,56px);background-color:var(--resolved-background-color);color:var(--resolved-color);display:flex;flex-direction:column;transition:width 125ms linear;width:var(--resolved-nav-item-width)}:host.expanded{max-width:var(--resolved-expanded-width);width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{display:flex;flex:1;flex-direction:column}.mat-list-item{color:inherit;height:var(--resolved-nav-item-height);width:var(--resolved-nav-item-width)}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
+                    template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+                    styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width,56px);--resolved-nav-item-height:var(--nav-item-height,var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width,235px);--resolved-color:var(--nav-color,hsla(0,0%,100%,0.9));--resolved-background-color:var(--nav-background-color,#555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
                 },] }
     ];
     SidePlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: exports.PlaceRouter }
     ]; };
     SidePlaceNavigationComponent.propDecorators = {
         expanded: [{ type: i0.HostBinding, args: ['class.expanded',] }],
@@ -8492,12 +8593,12 @@
     TabbedPlaceNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-tabbed-place-navigation',
-                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</nav>\n",
+                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</nav>\n",
                     styles: [""]
                 },] }
     ];
     TabbedPlaceNavigationComponent.ctorParameters = function () { return [
-        { type: PlaceRouter }
+        { type: exports.PlaceRouter }
     ]; };
 
     var PlaceModule = /** @class */ (function () {
@@ -8518,14 +8619,16 @@
                         icon.MatIconModule,
                         DirectivesModule,
                         flexLayout.FlexModule,
-                        ComponentsModule
+                        ComponentsModule,
+                        portal.PortalModule
                     ],
                     declarations: [
                         PlaceOutletComponent,
                         TabbedPlaceNavigationComponent,
                         ListPlaceNavComponent,
                         SidePlaceNavigationComponent,
-                        AbstractPlaceNavigationComponent
+                        AbstractPlaceNavigationComponent,
+                        NotAuthorisedNoticeComponent
                     ],
                     entryComponents: [],
                     exports: [
@@ -8857,7 +8960,7 @@
         // @Trace()
         PlaceGuard.prototype.canActivate = function (activatedRoute, state) {
             return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition_1, redirectLocation, nextPlaceDef, redirectLocation, nextPlaceDef, result;
+                var placeDefinition_1, redirectLocation, nextPlaceDef, result;
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -8875,14 +8978,6 @@
                                 }
                                 return [2 /*return*/, this.createUrlTree(redirectLocation)];
                             }
-                            if (!(this.placeRouter.accessGuard.value ? this.placeRouter.accessGuard.value.isAuthorised(placeDefinition_1) : true)) {
-                                redirectLocation = this.placeRouter.getAuthorisationFailureRedirect(activatedRoute, state);
-                                nextPlaceDef = this.getPlaceDefinition(redirectLocation);
-                                if (!(this.placeRouter.accessGuard.value ? this.placeRouter.accessGuard.value.isAuthorised(nextPlaceDef) : true)) {
-                                    pectin.lang.illegalState("handleNotAuthorised hook returned place " + nextPlaceDef.component.name + " that is not authorised for the current user.");
-                                }
-                                return [2 /*return*/, this.createUrlTree(redirectLocation)];
-                            }
                             _a.label = 2;
                         case 2: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
                                 var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
@@ -8926,6 +9021,11 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
+                            if (!component) {
+                                // this happens when the place wasn't authorised and the associated
+                                // router outlet was removed from the dom.
+                                return [2 /*return*/, true];
+                            }
                             currentUrl = this.urlService.parseUrl(currentState.url);
                             nextUrl = this.urlService.parseUrl(nextState.url);
                             return [4 /*yield*/, this.placeRouter.navigationSession.canDeactivatePlace(component, currentUrl, nextUrl)];
@@ -8986,14 +9086,14 @@
         };
         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(exports.InteractionService), i0.ɵɵinject(i0.INJECTOR)); }, token: PlaceGuard, providedIn: "root" });
+    PlaceGuard.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlaceGuard_Factory() { return new PlaceGuard(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(UrlService), i0.ɵɵinject(exports.PlaceRouter), i0.ɵɵinject(exports.PlaceHistory), 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.PlaceRouter },
         { type: exports.PlaceHistory },
         { type: exports.InteractionService },
         { type: i0.Injector }
@@ -9109,6 +9209,7 @@
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
+    exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
@@ -9186,6 +9287,7 @@
     exports.NavigationSession = NavigationSession;
     exports.NoopAuthGuard = NoopAuthGuard;
     exports.NoopComponent = NoopComponent;
+    exports.NotAuthorisedNoticeComponent = NotAuthorisedNoticeComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.POPUP_CONTAINER = POPUP_CONTAINER;
     exports.PORTAL_EDITOR_COMPONENT = PORTAL_EDITOR_COMPONENT;
@@ -9198,7 +9300,6 @@
     exports.PlaceGuard = PlaceGuard;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
-    exports.PlaceRouter = PlaceRouter;
     exports.Point = Point;
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;