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

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}"]
                 },] }
     ];
@@ -3914,7 +3945,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "decoratedSelf", {
             get: function () {
                 var _this = this;
-                return this.memoize("decoratedSelf", function () {
+                return this.memoize('decoratedSelf', function () {
                     return _this.parent ? _this.parent.children.find(function (child) { return child.node === _this.node; }) : exports.DecoratedTreeNode.createRoot(_this.node);
                 });
             },
@@ -3924,7 +3955,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "children", {
             get: function () {
                 var _this = this;
-                return this.memoize("children", function () {
+                return this.memoize('children', function () {
                     return _this.node.children ? _this.node.children.map(function (child) {
                         return typescriptUtilities.Mixin.createProxy(child, new DecoratedTreeNodeMixin(_this.decoratedSelf, child));
                     }) : [];
@@ -3935,7 +3966,7 @@
         });
         DecoratedTreeNodeMixin.prototype.descendants = function () {
             var _this = this;
-            return this.memoize("descendants", function () {
+            return this.memoize('descendants', function () {
                 var result = [];
                 _this.visitDescendants(function (child) { return result.push(child); });
                 return result;
@@ -3943,7 +3974,7 @@
         };
         DecoratedTreeNodeMixin.prototype.selfAndDescendants = function () {
             var _this = this;
-            return this.memoize("selfAndDescendants", function () {
+            return this.memoize('selfAndDescendants', function () {
                 var result = [];
                 _this.visitSelfAndDescendants(function (child) { return result.push(child); });
                 return result;
@@ -4014,29 +4045,24 @@
         };
         DecoratedTreeNodeMixin.prototype.ancestorsAndSelf = function () {
             var _this = this;
-            return this.memoize("ancestorsAndSelf", function () {
+            return this.memoize('ancestorsAndSelf', function () {
                 return _this.ancestors().concat([(_this.decoratedSelf)]);
             });
         };
         DecoratedTreeNodeMixin.prototype.pathToParent = function (parent) {
-            var _this = this;
-            return this.memoize("pathToParent", function () {
-                if (_this.node === parent.node) {
-                    return [];
-                }
-                else if (_this.parent) {
-                    return _this.parent.pathToParent(parent).concat([_this.parent]);
-                }
-                else {
-                    throw new Error('parent is not an ancestor');
-                }
-            });
+            if (this.node === parent.node) {
+                return [];
+            }
+            else if (this.parent) {
+                var pathToParent = this.parent.pathToParent(parent);
+                return pathToParent.concat([this.parent]);
+            }
+            else {
+                throw new Error('parent is not an ancestor');
+            }
         };
         DecoratedTreeNodeMixin.prototype.pathToParentAndSelf = function (parent) {
-            var _this = this;
-            return this.memoize("pathToParentAndSelf", function () {
-                return _this.pathToParent(parent).concat([_this.decoratedSelf]);
-            });
+            return this.pathToParent(parent).concat([this.decoratedSelf]);
         };
         DecoratedTreeNodeMixin.prototype.isRoot = function () {
             return !this.parent;
@@ -4052,20 +4078,20 @@
             return !this.isRoot() && this.node.children.length < 1;
         };
         DecoratedTreeNodeMixin.prototype.hasChildren = function () {
-            return this.node.children.length > 0;
+            return this.node.children && this.node.children.length > 0;
         };
         DecoratedTreeNodeMixin.prototype.depthFromParent = function (parent) {
             return this.pathToParent(parent).length;
         };
         DecoratedTreeNodeMixin.prototype.treeDepth = function () {
             var _this = this;
-            return this.memoize("treeDepth", function () {
+            return this.memoize('treeDepth', function () {
                 return 1 + _this.descendants().map(function (child) { return child.depthFromParent(_this); }).reduce(function (prev, current) { return Math.max(prev, current); });
             });
         };
         DecoratedTreeNodeMixin.prototype.flatten = function () {
             var _this = this;
-            return this.memoize("flatten", function () {
+            return this.memoize('flatten', function () {
                 return _this.flattenInto([]);
             });
         };
@@ -4486,12 +4512,9 @@
                         TreeTableComponent,
                         exports.TreeInheritanceIconComponent,
                         TreeLabelCellRendererComponent,
-                        exports.IconComponent,
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        exports.IconComponent,
-                        exports.IconComponent
                     ],
                     imports: [
                         i2.CommonModule,