@coolon/angular-ui-powerups 2.0.0-alpha.32 → 2.0.0-alpha.34

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

@@ -18,7 +18,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableListModel, Disposable, MutableValueModel, StoreInValueModel, ListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, StoreInListModel, ValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableListModel, Disposable, MutableValueModel, StoreInValueModel, ListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, StoreInListModel, ValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
 import { Enum } from 'typescript-string-enums';
@@ -372,7 +372,7 @@ CardContainerComponent = __decorate([
     Component({
         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-icon 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: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}: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:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,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:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms 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}"]
+        styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}: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:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,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:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms 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}"]
     }),
     __metadata("design:paramtypes", [])
 ], CardContainerComponent);
@@ -3048,7 +3048,7 @@ ActivityActionsComponent = __decorate([
     Component({
         selector: 'aup-activity-actions',
         template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n    <aup-icon icon=\"mat:clear\"></aup-icon>\n  </button>\n  <button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n    <aup-icon icon=\"mat:done\"></aup-icon>\n  </button>\n  <button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-        styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.content{-ms-grid-row:1;-ms-grid-column:2}"]
+        styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.column{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.column{-ms-grid-row:1;-ms-grid-column:2}"]
     })
 ], ActivityActionsComponent);
 
@@ -3057,12 +3057,21 @@ class Activity extends DisposableComponent {
     constructor() {
         super(...arguments);
         this._busyModel = new DelegatingValueModel().withDefault(false);
+        this._focusedModel = this.registerDisposable(new DelegatingValueModel());
         this.class = 'aup-activity';
     }
+    get isFocused() {
+        return this._focusedModel.value;
+    }
     initialise(nestedInteractionContext, activityContext) {
+        const { chain, when } = Dsl.disposeWith(this);
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
+        this._focusedModel.setDelegate(activityContext.focused);
+        when(this._focusedModel).becomesTruthy(() => {
+            this.onActivityReady();
+        });
     }
     get interactionContext() {
         assert$1.isTruthy(this.isInitialised());
@@ -3080,6 +3089,9 @@ class Activity extends DisposableComponent {
     get busy() {
         return this._busyModel.readonly;
     }
+    get focused() {
+        return this._focusedModel.readonly;
+    }
     busyWhile(busyModel) {
         this._busyModel.setDelegate(busyModel);
     }
@@ -3094,6 +3106,11 @@ __decorate([
     HostBinding('class'),
     __metadata("design:type", Object)
 ], Activity.prototype, "class", void 0);
+__decorate([
+    HostBinding('attr.focused'),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], Activity.prototype, "isFocused", null);
 
 let AlertDialogComponent = class AlertDialogComponent extends Activity {
     constructor(alert) {
@@ -3213,6 +3230,7 @@ class ActivityRef {
         this.onComplete = onComplete;
         this._complete = false;
         this.deferredResult = Deferred.defer();
+        this.focusedModel = new MutableValueModel();
     }
     isActivityRealised() {
         return !!this._activity;
@@ -3224,6 +3242,12 @@ class ActivityRef {
         assert.isTruthy(this.isActivityRealised());
         return this._activity;
     }
+    setFocused(focused) {
+        this.focusedModel.value = focused;
+    }
+    get focused() {
+        return this.focusedModel.value;
+    }
     notifyActivityCreated(activity, nestedInteractionContext) {
         assert.isNil(this._activity);
         this._activity = activity;
@@ -3234,7 +3258,8 @@ class ActivityRef {
             },
             onCancel(error) {
                 self.finishActivity(deferred => deferred.reject(error));
-            }
+            },
+            focused: this.focusedModel.readonly
         });
     }
     finishActivity(resolveOrReject) {
@@ -3260,7 +3285,6 @@ let ActivityOutletComponent = class ActivityOutletComponent {
         this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
-        this._disableAnimation = false;
     }
     set activityRef(activityRef) {
         if (this.activityRef && !this.activityRef.isComplete()) {
@@ -3321,13 +3345,9 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     constructor() {
         super();
         this.dynamicHeight = false;
-        this.activityTabs = [];
+        this.activityRefs = [];
         this.garbage = new GarbageCollector();
-        // We have issues where angular is triggering a leave animation when an
-        // new activity is started, but is not running the enter animation
-        // when it is scrolled back into view.  So we track the tab changes and
-        // disable all animations inside the tab while we're animating.
-        this.inTabChange = new MutableValueModel(false);
+        this.inAnimation = new MutableValueModel(false);
     }
     ngOnInit() {
     }
@@ -3370,7 +3390,7 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         if (!this.isActive()) {
             lang$1.illegalState('no activity in progress');
         }
-        return ___default.findLast(this.activityTabs, tab => !tab.isComplete());
+        return ___default.findLast(this.activityRefs, tab => !tab.isComplete());
     }
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
@@ -3404,14 +3424,14 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         });
         this.launchActivity(activityRef);
         // if this is the first activity let the interaction service know.
-        if (this.activityTabs.length === 1) {
+        if (this.activityRefs.length === 1) {
             // console.log('Now active!!!');
             this.interactionServiceApi.notifyActive(this);
         }
         return activityRef.activityResult;
     }
     getActiveActivityCount() {
-        return this.activityTabs.filter(ref => !ref.isComplete()).length;
+        return this.activityRefs.filter(ref => !ref.isComplete()).length;
     }
     /**
      * Checks if this interaction context has finished an is in the process of waiting
@@ -3435,7 +3455,7 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
             // Without this our animation done wasn't called when a single
             // new activity followed a single tab activity (since we're tracking
             // by activity index)
-            this.activityTabs = [];
+            this.activityRefs = [];
             const promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(() => {
@@ -3445,8 +3465,8 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
     }
     // @Trace()
     launchActivity(activityRef) {
-        const cleanedTabs = this.activityTabs.filter(tab => !tab.isComplete());
-        this.activityTabs = cleanedTabs.concat(activityRef);
+        const cleanedTabs = this.activityRefs.filter(tab => !tab.isComplete());
+        this.activityRefs = cleanedTabs.concat(activityRef);
         this.synchroniseSelectedTabIndex();
     }
     activityIndex(index, activityRef) {
@@ -3459,7 +3479,6 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
             this.onAnimationFinishedJob();
             this.onAnimationFinishedJob = undefined;
         }
-        this.inTabChange.value = false;
     }
     /**
      * Synchronises the selected tab index.
@@ -3469,11 +3488,15 @@ let ActivityContainerComponent = class ActivityContainerComponent extends Abstra
         const previousIndex = this.tabs.selectedIndex;
         const newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
-            this.inTabChange.value = true;
+            this.inAnimation.value = true;
+            this.activityRefs[newIndex].setFocused(false);
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = () => {
-                this.getSelectedOutlet().component.onActivityReady();
-                this.activityTabs = this.activityTabs.filter(tab => !tab.isComplete());
+                this.activityRefs = this.activityRefs.filter(tab => !tab.isComplete());
+                this.inAnimation.value = false;
+                this.activityRefs.forEach((ref, index) => {
+                    ref.setFocused(index === newIndex);
+                });
             };
         }
     }
@@ -3510,7 +3533,7 @@ __decorate([
 ActivityContainerComponent = __decorate([
     Component({
         selector: 'aup-activity-container',
-        template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; let i = index; trackBy: activityIndex\"\n           [@.disabled]=\"inTabChange.value || i !== getSelectedTabIndex()\">\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+        template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <!--\n    We have issues where angular is triggering a leave animation when an\n    new activity is started, but is not running the enter animation\n    when it is scrolled back into view.  So we track the tab changes and\n    disable all animations inside the tab while we're animating.\n    -->\n    <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n      <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n",
         styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
     }),
     __metadata("design:paramtypes", [])
@@ -4487,6 +4510,9 @@ let PlaceComponent = PlaceComponent_1 = class PlaceComponent extends DisposableC
         super();
         this.visitModel = new MutableValueModel();
         this._inVisitUpdate = new Guard();
+        this._active = new MutableValueModel(false);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        when(this._active).becomesTruthy(() => this.onPlaceReady());
     }
     // @Trace()
     initialiseVisit(visit, notifyVisitChanged) {
@@ -4532,6 +4558,15 @@ let PlaceComponent = PlaceComponent_1 = class PlaceComponent extends DisposableC
     get childPlaces() {
         return this.placeDefinition.children.map(d => d.component);
     }
+    get active() {
+        return this._active.readonly;
+    }
+    /**
+     * Called by the router when the place is ready to interact after any animations have run.
+     */
+    _notifyActive(active) {
+        this._active.value = active;
+    }
     onPlaceReady() {
     }
 };
@@ -5924,6 +5959,7 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
         this._activePlaceModel = new MutableValueModel();
         this.initialPlaceIndex = null;
         this._isPushingVisitToRoute = new MutableValueModel(false);
+        this.isVeryFirstLoad = true;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.parentOutletModel = new MutableValueModel(parentOutlet);
         const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
@@ -5932,8 +5968,9 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             .pluckList('children')
             .pluck('component');
         const activatePlaceType = chain(this.activePlaceModel).map(p => p.constructor);
-        this.placeAnimationOrder = chain(this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder)
+        this.placesInAnimationOrder = chain(this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder);
+        this.activePlaceAnimationPosition = this.placesInAnimationOrder
             .reduce((placesInOrder) => {
             let placeIndex = 0;
             if (activatePlaceType.value) {
@@ -5944,14 +5981,16 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             }
             return isNil(this.initialPlaceIndex) ? 0 : placeIndex - this.initialPlaceIndex;
         }, { dependsOn: activatePlaceType });
+        this.animationSupported = this.placesInAnimationOrder.count().isGreaterThan(0);
+        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.navigationInProgress = chain(this.placeRouter.navigationInProgress);
-        when.valueOf(this.navigationInProgress).becomesFalsey(() => {
+        when(this.navigationInProgress).becomesFalsey(() => {
             this.checkStateAndInitialise();
         });
-        when.valueOf(this.outletActivated).becomesTruthy(() => {
+        when(this.outletActivated).becomesTruthy(() => {
             this.checkStateAndInitialise();
         });
         chain(this._activePlaceModel)
@@ -5963,14 +6002,17 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     }
     // @Trace()
     getAnimationOrder() {
-        return this.placeAnimationOrder.value;
+        return this.activePlaceAnimationPosition.value;
     }
     get animationDuration() {
         return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
     }
     // @Trace()
     navigate(visit) {
-        // console.log({ activatedRoute: this._activatedRouteModel.value });
+        // const place = this.placesInAnimationOrder.query().findMatching(p => visit.placeDefinition.component === p);
+        // if (!place) {
+        //     lang.illegalState()
+        // }
         this.placeRouter.navigate(visit, {
             relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
         });
@@ -5984,14 +6026,25 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     get activatedRouteModel() {
         return this._activatedRouteModel.readonly;
     }
-    // @Trace()
     onOutletActivated(routerOutlet, place) {
         this._activatedRouteModel.value = routerOutlet.activatedRoute;
         this._activePlaceModel.value = place;
+        this.validateAnimationState(place);
         this.outletActivated.value = true;
         this.checkStateAndInitialise();
     }
-    // @Trace()
+    validateAnimationState(place) {
+        if (this.animateModel.value) {
+            if (this.placesInAnimationOrder.length < 1) {
+                console.error('PlaceOutlet.animate === true but placeAnimationOrder has not been set. Animation is disabled.');
+            }
+            else {
+                if (!this.placesInAnimationOrder.query().includes(place.placeDefinition.component)) {
+                    console.error(`PlaceOutlet.animate === true but placeAnimationOrder doesn't contain ${place.placeDefinition.component.name}.`);
+                }
+            }
+        }
+    }
     onOutletDeactivated() {
         this.outletActivated.value = false;
         this._activePlaceModel.value = null;
@@ -6008,16 +6061,24 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
             this.initialisePlace(routerVisit, activePlace);
         }
     }
-    // @Trace()
     initialisePlace(routerVisit, activePlace) {
         const visitModel = new MutableValueModel(routerVisit);
         DebugContext.tag(visitModel, `PlaceOutletComponent[${activePlace.constructor.name})].visitModel`);
         activePlace.initialiseVisit(routerVisit, (current, previous) => {
             this.pushVisitChangeToRoute(previous, current);
         });
-        if (!this.animateModel.value) {
-            // we're not animating so trigger any post animation callbacks now.
-            this.animationDone();
+        const finishPlaceLoad = () => {
+            this._activePlaceModel.value._notifyActive(true);
+        };
+        if (!this.animationEnabled.value || this.isVeryFirstLoad) {
+            // if animation is disabled or this is the very first load then
+            // we won't get our animation done callback so we finish the
+            // process here and now.
+            this.isVeryFirstLoad = false;
+            finishPlaceLoad();
+        }
+        else {
+            this.onAnimationFinishedJob = finishPlaceLoad;
         }
         const { when, chain, valueOf } = Dsl.disposeWith(activePlace);
         when.valueOf(this.routerVisitModel)
@@ -6039,8 +6100,9 @@ let PlaceOutletComponent = class PlaceOutletComponent extends DisposableComponen
     }
     // @Trace()
     animationDone() {
-        if (this._activePlaceModel.value) {
-            this._activePlaceModel.value.onPlaceReady();
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
         }
     }
 };
@@ -6074,10 +6136,22 @@ __decorate([
     ViewChild('routeOutlet', { static: true }),
     __metadata("design:type", RouterOutlet)
 ], PlaceOutletComponent.prototype, "routerOut", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [RouterOutlet, PlaceComponent]),
+    __metadata("design:returntype", void 0)
+], PlaceOutletComponent.prototype, "onOutletActivated", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
 PlaceOutletComponent = __decorate([
     Component({
         selector: 'aup-place-outlet',
-        template: "<ng-container *ngIf=\"animateModel.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=\"!animateModel.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\" 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",
         animations: [LEFT_RIGHT_PLACE_ANIMATION],
         styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}"]
     }),