@energycap/components 0.26.3 → 0.26.4-ECAP-11517-disable-selectable-table-rows.20211115-1649

package/fesm2015/energycap-components.js

@@ -402,6 +402,28 @@ ResizableTableDirective.propDecorators = {
     resizableColumns: [{ type: Input }]
 };
 
+class ResizableColumnComponent {
+    constructor(el) {
+        this.el = el;
+        this.onResize = new EventEmitter();
+    }
+    emitWidth(width) {
+        this.onResize.emit(width);
+    }
+}
+ResizableColumnComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'th.is-resizable',
+                template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n"
+            },] }
+];
+ResizableColumnComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+ResizableColumnComponent.propDecorators = {
+    onResize: [{ type: Output }]
+};
+
 class TableMasterRowComponent {
     constructor(renderer, el) {
         this.renderer = renderer;
@@ -572,6 +594,7 @@ class TableSelectableRowComponent {
     constructor() {
         /**The ID root to use for the checkbox and table cell */
         this.id = '';
+        this._enabled = true;
         /*Required for all rows. The row index this component represents, to allow it to know how to handle shift+clicks.
           Defaults to -1 which will cause the directive to behave as a header row*/
         this.rowIndex = -1;
@@ -590,6 +613,9 @@ class TableSelectableRowComponent {
         /**Sends an event when the component is destroyed so that it can unsubscribe from any observables */
         this.destroyed = new Subject();
     }
+    /** Disables the selection functionality when false */
+    set enabled(value) { this._enabled = value !== false; }
+    get enabled() { return this._enabled; }
     /**Validate and populate the context as the table is dynamically built. Because the context is shared between the
    * header and each of the rows, changes to it can be used to determine what is happening and hook up the correct
    * subscriptions for selectAll. The user can provide an existing formArray for the rows and form control for the header,
@@ -619,6 +645,9 @@ class TableSelectableRowComponent {
             this.formControl = this.context.rowCheckboxes.at(this.rowIndex);
             this.checkboxAttributeID = `${this.id}_row${this.rowIndex}_ecCheckbox`;
         }
+        if (changes.enabled && !this.enabled) {
+            this.formControl.setValue(false);
+        }
     }
     /** Tell the header checkbox to refresh the selectAll subscription because a row was removed*/
     ngOnDestroy() {
@@ -637,7 +666,7 @@ class TableSelectableRowComponent {
     */
     rowClicked(event) {
         var _a, _b, _c;
-        if (!this.isHeader) {
+        if (!this.isHeader && this.enabled) {
             let targetEl = event === null || event === void 0 ? void 0 : event.target;
             let isCheckboxClick = (_c = (_b = (_a = targetEl === null || targetEl === void 0 ? void 0 : targetEl.classList) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.includes('row-checkbox');
             //normally clicking on a row checks only that row and unchecks everything else. 
@@ -711,12 +740,13 @@ class TableSelectableRowComponent {
 TableSelectableRowComponent.decorators = [
     { type: Component, args: [{
                 selector: '[ecTableSelectableRow]',
-                template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n<th *ngIf=\"isHeader\"\r\n    class=\"checkbox\"\r\n    [ecTableLockedColumn]=\"lockedColOptions\">\r\n  <ec-checkbox id=\"{{id}}_selectAll\"\r\n               class=\"m-0\"\r\n               *ngIf=\"context?.selectAllCheckbox\"\r\n               [formModel]=\"context?.selectAllCheckbox\"\r\n               [dependentCheckboxesGroup]=\"dependentCheckboxesReference\">\r\n  </ec-checkbox>\r\n</th>\r\n<td *ngIf=\"!isHeader && formControl\" \r\n    class=\"checkbox\"\r\n    [ecTableLockedColumn]=\"lockedColOptions\">\r\n  <ec-checkbox  id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n                [attr.id]=\"checkboxAttributeID\"\r\n                class=\"m-0 row-checkbox\"\r\n                [formModel]=\"formControl\">\r\n  </ec-checkbox>\r\n</td>\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>\r\n",
-                styles: [":host:not(.is-header){cursor:pointer}:host .checkbox{padding-left:1px;padding-right:1px;width:1.125rem}:host .checkbox:first-child{padding-left:.5rem;width:1.5625rem}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}"]
+                template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n<ng-container *ngIf=\"enabled\">\r\n  <th *ngIf=\"isHeader\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_selectAll\"\r\n                 class=\"m-0\"\r\n                 *ngIf=\"context?.selectAllCheckbox\"\r\n                 [formModel]=\"context?.selectAllCheckbox\"\r\n                 [dependentCheckboxesGroup]=\"dependentCheckboxesReference\">\r\n    </ec-checkbox>\r\n  </th>\r\n  <td *ngIf=\"!isHeader && formControl\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n                 [attr.id]=\"checkboxAttributeID\"\r\n                 class=\"m-0 row-checkbox\"\r\n                 [formModel]=\"formControl\">\r\n    </ec-checkbox>\r\n  </td>\r\n</ng-container>\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>",
+                styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:1px;padding-right:1px;width:1.125rem}:host .checkbox:first-child{padding-left:.5rem;width:1.5625rem}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}"]
             },] }
 ];
 TableSelectableRowComponent.propDecorators = {
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
+    enabled: [{ type: HostBinding, args: ['class.is-enabled',] }, { type: Input, args: ['ecTableSelectableRow',] }],
     context: [{ type: Input, args: ['selectionContext',] }],
     rowIndex: [{ type: Input }],
     lockedColOptions: [{ type: Input }],
@@ -725,28 +755,6 @@ TableSelectableRowComponent.propDecorators = {
     rowClicked: [{ type: HostListener, args: ['click', ['$event'],] }]
 };
 
-class ResizableColumnComponent {
-    constructor(el) {
-        this.el = el;
-        this.onResize = new EventEmitter();
-    }
-    emitWidth(width) {
-        this.onResize.emit(width);
-    }
-}
-ResizableColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'th.is-resizable',
-                template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n"
-            },] }
-];
-ResizableColumnComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-ResizableColumnComponent.propDecorators = {
-    onResize: [{ type: Output }]
-};
-
 class TableComponent {
     constructor(renderer, el) {
         this.renderer = renderer;
@@ -821,11 +829,6 @@ class TableComponent {
             }
         }
     }
-    ngOnInit() {
-        if (this.selectionContext) {
-            this.selectable = true;
-        }
-    }
     ngAfterContentInit() {
         this.hasMasterDetailRows = !!this.masterRows.length;
         this.masterRows.changes.pipe(takeUntil(this.destroyed)).subscribe(() => {
@@ -945,7 +948,7 @@ TableComponent.propDecorators = {
     sortable: [{ type: HostBinding, args: ['class.is-sortable',] }, { type: Input }],
     selectionContext: [{ type: Input }],
     selectionToolbarTemplate: [{ type: Input }],
-    selectable: [{ type: HostBinding, args: ['class.is-selectable',] }],
+    selectable: [{ type: HostBinding, args: ['class.is-selectable',] }, { type: Input }],
     isForm: [{ type: HostBinding, args: ['class.is-form-table',] }, { type: Input }],
     sort: [{ type: Input }],
     sortChange: [{ type: Output }],
@@ -5518,8 +5521,7 @@ class SearchableTableComponent {
         this.sortable = false;
         this.autofocus = false;
         /**Set to a space-separated set of strings that should be added to the ec-table class attribute
-         * this allows finer control over styling, including the ability to turn on selectable highlights
-         * by including is-selectable
+         * this allows finer control over styling.
          */
         this.tableClasses = '';
         /** Emits when table sort has changed */
@@ -5594,6 +5596,8 @@ class SearchableTableComponent {
         this.searchboxReadonly = false;
         /** Optional text to add to the results count in the table footer. This text will be added after the count and objectType. */
         this.additionalCountText = '';
+        /** Enables table row selection and row highlighting styles when true */
+        this.selectable = false;
         /**
          * Text displayed in the footer.
          * Sometimes `noDataMessage`, sometimes `noSearchResultsMessage`
@@ -5735,7 +5739,7 @@ class SearchableTableComponent {
 SearchableTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ec-searchable-table',
-                template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"card m-0 d-flex flex-column bg-content\"\r\n         [class.is-translucent]=\"status.status !== 'error'\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ec-table id=\"{{id}}_table\"\r\n            class=\"flex-shrink-max {{tableClasses}}\"\r\n            [class.is-fixed]=\"tableLayoutFixed\"\r\n            [sortable]=\"sortable\"\r\n            [sort]=\"sort\"\r\n            (sortChange)=\"onSortChange($event)\"\r\n            [resizable]=\"resizable\"\r\n            [scrollable]=\"true\"\r\n            [selectionContext]=\"selectionContext\"\r\n            [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n            [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </ec-table>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\" class=\"d-flex flex-shrink align-items-center border-top\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto mr-2 font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"p-2 d-flex\"\r\n          [class.has-results]=\"searchResults?.items?.length\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>",
+                template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"card m-0 d-flex flex-column bg-content\"\r\n         [class.is-translucent]=\"status.status !== 'error'\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ec-table id=\"{{id}}_table\"\r\n            class=\"flex-shrink-max {{tableClasses}}\"\r\n            [class.is-fixed]=\"tableLayoutFixed\"\r\n            [sortable]=\"sortable\"\r\n            [sort]=\"sort\"\r\n            (sortChange)=\"onSortChange($event)\"\r\n            [resizable]=\"resizable\"\r\n            [scrollable]=\"true\"\r\n            [selectable]=\"selectable\"\r\n            [selectionContext]=\"selectionContext\"\r\n            [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n            [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </ec-table>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\" class=\"d-flex flex-shrink align-items-center border-top\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto mr-2 font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"p-2 d-flex\"\r\n          [class.has-results]=\"searchResults?.items?.length\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>",
                 styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:flex;flex:1 1;flex-direction:column;min-height:0}footer{font-size:.75rem;line-height:1rem}footer.has-results{border-top:1px solid rgba(26,26,35,.18);color:rgba(26,26,35,.38);text-align:right}"]
             },] }
 ];
@@ -5776,7 +5780,8 @@ SearchableTableComponent.propDecorators = {
     selectionContext: [{ type: Input }],
     selectionToolbarTemplate: [{ type: Input }],
     resizableColumns: [{ type: ContentChildren, args: [ResizableColumnComponent, { descendants: true },] }],
-    additionalCountText: [{ type: Input }]
+    additionalCountText: [{ type: Input }],
+    selectable: [{ type: Input }]
 };
 
 /**
@@ -6989,7 +6994,7 @@ class ToastComponent {
 ToastComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ec-toast',
-                template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\r\n           [type]=\"toastItem?.type\"\r\n           bannerStyle=\"toast\"\r\n           [customIcon]=\"toastItem?.icon\"\r\n           [showCloseBtn]=\"toastItem?.dismissible\"\r\n           [autoHideOnClose]=\"false\"\r\n           (closed)=\"closeClicked()\">\r\n  <div class=\"d-flex\">\r\n    <p id=\"{{toastItem?.id}}_message\"\r\n       class=\"mb-0\">{{toastItem?.message}}</p>\r\n    <a id=\"{{toastItem?.id}}_action\"\r\n       *ngIf=\"toastItem?.action && toastItem?.actionLabel\"\r\n       class=\"text-link ml-2\"\r\n       (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</a>\r\n  </div>\r\n</ec-banner>",
+                template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\r\n           [type]=\"toastItem?.type\"\r\n           bannerStyle=\"toast\"\r\n           [customIcon]=\"toastItem?.icon\"\r\n           [showCloseBtn]=\"toastItem?.dismissible\"\r\n           [autoHideOnClose]=\"false\"\r\n           (closed)=\"closeClicked()\">\r\n  <div class=\"d-flex\">\r\n    <div id=\"{{toastItem?.id}}_message\"\r\n         [innerHTML]=\"toastItem?.message | translate\"></div>\r\n    <a id=\"{{toastItem?.id}}_action\"\r\n       *ngIf=\"toastItem?.action && toastItem?.actionLabel\"\r\n       class=\"text-link ml-2\"\r\n       (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</a>\r\n  </div>\r\n</ec-banner>",
                 styles: [":host{bottom:0;display:block;left:50%;position:fixed;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration,.25s);transition-timing-function:ease-in;z-index:70}:host.is-open{transform:translate(-50%,calc(var(--toast-bottom, 0rem)*-1 - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}"]
             },] }
 ];