@energycap/components 0.26.9 → 0.26.10

package/bundles/energycap-components.umd.js

@@ -3969,6 +3969,8 @@
             }
         };
     };
+    var phoneNumberValidationPattern = '^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$';
+    var urlValidationPattern = '([A-Za-z])+(:\/\/)+[^\\s]*';
     var TextboxComponent = /** @class */ (function (_super) {
         __extends(TextboxComponent, _super);
         function TextboxComponent(validationMessageService, formGroupHelper, translate) {
@@ -3985,7 +3987,7 @@
              */
             _this.type = "text";
             /**
-             * The value of the rows attiribute for a textarea. Only applies to multi-line type
+             * The value of the rows attribute for a textarea. Only applies to multi-line type
              */
             _this.rows = 3;
             /**
@@ -3997,6 +3999,10 @@
              * If set to true, we will upper case on focus out
              */
             _this.upperCase = false;
+            /**
+             * Validation pattern for the input. This is determined on the input type specified
+             */
+            _this.validationPattern = '';
             return _this;
         }
         TextboxComponent.prototype.ngOnChanges = function (changes) {
@@ -4008,6 +4014,13 @@
         TextboxComponent.prototype.ngOnInit = function () {
             var _this = this;
             _super.prototype.ngOnInit.call(this);
+            this.validationPattern = '';
+            if (this.type === 'tel') {
+                this.validationPattern = phoneNumberValidationPattern;
+            }
+            else if (this.type === 'url') {
+                this.validationPattern = urlValidationPattern;
+            }
             if (this.placeholder) {
                 this.translate.get(this.placeholder)
                     .subscribe(function (translated) {
@@ -4024,7 +4037,7 @@
             }
         };
         /**
-         * Function to set focus on an input programatically after the page
+         * Function to set focus on an input programmatically after the page
          * had been rendered.  The highlight text flag will select the text
          * within the input if passed in and true
          */
@@ -4048,7 +4061,7 @@
     TextboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-textbox',
-                    template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n    <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n        <span>{{label | translate}}</span>\r\n\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n    </label>\r\n    <div class=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{type === 'url' ? '([A-Za-z])+(:\\/\\/)+[^\\\\s]*' : ''}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n    </div>\r\n</div>",
+                    template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'is-readonly': readonly}\">\r\n    <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n        <span>{{label | translate}}</span>\r\n\r\n        <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n    </label>\r\n    <div class=\"input-wrapper control-input\">\r\n        <input *ngIf=\"type !== 'multi_line'\"\r\n               #textboxInput\r\n               email=\"{{type === 'email' ? true : false}}\"\r\n               pattern=\"{{validationPattern}}\"\r\n               type=\"{{type}}\"\r\n               tabindex=\"{{tabindex}}\"\r\n               title=\"{{tooltip}}\"\r\n               [attr.id]=\"inputId\"\r\n               [attr.autocomplete]=\"autocomplete\"\r\n               [attr.placeholder]=\"placeholder\"\r\n               [attr.maxlength]=\"maxlength\"\r\n               [attr.minlength]=\"minlength\"\r\n               [attr.required]=\"required ? required : null\"\r\n               [formControl]=\"formModel\"\r\n               [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n               (focusout)=\"focusOutEvent()\"\r\n               [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n        <textarea *ngIf=\"type === 'multi_line'\"\r\n                  [attr.rows]=\"rows\"\r\n                  #textboxInput\r\n                  tabindex=\"{{tabindex}}\"\r\n                  [attr.id]=\"inputId\"\r\n                  [attr.placeholder]=\"placeholder\"\r\n                  [attr.maxlength]=\"maxlength\"\r\n                  [attr.minlength]=\"minlength\"\r\n                  [attr.required]=\"required ? required : null\"\r\n                  [formControl]=\"formModel\"\r\n                  [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n                  [attr.cdkFocusInitial]=\"autofocus || null\">\r\n        </textarea>\r\n    </div>\r\n</div>",
                     styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}:host input{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:0;height:2rem;line-height:1.25;padding:.3125em .5em;width:100%}:host input::-moz-selection{background-color:#0084a9;color:#fff}:host input::selection{background-color:#0084a9;color:#fff}:host input::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host input::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host input:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host input.ng-invalid.ng-touched,:host input:required.is-empty{background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host input.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending,:host input.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input:focus,:host input:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host input:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:0;display:block;height:auto;line-height:1.25;padding:.3125em .5em;resize:none;width:100%}:host textarea::-moz-selection{background-color:#0084a9;color:#fff}:host textarea::selection{background-color:#0084a9;color:#fff}:host textarea::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host textarea::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host textarea:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host textarea.ng-invalid.ng-touched,:host textarea:required.is-empty{background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending,:host textarea.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea:focus,:host textarea:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host textarea:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}:host(.textbox-group-input:not(:last-child)) input:focus{border-right-width:.0625rem;position:relative;z-index:1}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace}"]
                 },] }
     ];
