@energycap/components 0.26.1 → 0.26.3-ECAPID-313-Button-Font-Inherit.20211103-1319

package/fesm2015/energycap-components.js

@@ -1010,7 +1010,7 @@ BannerComponent.decorators = [
     { type: 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 = {
@@ -1094,7 +1094,7 @@ ButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ec-button',
                 template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge !== undefined\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\" *ngIf=\"pending\">\r\n        <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n    </div>\r\n\r\n    <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge !== undefined\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n</ng-template>",
-                styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{-webkit-appearance:none;color:#1a1a23;display:inline-block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.875rem;margin:0;padding:0;vertical-align:top}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-custom,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-icon,:host(.active) .ec-button-link,:host(.active) .ec-button-secondary,:host(.active) .ec-button-text{background-color:#bfe0e9}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:#d2d7d9}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:#0084a9}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:#3c763d}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:#cd1d20}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{height:.625rem;width:.625rem}:host-context(.btn-group) button:focus{position:relative;z-index:1}.ec-button-primary,.ec-button-submit{background-color:#cfd856;border-color:#c1cd23;color:#1a1a23}.ec-button-primary:active:enabled,.ec-button-submit:active:enabled{background-color:#c1cd23;color:#1a1a23}.ec-button-secondary{border-color:#d2d7d9}.ec-button-secondary,.ec-button-secondary:active:enabled{background-color:#fff;color:#1a1a23}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:#fff}.ec-button-common .ec-icon{color:inherit}.ec-button-common:active:enabled{background-color:#0084a9;border-color:#005f7a}.ec-button-icon{background-color:transparent;color:rgba(26,26,35,.66);padding:0;width:2rem}.ec-button-icon .ec-icon{height:1.1428571429em;margin:0;padding:0}.ec-button-icon:hover{background-color:#bfe0e9}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.ec-button-icon.has-badge{min-width:2rem;padding-left:.375rem;padding-right:0;width:auto}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:#1a1a23}.ec-button-text .ec-icon{color:rgba(26,26,35,.66)}.ec-button-text:active:enabled{background-color:transparent;color:#000}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:#0084a9}.ec-button-link .ec-icon{color:inherit}.ec-button-link:active:enabled{background-color:transparent;color:#00485d}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:#e64c4d;border-color:#e33436;color:#fff}.ec-button-danger .ec-icon{color:inherit}.ec-button-danger:active:enabled{background-color:#e33436}.ec-button-danger-text{background-color:transparent;color:#e33436}.ec-button-danger-text .ec-icon{color:inherit}.ec-button-danger-text:active:enabled{background-color:transparent;color:#b2191a}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{background-color:transparent;height:auto;padding:0}.ec-button-custom:disabled{background-color:transparent;border:0}button{align-items:center;background-color:#fff;border:.0625rem solid transparent;border-radius:0;cursor:pointer;display:flex;font-size:.875rem;height:2rem;justify-content:center;line-height:1.25;line-height:1.25rem;padding:.3571428571em .5714285714em;position:relative}button.is-highlighted,button.is-selected{background-color:#d9edf2}button:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;outline:none}button:active{background-color:#0084a9;color:#fff}button.is-disabled,button:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);cursor:default;opacity:.65}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{justify-content:center;white-space:nowrap}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;padding-left:.4375rem;padding-right:.4375rem}.badge{background-color:#7e579b;border:.125rem solid #fff;border-radius:.5625rem;color:#fff;display:inline-block;font-size:.625rem;font-weight:700;line-height:.875rem;margin-left:-.25rem;margin-top:-.75rem;min-width:1rem;padding:0 .25rem;text-align:center;vertical-align:baseline;white-space:nowrap}:host(.is-tab) button{align-items:center;border:1px solid transparent;border-radius:0;color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{background-color:#d2d7d9;color:#354751}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}:host(.is-tab) button.is-disabled{color:rgba(26,26,35,.38);cursor:default}:host(.is-tab) button.ec-button-icon{justify-content:center;padding:0;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{background-color:#d2d7d9;color:#354751}.pending-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}.pending-container>.ec-icon{color:inherit;flex:none}.pending-container~.badge,.pending-container~.ec-icon,.pending-container~.label{opacity:0}"]
+                styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{-webkit-appearance:none;color:#1a1a23;display:inline-block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.875rem;margin:0;padding:0;vertical-align:top}:host(.font-size-inherit),:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-custom,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-icon,:host(.active) .ec-button-link,:host(.active) .ec-button-secondary,:host(.active) .ec-button-text{background-color:#bfe0e9}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:#d2d7d9}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:#0084a9}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:#3c763d}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:#cd1d20}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{height:.625rem;width:.625rem}:host-context(.btn-group) button:focus{position:relative;z-index:1}.ec-button-primary,.ec-button-submit{background-color:#cfd856;border-color:#c1cd23;color:#1a1a23}.ec-button-primary:active:enabled,.ec-button-submit:active:enabled{background-color:#c1cd23;color:#1a1a23}.ec-button-secondary{border-color:#d2d7d9}.ec-button-secondary,.ec-button-secondary:active:enabled{background-color:#fff;color:#1a1a23}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:#fff}.ec-button-common .ec-icon{color:inherit}.ec-button-common:active:enabled{background-color:#0084a9;border-color:#005f7a}.ec-button-icon{background-color:transparent;color:rgba(26,26,35,.66);padding:0;width:2rem}.ec-button-icon .ec-icon{height:1.1428571429em;margin:0;padding:0}.ec-button-icon:hover{background-color:#bfe0e9}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.ec-button-icon.has-badge{min-width:2rem;padding-left:.375rem;padding-right:0;width:auto}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:#1a1a23}.ec-button-text .ec-icon{color:rgba(26,26,35,.66)}.ec-button-text:active:enabled{background-color:transparent;color:#000}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:#0084a9}.ec-button-link .ec-icon{color:inherit}.ec-button-link:active:enabled{background-color:transparent;color:#00485d}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:#e64c4d;border-color:#e33436;color:#fff}.ec-button-danger .ec-icon{color:inherit}.ec-button-danger:active:enabled{background-color:#e33436}.ec-button-danger-text{background-color:transparent;color:#e33436}.ec-button-danger-text .ec-icon{color:inherit}.ec-button-danger-text:active:enabled{background-color:transparent;color:#b2191a}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{background-color:transparent;height:auto;padding:0}.ec-button-custom:disabled{background-color:transparent;border:0}button{align-items:center;background-color:#fff;border:.0625rem solid transparent;border-radius:0;cursor:pointer;display:flex;font-size:.875rem;height:2rem;justify-content:center;line-height:1.25;line-height:1.25rem;padding:.3571428571em .5714285714em;position:relative}button.is-highlighted,button.is-selected{background-color:#d9edf2}button:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;outline:none}button:active{background-color:#0084a9;color:#fff}button.is-disabled,button:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);cursor:default;opacity:.65}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{justify-content:center;white-space:nowrap}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;padding-left:.4375rem;padding-right:.4375rem}.badge{background-color:#7e579b;border:.125rem solid #fff;border-radius:.5625rem;color:#fff;display:inline-block;font-size:.625rem;font-weight:700;line-height:.875rem;margin-left:-.25rem;margin-top:-.75rem;min-width:1rem;padding:0 .25rem;text-align:center;vertical-align:baseline;white-space:nowrap}:host(.is-tab) button{align-items:center;border:1px solid transparent;border-radius:0;color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{background-color:#d2d7d9;color:#354751}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}:host(.is-tab) button.is-disabled{color:rgba(26,26,35,.38);cursor:default}:host(.is-tab) button.ec-button-icon{justify-content:center;padding:0;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{background-color:#d2d7d9;color:#354751}.pending-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}.pending-container>.ec-icon{color:inherit;flex:none}.pending-container~.badge,.pending-container~.ec-icon,.pending-container~.label{opacity:0}"]
             },] }
 ];
 ButtonComponent.ctorParameters = () => [];
@@ -6950,7 +6950,7 @@ class ToastComponent {
     ngOnInit() {
         this.toastService.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
             if (event.action == 'remove' && event.toast === this.toastItem) {
-                this.close();
+                this.close(event);
             }
         });
     }
