@energycap/components 0.26.6 → 0.26.7-ECAP-11643-Locked-Column-OnChanges.20211202-1327

package/bundles/energycap-components.umd.js

@@ -725,6 +725,29 @@
         resizableColumns: [{ type: i0.Input }]
     };
 
+    var ResizableColumnComponent = /** @class */ (function () {
+        function ResizableColumnComponent(el) {
+            this.el = el;
+            this.onResize = new i0.EventEmitter();
+        }
+        ResizableColumnComponent.prototype.emitWidth = function (width) {
+            this.onResize.emit(width);
+        };
+        return ResizableColumnComponent;
+    }());
+    ResizableColumnComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    ResizableColumnComponent.propDecorators = {
+        onResize: [{ type: i0.Output }]
+    };
+
     var TableMasterRowComponent = /** @class */ (function () {
         function TableMasterRowComponent(renderer, el) {
             this.renderer = renderer;
@@ -868,29 +891,6 @@
         detailRowTemplate: [{ type: i0.ViewChild, args: ['detailRow', { read: i0.TemplateRef, static: true },] }]
     };
 
-    var ResizableColumnComponent = /** @class */ (function () {
-        function ResizableColumnComponent(el) {
-            this.el = el;
-            this.onResize = new i0.EventEmitter();
-        }
-        ResizableColumnComponent.prototype.emitWidth = function (width) {
-            this.onResize.emit(width);
-        };
-        return ResizableColumnComponent;
-    }());
-    ResizableColumnComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    ResizableColumnComponent.propDecorators = {
-        onResize: [{ type: i0.Output }]
-    };
-
     var TableComponent = /** @class */ (function () {
         function TableComponent(renderer, el) {
             this.renderer = renderer;
@@ -965,11 +965,6 @@
                 }
             }
         };
-        TableComponent.prototype.ngOnInit = function () {
-            if (this.selectionContext) {
-                this.selectable = true;
-            }
-        };
         TableComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
             this.hasMasterDetailRows = !!this.masterRows.length;
@@ -1093,7 +1088,7 @@
         sortable: [{ type: i0.HostBinding, args: ['class.is-sortable',] }, { type: i0.Input }],
         selectionContext: [{ type: i0.Input }],
         selectionToolbarTemplate: [{ type: i0.Input }],
-        selectable: [{ type: i0.HostBinding, args: ['class.is-selectable',] }],
+        selectable: [{ type: i0.HostBinding, args: ['class.is-selectable',] }, { type: i0.Input }],
         isForm: [{ type: i0.HostBinding, args: ['class.is-form-table',] }, { type: i0.Input }],
         sort: [{ type: i0.Input }],
         sortChange: [{ type: i0.Output }],
@@ -5867,8 +5862,7 @@
             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 */
@@ -5943,6 +5937,8 @@
             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`
@@ -6092,7 +6088,7 @@
     SearchableTableComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -6133,7 +6129,8 @@
         selectionContext: [{ type: i0.Input }],
         selectionToolbarTemplate: [{ type: i0.Input }],
         resizableColumns: [{ type: i0.ContentChildren, args: [ResizableColumnComponent, { descendants: true },] }],
-        additionalCountText: [{ type: i0.Input }]
+        additionalCountText: [{ type: i0.Input }],
+        selectable: [{ type: i0.Input }]
     };
 
     /**
@@ -6351,6 +6348,14 @@
             if (this.el.nativeElement.attributes.getNamedItem('colspan')) {
                 throw new Error("Failed to lock table column because it had a 'colspan'. Locked columns do not currently support THs or TDs with a 'colspan'. Remove the 'colspan' attribute from table columns that have the [ecTableLockedColumn] component.");
             }
+            this.updatePositionAndBorder();
+        };
+        TableLockedColumnComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.options) {
+                this.updatePositionAndBorder();
+            }
+        };
+        TableLockedColumnComponent.prototype.updatePositionAndBorder = function () {
             if (typeof this.options.left === 'number' && typeof this.options.right === 'number') {
                 throw new Error("Failed to lock table column because it had a value for both left and right. Only left or right can have a value.");
             }
@@ -6796,6 +6801,7 @@
         function TableSelectableRowComponent() {
             /**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;
@@ -6814,6 +6820,13 @@
             /**Sends an event when the component is destroyed so that it can unsubscribe from any observables */
             this.destroyed = new rxjs.Subject();
         }
+        Object.defineProperty(TableSelectableRowComponent.prototype, "enabled", {
+            get: function () { return this._enabled; },
+            /** Disables the selection functionality when false */
+            set: function (value) { this._enabled = value !== false; },
+            enumerable: false,
+            configurable: true
+        });
         /**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,
@@ -6839,10 +6852,14 @@
          * recreated from scratch. Re-capture the correct form control to keep everything in sync
          */
         TableSelectableRowComponent.prototype.ngOnChanges = function (changes) {
+            var _a;
             if (changes.rowIndex && !this.isHeader) {
                 this.formControl = this.context.rowCheckboxes.at(this.rowIndex);
                 this.checkboxAttributeID = this.id + "_row" + this.rowIndex + "_ecCheckbox";
             }
+            if (changes.enabled && !this.enabled && ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) === true) {
+                this.formControl.setValue(false);
+            }
         };
         /** Tell the header checkbox to refresh the selectAll subscription because a row was removed*/
         TableSelectableRowComponent.prototype.ngOnDestroy = function () {
@@ -6862,7 +6879,7 @@
         */
         TableSelectableRowComponent.prototype.rowClicked = function (event) {
             var _a, _b, _c;
-            if (!this.isHeader) {
+            if (!this.isHeader && this.enabled) {
                 var targetEl = event === null || event === void 0 ? void 0 : event.target;
                 var 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. 
@@ -6938,12 +6955,13 @@
     TableSelectableRowComponent.decorators = [
         { type: i0.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: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
+        enabled: [{ type: i0.HostBinding, args: ['class.is-enabled',] }, { type: i0.Input, args: ['ecTableSelectableRow',] }],
         context: [{ type: i0.Input, args: ['selectionContext',] }],
         rowIndex: [{ type: i0.Input }],
         lockedColOptions: [{ type: i0.Input }],
@@ -7627,7 +7645,7 @@
     ToastComponent.decorators = [
         { type: i0.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 | translate}}</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)}"]
                 },] }
     ];