@@ -5390,10 +5403,74 @@
         textboxInput: [{ type: i0.ViewChild, args: ['textbox', { static: true },] }]
     };
 
+    var AvatarService = /** @class */ (function () {
+        function AvatarService() {
+        }
+        /**
+         * Return the full and abbreviated labels based on the users first name, email, or username. If the user has a first or last name use
+         * either a combination of the first and last name, or the first two characters of the name that is defined. If the user does
+         * not have a first or last name, trying using the first two characters of the email, or the first two characters of the
+         * username as a last ditch effort.
+         * @param user
+         * @returns
+         */
+        AvatarService.prototype.getAvatarLabels = function (user) {
+            var full = undefined;
+            var abbreviation = 'HI';
+            var trimmedUser = this.trimUser(user);
+            if (trimmedUser.firstName || trimmedUser.lastName) {
+                if (trimmedUser.firstName) {
+                    abbreviation = trimmedUser.firstName.slice(0, 1);
+                    full = trimmedUser.firstName;
+                    if (trimmedUser.lastName) {
+                        full += " " + trimmedUser.lastName;
+                    }
+                }
+                else {
+                    abbreviation = trimmedUser.lastName.slice(0, 1);
+                    full = trimmedUser.lastName;
+                }
+            }
+            else if (trimmedUser.email) {
+                abbreviation = trimmedUser.email.slice(0, 1);
+                full = trimmedUser.email;
+            }
+            else if (trimmedUser.username) {
+                abbreviation = trimmedUser.username.slice(0, 1);
+                full = trimmedUser.username;
+            }
+            return {
+                abbreviation: abbreviation,
+                full: full
+            };
+        };
+        /**
+         * Return a new user object that has all of the properties of the existing user
+         * with any null, undefined, or whitespace values removed
+         */
+        AvatarService.prototype.trimUser = function (user) {
+            var trimmedUser = {
+                email: (user.email || '').trim(),
+                firstName: (user.firstName || '').trim(),
+                lastName: (user.lastName || '').trim(),
+                username: (user.username || '').trim()
+            };
+            return trimmedUser;
+        };
+        return AvatarService;
+    }());
+    AvatarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AvatarService_Factory() { return new AvatarService(); }, token: AvatarService, providedIn: "root" });
+    AvatarService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var AvatarComponent = /** @class */ (function () {
-        function AvatarComponent(el, renderer) {
+        function AvatarComponent(el, renderer, avatarService) {
             this.el = el;
             this.renderer = renderer;
+            this.avatarService = avatarService;
             /** Color map base on the first let of the label */
             this.colors = {
                 abcde01: 'red',
@@ -5416,49 +5493,14 @@
             this.updateColor();
         };
         /**
-         * Update the Avatar label based on the users first name, email, or username. If the user has a first or last name use
-         * either a combination of the first and last name, or the first two characters of the name that is defined. If the user does
-         * not have a first or last name, trying using the first two characters of the email, or the first two characters of the
-         * username as a last ditch effort.
+         * Update the Avatar label
+         *
          */
         AvatarComponent.prototype.updateLabel = function () {
             if (this.user) {
-                var trimmedUser = this.trimUser(this.user);
-                if (trimmedUser.firstName || trimmedUser.lastName) {
-                    if (trimmedUser.firstName) {
-                        this.label = trimmedUser.firstName.slice(0, 1);
-                        this.user.userMenuTitle = trimmedUser.firstName;
-                        if (trimmedUser.lastName) {
-                            this.user.userMenuTitle += " " + trimmedUser.lastName;
-                        }
-                    }
-                    else {
-                        this.label = trimmedUser.lastName.slice(0, 1);
-                        this.user.userMenuTitle = trimmedUser.lastName;
-                    }
-                }
-                else if (trimmedUser.email) {
-                    this.label = trimmedUser.email.slice(0, 1);
-                    this.user.userMenuTitle = trimmedUser.email;
-                }
-                else if (trimmedUser.username) {
-                    this.label = trimmedUser.username.slice(0, 1);
-                    this.user.userMenuTitle = trimmedUser.username;
-                }
+                this.label = this.avatarService.getAvatarLabels(this.user).abbreviation;
             }
         };
-        /** Return a new user object that has all of the properties of the existing user
-         * with any null, undefined, or whitespace values removed
-         */
-        AvatarComponent.prototype.trimUser = function (user) {
-            var trimmedUser = {
-                email: (user.email || '').trim(),
-                firstName: (user.firstName || '').trim(),
-                lastName: (user.lastName || '').trim(),
-                username: (user.username || '').trim()
-            };
-            return trimmedUser;
-        };
         /**
          * Sets the color of the Avatar based on the first letter of the label. If the label is HI or is not
          * a letter, default to gray.
@@ -5489,14 +5531,16 @@
     ];
     AvatarComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: i0.Renderer2 }
+        { type: i0.Renderer2 },
+        { type: AvatarService }
     ]; };
     AvatarComponent.propDecorators = {
         user: [{ type: i0.Input }]
     };
 
     var AppBarComponent = /** @class */ (function () {
-        function AppBarComponent() {
+        function AppBarComponent(avatarService) {
+            this.avatarService = avatarService;
             this.user = {};
             this.userMenuItems = [];
             this.userMenuWidth = 0;
@@ -5504,15 +5548,23 @@
             this.userMenuTabindex = 0;
             this.iconPath = '/assets/images/icon.svg';
         }
+        AppBarComponent.prototype.ngOnChanges = function () {
+            if (this.user) {
+                this.userMenuTitle = this.avatarService.getAvatarLabels(this.user).full;
+            }
+        };
         return AppBarComponent;
     }());
     AppBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-app-bar',
-                    template: "<section class=\"logo-container\">\r\n  <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               *ngIf=\"userMenuItems.length; else avatar\"\r\n               [menuTitle]=\"user?.userMenuTitle\"\r\n               [items]=\"userMenuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n  <div class=\"p-1\">\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </div>\r\n</ng-template>",
+                    template: "<section class=\"logo-container\">\r\n  <img src=\"{{iconPath}}\"\r\n       alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               *ngIf=\"userMenuItems.length; else avatar\"\r\n               [menuTitle]=\"userMenuTitle\"\r\n               [items]=\"userMenuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n  <div class=\"p-1\">\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </div>\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{align-items:center;background-color:#fff;display:flex;height:3rem;padding:0 .75rem 0 1rem;position:relative;width:100%;z-index:40}:host ::ng-deep .app-bar-actions{align-items:center;display:flex;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{height:2rem;width:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}"]
                 },] }
     ];
