@coolon/angular-ui-powerups 1.18.0 → 1.19.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, OptionsHelper, 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, MultipleSelectionModel, MutableListModel, Form, DelegatingCommand, 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';
@@ -406,7 +406,7 @@ var CardContainerComponent = /** @class */ (function (_super) {
         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);
@@ -1391,6 +1391,7 @@ var ColumnModel = /** @class */ (function () {
     function ColumnModel(columnId, defaults) {
         this.columnId = columnId;
         this.defaults = defaults;
+        this._selectRowOnClick = undefined;
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
             component.headerText = column.getHeaderText();
         });
@@ -1447,6 +1448,19 @@ var ColumnModel = /** @class */ (function () {
     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([
         Memoize(),
         __metadata("design:type", Function),
@@ -1498,6 +1512,9 @@ var PropertyColumnModel = /** @class */ (function (_super) {
         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) {
@@ -1537,6 +1554,9 @@ var ListPropertyColumnModel = /** @class */ (function (_super) {
         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) {
@@ -1554,6 +1574,9 @@ var CustomValueColumnModel = /** @class */ (function (_super) {
         }));
         return this;
     };
+    CustomValueColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+        return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+    };
     return CustomValueColumnModel;
 }(ColumnModel));
 var EditorControlColumnModel = /** @class */ (function (_super) {
@@ -1587,19 +1610,22 @@ var CustomTemplateColumnModel = /** @class */ (function (_super) {
     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 = OptionsHelper.for(options);
-        _this.selectOnRowClick = opts.get("selectOnRowClick", false);
+        _this._enableHeaderControls = true;
+        _this.selectOnRowClick(false);
         if (selectionModel instanceof 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) {
@@ -1611,10 +1637,20 @@ var SelectionColumnModel = /** @class */ (function (_super) {
     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));
@@ -1708,6 +1744,7 @@ var TableModel = /** @class */ (function () {
         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) {
@@ -1741,9 +1778,9 @@ var TableModel = /** @class */ (function () {
     TableModel.prototype.pluckList = function (property) {
         return this.addColumn(new ListPropertyColumnModel(property, this));
     };
-    TableModel.prototype.addSelectionColumn = function (selectionModel, options) {
+    TableModel.prototype.addSelectionColumn = function (selectionModel) {
         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) {
@@ -1807,12 +1844,19 @@ var TableModel = /** @class */ (function () {
             });
         });
     };
-    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 [
@@ -1872,11 +1916,10 @@ 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();
+    TableComponent.prototype.onCellClicked = function (columnModel, row) {
+        if (this.tableModel.isRowSelectionEnabledFor(columnModel)) {
+            this.tableModel.selectRow(row);
+        }
     };
     __decorate([
         Input(),
@@ -1886,8 +1929,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;\" (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);
@@ -2362,6 +2405,12 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
     ActivityActionsComponent.prototype.hasCancelText = function () {
         return !___default.isEmpty(this.cancelText);
     };
+    ActivityActionsComponent.prototype.hasConfirmCommand = function () {
+        return DelegatingCommand.hasDelegate(this.confirmCommand);
+    };
+    ActivityActionsComponent.prototype.hasCancelCommand = function () {
+        return DelegatingCommand.hasDelegate(this.cancelCommand);
+    };
     __decorate([
         Input(),
         TrackExternal(),
@@ -2397,7 +2446,7 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
     ActivityActionsComponent = __decorate([
         Component({
             selector: 'aup-activity-actions',
-            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",
+            template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n    <aup-icon icon=\"mat:clear\"></aup-icon>\n  </button>\n  <button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n    <aup-icon icon=\"mat:done\"></aup-icon>\n  </button>\n  <button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n</ng-container>\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);