@coolon/angular-ui-powerups 0.0.83 → 0.0.85

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

@@ -7,7 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { GarbageCollector, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Trace, Guard as Guard$1, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { PortalModule } from '@angular/cdk/portal';
-import { Router, RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, RouterOutlet, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSerializer } from '@angular/router';
+import { Router, RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSerializer } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
@@ -3242,7 +3242,6 @@ class PlaceRouter extends GarbageCollector {
             [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
             [def.getFormattedRouteParameters(visit)];
     }
-    // @Trace()
     /**
      * @private
      * @param {?} event
@@ -3260,7 +3259,6 @@ class PlaceRouter extends GarbageCollector {
         }
         this.firstRoute = false;
     }
-    // @Trace()
     /**
      * @private
      * @return {?}
@@ -3312,6 +3310,18 @@ __decorate([
     __metadata("design:paramtypes", [Visit, Object]),
     __metadata("design:returntype", Promise)
 ], PlaceRouter.prototype, "navigate", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [NavigationStart]),
+    __metadata("design:returntype", void 0)
+], PlaceRouter.prototype, "onAngularRouterStarted", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PlaceRouter.prototype, "onAngularRouterFinished", null);
 if (false) {
     /**
      * @type {?}
@@ -3436,13 +3446,16 @@ class PlaceOutletComponent extends DisposableComponent {
         this.placeChanged = new EventEmitter();
         this._activePlace = new MutableValueModel();
         this._activePlaceVisitModel = new DelegatingValueModel();
-        this._inOutletUpdate = new Guard$1();
+        this._inOutletActivation = new Guard$1();
+        this._inOutletDeactivation = new Guard$1();
+        this._inRouteVisitUpdate = new Guard$1();
         this._activatedRouteModel = new MutableValueModel();
         this._placeDefinition = new MutableValueModel();
-        this.isOnInitialPlace = true;
+        this.initialPlaceIndex = null;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.parentOutletModel = new MutableValueModel(parentOutlet);
         this._activePlaceVisitModel.setDelegate(new MutableValueModel());
+        this._inOutletUpdate = valueOf.any(this._inOutletDeactivation, this._inOutletActivation).areTruthy();
         /** @type {?} */
         const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
             .pullValueModel((/**
@@ -3461,37 +3474,31 @@ class PlaceOutletComponent extends DisposableComponent {
         p => (/** @type {?} */ (p.constructor))));
         this.placeAnimationOrder = chain(this.customPlaceAnimationOrderModel)
             .otherwise(defaultPlaceAnimationOrder)
-            .indexOf(activatePlaceType)
-            .map((/**
-         * @param {?} order
+            .reduce((/**
+         * @param {?} placesInOrder
          * @return {?}
          */
-        order => {
-            // we get -1 on the first load which triggers an animation to the first page, so alway pin it to 0
-            // if we're animating.
-            return this.isOnInitialPlace ? 0 :
-                this.animate ? Math.max(order, 0) : 0;
-        }));
+        (placesInOrder) => {
+            /** @type {?} */
+            let placeIndex = 0;
+            if (activatePlaceType.value) {
+                placeIndex = placesInOrder.indexOf(activatePlaceType.value);
+                if (isNil(this.initialPlaceIndex)) {
+                    this.initialPlaceIndex = placeIndex;
+                }
+            }
+            return isNil(this.initialPlaceIndex) ? 0 : placeIndex - this.initialPlaceIndex;
+        }), { dependsOn: activatePlaceType });
         // Push incoming changes into the component
