@energycap/components 0.27.1 → 0.27.2-ECAPID-379-searchable-table-card-view.20220118-1509

package/bundles/energycap-components.umd.js

@@ -6748,6 +6748,8 @@
             this.additionalCountText = '';
             /** Enables table row selection and row highlighting styles when true */
             this.selectable = false;
+            /** When false, removes the card styles from around the content. Only set to false when providing a customContentTemplate. Default is true. */
+            this.isCardContent = true;
             /**
              * Text displayed in the footer.
              * Sometimes `noDataMessage`, sometimes `noSearchResultsMessage`
@@ -6897,8 +6899,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\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': isCardContent, 'bg-body': !isCardContent}\"\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]=\"isCardContent\">\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 && isCardContent}\">\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 [
@@ -6939,7 +6941,9 @@
         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 }],
+        isCardContent: [{ type: i0.Input }]
     };
 
     var TableDetailRowComponent = /** @class */ (function () {
@@ -8132,6 +8136,51 @@
         { type: UserPreferenceService }
     ]; };
 
+    var RelativeDatePipe = /** @class */ (function () {
+        function RelativeDatePipe(dateDisplayPipe, timeDisplayPipe, translateService) {
+            this.dateDisplayPipe = dateDisplayPipe;
+            this.timeDisplayPipe = timeDisplayPipe;
+            this.translateService = translateService;
+        }
+        /**
+         * If dateOnly is true, returns timeSelected formatted according to the user's date preference.
+         * If timeOnly is true, returns timeSelected formatted according to the user's time preference.
+         * If any of todayLabel, yesterdayLabel is supplied, use the supplied label.
+         * If dateOnly and timeOnly are both false, returns timeSelected formatted according to the user's date plus time preference.
+         */
+        RelativeDatePipe.prototype.transform = function (timeSelected, options) {
+            var selected = moment__default['default'](timeSelected);
+            var today = moment__default['default']();
+            var yesterday = moment__default['default']().subtract(1, 'day');
+            var timeDisplay = (options === null || options === void 0 ? void 0 : options.dateOnly) ? "" : " " + this.timeDisplayPipe.transform(timeSelected);
+            var displayValue = null;
+            if (selected.isSame(today, 'day') && !(options === null || options === void 0 ? void 0 : options.showTimeForToday)) {
+                displayValue = this.translateService.instant((options === null || options === void 0 ? void 0 : options.todayLabel) ? options === null || options === void 0 ? void 0 : options.todayLabel : 'today');
+            }
+            else if (selected.isSame(today, 'day') && (options === null || options === void 0 ? void 0 : options.showTimeForToday) && !timeDisplay) {
+                displayValue = this.timeDisplayPipe.transform(timeSelected);
+            }
+            else if (selected.isSame(yesterday, 'day')) {
+                displayValue = this.translateService.instant((options === null || options === void 0 ? void 0 : options.yesterdayLabel) ? options === null || options === void 0 ? void 0 : options.yesterdayLabel : 'yesterday');
+            }
+            else {
+                displayValue = this.dateDisplayPipe.transform(timeSelected);
+            }
+            return "" + displayValue + timeDisplay;
+        };
+        return RelativeDatePipe;
+    }());
+    RelativeDatePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'relativeDate'
+                },] }
+    ];
+    RelativeDatePipe.ctorParameters = function () { return [
+        { type: DateDisplayPipe },
+        { type: TimeDisplayPipe },
+        { type: i1.TranslateService }
+    ]; };
+
     var PageTitleComponent = /** @class */ (function () {
         function PageTitleComponent() {
         }
@@ -8530,6 +8579,7 @@
                         WizardButtonsComponent,
                         HierarchyTreeComponent,
                         TreeComponent,
+                        RelativeDatePipe,
                         ResizableComponent
                     ],
                     imports: [
@@ -8547,7 +8597,8 @@
                         DateDisplayPipe,
                         TimeDisplayPipe,
                         MockDateDisplayPipe,
-                        RowCountPipe
+                        RowCountPipe,
+                        RelativeDatePipe
                     ],
                     exports: [
                         ButtonComponent,
@@ -8601,6 +8652,7 @@
                         WizardButtonsComponent,
                         HierarchyTreeComponent,
                         TreeComponent,
+                        RelativeDatePipe,
                         ResizableComponent
                     ]
                 },] }
@@ -9811,6 +9863,7 @@
     exports.PopupContainerDirective = PopupContainerDirective;
     exports.RadioButtonComponent = RadioButtonComponent;
     exports.RadioButtonOption = RadioButtonOption;
+    exports.RelativeDatePipe = RelativeDatePipe;
     exports.ResizableBase = ResizableBase;
     exports.ResizableColumnComponent = ResizableColumnComponent;
     exports.ResizableComponent = ResizableComponent;