@coolon/angular-ui-powerups 0.0.38 → 0.0.42

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

@@ -2,6 +2,7 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, NgModule, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgressSpinnerModule, MatInputModule, MatFormFieldModule, MatSelectModule } from '@angular/material';
+import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, EventListenerList, DelegatingValueModel, Trace, MutableListModel, StoreInValueModel, MutableValueModel, Binding, OptionsHelper, ValueHolder } from '@coolon/pectin';
@@ -11,9 +12,8 @@ import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
 import { MatDialog as MatDialog$1 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router, RouterModule } from '@angular/router';
+import { Router, ActivatedRoute, RouterOutlet, RouterModule, PRIMARY_OUTLET } from '@angular/router';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import { isNil, isEqual, isEmpty, isFunction } from 'lodash';
@@ -1367,6 +1367,9 @@ InteractionModule.decorators = [
                     AlertDialogComponent,
                     ActivityOutletComponent
                 ],
+                exports: [
+                    ActivityContainerComponent,
+                ],
                 entryComponents: [
                     ActivityContainerComponent,
                     ConfirmationDialogComponent,
@@ -1922,6 +1925,7 @@ class PlaceComponent extends DisposableComponent {
     canDeactivate() {
         return true;
     }
+    // @Trace()
     /**
      * @return {?}
      */
@@ -1933,12 +1937,6 @@ __decorate([
     __metadata("design:type", PlaceComponent.Definition),
     __metadata("design:paramtypes", [])
 ], PlaceComponent.prototype, "placeDefinition", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PlaceComponent.prototype, "onPlaceReady", null);
 if (false) {
     /** @type {?} */
     PlaceComponent.prototype._incomingRouteChange;
@@ -2105,9 +2103,9 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
      * @param {?} placeDef
      * @return {?}
      */
-    getNavItem(placeDef) {
+    getNav(placeDef) {
         /** @type {?} */
-        const navItem = (/** @type {?} */ (placeDef.getData('navItem')));
+        const navItem = (/** @type {?} */ (placeDef.getData('nav')));
         return {
             title: (/**
              * @return {?}
@@ -2146,7 +2144,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PlaceComponent.Definition]),
     __metadata("design:returntype", Object)
-], AbstractPlaceNavigationComponent.prototype, "getNavItem", null);
+], AbstractPlaceNavigationComponent.prototype, "getNav", null);
 if (false) {
     /** @type {?} */
     AbstractPlaceNavigationComponent.prototype.places;
@@ -2187,7 +2185,7 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
 ListPlaceNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-list-place-nav',
-                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNavItem(place).tooltip()\">\n    <mat-icon *ngIf=\"getNavItem(place).icon()\">{{getNavItem(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNavItem(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
             }] }
 ];
@@ -2222,6 +2220,7 @@ class PlaceService extends GarbageCollector {
     get activePlaces() {
         return this._activePlaces.readonly;
     }
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
@@ -2229,6 +2228,7 @@ class PlaceService extends GarbageCollector {
     onActivate(place) {
         this._activePlaces.push(place);
     }
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
@@ -2236,6 +2236,7 @@ class PlaceService extends GarbageCollector {
     onDeactivate(place) {
         this._activePlaces.remove(place);
     }
+    // @Trace()
     /**
      * @param {?} params
      * @return {?}
@@ -2254,6 +2255,7 @@ class PlaceService extends GarbageCollector {
             });
         }
     }
+    // @Trace()
     /**
      * @param {?} snapshot
      * @return {?}
@@ -2275,30 +2277,6 @@ PlaceService.ctorParameters = () => [
     { type: Injector }
 ];
 /** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: PlaceService, providedIn: "root" });
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [PlaceComponent]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onActivate", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [PlaceComponent]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onDeactivate", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "notifyRouteParametersChanged", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ParameterSnapshot]),
-    __metadata("design:returntype", Promise)
-], PlaceService.prototype, "sanitise", null);
 if (false) {
     /**
      * @type {?}
@@ -2374,35 +2352,97 @@ const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class PlaceOutletComponent {
+class PlaceOutletComponent extends DisposableComponent {
     /**
      * @param {?} placeService
+     * @param {?} activatedRoute
      */
-    constructor(placeService) {
+    constructor(placeService, activatedRoute) {
+        super();
         this.placeService = placeService;
+        this.activatedRoute = activatedRoute;
         this.animate = true;
+        this.outletUrlSegment = new MutableListModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.toString())).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        bits => bits.join(',')));
+        console.log(`new outlet@(${this.myPath.value})`);
+        this.outletChildPath = chain(this.outletUrlSegment).map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.toString())).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        bits => bits.join(",")));
+        this.state = chain(this.myPath).map((/**
+         * @param {?} path
+         * @return {?}
+         */
+        path => {
+            return `outlet@(${path}), child path->${this.outletChildPath.value}`;
+        }), { dependsOn: this.outletChildPath });
+        when.valueOf(this.state).changes((/**
+         * @param {?} debug
+         * @return {?}
+         */
+        debug => {
+            console.log(`Outlet Changed -> ${debug}`);
+        }));
     }
     /**
      * @return {?}
      */
     ngOnInit() {
     }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        // this.routerOutLetQuery.changes.subscribe(() => {