@@ -6967,22 +6967,29 @@ class ToastComponent {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    close() {
+    closeClicked() {
+        if (this.toastItem) {
+            this.toastService.dismissToast(this.toastItem, 'user');
+        }
+    }
+    close(event) {
         this.open = false;
         timer(this.TOAST_ANIMATION_DURATION).subscribe(() => {
-            this.closed.emit(this.toastItem);
+            this.closed.emit(event);
         });
     }
     closeAfterTimer() {
         timer(this.TIMED_TOAST_DURATION).pipe(takeUntil(race(this.closed, this.destroyed))).subscribe(() => {
-            this.close();
+            if (this.toastItem) {
+                this.toastService.dismissToast(this.toastItem, 'auto');
+            }
         });
     }
 }
 ToastComponent.decorators = [
     { type: 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)}"]
             },] }
 ];
@@ -6997,9 +7004,25 @@ ToastComponent.propDecorators = {
     closed: [{ type: Output }]
 };
 
+class TelemetryBaseService {
+}
+
+/** Default No-op telemetry implementation */
+class TelemetryService extends TelemetryBaseService {
+    trackPageView(pageName, url, properties) { }
+    trackEvent(name, properties, measurements) { }
+}
+TelemetryService.ɵprov = ɵɵdefineInjectable({ factory: function TelemetryService_Factory() { return new TelemetryService(); }, token: TelemetryService, providedIn: "root" });
+TelemetryService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 class ToasterComponent {
-    constructor(toastService) {
+    constructor(toastService, telemetryService) {
         this.toastService = toastService;
+        this.telemetryService = telemetryService;
         this.dismissibleToastBottom = 0;
         this.pendingToasts = [];
         this.destroyed = new Subject();
@@ -7009,9 +7032,11 @@ class ToasterComponent {
             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);
             }
         });
     }
