@coolon/angular-ui-powerups 0.0.80 → 0.0.83

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, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSerializer } from '@angular/router';
+import { Router, RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, RouterOutlet, 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';
@@ -1043,8 +1043,8 @@ class AlertDialogComponent extends AbstractActivity {
 AlertDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-alert-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</p>\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
 /** @nocollapse */
@@ -1111,8 +1111,8 @@ class ConfirmThenDialogComponent extends AbstractActivity {
 ConfirmThenDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
 /** @nocollapse */
@@ -1171,8 +1171,8 @@ class ConfirmationDialogComponent extends AbstractActivity {
 ConfirmationDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</div>\n\n",
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
 /** @nocollapse */
@@ -2584,7 +2584,7 @@ const DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
 // this one seems ok.
 /** @type {?} */
 const ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-class PlaceComponent extends DisposableComponent {
+class PlaceComponent extends GarbageCollector {
     constructor() {
         super();
     }
@@ -2662,6 +2662,16 @@ class PlaceComponent extends DisposableComponent {
      */
     onPlaceReady() {
     }
+    /**
+     * Called by the place outlet after all animations have finished.  We need this instead of ngOnDestroy
+     * to avoid the fact that the angular router calls it before the animations have run causing the component
+     * to loose any pectin bindings.
+     * @return {?}
+     */
+    // @Trace()
+    onPlaceDestroyed() {
+        this.dispose();
+    }
 }
 __decorate([
     Memoize$1(),
@@ -3425,13 +3435,14 @@ class PlaceOutletComponent extends DisposableComponent {
         this.animate = true;
         this.placeChanged = new EventEmitter();
         this._activePlace = new MutableValueModel();
-        this._placeVisit = new MutableValueModel();
+        this._activePlaceVisitModel = new DelegatingValueModel();
         this._inOutletUpdate = new Guard$1();
         this._activatedRouteModel = new MutableValueModel();
         this._placeDefinition = new MutableValueModel();
         this.isOnInitialPlace = true;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.parentOutletModel = new MutableValueModel(parentOutlet);
+        this._activePlaceVisitModel.setDelegate(new MutableValueModel());
         /** @type {?} */
         const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
             .pullValueModel((/**
@@ -3439,9 +3450,9 @@ class PlaceOutletComponent extends DisposableComponent {
          * @return {?}
          */
         o => o.activePlaceModel))
-            .pluck("placeDefinition")
-            .pluckList("children")
-            .pluck("component");
+            .pluck('placeDefinition')
+            .pluckList('children')
+            .pluck('component');
         /** @type {?} */
         const activatePlaceType = chain(this.activePlaceModel).map((/**
          * @param {?} p
@@ -3471,17 +3482,18 @@ class PlaceOutletComponent extends DisposableComponent {
          * @return {?}
          */
         (visit) => {
+            console.log("### Route visit changed");
             if (visit) { // can be null while the place and index sync up
                 inRouteVisitUpdate.whileTrue((/**
                  * @return {?}
                  */
                 () => {
-                    this._placeVisit.value = visit;
+                    this._activePlaceVisitModel.value = visit;
                 }));
             }
         }));
         // Handle component based changes
-        when.valueOf(this._placeVisit).changes((/**
+        when.valueOf(this._activePlaceVisitModel).changes((/**
          * @param {?} next
          * @param {?} previous
          * @return {?}
@@ -3489,7 +3501,7 @@ class PlaceOutletComponent extends DisposableComponent {
         (next, previous) => {
             this.pushVisitChangesToRoute(next, previous);
         }), {
-            unless: inRouteVisitUpdate
+            unless: valueOf.any(this._inOutletUpdate, inRouteVisitUpdate).areTruthy()
         });
         chain(this._activePlace)
             .postponeWhile(placeRouter.navigationSessionActive)
@@ -3510,7 +3522,7 @@ class PlaceOutletComponent extends DisposableComponent {
      * @return {?}
      */
     get animationDuration() {
-        return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : "500ms";
+        return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
     }
     /**
      * @param {?} visit
@@ -3550,7 +3562,6 @@ class PlaceOutletComponent extends DisposableComponent {
     get activatedRouteModel() {
         return this._activatedRouteModel.readonly;
     }
-    // @Trace()
     /**
      * @param {?} routerOutlet
      * @param {?} place
@@ -3565,7 +3576,10 @@ class PlaceOutletComponent extends DisposableComponent {
                 this._activePlace.value = place;
                 this._activatedRouteModel.value = routerOutlet.activatedRoute;
                 this._placeDefinition.value = place.placeDefinition;
-                place.initialiseBindings(this._placeVisit);
+                /** @type {?} */
+                const visitModel = new MutableValueModel();
+                this._activePlaceVisitModel.setDelegate(visitModel);
+                place.initialiseBindings(visitModel);
             }
             catch (error) {
                 console.error(error);
@@ -3576,23 +3590,27 @@ class PlaceOutletComponent extends DisposableComponent {
             this.animationDone();
         }
     }
-    // @Trace()
     /**
-     * @param {?} routerOutlet
-     * @param {?} $event
      * @return {?}
      */
-    onOutletDeactivated(routerOutlet, $event) {
+    onOutletDeactivated() {
         this._inOutletUpdate.whileTrue((/**
          * @return {?}
          */
         () => {
+            this._activePlaceVisitModel.setDelegate(null);
             this.isOnInitialPlace = false;
             this._activePlace.value = null;
             this._activatedRouteModel.value = null;
             this._placeDefinition.value = null;
         }));
     }
+    /**
+     * @return {?}
+     */
+    animationStarted() {
+        console.log({ activePlace: this._activePlace.value });
+    }
     /**
      * @return {?}
      */
@@ -3605,7 +3623,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.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated(routerOutlet, $event)\">\n  </router-outlet>\n</div>\n\n",
+                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",
                 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}"]
             }] }
@@ -3629,7 +3647,7 @@ __decorate([
     __metadata("design:type", ListModel)
 ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
 __decorate([
-    StoreInListModel("customPlaceAnimationOrderModel"),
+    StoreInListModel('customPlaceAnimationOrderModel'),
     __metadata("design:type", Array)
 ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
 __decorate([
@@ -3638,6 +3656,30 @@ __decorate([
     __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;
@@ -3658,7 +3700,7 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype._placeVisit;
+    PlaceOutletComponent.prototype._activePlaceVisitModel;
     /**
      * @type {?}
      * @private
@@ -3874,6 +3916,7 @@ TabbedPlaceNavigationComponent.ctorParameters = () => [];
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+const ɵ0 = { animationDuration: "2000ms" };
 class PlaceModule {
 }
 PlaceModule.decorators = [
@@ -3905,7 +3948,7 @@ PlaceModule.decorators = [
                     ListPlaceNavComponent
                 ],
                 providers: [
-                // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "100ms"}}
+                    { provide: AUP_PLACE_CONFIG, useValue: ɵ0 }
                 ]
             },] }
 ];