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

package/fesm5/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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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';
@@ -3332,7 +3332,7 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
         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);
     return ActivityActionsComponent;
@@ -3693,10 +3693,6 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         _this.dynamicHeight = false;
         _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.inAnimation = new MutableValueModel(false);
         return _this;
     }
@@ -3854,6 +3850,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         var newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
             this.inAnimation.value = true;
+            this.activityRefs[newIndex].setFocused(false);
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = function () {
                 _this.activityRefs = _this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
@@ -3897,7 +3894,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     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 activityRefs; let i = index; trackBy: activityIndex\">\n    <div class=\"activity-outlet-wrapper\" [@.disabled]=\"inAnimation.value || !tab.focused\">\n      <aup-activity-outlet [nestedInteractionContext]=\"this\"\n                           [activityRef]=\"tab\"></aup-activity-outlet>\n    </div>\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", [])
@@ -4968,6 +4965,9 @@ var PlaceComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.visitModel = new MutableValueModel();
         _this._inVisitUpdate = new Guard();
+        _this._active = new MutableValueModel(false);
+        var _a = 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(); });
         return _this;
     }
     PlaceComponent_1 = PlaceComponent;
@@ -5025,6 +5025,19 @@ var PlaceComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PlaceComponent.prototype, "active", {
+        get: function () {
+            return this._active.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Called by the router when the place is ready to interact after any animations have run.
+     */
+    PlaceComponent.prototype._notifyActive = function (active) {
+        this._active.value = active;
+    };
     PlaceComponent.prototype.onPlaceReady = function () {
     };
     var PlaceComponent_1;
@@ -6562,6 +6575,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         _this._activePlaceModel = new MutableValueModel();
         _this.initialPlaceIndex = null;
         _this._isPushingVisitToRoute = new MutableValueModel(false);
+        _this.isVeryFirstLoad = true;
         var _a = 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.parentOutletModel = new MutableValueModel(parentOutlet);
         var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
@@ -6570,8 +6584,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             .pluckList('children')
             .pluck('component');
         var activatePlaceType = chain(_this.activePlaceModel).map(function (p) { return p.constructor; });
-        _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder)
+        _this.placesInAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder);
+        _this.activePlaceAnimationPosition = _this.placesInAnimationOrder
             .reduce(function (placesInOrder) {
             var placeIndex = 0;
             if (activatePlaceType.value) {
@@ -6582,14 +6597,16 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             }
             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(function () {
+        when(_this.navigationInProgress).becomesFalsey(function () {
             _this.checkStateAndInitialise();
         });
-        when.valueOf(_this.outletActivated).becomesTruthy(function () {
+        when(_this.outletActivated).becomesTruthy(function () {
             _this.checkStateAndInitialise();
         });
         chain(_this._activePlaceModel)
@@ -6602,7 +6619,7 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.getAnimationOrder = function () {
-        return this.placeAnimationOrder.value;
+        return this.activePlaceAnimationPosition.value;
     };
     Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
         get: function () {
@@ -6613,7 +6630,10 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     });
     // @Trace()
     PlaceOutletComponent.prototype.navigate = function (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
         });
@@ -6639,14 +6659,25 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    // @Trace()
     PlaceOutletComponent.prototype.onOutletActivated = function (routerOutlet, place) {
         this._activatedRouteModel.value = routerOutlet.activatedRoute;
         this._activePlaceModel.value = place;
+        this.validateAnimationState(place);
         this.outletActivated.value = true;
         this.checkStateAndInitialise();
     };
-    // @Trace()
+    PlaceOutletComponent.prototype.validateAnimationState = function (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 + ".");
+                }
+            }
+        }
+    };
     PlaceOutletComponent.prototype.onOutletDeactivated = function () {
         this.outletActivated.value = false;
         this._activePlaceModel.value = null;
@@ -6663,7 +6694,6 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             this.initialisePlace(routerVisit, activePlace);
         }
     };
-    // @Trace()
     PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
         var _this = this;
         var visitModel = new MutableValueModel(routerVisit);
@@ -6671,9 +6701,18 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         activePlace.initialiseVisit(routerVisit, function (current, previous) {
             _this.pushVisitChangeToRoute(previous, current);
         });
-        if (!this.animateModel.value) {
-            // we're not animating so trigger any post animation callbacks now.
-            this.animationDone();
+        var finishPlaceLoad = function () {
+            _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;
         }
         var _a = Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
         when.valueOf(this.routerVisitModel)
@@ -6696,8 +6735,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     PlaceOutletComponent.prototype.animationDone = function () {
-        if (this._activePlaceModel.value) {
-            this._activePlaceModel.value.onPlaceReady();
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
         }
     };
     PlaceOutletComponent.ctorParameters = function () { return [
@@ -6730,10 +6770,22 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         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}"]
         }),