@coolon/angular-ui-powerups 1.18.0 → 1.18.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.18.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.18.0...v1.18.1) (2020-06-24)
+
+
+### Bug Fixes
+
+* improved row selection and added opt in and opt out ([42e6419](https://bitbucket.org/coolon/angular-ui-powerups/commit/42e6419a2315bb22e1936b3d05fd80c34d813a72))
+
 ## [1.18.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.17.0...v1.18.0) (2020-06-23)
 
 

package/assets/table.scss

@@ -1,10 +1,20 @@
 aup-table {
   --default-column-gap: var(--column-gap, 24px); // material design table column padding
+  --resolved-row-hover-background-color: var(--row-hover-background-color, rgba(0, 0, 0, 0.05));
 
   .mat-table {
+
     th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
       padding-left: 0;
     }
+
+    tr.enable-hover:hover {
+      background-color: var(--resolved-row-hover-background-color);
+    }
+
+    td.enable-cursor {
+      cursor: pointer;
+    }
   }
 
   aup-table-cell-renderer, aup-table-header-cell-renderer {
@@ -30,10 +40,11 @@ aup-table {
       justify-content: stretch;
       padding-left: 0 !important;
     }
+
     &.padChild {
       > *:first-child {
         padding-left: var(--default-column-gap);
-        flex:1;
+        flex: 1;
       }
     }
   }

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

@@ -578,7 +578,7 @@
             core.Component({
                 selector: 'aup-card-container',
                 template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-icon icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
             }),
             __metadata("design:paramtypes", [])
         ], CardContainerComponent);
@@ -1563,6 +1563,7 @@
         function ColumnModel(columnId, defaults) {
             this.columnId = columnId;
             this.defaults = defaults;
+            this._selectRowOnClick = undefined;
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
                 component.headerText = column.getHeaderText();
             });
@@ -1619,6 +1620,19 @@
         ColumnModel.prototype.updatePortalContent = function (host) {
             this._cellRendererPortalRef.pushState(host);
         };
+        ColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            this._selectRowOnClick = selectOnRowClick;
+            return this;
+        };
+        ColumnModel.prototype.isRowSelectionEnabled = function () {
+            return this._selectRowOnClick;
+        };
+        ColumnModel.prototype.isRowSelectionExplicitlyEnabled = function () {
+            return this._selectRowOnClick === true;
+        };
+        ColumnModel.prototype.isRowSelectionExplicitlyDisabled = function () {
+            return this._selectRowOnClick === false;
+        };
         __decorate([
             src.Memoize(),
             __metadata("design:type", Function),
@@ -1670,6 +1684,9 @@
             this._format = formatter;
             return this;
         };
+        PropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
         return PropertyColumnModel;
     }(ColumnModel));
     var ListPropertyColumnModel = /** @class */ (function (_super) {
@@ -1709,6 +1726,9 @@
             this._format = formatter;
             return this;
         };
+        ListPropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
         return ListPropertyColumnModel;
     }(ColumnModel));
     var CustomValueColumnModel = /** @class */ (function (_super) {
@@ -1726,6 +1746,9 @@
             }));
             return this;
         };