+    AppBarComponent.ctorParameters = function () { return [
+        { type: AvatarService }
+    ]; };
     AppBarComponent.propDecorators = {
         user: [{ type: i0.Input }],
         userMenuItems: [{ type: i0.Input }],
@@ -8859,14 +8911,17 @@
     exports.numericboxValidation = numericboxValidation;
     exports.orderByIgnoreCase = orderByIgnoreCase;
     exports.otherZipCodeRegex = otherZipCodeRegex;
+    exports.phoneNumberValidationPattern = phoneNumberValidationPattern;
     exports.sortByIgnoreCase = sortByIgnoreCase;
     exports.textboxValidation = textboxValidation;
     exports.unitedStatesZipCodeRegex = unitedStatesZipCodeRegex;
+    exports.urlValidationPattern = urlValidationPattern;
     exports.validateFormGroupValuesAreUnique = validateFormGroupValuesAreUnique;
     exports.ɵa = ResizableTableDirective;
     exports.ɵb = ResizableBase;
-    exports.ɵc = TableDetailRowComponent;
-    exports.ɵd = TelemetryService;
+    exports.ɵc = AvatarService;
+    exports.ɵd = TableDetailRowComponent;
+    exports.ɵe = TelemetryService;
 
     Object.defineProperty(exports, '__esModule', { value: true });