@coolon/angular-ui-powerups 0.0.38 → 0.0.41

package/fesm5/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 { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __values } 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';
@@ -2336,10 +2336,14 @@ var PlaceComponent = /** @class */ (function (_super) {
     function () {
         return true;
     };
+    // @Trace()
+    // @Trace()
     /**
      * @return {?}
      */
-    PlaceComponent.prototype.onPlaceReady = /**
+    PlaceComponent.prototype.onPlaceReady = 
+    // @Trace()
+    /**
      * @return {?}
      */
     function () {
@@ -2349,12 +2353,6 @@ var PlaceComponent = /** @class */ (function (_super) {
         __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);
     return PlaceComponent;
 }(DisposableComponent));
 if (false) {
@@ -2546,13 +2544,13 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
      * @param {?} placeDef
      * @return {?}
      */
-    AbstractPlaceNavigationComponent.prototype.getNavItem = /**
+    AbstractPlaceNavigationComponent.prototype.getNav = /**
      * @param {?} placeDef
      * @return {?}
      */
     function (placeDef) {
         /** @type {?} */
-        var navItem = (/** @type {?} */ (placeDef.getData('navItem')));
+        var navItem = (/** @type {?} */ (placeDef.getData('nav')));
         return {
             title: (/**
              * @return {?}
@@ -2593,7 +2591,7 @@ var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [PlaceComponent.Definition]),
         __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNavItem", null);
+    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
     return AbstractPlaceNavigationComponent;
 }(DisposableComponent));
 if (false) {
@@ -2646,7 +2644,7 @@ var ListPlaceNavComponent = /** @class */ (function (_super) {
     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}"]
                 }] }
     ];
@@ -2685,33 +2683,45 @@ var PlaceService = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
      */
-    PlaceService.prototype.onActivate = /**
+    PlaceService.prototype.onActivate = 
+    // @Trace()
+    /**
      * @param {?} place
      * @return {?}
      */
     function (place) {
         this._activePlaces.push(place);
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
      */
-    PlaceService.prototype.onDeactivate = /**
+    PlaceService.prototype.onDeactivate = 
+    // @Trace()
+    /**
      * @param {?} place
      * @return {?}
      */
     function (place) {
         this._activePlaces.remove(place);
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} params
      * @return {?}
      */
-    PlaceService.prototype.notifyRouteParametersChanged = /**
+    PlaceService.prototype.notifyRouteParametersChanged = 
+    // @Trace()
+    /**
      * @param {?} params
      * @return {?}
      */
@@ -2729,11 +2739,15 @@ var PlaceService = /** @class */ (function (_super) {
             });
         }
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} snapshot
      * @return {?}
      */
-    PlaceService.prototype.sanitise = /**
+    PlaceService.prototype.sanitise = 
+    // @Trace()
+    /**
      * @param {?} snapshot
      * @return {?}
      */
@@ -2755,30 +2769,6 @@ var PlaceService = /** @class */ (function (_super) {
         { 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);
     return PlaceService;
 }(GarbageCollector));
 if (false) {
@@ -2856,10 +2846,49 @@ var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var PlaceOutletComponent = /** @class */ (function () {
-    function PlaceOutletComponent(placeService) {
-        this.placeService = placeService;
-        this.animate = true;
+var PlaceOutletComponent = /** @class */ (function (_super) {
+    __extends(PlaceOutletComponent, _super);
+    function PlaceOutletComponent(placeService, activatedRoute) {
+        var _this = _super.call(this) || this;
+        _this.placeService = placeService;
+        _this.activatedRoute = activatedRoute;
+        _this.animate = true;
+        _this.outletUrlSegment = new MutableListModel();
+        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.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        function (s) { return s.toString(); })).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        function (bits) { return bits.join(','); }));
+        console.log("new outlet@(" + _this.myPath.value + ")");
+        _this.outletChildPath = chain(_this.outletUrlSegment).map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        function (s) { return s.toString(); })).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        function (bits) { return bits.join(","); }));
+        _this.state = chain(_this.myPath).map((/**
+         * @param {?} path
+         * @return {?}
+         */
+        function (path) {
+            return "outlet@(" + path + "), child path->" + _this.outletChildPath.value;
+        }), { dependsOn: _this.outletChildPath });
+        when.valueOf(_this.state).changes((/**
+         * @param {?} debug
+         * @return {?}
+         */
+        function (debug) {
+            console.log("Outlet Changed -> " + debug);
+        }));
+        return _this;
     }
     /**
      * @return {?}
@@ -2869,26 +2898,71 @@ var PlaceOutletComponent = /** @class */ (function () {
      */
     function () {
     };
+    /**
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.ngAfterViewInit = /**
+     * @return {?}
+     */
+    function () {
+        // this.routerOutLetQuery.changes.subscribe(() => {
+        //   this.updateRouterOutlet(this.routerOutLetQuery.first);
+        // });
+    };
+    /**
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.ngAfterViewChecked = /**
+     * @return {?}
+     */
+    function () {
+        // 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()
+    // @Trace()
+    // ngOnDestroy(): void {
+    //   console.log('outletSegments', this.outletUrlSegment.value);
+    //   console.log('mySegments', this.myPath.value);
+    //   super.ngOnDestroy();
+    // }
+    // @Trace()
     /**
      * @param {?} $event
      * @return {?}
      */
-    PlaceOutletComponent.prototype.onActivate = /**
+    PlaceOutletComponent.prototype.onOutletActivated = 
+    // @Trace()
+    // ngOnDestroy(): void {
+    //   console.log('outletSegments', this.outletUrlSegment.value);
+    //   console.log('mySegments', this.myPath.value);
+    //   super.ngOnDestroy();
+    // }
+    // @Trace()
+    /**
      * @param {?} $event
      * @return {?}
      */
     function ($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 {?}
      */
-    PlaceOutletComponent.prototype.onDeactivate = /**
+    PlaceOutletComponent.prototype.onOutletDeactivated = /**
      * @param {?} $event
      * @return {?}
      */
@@ -2914,54 +2988,88 @@ var PlaceOutletComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this.notifyPlaceReady();
+        if (this.currentPlace) {
+            this.currentPlace.onPlaceReady();
+        }
     };
+    // @Trace()
+    // @Trace()
     /**
      * @private
+     * @param {?} first
      * @return {?}
      */
-    PlaceOutletComponent.prototype.notifyPlaceReady = /**
+    PlaceOutletComponent.prototype.updateRouterOutlet = 
+    // @Trace()
+    /**
      * @private
+     * @param {?} first
      * @return {?}
      */
-    function () {
-        if (this.currentPlace) {
-            this.currentPlace.onPlaceReady();
+    function (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 = function () { return [
-        { type: PlaceService }
+        { type: PlaceService },
+        { type: ActivatedRoute }
     ]; };
     PlaceOutletComponent.propDecorators = {
         animate: [{ type: Input }],
-        routerOutLet: [{ type: ViewChild, args: ['routerOutlet', { static: false },] }]
+        routerOutLetQuery: [{ type: ViewChildren, args: [RouterOutlet,] }]
     };
     return PlaceOutletComponent;
-}());
+}(DisposableComponent));
 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;
 }
 
 /**
@@ -2976,7 +3084,7 @@ var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
     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: [""]
                 }] }
     ];
@@ -3051,6 +3159,7 @@ var AngularUiPowerupsModule = /** @class */ (function () {
                         MatInputModule,
                         MatFormFieldModule,
                         MatSelectModule,
+                        MatTabsModule$1,
                         PlaceModule,
                         InteractionModule
                     ],
@@ -3562,7 +3671,15 @@ var LeavePlaceGuard = /** @class */ (function () {
         // HACK: this will break with child routes...
         /** @type {?} */
         var path = "/" + component.placeDefinition.path;
-        console.log({ path: path, next: nextState.url });
+        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();
         }
@@ -3621,7 +3738,7 @@ var PlaceRouteGuard = /** @class */ (function () {
         // 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)) {