@coolon/angular-ui-powerups 11.0.0-alpha.8 → 11.0.0-alpha.9

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

@@ -6003,6 +6003,15 @@
      *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
      * });
      *
+     * Template columns
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+     *   table.addTemplateColumn("myTemplate");
+     * });
+     *
+     * <div *aupColumnTemplate="let hero; columnId: 'myTemplate'">{{hero.age}}</div>
+     *
      * I18n
      * @example
      * [table.yml]
@@ -6369,6 +6378,7 @@
             _this._active = new pectin.MutableValueModel(false);
             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;
             when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
+            _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
         // @Trace()
@@ -6418,13 +6428,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
-            get: function () {
-                return this.placeDefinition.children.map(function (d) { return d.component; });
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(PlaceComponent.prototype, "active", {
             get: function () {
                 return this._active.readonly;
@@ -8397,6 +8400,7 @@
             var _this = _super.call(this) || this;
             _this.placeRouter = placeRouter;
             _this._activePlaceComponent = new pectin.DelegatingValueModel();
+            _this.trackByPlaceDef = function (data) { return data.place; };
             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.placeDefinitions = chain(_this.placesModel)
                 .map(function (c) { return exports.PlaceComponent.getDefinition(c); })
@@ -8415,6 +8419,19 @@
                 setTimeout(function () { return _this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null); });
             });
             _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
+            _this.menuItems = chain(_this.placeDefinitions).map(function (d) {
+                return {
+                    place: d,
+                    active: _this.activePlaceDefinition.value === d
+                };
+            }, {
+                dependsOn: _this.activePlaceDefinition
+            });
+            var txo = new pectin.TransactionObserver({ verbose: true }).onEvent(function (e) { return console.log(e.name, e.payload); });
+            txo.observe('this.placesModel', _this.placesModel);
+            txo.observe('this.placeDefinitions', _this.placeDefinitions);
+            txo.observe('this.activePlaceDefinition', _this.activePlaceDefinition);
+            txo.observe('this.menuItems', _this.menuItems);
             return _this;
         }
         AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
@@ -8426,7 +8443,7 @@
             };
         };
         AbstractPlaceNavigationComponent.prototype.isActive = function (place) {
-            return this.activePlaceDefinition.query().equals(place);
+            return;
         };
         AbstractPlaceNavigationComponent.prototype.ngOnInit = function () {
         };
@@ -8479,7 +8496,7 @@
     ListPlaceNavComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-list-place-nav',
-                    template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
+                    template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
                     styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
                 },] }
     ];
@@ -8550,7 +8567,7 @@
     SidePlaceNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-side-place-navigation',
-                    template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+                    template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
                     styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width,56px);--resolved-nav-item-height:var(--nav-item-height,var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width,235px);--resolved-color:var(--nav-color,hsla(0,0%,100%,0.9));--resolved-background-color:var(--nav-background-color,#555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
                 },] }
     ];
@@ -8572,7 +8589,7 @@
     TabbedPlaceNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-tabbed-place-navigation',
-                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</nav>\n",
+                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</nav>\n",
                     styles: [""]
                 },] }
     ];