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

package/bundles/energycap-components.umd.js

@@ -1159,7 +1159,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 = {
@@ -1244,7 +1244,7 @@
         { type: i0.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 = function () { return []; };
@@ -7580,7 +7580,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 +7597,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 +7622,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 +7637,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 +7674,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 +7686,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 +7739,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 +7767,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 +7881,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 +7959,7 @@
                         ConfirmComponent,
                         DialogComponent,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RadioButtonComponent,
                         CheckboxComponent,
@@ -7900,6 +8007,7 @@
                         FormGroupHelper,
                         DialogService,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         MockDateDisplayPipe,
                         RowCountPipe
                     ],
@@ -7921,6 +8029,7 @@
                         ConfirmComponent,
                         DialogComponent,
                         DateDisplayPipe,
+                        TimeDisplayPipe,
                         RadioButtonComponent,
                         CheckboxComponent,
                         NumericboxComponent,
@@ -8635,7 +8744,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 +8778,7 @@
     exports.ɵa = ResizableTableDirective;
     exports.ɵb = ResizableBase;
     exports.ɵc = TableDetailRowComponent;
+    exports.ɵd = TelemetryService;
 
     Object.defineProperty(exports, '__esModule', { value: true });