-        /** @type {?} */
-        const routeVisit = chain(this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
-        /** @type {?} */
-        const inRouteVisitUpdate = new Guard$1();
-        when.valueOf(routeVisit).changes((/**
-         * @param {?} visit
+        this.routerVisit = chain(this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
+        // Our router visit will change when our active is nullified during deactivation, which will push a null visit
+        // the the deactivated component, which will nuke it's view before the animations have finished.
+        // The visit will alway updated after the router session is finsised (when the new visits are registered) so
+        // we can safely ignore it during outlet changes as these always happen before the router session ends.
+        when.valueOf(this.routerVisit).changes((/**
          * @return {?}
          */
-        (visit) => {
-            console.log("### Route visit changed");
-            if (visit) { // can be null while the place and index sync up
-                inRouteVisitUpdate.whileTrue((/**
-                 * @return {?}
-                 */
-                () => {
-                    this._activePlaceVisitModel.value = visit;
-                }));
-            }
-        }));
+        () => this.pushRouteChangesToVisit()), { unless: this._inOutletUpdate });
         // Handle component based changes
         when.valueOf(this._activePlaceVisitModel).changes((/**
          * @param {?} next
@@ -3501,7 +3508,7 @@ class PlaceOutletComponent extends DisposableComponent {
         (next, previous) => {
             this.pushVisitChangesToRoute(next, previous);
         }), {
-            unless: valueOf.any(this._inOutletUpdate, inRouteVisitUpdate).areTruthy()
+            unless: this.placeRouter.navigationSessionActive
         });
         chain(this._activePlace)
             .postponeWhile(placeRouter.navigationSessionActive)
@@ -3518,18 +3525,26 @@ class PlaceOutletComponent extends DisposableComponent {
      */
     ngOnInit() {
     }
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    getAnimationOrder() {
+        return this.placeAnimationOrder.value;
+    }
     /**
      * @return {?}
      */
     get animationDuration() {
         return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
     }
+    // @Trace()
     /**
      * @param {?} visit
      * @return {?}
      */
     navigate(visit) {
-        console.log({ activatedRoute: this._activatedRouteModel.value });
+        // console.log({ activatedRoute: this._activatedRouteModel.value });
         this.placeRouter.navigate(visit, {
             relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
         });
@@ -3540,6 +3555,28 @@ class PlaceOutletComponent extends DisposableComponent {
     get parentOutlet() {
         return this.parentOutletModel.value;
     }
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    pushRouteChangesToVisit() {
+        /** @type {?} */
+        const visit = this.routerVisit.value;
+        console.log({
+            visit,
+            place: visit ? visit.placeDefinition.component : null,
+            inOutletActivation: this._inOutletActivation.value,
+            inRoutingSession: this.placeRouter.navigationSessionActive.value
+        });
+        if (visit) { // can be null while the place and index sync up
+            this._inRouteVisitUpdate.whileTrue((/**
+             * @return {?}
+             */
+            () => {
+                this._activePlaceVisitModel.value = visit;
+            }));
+        }
+    }
     /**
      * @param {?} next
      * @param {?} previous
@@ -3562,13 +3599,14 @@ class PlaceOutletComponent extends DisposableComponent {
     get activatedRouteModel() {
         return this._activatedRouteModel.readonly;
     }
+    // @Trace()
     /**
      * @param {?} routerOutlet
      * @param {?} place
      * @return {?}
      */
     onOutletActivated(routerOutlet, place) {
-        this._inOutletUpdate.whileTrue((/**
+        this._inOutletActivation.whileTrue((/**
          * @return {?}
          */
         () => {
@@ -3590,27 +3628,29 @@ class PlaceOutletComponent extends DisposableComponent {
             this.animationDone();
         }
     }
+    // @Trace()
     /**
      * @return {?}
      */
     onOutletDeactivated() {
-        this._inOutletUpdate.whileTrue((/**
+        this._inOutletDeactivation.whileTrue((/**
          * @return {?}
          */
         () => {
-            this._activePlaceVisitModel.setDelegate(null);
-            this.isOnInitialPlace = false;
             this._activePlace.value = null;
             this._activatedRouteModel.value = null;
             this._placeDefinition.value = null;
+            this._activePlaceVisitModel.setDelegate(null);
         }));
     }
+    // @Trace()
     /**
      * @return {?}
      */
     animationStarted() {
         console.log({ activePlace: this._activePlace.value });
     }
+    // @Trace()
     /**
      * @return {?}
      */
@@ -3623,7 +3663,7 @@ class PlaceOutletComponent extends DisposableComponent {
 PlaceOutletComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-place-outlet',
-                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"{value: placeAnimationOrder.value, 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\n",
+                template: "<div class=\"router-outlet-container\"\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\n",
                 animations: [LEFT_RIGHT_PLACE_ANIMATION],
                 styles: [":host{display:flex;flex-direction:column;min-height:0;overflow-x:hidden}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
             }] }
@@ -3650,36 +3690,6 @@ __decorate([
     StoreInListModel('customPlaceAnimationOrderModel'),
     __metadata("design:type", Array)
 ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Visit]),
-    __metadata("design:returntype", void 0)
-], PlaceOutletComponent.prototype, "navigate", null);
-__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);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PlaceOutletComponent.prototype, "animationStarted", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PlaceOutletComponent.prototype, "animationDone", null);
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
@@ -3701,11 +3711,26 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype._activePlaceVisitModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inOutletActivation;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inOutletDeactivation;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype._inOutletUpdate;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inRouteVisitUpdate;
     /**
      * @type {?}
      * @private
@@ -3727,7 +3752,12 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.isOnInitialPlace;
+    PlaceOutletComponent.prototype.initialPlaceIndex;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.routerVisit;
     /**
      * @type {?}
      * @private
@@ -3916,7 +3946,6 @@ TabbedPlaceNavigationComponent.ctorParameters = () => [];
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-const ɵ0 = { animationDuration: "2000ms" };
 class PlaceModule {
 }
 PlaceModule.decorators = [
@@ -3948,7 +3977,7 @@ PlaceModule.decorators = [
                     ListPlaceNavComponent
                 ],
                 providers: [
-                    { provide: AUP_PLACE_CONFIG, useValue: ɵ0 }
+                // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "2000ms"}}
                 ]
             },] }
 ];