@coolon/angular-ui-powerups 1.16.0 → 1.18.0

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

@@ -13,7 +13,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, DelegatingFormListModel, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, Form, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, DelegatingFormListModel, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, OptionsHelper, MultipleSelectionModel, MutableListModel, Form, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
@@ -1376,7 +1376,7 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
     SelectHeaderCellRendererComponent = __decorate([
         Component({
             selector: 'aup-select-header-cell-renderer',
-            template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
+            template: "<mat-checkbox *ngIf=\"enableHeaderControls\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -1591,11 +1591,15 @@ var CustomTemplateColumnModel = /** @class */ (function (_super) {
 }(ColumnModel));
 var SelectionColumnModel = /** @class */ (function (_super) {
     __extends(SelectionColumnModel, _super);
-    function SelectionColumnModel(columnId, defaults, selectionModel) {
+    function SelectionColumnModel(columnId, defaults, selectionModel, options) {
         var _this = _super.call(this, columnId, defaults) || this;
+        _this.selectionModel = selectionModel;
+        var opts = OptionsHelper.for(options);
+        _this.selectOnRowClick = opts.get("selectOnRowClick", false);
         if (selectionModel instanceof MultipleSelectionModel) {
             _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
                 component.selectionModel = selectionModel;
+                component.enableHeaderControls = opts.get("headerControl", true);
             });
         }
         _this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, function (component, rowData) {
@@ -1607,6 +1611,11 @@ var SelectionColumnModel = /** @class */ (function (_super) {
     SelectionColumnModel.prototype.getDefaultHeaderText = function () {
         return '';
     };
+    SelectionColumnModel.prototype.onRowClick = function (row) {
+        if (this.selectOnRowClick) {
+            this.selectionModel.selectCommand.execute(row);
+        }
+    };
     return SelectionColumnModel;
 }(ColumnModel));
 
@@ -1732,8 +1741,10 @@ var TableModel = /** @class */ (function () {
     TableModel.prototype.pluckList = function (property) {
         return this.addColumn(new ListPropertyColumnModel(property, this));
     };
-    TableModel.prototype.addSelectionColumn = function (selectionModel) {
-        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+    TableModel.prototype.addSelectionColumn = function (selectionModel, options) {
+        assert.isNil(this.selectionColumnModel);
+        this.selectionColumnModel = new SelectionColumnModel('selection', this, selectionModel, options);
+        return this.addColumn(this.selectionColumnModel);
     };
     TableModel.prototype.addEditControls = function (saveCommand) {
         this.saveCommand = saveCommand;
@@ -1796,6 +1807,13 @@ var TableModel = /** @class */ (function () {
             });
         });
     };
+    TableModel.prototype.onRowClicked = function (row) {
+        var _a;
+        (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.onRowClick(row);
+    };
+    TableModel.prototype.isRowSelectionEnabled = function () {
+        return this.selectionColumnModel ? this.selectionColumnModel.selectOnRowClick : false;
+    };
     var TableModel_1;
     TableModel.ctorParameters = function () { return [
         { type: ListModel }
@@ -1854,6 +1872,12 @@ var TableComponent = /** @class */ (function (_super) {
             column.setTemplate(templateRef, viewContainer, fillCell, padChild);
         }
     };
+    TableComponent.prototype.onRowClicked = function (row) {
+        this.tableModel.onRowClicked(row);
+    };
+    TableComponent.prototype.isRowSelectionEnabled = function () {
+        return this.tableModel.isRowSelectionEnabled();
+    };
     __decorate([
         Input(),
         TrackExternal(),
@@ -1862,8 +1886,8 @@ var TableComponent = /** @class */ (function (_super) {
     TableComponent = __decorate([
         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;\"></tr>\n\n</table>\n",
-            styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
+            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}"]
         }),
         __metadata("design:paramtypes", [])
     ], TableComponent);
@@ -2323,11 +2347,21 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ActivityActionsComponent.prototype, "alignStretch", {
+        get: function () {
+            return this.align === 'stretch';
+        },
+        enumerable: true,
+        configurable: true
+    });
     ActivityActionsComponent.prototype.ngOnInit = function () {
     };
     ActivityActionsComponent.prototype.hasConfirmText = function () {
         return !___default.isEmpty(this.confirmText);
     };
+    ActivityActionsComponent.prototype.hasCancelText = function () {
+        return !___default.isEmpty(this.cancelText);
+    };
     __decorate([
         Input(),
         TrackExternal(),
@@ -2342,6 +2376,10 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
         TrackExternal(),
         __metadata("design:type", Command)
     ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ActivityActionsComponent.prototype, "cancelText", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -2351,11 +2389,16 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ActivityActionsComponent.prototype, "alignEnd", null);
+    __decorate([
+        HostBinding('class.align-stretch'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ActivityActionsComponent.prototype, "alignStretch", null);
     ActivityActionsComponent = __decorate([
         Component({
             selector: 'aup-activity-actions',
-            template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <aup-icon icon=\"mat:clear\"></aup-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <aup-icon icon=\"done\"></aup-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
+            template: "<button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n<button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <aup-icon icon=\"mat:clear\"></aup-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <aup-icon icon=\"done\"></aup-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.content{-ms-grid-row:1;-ms-grid-column:2}"]
         })
     ], ActivityActionsComponent);
     return ActivityActionsComponent;
@@ -3326,6 +3369,8 @@ var InteractionContextTriggerFor = /** @class */ (function (_super) {
         return _this;
     }
     InteractionContextTriggerFor.prototype.onEnter = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
         if (!this.aupInteractionContextTriggerFor.isActive()) {
             this.startActivity();
         }
@@ -3334,6 +3379,8 @@ var InteractionContextTriggerFor = /** @class */ (function (_super) {
         }
     };
     InteractionContextTriggerFor.prototype.onClick = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
         if (!this.aupInteractionContextTriggerFor.isActive()) {
             this.startActivity();
         }
@@ -3382,13 +3429,13 @@ var InteractionContextTriggerFor = /** @class */ (function (_super) {
         __metadata("design:type", Object)
     ], InteractionContextTriggerFor.prototype, "activityCancelled", void 0);
     __decorate([
-        HostListener('keyup.enter'),
+        HostListener('keyup.enter', ['$event']),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [KeyboardEvent]),
         __metadata("design:returntype", void 0)
     ], InteractionContextTriggerFor.prototype, "onEnter", null);
     __decorate([
-        HostListener('click'),
+        HostListener('click', ['$event']),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [MouseEvent]),
         __metadata("design:returntype", void 0)