@energycap/components 0.27.4 → 0.27.5-searchable-table-bugfix.20220127-0856

package/bundles/energycap-components.umd.js

@@ -2653,6 +2653,12 @@
              * Item currently highlighted by keyboard navigation
              */
             this.highlightedItem = null;
+            /**
+             * Tells the menu to maintain the selected/lastSelected item. Turning this off is useful for
+             * action type menus that are displayed on the screen at all times and you do not
+             * want the item to be selected when clicked.
+             */
+            this.maintainSelectedItem = true;
             /**
              * Emitted when `selected` is changed. Emits the referenced object.
              *
@@ -2755,8 +2761,14 @@
                 else {
                     this.onSelection(item);
                 }
-                this.selected = item;
-                this.lastSelected = item;
+                if (this.maintainSelectedItem) {
+                    this.selected = item;
+                    this.lastSelected = item;
+                }
+                else {
+                    this.selected = null;
+                    this.lastSelected = null;
+                }
             }
         };
         /**
@@ -3000,6 +3012,7 @@
         noDataText: [{ type: i0.Input }],
         enableKeyNav: [{ type: i0.Input }],
         highlightedItem: [{ type: i0.Input }],
+        maintainSelectedItem: [{ type: i0.Input }],
         selectedChanged: [{ type: i0.Output }],
         menuClosed: [{ type: i0.Output }],
         labelTemplate: [{ type: i0.ViewChild, args: ['label', { static: true },] }],
@@ -6957,7 +6970,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=\"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>",
+                    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-shrink-max\"\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}"]
                 },] }
     ];
@@ -8154,6 +8167,34 @@
         width: [{ type: i0.Input, args: ['ecIfViewportWidth',] }]
     };
 
+    var HighlightTextPipe = /** @class */ (function () {
+        function HighlightTextPipe() {
+        }
+        HighlightTextPipe.prototype.transform = function (value, searchText) {
+            var transformedValue = '';
+            if (value && searchText) {
+                var regex = new RegExp(this.escapeRegex(searchText), 'gi');
+                transformedValue = value.replace(regex, this.strongWrap);
+            }
+            else {
+                transformedValue = value;
+            }
+            return transformedValue;
+        };
+        HighlightTextPipe.prototype.strongWrap = function (match) {
+            return "<strong class=\"text-highlight\">" + match + "</strong>";
+        };
+        HighlightTextPipe.prototype.escapeRegex = function (value) {
+            return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        };
+        return HighlightTextPipe;
+    }());
+    HighlightTextPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'highlightText'
+                },] }
+    ];
+
     /**
      * Format a time to the user's preference for display
      */
@@ -8637,7 +8678,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -8655,7 +8697,8 @@
                         TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RowCountPipe,
-                        RelativeDatePipe
+                        RelativeDatePipe,
+                        HighlightTextPipe
                     ],
                     exports: [
                         ButtonComponent,
@@ -8710,7 +8753,8 @@
                         HierarchyTreeComponent,
                         TreeComponent,
                         RelativeDatePipe,
-                        ResizableComponent
+                        ResizableComponent,
+                        HighlightTextPipe
                     ]
                 },] }
     ];
@@ -9854,6 +9898,7 @@
     exports.HierarchyBaseTestInjectorFactory = HierarchyBaseTestInjectorFactory;
     exports.HierarchyItem = HierarchyItem;
     exports.HierarchyTreeComponent = HierarchyTreeComponent;
+    exports.HighlightTextPipe = HighlightTextPipe;
     exports.IfViewportWidthDirective = IfViewportWidthDirective;
     exports.ItemDisplayComponent = ItemDisplayComponent;
     exports.JsonDisplayComponent = JsonDisplayComponent;