@energycap/components 0.26.9 → 0.26.10

package/fesm2015/energycap-components.js

@@ -1736,6 +1736,8 @@ const textboxValidation = (validatorParams) => {
         }
     };
 };
+const phoneNumberValidationPattern = '^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$';
+const urlValidationPattern = '([A-Za-z])+(:\/\/)+[^\\s]*';
 class TextboxComponent extends FormControlBase {
     constructor(validationMessageService, formGroupHelper, translate) {
         super(validationMessageService, formGroupHelper);
@@ -1751,7 +1753,7 @@ class TextboxComponent extends FormControlBase {
          */
         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;
         /**
@@ -1763,6 +1765,10 @@ class TextboxComponent extends FormControlBase {
          * 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 = '';
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
@@ -1772,6 +1778,13 @@ class TextboxComponent extends FormControlBase {
      */
     ngOnInit() {
         super.ngOnInit();
+        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((translated) => {
@@ -1788,7 +1801,7 @@ class TextboxComponent extends FormControlBase {
         }
     }
     /**
-     * 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
      */
@@ -1811,7 +1824,7 @@ class TextboxComponent extends FormControlBase {
 TextboxComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -5075,10 +5088,71 @@ NumericboxComponent.propDecorators = {
     textboxInput: [{ type: ViewChild, args: ['textbox', { static: true },] }]
 };
 
+class 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
+     */
+    getAvatarLabels(user) {
+        let full = undefined;
+        let abbreviation = 'HI';
+        let 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
+     */
+    trimUser(user) {
+        let trimmedUser = {
+            email: (user.email || '').trim(),
+            firstName: (user.firstName || '').trim(),
+            lastName: (user.lastName || '').trim(),
+            username: (user.username || '').trim()
+        };
+        return trimmedUser;
+    }
+}
+AvatarService.ɵprov = ɵɵdefineInjectable({ factory: function AvatarService_Factory() { return new AvatarService(); }, token: AvatarService, providedIn: "root" });
+AvatarService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 class AvatarComponent {
-    constructor(el, renderer) {
+    constructor(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',
@@ -5101,49 +5175,14 @@ class AvatarComponent {
         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
+     *
      */
     updateLabel() {
         if (this.user) {
-            let 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
-     */
-    trimUser(user) {
-        let 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.
@@ -5173,14 +5212,16 @@ AvatarComponent.decorators = [
 ];
 AvatarComponent.ctorParameters = () => [
     { type: ElementRef },
-    { type: Renderer2 }
+    { type: Renderer2 },
+    { type: AvatarService }
 ];
 AvatarComponent.propDecorators = {
     user: [{ type: Input }]
 };
 
 class AppBarComponent {
-    constructor() {
+    constructor(avatarService) {
+        this.avatarService = avatarService;
         this.user = {};
         this.userMenuItems = [];
         this.userMenuWidth = 0;
@@ -5188,14 +5229,22 @@ class AppBarComponent {
         this.userMenuTabindex = 0;
         this.iconPath = '/assets/images/icon.svg';
     }
+    ngOnChanges() {
+        if (this.user) {
+            this.userMenuTitle = this.avatarService.getAvatarLabels(this.user).full;
+        }
+    }
 }
 AppBarComponent.decorators = [
     { type: 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 = () => [
+    { type: AvatarService }
+];
 AppBarComponent.propDecorators = {
     user: [{ type: Input }],
     userMenuItems: [{ type: Input }],
@@ -8006,5 +8055,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, 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 };
+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, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique, ResizableTableDirective as ɵa, ResizableBase as ɵb, AvatarService as ɵc, TableDetailRowComponent as ɵd, TelemetryService as ɵe };
 //# sourceMappingURL=energycap-components.js.map