@@ -7019,14 +7044,15 @@ class ToasterComponent {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    updateVisibleToast(closedToast) {
-        if (closedToast.dismissible) {
+    updateVisibleToast(event) {
+        if (event.toast.dismissible) {
             this.currentDismissibleToast = this.getNextToast(true);
         }
         else {
             this.currentTimedToast = this.getNextToast(false);
         }
         this.updateDismissibleToastBottom();
+        this.trackEvent(event);
     }
     addToast(toast) {
         if ((toast.dismissible && this.currentDismissibleToast) || (!toast.dismissible && this.currentTimedToast)) {
@@ -7071,6 +7097,25 @@ class ToasterComponent {
             this.dismissibleToastBottom = 0;
         }
     }
+    trackEvent(event) {
+        var _a, _b, _c;
+        const dismissible = this.pendingToasts.filter(t => t.dismissible);
+        const transient = this.pendingToasts.filter(t => !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 : '',
+        });
+    }
 }
 ToasterComponent.decorators = [
     { type: Component, args: [{
@@ -7079,7 +7124,8 @@ ToasterComponent.decorators = [
             },] }
 ];
 ToasterComponent.ctorParameters = () => [
-    { type: ToastService }
+    { type: ToastService },
+    { type: TelemetryService }
 ];
 ToasterComponent.propDecorators = {
     timedToastEl: [{ type: ViewChild, args: ['timedToast', { static: false, read: ElementRef },] }]
@@ -7188,7 +7234,57 @@ PageTitleComponent.propDecorators = {
     subTitle: [{ type: Input }]
 };
 
+/**
+ * Format a time to the user's preference for display
+ */
+class TimeDisplayPipe {
+    constructor(userPreferenceService) {
+        this.userPreferenceService = userPreferenceService;
+        this.lastFormatString = 'HH:mm:ss';
+    }
+    /**
+     * Format a time for display, accounting for user's display preferences.
+     */
+    transform(time, showSeconds) {
+        let display = '';
+        let formatString = '';
+        // use user-preferred formats
+        this.userPreferenceService.getPreferences().subscribe(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(time).format(this.lastFormatString);
+        return display;
+    }
+}
+TimeDisplayPipe.decorators = [
+    { type: Pipe, args: [{ name: 'timeDisplay' },] }
+];
+TimeDisplayPipe.ctorParameters = () => [
+    { type: UserPreferenceService }
+];
+
 class 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
+     */
+    static forRoot(config) {
+        return {
+            ngModule: ComponentsModule,
+            providers: [
+                { provide: TelemetryService, useClass: config.telemetryService }
+            ]
+        };
+    }
 }
 ComponentsModule.decorators = [
     { type: NgModule, args: [{
@@ -7211,6 +7307,7 @@ ComponentsModule.decorators = [
                     ConfirmComponent,
                     DialogComponent,
                     DateDisplayPipe,
+                    TimeDisplayPipe,
                     MockDateDisplayPipe,
                     RadioButtonComponent,
                     CheckboxComponent,
@@ -7258,6 +7355,7 @@ ComponentsModule.decorators = [
                     FormGroupHelper,
                     DialogService,
                     DateDisplayPipe,
+                    TimeDisplayPipe,
                     MockDateDisplayPipe,
                     RowCountPipe
                 ],
@@ -7279,6 +7377,7 @@ ComponentsModule.decorators = [
                     ConfirmComponent,
                     DialogComponent,
                     DateDisplayPipe,
+                    TimeDisplayPipe,
                     RadioButtonComponent,
                     CheckboxComponent,
                     NumericboxComponent,
@@ -7821,5 +7920,5 @@ PageBaseComponentTestInjectorFactory.ComponentProviders = [
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonDirective, CustomValidators, DateDisplayPipe, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormGroupComponent, FormGroupHelper, IfViewportWidthDirective, ItemDisplayComponent, JsonDisplayComponent, JsonHelper, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, ResizableColumnComponent, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TextboxComponent, ToastComponent, ToastEvent, ToastService, ToasterComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, validateFormGroupValuesAreUnique, ResizableTableDirective as ɵa, ResizableBase as ɵb, TableDetailRowComponent as ɵc };
+export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonDirective, CustomValidators, DateDisplayPipe, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormGroupComponent, FormGroupHelper, IfViewportWidthDirective, ItemDisplayComponent, JsonDisplayComponent, JsonHelper, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, ResizableColumnComponent, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryBaseService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, validateFormGroupValuesAreUnique, ResizableTableDirective as ɵa, ResizableBase as ɵb, TableDetailRowComponent as ɵc, TelemetryService as ɵd };
 //# sourceMappingURL=energycap-components.js.map