@coolon/angular-ui-powerups 0.0.38 → 0.0.41

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tabs', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tabs, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver));
-}(this, function (exports, common, core, forms, material, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tabs, tooltip, router, src, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tooltip, router, src, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
 
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
 
@@ -2518,10 +2518,14 @@
         function () {
             return true;
         };
+        // @Trace()
+        // @Trace()
         /**
          * @return {?}
          */
-        PlaceComponent.prototype.onPlaceReady = /**
+        PlaceComponent.prototype.onPlaceReady = 
+        // @Trace()
+        /**
          * @return {?}
          */
         function () {
@@ -2531,12 +2535,6 @@
             __metadata("design:type", PlaceComponent.Definition),
             __metadata("design:paramtypes", [])
         ], PlaceComponent.prototype, "placeDefinition", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], PlaceComponent.prototype, "onPlaceReady", null);
         return PlaceComponent;
     }(DisposableComponent));
     if (false) {
@@ -2728,13 +2726,13 @@
          * @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 {?}
@@ -2775,7 +2773,7 @@
             __metadata("design:type", Function),
             __metadata("design:paramtypes", [exports.PlaceComponent.Definition]),
             __metadata("design:returntype", Object)
-        ], AbstractPlaceNavigationComponent.prototype, "getNavItem", null);
+        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
         return AbstractPlaceNavigationComponent;
     }(DisposableComponent));
     if (false) {
@@ -2828,7 +2826,7 @@
         ListPlaceNavComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -2867,33 +2865,45 @@
             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 {?}
          */
@@ -2911,11 +2921,15 @@
                 });
             }
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} snapshot
          * @return {?}
          */
-        PlaceService.prototype.sanitise = /**
+        PlaceService.prototype.sanitise = 
+        // @Trace()
+        /**
          * @param {?} snapshot
          * @return {?}
          */
@@ -2937,30 +2951,6 @@
             { type: core.Injector }
         ]; };
         /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR)); }, token: PlaceService, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.PlaceComponent]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onActivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.PlaceComponent]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onDeactivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "notifyRouteParametersChanged", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.ParameterSnapshot]),
-            __metadata("design:returntype", Promise)
-        ], PlaceService.prototype, "sanitise", null);
         return PlaceService;
     }(pectin.GarbageCollector));
     if (false) {
@@ -3038,10 +3028,49 @@
      * @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 pectin.MutableListModel();
+            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.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 {?}
@@ -3051,26 +3080,71 @@
          */
         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 {?}
          */
@@ -3096,54 +3170,88 @@
          * @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: core.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: router.ActivatedRoute }
         ]; };
         PlaceOutletComponent.propDecorators = {
             animate: [{ type: core.Input }],
-            routerOutLet: [{ type: core.ViewChild, args: ['routerOutlet', { static: false },] }]
+            routerOutLetQuery: [{ type: core.ViewChildren, args: [router.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;
     }
 
     /**
@@ -3158,7 +3266,7 @@
         TabbedPlaceNavigationComponent.decorators = [
             { type: core.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: [""]
                     }] }
         ];
@@ -3233,6 +3341,7 @@
                             material.MatInputModule,
                             material.MatFormFieldModule,
                             material.MatSelectModule,
+                            tabs.MatTabsModule,
                             PlaceModule,
                             InteractionModule
                         ],
@@ -3744,7 +3853,15 @@
             // 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[router.PRIMARY_OUTLET].segments,
+                nextStateUrlTree: this.router.parseUrl(nextState.url).root.children[router.PRIMARY_OUTLET].segments
+            });
+            // nextState is the full path...
             if (!nextState.url.startsWith(path)) {
                 return component.canDeactivate();
             }
@@ -3803,7 +3920,7 @@
             // 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)) {