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

package/assets/table.scss

@@ -1,7 +1,9 @@
 aup-table {
-  --default-column-gap: var(--column-gap, 24px); // material design table column padding
-  --resolved-row-selected-background-color: var(--row-selected-background-color, rgba(0, 0, 255, 0.04));
-  --resolved-row-hover-background-color: var(--row-hover-background-color, rgba(0, 0, 0, 0.05));
+  --resolved-column-gap: var(--column-gap, var(--aup-table-column-gap, 24px)); // material design table column padding
+  --resolved-row-selected-background-color: var(--row-selected-background-color, var(--aup-table-row-selected-background-color, rgba(0, 0, 255, 0.04)));
+  --resolved-row-hover-background-color: var(--row-hover-background-color, var(--aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)));
+  --resolved-first-column-padding-left: var(--first-column-padding-left, var(--aup-table-first-column-padding-left, var(--resolved-column-gap)));
+  --resolved-last-column-padding-right: var(--last-column-padding-right, var(--aup-table-last-column-padding-right, var(--resolved-column-gap)));
 
   &.hide-header {
     .mat-table thead {
@@ -64,9 +66,14 @@ aup-table {
     height: 100%;
     min-height: 47px; // same as mat table row height - border bottom.
 
-    padding-left: var(--default-column-gap);
+    padding-left: var(--resolved-column-gap);
+
+    &.first-visible-column {
+      padding-left: var(--resolved-first-column-padding-left);
+    }
+
     &.last-visible-column {
-      padding-right: var(--default-column-gap);
+      padding-right: var(--resolved-last-column-padding-right);
     }
   }
 
@@ -78,7 +85,7 @@ aup-table {
 
     &.padChild {
       > *:first-child {
-        padding-left: var(--default-column-gap);
+        padding-left: var(--resolved-column-gap);
         flex: 1;
       }
     }

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

@@ -1009,6 +1009,9 @@
             _this.activeFace = _this.faces.first();
             _this.buttonStyle = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getStyleOf(f); });
             _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            _this.iconOnly = _this.faces.select(function (face) {
+                return ___default['default'].isEmpty(exports.CommandFace.getTextOf(face)) && !___default['default'].isEmpty(exports.CommandFace.getIconOf(face));
+            }).count().equals(_this.faces.count());
             return _this;
         }
         CommandComponent.prototype.isActive = function (face) {
@@ -1027,7 +1030,7 @@
     CommandComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-command',
-                    template: "<ng-container [ngSwitch]=\"buttonStyle.value\">\n  <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n    <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n    <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
+                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n    <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
                     styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
                 },] }
     ];
@@ -2707,6 +2710,7 @@
             this._flex = false;
             this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
             this.installHeaderRenderer();
+            this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
         }
         ColumnModel.prototype.installHeaderRenderer = function () {
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
@@ -3332,15 +3336,32 @@
      *
      * Styling
      * @example
+     *  // global settings
+     * :root {
+     *   --aup-table-column-gap: 10px; // defaults to 24px
+     *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+     *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+     * }
+     *
+     * // per table settings.
      * aup-table {
      *   --column-gap: 10px; // defaults to 24px
      *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
      *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --first-column-padding-left: 18px // defaults to --column-gap
+     *   --last-column-padding-right: 18px // defaults to --column-gap
+     *
+     *   aup-table-header-cell-renderer,
      *   aup-table-cell-renderer {
-     *     &:first-column {
+     *     &.aup-col-my-dasherised-column-id {
      *       // do stuff
      *     }
-     *     &:last-column {
+     *     &.first-visible-column {
+     *       // do stuff
+     *     }
+     *     &.last-visible-column {
      *       // do stuff
      *     }
      *   }
@@ -3410,12 +3431,22 @@
             var _a;
             return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
+        TableComponent.prototype.getColumnClasses = function (columnId) {
+            var classes = ["aup-col-" + this.columnsById.get(columnId).dasherisedColumnId];
+            if (this.isFirstVisibleColumn(columnId)) {
+                classes.push('first-visible-column');
+            }
+            if (this.isLastVisibleColumn(columnId)) {
+                classes.push('last-visible-column');
+            }
+            return classes;
+        };
         return TableComponent;
     }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                        [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                 [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
                     styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:scroll;display:flex;flex-direction:column;align-items:stretch}"]
                 },] }
     ];
@@ -4481,12 +4512,9 @@
                         TreeTableComponent,
                         exports.TreeInheritanceIconComponent,
                         TreeLabelCellRendererComponent,
-                        exports.IconComponent,
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        exports.IconComponent,
-                        exports.IconComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -5975,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]
@@ -6341,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()
@@ -6390,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;
@@ -8369,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); })
@@ -8387,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) {
@@ -8398,7 +8443,7 @@
             };
         };
         AbstractPlaceNavigationComponent.prototype.isActive = function (place) {
-            return this.activePlaceDefinition.query().equals(place);
+            return;
         };
         AbstractPlaceNavigationComponent.prototype.ngOnInit = function () {
         };
@@ -8451,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)}"]
                 },] }
     ];
@@ -8522,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)}"]
                 },] }
     ];
@@ -8544,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: [""]
                 },] }
     ];