+        //   this.updateRouterOutlet(this.routerOutLetQuery.first);
+        // });
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterViewChecked() {
+        // console.log(`@AfterViewChecked: ${this.state.value}`);
+        this.updateRouterOutlet(this.routerOutLetQuery.first);
+    }
+    // @Trace()
+    // ngOnDestroy(): void {
+    //   console.log('outletSegments', this.outletUrlSegment.value);
+    //   console.log('mySegments', this.myPath.value);
+    //   super.ngOnDestroy();
+    // }
+    // @Trace()
     /**
      * @param {?} $event
      * @return {?}
      */
-    onActivate($event) {
+    onOutletActivated($event) {
+        // console.log(this.routerOutLet.activatedRoute.snapshot.url);
         this.currentPlace = $event;
         this.placeService.onActivate($event);
         if (!this.animate) {
-            this.notifyPlaceReady();
+            // we're not animating so trigger any post animation callbacks now.
+            this.animationDone();
         }
     }
     /**
      * @param {?} $event
      * @return {?}
      */
-    onDeactivate($event) {
+    onOutletDeactivated($event) {
         this.currentPlace = null;
         this.placeService.onDeactivate($event);
     }
@@ -2417,49 +2457,79 @@ class PlaceOutletComponent {
      * @return {?}
      */
     animationDone() {
-        this.notifyPlaceReady();
+        if (this.currentPlace) {
+            this.currentPlace.onPlaceReady();
+        }
     }
+    // @Trace()
     /**
      * @private
+     * @param {?} first
      * @return {?}
      */
-    notifyPlaceReady() {
-        if (this.currentPlace) {
-            this.currentPlace.onPlaceReady();
+    updateRouterOutlet(first) {
+        if (first.isActivated) {
+            this.outletUrlSegment.value = first.activatedRoute.snapshot.url;
         }
     }
 }
 PlaceOutletComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-place-outlet',
-                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
+                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated($event)\"\n                 (deactivate)=\"onOutletDeactivated($event)\">\n  </router-outlet>\n</div>\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}router-outlet{display:none}"]
             }] }
 ];
 /** @nocollapse */
 PlaceOutletComponent.ctorParameters = () => [
-    { type: PlaceService }
+    { type: PlaceService },
+    { type: ActivatedRoute }
 ];
 PlaceOutletComponent.propDecorators = {
     animate: [{ type: Input }],
-    routerOutLet: [{ type: ViewChild, args: ['routerOutlet', { static: false },] }]
+    routerOutLetQuery: [{ type: ViewChildren, args: [RouterOutlet,] }]
 };
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
-    PlaceOutletComponent.prototype.routerOutLet;
+    PlaceOutletComponent.prototype.routerOutLetQuery;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype.currentPlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.myPath;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.outletUrlSegment;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.outletChildPath;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.state;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype.placeService;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.activatedRoute;
 }
 
 /**
@@ -2474,7 +2544,7 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNavItem(place).tooltip()\">\n    <mat-icon *ngIf=\"getNavItem(place).icon()\">{{getNavItem(place).icon()}}</mat-icon>\n    <span>{{getNavItem(place).title()}}</span>\n  </a>\n</nav>\n",
+                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span>{{getNav(place).title()}}</span>\n  </a>\n</nav>\n",
                 styles: [""]
             }] }
 ];
@@ -2543,6 +2613,7 @@ AngularUiPowerupsModule.decorators = [
                     MatInputModule,
                     MatFormFieldModule,
                     MatSelectModule,
+                    MatTabsModule$1,
                     PlaceModule,
                     InteractionModule
                 ],
@@ -3018,8 +3089,16 @@ class LeavePlaceGuard {
     canDeactivate(component, currentRoute, currentState, nextState) {
         // HACK: this will break with child routes...
         /** @type {?} */
-        let path = `/${component.placeDefinition.path}`;
-        console.log({ path: path, next: nextState.url });
+        const path = `/${component.placeDefinition.path}`;
+        console.log({
+            placePath: path,
+            currentRoute: currentRoute.toString(),
+            currentStateUrl: currentState.url,
+            nextStateUrl: nextState.url,
+            currentStateUrlTree: this.router.parseUrl(currentState.url).root.children[PRIMARY_OUTLET].segments,
+            nextStateUrlTree: this.router.parseUrl(nextState.url).root.children[PRIMARY_OUTLET].segments
+        });
+        // nextState is the full path...
         if (!nextState.url.startsWith(path)) {
             return component.canDeactivate();
         }
@@ -3076,7 +3155,7 @@ class PlaceRouteGuard {
         // Id snapshot are repesented by 2 url segments
         // ID => [{'/basePath', params}, {'id', params}]
         // NO ID => [{'/basePath', params}]
-        console.log({ urlSegments: route.url });
+        // console.log({urlSegments: route.url});
         // const snapshot = ParameterSnapshot.create(PlaceComponent.getDefinition(route.component as Constructable<PlaceComponent>), route.paramMap);
         // return this.placeService.sanitise(snapshot).then(sanitised => {
         //   if (sanitised.hasChanged(snapshot)) {