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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0-alpha.34](https://bitbucket.org/coolon/angular-ui-powerups/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2020-08-26)
+
+
+### Bug Fixes
+
+* place ready notifications now work when animation is disabled ([8f49791](https://bitbucket.org/coolon/angular-ui-powerups/commit/8f49791d97182405f0aa7c25ca72e48de49dde59))
+
 ## [2.0.0-alpha.33](https://bitbucket.org/coolon/angular-ui-powerups/compare/v2.0.0-alpha.32...v2.0.0-alpha.33) (2020-08-26)
 
 

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

@@ -3501,7 +3501,7 @@
             core.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;
@@ -3862,10 +3862,6 @@
             _this.dynamicHeight = false;
             _this.activityRefs = [];
             _this.garbage = new pectin.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 pectin.MutableValueModel(false);
             return _this;
         }
@@ -4023,6 +4019,7 @@
             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(); });
@@ -4066,7 +4063,7 @@
         ActivityContainerComponent = __decorate([
             core.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", [])
@@ -5137,6 +5134,9 @@
             var _this = _super.call(this) || this;
             _this.visitModel = new pectin.MutableValueModel();
             _this._inVisitUpdate = new pectin.Guard();
+            _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(); });
             return _this;
         }
         PlaceComponent_1 = PlaceComponent;
@@ -5194,6 +5194,19 @@
             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;
@@ -6731,6 +6744,7 @@
             _this._activePlaceModel = new pectin.MutableValueModel();
             _this.initialPlaceIndex = null;
             _this._isPushingVisitToRoute = new pectin.MutableValueModel(false);
+            _this.isVeryFirstLoad = true;
             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.parentOutletModel = new pectin.MutableValueModel(parentOutlet);
             var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
@@ -6739,8 +6753,9 @@
                 .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) {
@@ -6751,14 +6766,16 @@
                 }
                 return ___default.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)
@@ -6771,7 +6788,7 @@
         };
         // @Trace()
         PlaceOutletComponent.prototype.getAnimationOrder = function () {
-            return this.placeAnimationOrder.value;
+            return this.activePlaceAnimationPosition.value;
         };
         Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
             get: function () {
@@ -6782,7 +6799,10 @@
         });
         // @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
             });
@@ -6808,14 +6828,25 @@
             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;
@@ -6832,7 +6863,6 @@
                 this.initialisePlace(routerVisit, activePlace);
             }
         };
-        // @Trace()
         PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
             var _this = this;
             var visitModel = new pectin.MutableValueModel(routerVisit);
@@ -6840,9 +6870,18 @@
             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 = pectin.Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
             when.valueOf(this.routerVisitModel)
@@ -6865,8 +6904,9 @@
         };
         // @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 [
@@ -6899,10 +6939,22 @@
             core.ViewChild('routeOutlet', { static: true }),
             __metadata("design:type", router.RouterOutlet)
         ], PlaceOutletComponent.prototype, "routerOut", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.RouterOutlet, exports.PlaceComponent]),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "onOutletActivated", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
         PlaceOutletComponent = __decorate([
             core.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}"]
             }),