+        CustomValueColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
         return CustomValueColumnModel;
     }(ColumnModel));
     var EditorControlColumnModel = /** @class */ (function (_super) {
@@ -1759,19 +1782,22 @@
         CustomTemplateColumnModel.prototype.setTemplate = function (templateRef, viewContainer, fillCell, padChild) {
             this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
         };
+        CustomTemplateColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
         return CustomTemplateColumnModel;
     }(ColumnModel));
     var SelectionColumnModel = /** @class */ (function (_super) {
         __extends(SelectionColumnModel, _super);
-        function SelectionColumnModel(columnId, defaults, selectionModel, options) {
+        function SelectionColumnModel(columnId, defaults, selectionModel) {
             var _this = _super.call(this, columnId, defaults) || this;
             _this.selectionModel = selectionModel;
-            var opts = pectin.OptionsHelper.for(options);
-            _this.selectOnRowClick = opts.get("selectOnRowClick", false);
+            _this._enableHeaderControls = true;
+            _this.selectOnRowClick(false);
             if (selectionModel instanceof pectin.MultipleSelectionModel) {
                 _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
                     component.selectionModel = selectionModel;
-                    component.enableHeaderControls = opts.get("headerControl", true);
+                    component.enableHeaderControls = _this._enableHeaderControls;
                 });
             }
             _this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, function (component, rowData) {
@@ -1783,10 +1809,20 @@
         SelectionColumnModel.prototype.getDefaultHeaderText = function () {
             return '';
         };
-        SelectionColumnModel.prototype.onRowClick = function (row) {
-            if (this.selectOnRowClick) {
-                this.selectionModel.selectCommand.execute(row);
-            }
+        SelectionColumnModel.prototype.isRowSelectionEnabledByDefault = function () {
+            return this.isRowSelectionExplicitlyEnabled();
+        };
+        SelectionColumnModel.prototype.selectOnRowClick = function (selectOnRowClick) {
+            // note we're using different method name as the selection column treats this
+            // state as the default for all columns.
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
+        SelectionColumnModel.prototype.enableHeaderControls = function (enable) {
+            this._enableHeaderControls = enable;
+            return this;
+        };
+        SelectionColumnModel.prototype.selectRow = function (row) {
+            this.selectionModel.selectCommand.execute(row);
         };
         return SelectionColumnModel;
     }(ColumnModel));
@@ -1880,6 +1916,7 @@
             this.editing = chain(this._editorSessions).count().isGreaterThan(0);
             this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
             this.firstEditableColumn = chain(this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
+            this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
         }
         TableModel_1 = TableModel;
         TableModel.fromList = function (sourceOfTruth, builder) {
@@ -1913,9 +1950,9 @@
         TableModel.prototype.pluckList = function (property) {
             return this.addColumn(new ListPropertyColumnModel(property, this));
         };
-        TableModel.prototype.addSelectionColumn = function (selectionModel, options) {
+        TableModel.prototype.addSelectionColumn = function (selectionModel) {
             pectin.assert.isNil(this.selectionColumnModel);
-            this.selectionColumnModel = new SelectionColumnModel('selection', this, selectionModel, options);
+            this.selectionColumnModel = new SelectionColumnModel('selection', this, selectionModel);
             return this.addColumn(this.selectionColumnModel);
         };
         TableModel.prototype.addEditControls = function (saveCommand) {
@@ -1979,12 +2016,19 @@
                 });
             });
         };
-        TableModel.prototype.onRowClicked = function (row) {
+        TableModel.prototype.isRowSelectionEnabledFor = function (column) {
             var _a;
-            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.onRowClick(row);
+            return this.selectionColumnModel && ((_a = column.isRowSelectionEnabled()) !== null && _a !== void 0 ? _a : this.isRowSelectionEnabledByDefault());
+        };
+        TableModel.prototype.isRowSelectionEnabledByDefault = function () {
+            return this.selectionColumnModel.isRowSelectionEnabledByDefault();
         };
         TableModel.prototype.isRowSelectionEnabled = function () {
-            return this.selectionColumnModel ? this.selectionColumnModel.selectOnRowClick : false;
+            return this.hasColumnsWithRowSelectionExplicitlyEnabled.value || this.isRowSelectionEnabledByDefault();
+        };
+        TableModel.prototype.selectRow = function (row) {
+            var _a;
+            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
         };
         var TableModel_1;
         TableModel.ctorParameters = function () { return [
@@ -2044,11 +2088,10 @@
                 column.setTemplate(templateRef, viewContainer, fillCell, padChild);
             }
         };
-        TableComponent.prototype.onRowClicked = function (row) {
-            this.tableModel.onRowClicked(row);
-        };
-        TableComponent.prototype.isRowSelectionEnabled = function () {
-            return this.tableModel.isRowSelectionEnabled();
+        TableComponent.prototype.onCellClicked = function (columnModel, row) {
+            if (this.tableModel.isRowSelectionEnabledFor(columnModel)) {
+                this.tableModel.selectRow(row);
+            }
         };
         __decorate([
             core.Input(),
@@ -2058,8 +2101,8 @@
         TableComponent = __decorate([
             core.Component({
                 selector: 'aup-table',
-                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\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;\" (click)=\"onRowClicked(row)\" [class.select-row-on-click]=\"isRowSelectionEnabled()\"></tr>\n\n</table>\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}:host table tr.select-row-on-click td{cursor:pointer}"]
+                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\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;\" [class.enable-hover]=\"tableModel.isRowSelectionEnabled()\"></tr>\n\n</table>\n",
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
         ], TableComponent);