@energycap/components 0.26.1 → 0.26.3-ECAP-11517-disable-selectable-table-rows.20211111-0918

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 }],
@@ -1159,7 +1154,7 @@
         { type: i0.Component, args: [{
                     selector: 'ec-banner',
                     template: "<div class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"ec-icon-sm icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1 font-color-secondary\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n",
-                    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}:host(.border-bottom-0) .banner{border-bottom:0}.banner{display:flex;flex:1 1;flex-direction:column;min-height:2.5rem;overflow-y:auto;position:relative}.banner-content{flex:none;margin:auto 0;padding:.5rem 1rem}ec-button{position:absolute;right:.25rem;top:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:1rem}.text+.list{margin-top:1em}.info{background-color:#dae4e9}.info .banner-content>.ec-icon{color:#2d9ab8}.warning{background-color:#fff8cc}.warning .banner-content>.ec-icon{color:#fa7b2e}.success{background-color:#dff0d8}.success .banner-content>.ec-icon{color:#3c763d}.error{background-color:#ecc4c5}.error .banner-content>.ec-icon{color:#cd1d20}.pinned{border-bottom:1px solid rgba(26,26,35,.08)}.toast{border:1px solid rgba(26,26,35,.08);box-shadow:0 .125rem .625rem 0 rgba(26,26,35,.18)}.toast ec-button{right:.1875rem;top:.1875rem}"]
+                    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}:host(.border-bottom-0) .banner{border-bottom:0}.banner{display:flex;flex:1 1;flex-direction:column;min-height:2.5rem;overflow-y:auto;position:relative}.banner-content{flex:none;margin:auto 0;padding:.5rem 1rem}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{font-size:1.125rem}ec-button{position:absolute;right:.25rem;top:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info{background-color:#dae4e9}.info .banner-content>.ec-icon{color:#2d9ab8}.warning{background-color:#fff8cc}.warning .banner-content>.ec-icon{color:#fa7b2e}.success{background-color:#dff0d8}.success .banner-content>.ec-icon{color:#3c763d}.error{background-color:#ecc4c5}.error .banner-content>.ec-icon{color:#cd1d20}.pinned{border-bottom:1px solid rgba(26,26,35,.08)}.toast{border:1px solid rgba(26,26,35,.08);box-shadow:0 .125rem .625rem 0 rgba(26,26,35,.18)}.toast ec-button{right:.1875rem;top:.1875rem}"]
                 },] }
     ];
     BannerComponent.propDecorators = {
@@ -5862,8 +5857,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 */
@@ -5938,6 +5932,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`
@@ -6087,7 +6083,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}"]
                 },] }
     ];
@@ -6128,7 +6124,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 }]
     };
 
     /**
@@ -6791,6 +6788,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;
@@ -6809,6 +6807,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,
@@ -6838,6 +6843,9 @@
                 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*/
         TableSelectableRowComponent.prototype.ngOnDestroy = function () {
@@ -6857,7 +6865,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. 
@@ -6933,12 +6941,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",
+                    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: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.Input, args: ['ecTableSelectableRow',] }],
         context: [{ type: i0.Input, args: ['selectionContext',] }],
         rowIndex: [{ type: i0.Input }],
         lockedColOptions: [{ type: i0.Input }],
@@ -7580,7 +7589,7 @@
             var _this = this;
             this.toastService.events.pipe(operators.takeUntil(this.destroyed)).subscribe(function (event) {
                 if (event.action == 'remove' && event.toast === _this.toastItem) {
-                    _this.close();
+                    _this.close(event);
                 }
             });
         };
@@ -7597,17 +7606,24 @@
             this.destroyed.next();
             this.destroyed.complete();
         };
-        ToastComponent.prototype.close = function () {
+        ToastComponent.prototype.closeClicked = function () {
+            if (this.toastItem) {
+                this.toastService.dismissToast(this.toastItem, 'user');
+            }
+        };
+        ToastComponent.prototype.close = function (event) {
             var _this = this;
             this.open = false;
             rxjs.timer(this.TOAST_ANIMATION_DURATION).subscribe(function () {
-                _this.closed.emit(_this.toastItem);
+                _this.closed.emit(event);
             });
         };
         ToastComponent.prototype.closeAfterTimer = function () {
             var _this = this;
             rxjs.timer(this.TIMED_TOAST_DURATION).pipe(operators.takeUntil(rxjs.race(this.closed, this.destroyed))).subscribe(function () {
-                _this.close();
+                if (_this.toastItem) {
+                    _this.toastService.dismissToast(_this.toastItem, 'auto');
+                }
             });
         };
         return ToastComponent;
@@ -7615,7 +7631,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)=\"close()\">\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    <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>",
                     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)}"]
                 },] }
     ];
@@ -7630,9 +7646,33 @@
         closed: [{ type: i0.Output }]
     };
 
+    var TelemetryBaseService = /** @class */ (function () {
+        function TelemetryBaseService() {
+        }
+        return TelemetryBaseService;
+    }());
+
+    /** Default No-op telemetry implementation */
+    var TelemetryService = /** @class */ (function (_super) {
+        __extends(TelemetryService, _super);
+        function TelemetryService() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TelemetryService.prototype.trackPageView = function (pageName, url, properties) { };
+        TelemetryService.prototype.trackEvent = function (name, properties, measurements) { };
+        return TelemetryService;
+    }(TelemetryBaseService));
+    TelemetryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TelemetryService_Factory() { return new TelemetryService(); }, token: TelemetryService, providedIn: "root" });
+    TelemetryService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var ToasterComponent = /** @class */ (function () {
-        function ToasterComponent(toastService) {
+        function ToasterComponent(toastService, telemetryService) {
             this.toastService = toastService;
+            this.telemetryService = telemetryService;
             this.dismissibleToastBottom = 0;
             this.pendingToasts = [];
             this.destroyed = new rxjs.Subject();
@@ -7643,9 +7683,11 @@
                 if (event.action == 'add') {
                     _this.addToast(event.toast);
                     _this.updateDismissibleToastBottom();
+                    _this.trackEvent(event);
                 }
                 else if (event.action == 'remove' && event.toast !== _this.currentDismissibleToast && event.toast !== _this.currentTimedToast) {
                     _this.removePendingToast(event.toast);
+                    _this.trackEvent(event);
                 }
             });
         };
@@ -7653,14 +7695,15 @@
             this.destroyed.next();
             this.destroyed.complete();
         };
-        ToasterComponent.prototype.updateVisibleToast = function (closedToast) {
-            if (closedToast.dismissible) {
+        ToasterComponent.prototype.updateVisibleToast = function (event) {
+            if (event.toast.dismissible) {
                 this.currentDismissibleToast = this.getNextToast(true);
             }
             else {
                 this.currentTimedToast = this.getNextToast(false);
             }
             this.updateDismissibleToastBottom();
+            this.trackEvent(event);
         };
         ToasterComponent.prototype.addToast = function (toast) {
             if ((toast.dismissible && this.currentDismissibleToast) || (!toast.dismissible && this.currentTimedToast)) {
@@ -7705,6 +7748,25 @@
                 this.dismissibleToastBottom = 0;
             }
         };
+        ToasterComponent.prototype.trackEvent = function (event) {
+            var _a, _b, _c;
+            var dismissible = this.pendingToasts.filter(function (t) { return t.dismissible; });
+            var transient = this.pendingToasts.filter(function (t) { return !t.dismissible; });
+            this.telemetryService.trackEvent(event.action + " toast", {
+                action: event.action,
+                source: event.source,
+                hasDismissiblePending: dismissible.length > 0 ? 'yes' : 'no',
+                dismissiblePendingLength: "" + dismissible.length,
+                hasTransientPending: transient.length > 0 ? 'yes' : 'no',
+                transientPendingLength: "" + transient.length,
+                toastId: (_a = event.toast.id) !== null && _a !== void 0 ? _a : '',
+                toastType: event.toast.type,
+                toastMessage: event.toast.message,
+                toastDismissible: "" + event.toast.dismissible,
+                toastIcon: (_b = event.toast.icon) !== null && _b !== void 0 ? _b : '',
+                toastAction: (_c = event.toast.actionLabel) !== null && _c !== void 0 ? _c : '',
+            });
+        };
         return ToasterComponent;
     }());
     ToasterComponent.decorators = [
@@ -7714,7 +7776,8 @@
                 },] }
     ];
     ToasterComponent.ctorParameters = function () { return [
-        { type: ToastService }
+        { type: ToastService },
+        { type: TelemetryService }
     ]; };
     ToasterComponent.propDecorators = {
         timedToastEl: [{ type: i0.ViewChild, args: ['timedToast', { static: false, read: i0.ElementRef },] }]
@@ -7827,9 +7890,61 @@
         subTitle: [{ type: i0.Input }]
     };
 
+    /**
+     * Format a time to the user's preference for display
+     */
+    var TimeDisplayPipe = /** @class */ (function () {
+        function TimeDisplayPipe(userPreferenceService) {
+            this.userPreferenceService = userPreferenceService;
+            this.lastFormatString = 'HH:mm:ss';
+        }
+        /**
+         * Format a time for display, accounting for user's display preferences.
+         */
+        TimeDisplayPipe.prototype.transform = function (time, showSeconds) {
+            var _this = this;
+            var display = '';
+            var formatString = '';
+            // use user-preferred formats
+            this.userPreferenceService.getPreferences().subscribe(function (result) {
+                //if preferences exist then format time to users preference 
+                //otherwise use the last user preference
+                if (result.preference) {
+                    formatString = result.preference.timeFormat;
+                    if (!showSeconds) {
+                        formatString = formatString.replace(':ss', '');
+                    }
+                    _this.lastFormatString = formatString;
+                }
+            });
+            display = moment__default['default'](time).format(this.lastFormatString);
+            return display;
+        };
+        return TimeDisplayPipe;
+    }());
+    TimeDisplayPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'timeDisplay' },] }
+    ];
+    TimeDisplayPipe.ctorParameters = function () { return [
+        { type: UserPreferenceService }
+    ]; };
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
+        /**
+         * Providing services through the forRoot pattern here ensures that the components module and the importing
+         * module use the same singleton service instance.
+         * For more info: https://angular.io/guide/singleton-services#the-forroot-pattern
+         */
+        ComponentsModule.forRoot = function (config) {
+            return {
+                ngModule: ComponentsModule,
+                providers: [
+                    { provide: TelemetryService, useClass: config.telemetryService }
+                ]
+            };
+        };
         return ComponentsModule;
     }());
     ComponentsModule.decorators = [
@@ -7853,6 +7968,7 @@
                         ConfirmComponent,
                         DialogComponent,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RadioButtonComponent,
                         CheckboxComponent,
@@ -7900,6 +8016,7 @@
                         FormGroupHelper,
                         DialogService,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RowCountPipe
                     ],
@@ -7921,6 +8038,7 @@
                         ConfirmComponent,
                         DialogComponent,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         RadioButtonComponent,
                         CheckboxComponent,
                         NumericboxComponent,
@@ -8635,7 +8753,9 @@
     exports.TabsComponent = TabsComponent;
     exports.Tag = Tag;
     exports.TagsComponent = TagsComponent;
+    exports.TelemetryBaseService = TelemetryBaseService;
     exports.TextboxComponent = TextboxComponent;
+    exports.TimeDisplayPipe = TimeDisplayPipe;
     exports.ToastComponent = ToastComponent;
     exports.ToastEvent = ToastEvent;
     exports.ToastService = ToastService;
@@ -8667,6 +8787,7 @@
     exports.ɵa = ResizableTableDirective;
     exports.ɵb = ResizableBase;
     exports.ɵc = TableDetailRowComponent;
+    exports.ɵd = TelemetryService;
 
     Object.defineProperty(exports, '__esModule', { value: true });