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

package/fesm2015/coolon-angular-ui-powerups.js

@@ -25,7 +25,7 @@ import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { find, filter, each, isNil, isEqual } from 'lodash';
 import { Enum } from 'typescript-string-enums';
 import ResizeObserver from 'resize-observer-polyfill';
-import { assert as assert$1, Mixin, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
+import { assert as assert$1, Stringy, Mixin, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import produce from 'immer';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig } from '@angular/material/dialog';
@@ -641,6 +641,9 @@ class CommandComponent extends PopupAwareComponent {
         this.activeFace = this.faces.first();
         this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
         this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
+        this.iconOnly = this.faces.select(face => {
+            return _.isEmpty(CommandFace.getTextOf(face)) && !_.isEmpty(CommandFace.getIconOf(face));
+        }).count().equals(this.faces.count());
     }
     isActive(face) {
         return this.activeFace.query().equals(face);
@@ -657,7 +660,7 @@ class CommandComponent extends PopupAwareComponent {
 CommandComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -2155,6 +2158,7 @@ class ColumnModel {
         this._flex = false;
         this._visibleModel = new DelegatingValueModel().withDefault(true);
         this.installHeaderRenderer();
+        this.dasherisedColumnId = Stringy.from(columnId).dasherize().toString();
     }
     installHeaderRenderer() {
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
@@ -2697,15 +2701,32 @@ AbstractTableModel = __decorate([
  *
  * 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
  *     }
  *   }
@@ -2769,11 +2790,21 @@ class TableComponent extends ResizeAwareComponent {
         var _a;
         return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
+    getColumnClasses(columnId) {
+        const 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;
+    }
 }
 TableComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -3095,26 +3126,26 @@ class DecoratedTreeNodeMixin {
         this.node = node;
     }
     get decoratedSelf() {
-        return this.memoize("decoratedSelf", () => {
+        return this.memoize('decoratedSelf', () => {
             return this.parent ? this.parent.children.find(child => child.node === this.node) : DecoratedTreeNode.createRoot(this.node);
         });
     }
     get children() {
-        return this.memoize("children", () => {
+        return this.memoize('children', () => {
             return this.node.children ? this.node.children.map(child => {
                 return Mixin.createProxy(child, new DecoratedTreeNodeMixin(this.decoratedSelf, child));
             }) : [];
         });
     }
     descendants() {
-        return this.memoize("descendants", () => {
+        return this.memoize('descendants', () => {
             const result = [];
             this.visitDescendants(child => result.push(child));
             return result;
         });
     }
     selfAndDescendants() {
-        return this.memoize("selfAndDescendants", () => {
+        return this.memoize('selfAndDescendants', () => {
             const result = [];
             this.visitSelfAndDescendants(child => result.push(child));
             return result;
@@ -3177,27 +3208,24 @@ class DecoratedTreeNodeMixin {
         });
     }
     ancestorsAndSelf() {
-        return this.memoize("ancestorsAndSelf", () => {
+        return this.memoize('ancestorsAndSelf', () => {
             return this.ancestors().concat([(this.decoratedSelf)]);
         });
     }
     pathToParent(parent) {
-        return this.memoize("pathToParent", () => {
-            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) {
+            const pathToParent = this.parent.pathToParent(parent);
+            return pathToParent.concat([this.parent]);
+        }
+        else {
+            throw new Error('parent is not an ancestor');
+        }
     }
     pathToParentAndSelf(parent) {
-        return this.memoize("pathToParentAndSelf", () => {
-            return this.pathToParent(parent).concat([this.decoratedSelf]);
-        });
+        return this.pathToParent(parent).concat([this.decoratedSelf]);
     }
     isRoot() {
         return !this.parent;
@@ -3209,18 +3237,18 @@ class DecoratedTreeNodeMixin {
         return !this.isRoot() && this.node.children.length < 1;
     }
     hasChildren() {
-        return this.node.children.length > 0;
+        return this.node.children && this.node.children.length > 0;
     }
     depthFromParent(parent) {
         return this.pathToParent(parent).length;
     }
     treeDepth() {
-        return this.memoize("treeDepth", () => {
+        return this.memoize('treeDepth', () => {
             return 1 + this.descendants().map(child => child.depthFromParent(this)).reduce((prev, current) => Math.max(prev, current));
         });
     }
     flatten() {
-        return this.memoize("flatten", () => {
+        return this.memoize('flatten', () => {
             return this.flattenInto([]);
         });
     }
@@ -3740,12 +3768,9 @@ ComponentsModule.decorators = [
                     TreeTableComponent,
                     TreeInheritanceIconComponent,
                     TreeLabelCellRendererComponent,
-                    IconComponent,
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
-                    IconComponent,
-                    IconComponent
                 ],
                 imports: [
                     CommonModule,