@energycap/components 0.27.3 → 0.27.4

package/bundles/energycap-components.umd.js

@@ -6518,6 +6518,52 @@
     ];
     ErrorService.ctorParameters = function () { return []; };
 
+    var RowCountPipe = /** @class */ (function () {
+        function RowCountPipe(translateService) {
+            this.translateService = translateService;
+        }
+        /**
+         * Get the formatted row count for the results.
+         *
+         * Provide maxItemCount if the normal row count is needed.
+         * Provide pagingInfo if the paged row count is needed.
+         */
+        //Note that totalPagedItemCount is not necessarily equal to pagingInfo.pageSize since the last page could have less than pageSize rows.
+        RowCountPipe.prototype.transform = function (results, objectType, maxItemCount, pagingInfo) {
+            var translated = this.translateService.instant(objectType || 'results');
+            if (maxItemCount !== undefined) {
+                return this.getResultsCount(results, translated, maxItemCount);
+            }
+            else if (pagingInfo) {
+                return this.getPagedResultsCount(results, translated, pagingInfo);
+            }
+            return '';
+        };
+        RowCountPipe.prototype.getResultsCount = function (results, objectType, maxItemCount) {
+            // If the filtered results count of rows is greater than the maximum number
+            // of results we want to show, we have already pared the results down,
+            // so tell user we are displaying the first `maxItemCount` results out of the total
+            // count of filtered results.
+            if (results.totalItems > maxItemCount) {
+                return maxItemCount + " " + this.translateService.instant('of') + " " + results.totalItems;
+            }
+            return results.totalItems + " " + objectType;
+        };
+        RowCountPipe.prototype.getPagedResultsCount = function (results, objectType, pagingInfo) {
+            var prefix = "" + (pagingInfo.skip + 1) + (results.totalItems > 1 ? "-" + (pagingInfo.skip + results.totalItems) + " " : ' ');
+            return prefix + (this.translateService.instant('of') + " " + results.totalItemsBeforePaging + " " + objectType);
+        };
+        return RowCountPipe;
+    }());
+    RowCountPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'rowCount'
+                },] }
+    ];
+    RowCountPipe.ctorParameters = function () { return [
+        { type: i1.TranslateService }
+    ]; };
+
     var TablePaginationComponent = /** @class */ (function () {
         function TablePaginationComponent(el) {
             this.el = el;
@@ -6668,52 +6714,6 @@
         pageChanged: [{ type: i0.Output }]
     };
 
-    var RowCountPipe = /** @class */ (function () {
-        function RowCountPipe(translateService) {
-            this.translateService = translateService;
-        }
-        /**
-         * Get the formatted row count for the results.
-         *
-         * Provide maxItemCount if the normal row count is needed.
-         * Provide pagingInfo if the paged row count is needed.
-         */
-        //Note that totalPagedItemCount is not necessarily equal to pagingInfo.pageSize since the last page could have less than pageSize rows.
-        RowCountPipe.prototype.transform = function (results, objectType, maxItemCount, pagingInfo) {
-            var translated = this.translateService.instant(objectType || 'results');
-            if (maxItemCount !== undefined) {
-                return this.getResultsCount(results, translated, maxItemCount);
-            }
-            else if (pagingInfo) {
-                return this.getPagedResultsCount(results, translated, pagingInfo);
-            }
-            return '';
-        };
-        RowCountPipe.prototype.getResultsCount = function (results, objectType, maxItemCount) {
-            // If the filtered results count of rows is greater than the maximum number
-            // of results we want to show, we have already pared the results down,
-            // so tell user we are displaying the first `maxItemCount` results out of the total
-            // count of filtered results.
-            if (results.totalItems > maxItemCount) {
-                return maxItemCount + " " + this.translateService.instant('of') + " " + results.totalItems;
-            }
-            return results.totalItems + " " + objectType;
-        };
-        RowCountPipe.prototype.getPagedResultsCount = function (results, objectType, pagingInfo) {
-            var prefix = "" + (pagingInfo.skip + 1) + (results.totalItems > 1 ? "-" + (pagingInfo.skip + results.totalItems) + " " : ' ');
-            return prefix + (this.translateService.instant('of') + " " + results.totalItemsBeforePaging + " " + objectType);
-        };
-        return RowCountPipe;
-    }());
-    RowCountPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'rowCount'
-                },] }
-    ];
-    RowCountPipe.ctorParameters = function () { return [
-        { type: i1.TranslateService }
-    ]; };
-
     var SearchableTableComponent = /** @class */ (function () {
         function SearchableTableComponent(errorService, translateService, rowCountPipe) {
             this.errorService = errorService;
@@ -6828,6 +6828,13 @@
             enumerable: false,
             configurable: true
         });
+        SearchableTableComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.pageSize && !changes.pageSize.firstChange && this.pageable) {
+                // If the pageSize changes, reset to the first page and refresh.
+                this.pageInfo = TablePaginationComponent.getPagingInfo(1, this.pageSize);
+                this.onPageChange(this.pageInfo);
+            }
+        };
         SearchableTableComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.status.setStatus('pending', 'Loading');
@@ -6950,8 +6957,8 @@
     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         [class.has-mask]=\"status.status !== 'hasData'\"\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}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}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}.card.has-mask{min-height:15rem}"]
+                    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=\"d-flex flex-column flex-grow\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate, 'bg-body': customContentTemplate}\"\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  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n    If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n    and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\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  </ng-template>\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!\"\r\n          class=\"d-flex flex-shrink align-items-center\"\r\n          [class.border-top]=\"!customContentTemplate\">\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          [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\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}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}footer{font-size:.75rem;line-height:1rem}footer.has-results{color:rgba(26,26,35,.38);text-align:right}.card.has-mask{min-height:15rem}"]
                 },] }
     ];
     SearchableTableComponent.ctorParameters = function () { return [
@@ -6992,7 +6999,8 @@
         selectionToolbarTemplate: [{ type: i0.Input }],
         resizableColumns: [{ type: i0.ContentChildren, args: [ResizableColumnComponent, { descendants: true },] }],
         additionalCountText: [{ type: i0.Input }],
-        selectable: [{ type: i0.Input }]
+        selectable: [{ type: i0.Input }],
+        customContentTemplate: [{ type: i0.Input }]
     };
 
     var TableDetailRowComponent = /** @class */ (function () {