@propmix/profet-common-header 2.3.0 → 2.3.1

package/fesm2020/propmix-profet-common-header.mjs

@@ -246,7 +246,8 @@ class HeaderComponent {
         this.infoEvent = new EventEmitter();
         this.appList = [];
         this.portalUrl = '';
-        this.headerClass = "";
+        this.userImageLink = null;
+        this.headerClass = '';
         this.currentAppLogo = '';
         this.userCompanyLogo = '';
         this.enabledApplications = [];
@@ -267,7 +268,7 @@ class HeaderComponent {
                 this.portalUrl = v?.data?.portalUrl;
                 let data = {
                     companyInfo: this.companyProfile,
-                    portalUrl: this.portalUrl
+                    portalUrl: this.portalUrl,
                 };
                 this.infoEvent.emit(data);
                 // let config: any = Auth.configure();
@@ -279,27 +280,29 @@ class HeaderComponent {
                     this.appList = [];
                     this.enabledApplications = v.data.applications;
                     v.data.applications.forEach((element) => {
-                        let currentApp = (element.name === this.appName);
+                        let currentApp = element.name === this.appName;
                         this.appList.push({
                             name: element.displayName,
                             value: element,
                             appUrl: element.appUrl,
-                            active: currentApp
+                            active: currentApp,
                         });
                     });
                     let appData = {
-                        enabledApps: this.appList
+                        enabledApps: this.appList,
                     };
                     this.infoEvent.emit(appData);
                 }
             },
             error: (e) => {
                 console.log(e);
-            }
+            },
         });
         let userInfo = await getCurrentUser();
         if (userInfo?.username) {
-            let userDetails = this._ser.getUserDetailsByEmail({ email: userInfo.username });
+            let userDetails = this._ser.getUserDetailsByEmail({
+                email: userInfo.username,
+            });
             let userCompanyInfo = this._ser.getUserCompanies();
             forkJoin([userDetails, userCompanyInfo]).subscribe({
                 next: (res) => {
@@ -325,7 +328,7 @@ class HeaderComponent {
                         this.getCurrentCompanyInfo();
                         this.setCurrentAppLogo();
                     }
-                }
+                },
             });
         }
     }
@@ -334,17 +337,17 @@ class HeaderComponent {
     }
     fetchCompanyProfile() {
         let req = {
-            companyName: document.location.host.split('.')[0]
+            companyName: document.location.host.split('.')[0],
         };
         this._ser.fetchCompanyProfile(req).subscribe({
             next: (v) => {
                 this.companyProfile = v;
                 let data = {
                     companyInfo: v,
-                    portalUrl: this.portalUrl
+                    portalUrl: this.portalUrl,
                 };
                 this.infoEvent.emit(data);
-            }
+            },
         });
     }
     fetchCompanyData(allApps) {
@@ -356,35 +359,39 @@ class HeaderComponent {
                     let fetchedApplications = v.data.enabledApplications?.split(',');
                     if (fetchedApplications.length > 0) {
                         fetchedApplications.forEach((element) => {
-                            appInfo = allApps.filter(ele => ele.name == element);
+                            appInfo = allApps.filter((ele) => ele.name == element);
                             if (appInfo && appInfo.length > 0) {
                                 if (appInfo[0].name != 'mca') {
                                     this.appList.push({
                                         name: appInfo[0].displayName,
                                         value: element,
-                                        appUrl: appInfo[0].appUrl
+                                        appUrl: appInfo[0].appUrl,
                                     });
                                 }
                             }
                         });
                     }
                 }
-            }
+            },
         });
     }
     sanitizeUrl(url) {
         return this._domSanitizer.bypassSecurityTrustUrl(url);
     }
     getUserProfile() {
-        this._ser.obtainDataByUrl(this.userAuthData._links.profileImage.href).subscribe(img => {
+        this._ser
+            .obtainDataByUrl(this.userAuthData._links.profileImage.href)
+            .subscribe((img) => {
             if (img?.locationUrl) {
-                this.userImageLink = img.locationUrl ? img.locationUrl : null;
+                this.userImageLink = img.locationUrl
+                    ? this._domSanitizer.bypassSecurityTrustUrl(img.locationUrl)
+                    : null;
             }
         });
     }
     appRedirect(app) {
         if (!app?.active) {
-            window.open(app.appUrl, "_self");
+            window.open(app.appUrl, '_self');
         }
     }
     profile() {
@@ -407,16 +414,16 @@ class HeaderComponent {
     }
     onLogoutClick() {
         signOut({ global: true, oauth: { redirectUrl: this._ser.signOutUrl } })
-            .then(data => {
-            window.open(this._ser.signOutUrl, "_self");
+            .then((data) => {
+            window.open(this._ser.signOutUrl, '_self');
         })
-            .catch(err => {
+            .catch((err) => {
             console.log(err);
             signOut({ global: true, oauth: { redirectUrl: this._ser.signOutUrl } })
                 .then(() => {
-                window.open(this._ser.signOutUrl, "_self");
+                window.open(this._ser.signOutUrl, '_self');
             })
-                .catch(error => console.log(error));
+                .catch((error) => console.log(error));
         });
     }
     switchCompany(company) {
@@ -425,10 +432,13 @@ class HeaderComponent {
         if (!company.activeNow) {
             let domainInfo = this._ser.getDomainInfo();
             if (domainInfo) {
-                let req = { companyKey: company.companyKey, appName: domainInfo.appCode };
+                let req = {
+                    companyKey: company.companyKey,
+                    appName: domainInfo.appCode,
+                };
                 this._ser.updateUserCompany(req).subscribe({
                     next: (response) => {
-                        if (response && response.type && response.type == "OK") {
+                        if (response && response.type && response.type == 'OK') {
                             if (response.data.applicationURL) {
                                 let url = response.data.applicationURL;
                                 window.location.replace(url);
@@ -444,7 +454,7 @@ class HeaderComponent {
                     error: (e) => {
                         // display a message to the user that the company could not be switched.
                         this._snackbar.open('Company could not be switched. Please try again or contact support.', 'OK', { duration: 5000 });
-                    }
+                    },
                 });
             }
             else {
@@ -459,43 +469,47 @@ class HeaderComponent {
             const company = this.currentCompany?.name?.split(' ')[0];
             this.headerClass = 'header-' + this._lowerCasePipe?.transform(company);
             this.headerClass = 'header-' + this._titleCasepipe?.transform(company);
-            this.userCompanyLogo = (this.currentCompany?.companyLogoUrl) ? this.currentCompany?.companyLogoUrl : null;
+            this.userCompanyLogo = this.currentCompany?.companyLogoUrl
+                ? this.currentCompany?.companyLogoUrl
+                : null;
         }
         return this.currentCompany ? this.currentCompany : null;
     }
     setCurrentAppLogo() {
-        const currentApp = this.enabledApplications?.find(app => app.name === this.appName);
+        const currentApp = this.enabledApplications?.find((app) => app.name === this.appName);
         this.currentApp = currentApp;
         if (currentApp) {
             switch (currentApp?.name) {
                 case PROFET_APPS.appraisal_management:
-                    this.currentAppLogo = imageDataUrl.profetOrdersLogo;
+                    this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetOrdersLogo);
                     break;
                 case PROFET_APPS.appraisal_valuation:
-                    this.currentAppLogo = imageDataUrl.profetValuationLogo;
+                    this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetValuationLogo);
                     break;
                 case PROFET_APPS.appraisal_review:
-                    this.currentAppLogo = imageDataUrl.profetReviewLogo;
+                    this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetReviewLogo);
                     break;
                 case PROFET_APPS.profet_portal:
-                    this.currentAppLogo = imageDataUrl.profetPortalLogo;
+                    this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetPortalLogo);
                     break;
             }
         }
         else {
-            this.currentAppLogo = imageDataUrl.profetPortalLogo;
+            this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetPortalLogo);
         }
     }
     toggleMenu(menu) {
-        (menu === 'apps') ? (this.isAppsMenuOpen = !this.isAppsMenuOpen) : null;
-        (menu === 'profile') ? this.isProfileMenuOpen = !this.isProfileMenuOpen : null;
+        menu === 'apps' ? (this.isAppsMenuOpen = !this.isAppsMenuOpen) : null;
+        menu === 'profile'
+            ? (this.isProfileMenuOpen = !this.isProfileMenuOpen)
+            : null;
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "lib-header", inputs: { template: "template", appName: "appName" }, outputs: { menuEvent: "menuEvent", infoEvent: "infoEvent" }, ngImport: i0, template: "<mat-toolbar cdkMenuBar color=\"primary\" [ngClass]=\"headerClass\" class=\"header-wrapper common_header shadow-sm\">\n    <!-- Main nav button and navigation links -->\n    <button mat-icon-button  color=\"theme-white\" (click)=\"menuAction()\" class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\"\n        aria-label=\"main menu\" tabindex=\"0\" matTooltip=\"Main menu\" matTooltipPosition=\"below\"\n        matTooltipClass=\"poc-header-tooltip\"><mat-icon>menu</mat-icon></button>\n    <a class=\"navbar-brand me-auto\" href=\"#\">\n        <img *ngIf=\"currentAppLogo\" [src]=\"sanitizeUrl(currentAppLogo)\" alt=\"App Logo\" class=\"app-logo\">\n    </a>\n    \n    <!-- Apps button and menu items -->\n    <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n    <button mat-icon-button *ngIf=\"(appList.length > 0)\" color=\"theme-white\"\n        class=\"pmx-button pmx-menu-button icon-btn btn-switch-apps ms-1 me-1\" [class.menu-opened]=\"isAppsMenuOpen == true\"\n        (menuOpened)=\"toggleMenu('apps')\" (menuClosed)=\"toggleMenu('apps')\" [matMenuTriggerFor]=\"apps\"\n        matTooltip=\"Switch application\" matTooltipPosition=\"below\" aria-label=\"apps menu\"\n        tabindex=\"0\">\n        <mat-icon class=\"icon-arrow-down\">apps</mat-icon>\n    </button>\n    <mat-menu #apps=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-apps\" hasBackdrop=\"true\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\"><h3 class=\"popover-title\">Switch Application</h3></div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"appList?.length == 1;else appsTitle\">Enabled Application</p>\n                    <ng-template #appsTitle><p>Enabled Applications</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-apps-group\">\n                    <li cdkMenuItem class=\"list-item list-app\" *ngFor=\"let app of appList;let i = index\" \n                        [ngClass]=\"(app?.active) ? 'app-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"appRedirect(app)\">\n                            <div class=\"app-icon-wrapper\"><img [src]=\"sanitizeUrl(imageDataUrls.profetThumbnail )\" class=\"app-icon\"></div>\n                            <span class=\"list-text me-auto\">{{ app?.name }}</span>\n                            <small class=\"active-label\" *ngIf=\"(app?.active)\">Active</small>\n                            <small class=\"hover-label tooltip-label\" *ngIf=\"!(app?.active)\">Click to switch app</small>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n    \n    <span class=\"vr vr-blury\"></span>\n    <!-- Profile button and profile dropdown links -->\n    <div class=\"btn-group\" role=\"group\" aria-label=\"Button group with profile info\" [ngClass]=\"(((currentCompany?.subDomain) && userCompanyLogo) ? 'branded-group-true' : 'branded-group-false') + ' ' + (isProfileMenuOpen ? 'btn-group-clicked' : '')\">\n        <button class=\"pmx-button pmx-menu-button profile-button\" mat-button mat-stroked-button [matMenuTriggerFor]=\"menu\"\n            color=\"primary\" (menuOpened)=\"toggleMenu('profile')\" (menuClosed)=\"toggleMenu('profile')\" [ngClass]=\"currentCompany?.subDomain ? 'branded-button-true' : 'branded-button-false'\" matTooltip=\"Profile Info\" matTooltipPosition=\"below\">\n            <div class=\"profile-inner\">\n                <div class=\"brand-logo align-self-center\" *ngIf=\"((currentCompany?.subDomain) && userCompanyLogo)\" [ngClass]=\"userCompanyLogo ? 'branded-logo-true' : 'branded-logo-false'\" [ngStyle]=\"{'background-image': 'url(' + userCompanyLogo + ')'}\"></div>\n                <div class=\"avatar\">\n                    <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"sanitizeUrl(userImageLink)\" class=\"avatar-image\" alt=\"Avatar\">\n                    <ng-template #defaultAvatar><img [src]=\"sanitizeUrl(imageDataUrls.defaultUserImage)\" class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n                </div>\n            </div>\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-profile\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\">\n                <div class=\"popover-user-top\">\n                    <div class=\"avatar-wrapper\">\n                        <div *ngIf=\"userImageLink;else defaultLargeAvatar\" [ngStyle]=\"{'background-image': 'url(' + userImageLink + ')'}\"\n                            class=\"avatar-icon\" alt=\"Avatar icon\">&nbsp;</div>\n                        <ng-template #defaultLargeAvatar>\n                            <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\" class=\"avatar-icon default-avatar\" alt=\"Avatar icon\">&nbsp;</div>\n                        </ng-template>\n                    </div>\n                    <div class=\"user-data\">\n                        <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{ userAuthData?.lastName }}</span></h3>\n                        <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\" (click)=\"profile()\">View Profile</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\"><p>Overview</p></div>\n                <ul cdkMenu class=\"list-group list-overview\" *ngIf=\"currentCompany\">\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.email\">\n                        <p mat-menu-item class=\"list-text list-text-email\">\n                            <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{ userAuthData?.email }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item d-none\" *ngIf=\"userAuthData?.contactPhone\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{ userAuthData?.contactPhone }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.address !== null\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">location_on</mat-icon>\n                            <span class=\"title-case me-auto\">\n                                <small>{{ userAuthData?.address?.streetAddress }} {{(userAuthData?.address?.streetAddress2 !== null) ? userAuthData?.address?.streetAddress2 : '' }}</small><br />\n                                {{ userAuthData?.address?.city }} {{userAuthData?.address?.stateOrProvince }} {{userAuthData?.address?.postalCode }}\n                            </span>\n                        </p>\n                    </li>\n                </ul>\n                <hr />\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"userCompanies?.length == 1;else companiesTitle\">Company</p>\n                    <ng-template #companiesTitle><p>Companies</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-group-companies\">\n                    <li cdkMenuItem class=\"list-item list-company\" *ngFor=\"let company of userCompanies\" [ngClass]=\"(company?.activeNow) ? 'list-active company-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"switchCompany(company)\" [matTooltip]=\"company?.name\"\n                          matTooltipPosition=\"below\">\n                            <mat-icon class=\"icon-check\">{{ (company?.activeNow) ? 'check_circle' : 'swap_vert' }}</mat-icon>\n                            <span class=\"list-text pmx-text-wrap me-auto\">{{ company?.name | titlecase }}</span>\n                            <small class=\"active-label\" *ngIf=\"(company?.activeNow)\">Active</small>\n                        </button>\n                    </li>\n                </ul>\n                <hr />\n                <ul cdkMenu class=\"list-group last-group my-1\">\n                    <li cdkMenuItem class=\"list-item py-2\">\n                        <button mat-menu-item class=\"pmx-button list-button btn-logout\" (click)=\"onLogoutClick()\">\n                            <mat-icon>power_settings_new</mat-icon>\n                            <span class=\"list-text\">Logout</span>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n</mat-toolbar>", styles: [".pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word}.pmx-lower-case{text-transform:lowercase}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #24a148;--mat-text-button-state-layer-color: #24a148;--mat-text-button-ripple-color: rgba(255, 64, 129, .1)}.header-user-name{text-align:end;color:#000}.header-user-name span{font-size:12px;color:#9e9e9ede}.avatarLogo{max-width:30px}mat-toolbar.mat-toolbar.common_header.mat-primary.mat-toolbar-single-row{position:absolute;left:0;top:0;background-color:#fff;height:56px}button.switchButton,button.menuHamberger{padding:8px!important}.sidenavPanel{padding:20px 25px;height:100vh;position:relative}ul.navbarList{padding-left:0;list-style:none;margin-top:40px}ul.navbarList li{color:#666;font-weight:400;margin-bottom:25px;width:170px;cursor:pointer}.active{color:#4177d6!important}ul.navbarList li img{width:23px;margin-right:15px}.accounts_drpmenu{margin-top:.7em}.xsShowUsername{display:none;padding:0 16px;height:48px;line-height:48px}.vr{width:2px;background-color:#f5f5f5;opacity:1;margin:0 .5rem 0 1rem}.vr-blury{background-image:linear-gradient(180deg,transparent,#666,transparent);width:1px;opacity:.25}.navbar-brand .app-logo{height:24px;width:auto}.pmx-button mat-icon.mat-icon,.pmx-button mat-icon.mat-primary,.pmx-button mat-icon.mat-accent,.pmx-button mat-icon.mat-warn{color:var(--mat-icon-color)}.pmx-button mat-icon.mat-icon{font-size:1.5rem!important;line-height:1.5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease}.pmx-button.mdc-button--raised mat-icon.mat-icon{width:24px;height:24px;display:contents}.pmx-button.mat-mdc-button-base mat-icon.mat-icon{z-index:1}.pmx-button mat-icon.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.pmx-button mat-icon.mdc-button span.button-text{display:inline-flex;padding:0 1rem;text-transform:uppercase;font-size:.875rem;line-height:1.5}.pmx-button mat-icon.mdc-button span.upper-case{text-transform:uppercase}.pmx-button.mdc-button,.pmx-button.mdc-icon-button,.pmx-button.mdc-button--outlined,.pmx-button.mdc-button .mat-mdc-button-touch-target,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{height:40px!important;font-size:.75rem!important;letter-spacing:.2px;padding:0 .5rem;line-height:normal}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--outlined,.pmx-button.icon-btn.mdc-button--raised,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{width:40px;border-radius:5px}.pmx-button.btn-small.mdc-button,.pmx-button.btn-small.mdc-icon-button,.pmx-button.btn-small.mdc-button--outlined{height:28px!important;padding:0 1rem}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--raised{color:#254d93}.pmx-header .icon-button-shadow{box-shadow:0 1px 3px #0003,0 0 #00000024,0 1px 3px #0000001f}.pmx-button.icon-btn.mdc-button--raised.btn-switch-apps.menu-opened,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps.menu-opened{background-color:#254d93;color:#fff;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24}.pmx-button.mdc-icon-button.pmx-menu-button:hover,.pmx-button.mat-mdc-outlined-button.btn-switch-apps:hover,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps:hover{background-color:#e5f3fb}.pmx-button.icon-app{width:20px}.pmx-button.mat-mdc-outlined-button,.pmx-button.mat-mdc-outlined-button:not(:disabled){background-color:#fff;overflow:hidden}.pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{padding:0;border-color:#bfdff7!important}.btn-group-clicked .pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{border-color:#bfdff7!important}.pmx-button.profile-button .profile-inner{border:0 solid transparent!important;display:flex;align-items:center;overflow:clip}.pmx-button.profile-button .avatar{width:38px;height:38px;box-sizing:border-box;border:3px #ffffff solid!important;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-content:center;align-items:center;flex-wrap:wrap}.pmx-button.profile-button .avatar{background-color:#9cd7a8}.pmx-button.profile-button .avatar img.avatar-image,.pmx-button.profile-button .avatar img.avatar-default{width:100%;height:auto}.branded-group-false{margin-left:.65rem}.branded-group-false .pmx-button.pmx-menu-button.profile-button.branded-button-false{width:40px;border-radius:20px!important}.branded-group-true{margin-left:.65rem;border-radius:20px;border:1px solid #bfdff7}.btn-group-clicked.branded-group-true{background-color:#99ccf2}.branded-group-true .pmx-button.profile-button .profile-inner{border:0 solid #c4c9d2!important}.branded-group-true .pmx-button.pmx-menu-button.profile-button.branded-button-true{border-radius:20px}.branded-group-true .pmx-button.profile-button.branded-button-true .profile-inner .branded-logo-true{border-radius:5px;display:block;position:relative;height:38px;background-size:100%;background-position:center;background-repeat:no-repeat;min-width:100px;margin-right:1rem}.pmx-menu-group.mat-mdc-menu-panel{margin-top:1rem}.header-dropdown-apps.mat-mdc-menu-panel .mat-mdc-menu-content,.header-dropdown-profile.mat-mdc-menu-panel .mat-mdc-menu-content{padding:0!important}.header-dropdown-apps{width:400px!important}.header-dropdown-apps.mat-mdc-menu-panel .list-button{padding:.5rem 2rem}.header-dropdown-apps.mdc-menu-surface--open,.header-dropdown-profile.mdc-menu-surface--open{position:absolute;z-index:1;top:0;right:0;margin:0;padding:0;border:1px solid #e5e5e5;border-radius:6px;background:#fff;animation:popover .2s ease-in-out}.header-dropdown-apps.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:400px!important;width:400px!important;overflow:visible}.header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible}.popover-content:after,.popover-content:before{font-size:1.4em;display:block;width:0;height:0;content:\"\";pointer-events:none;position:absolute;top:-.45em}.popover-content:before{border-right:10px solid transparent;border-bottom:10px solid #999;border-left:10px solid transparent;right:.97em}.popover-content:after{border-right:12px solid transparent;border-bottom:12px solid #d5e3fa;border-left:12px solid transparent;right:.9em}.popover-content-title{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 1rem;min-height:40px}.popover-content-title p{margin:0;font-size:.75rem!important;color:#777}.popover-content .popover-user-top:after{clear:both;content:\"\";display:table}.popover-content .popover-user-top{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}.popover-content .popover-user-top .avatar-wrapper{flex:0 4 auto;border-radius:100%;overflow-clip-margin:content-box;overflow:clip;background-color:#fff;padding:2px}.drop-shadow{filter:drop-shadow(0px 0px 3px rgba(0,0,0,.5))}.popover-content .popover-user-top .user-data{flex:1 0 auto;margin-left:1rem}.popover-content .popover-user-top .avatar-wrapper .avatar-icon{background-repeat:no-repeat;background-size:100%;background-position:center;width:64px;height:64px;background-color:#72c885}.avatar-icon.default-avatar{background-size:100%}.popover-content .popover-user-top .user-data h3.profile-name{font-size:1rem;text-overflow:ellipsis;margin-bottom:.5rem;line-height:normal;font-weight:600;color:#254d93}.btn.view-profile{background:#fafafa;color:#254d93}.popover-content ul.list-group{padding:0 0 8px;margin:0;display:flex;list-style:none}.popover-content ul.list-group.last-group,.popover-content ul.list-group.last-group .list-item{background-color:transparent}.popover-content ul.list-group li.list-item{align-items:center;border:none;padding:0;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;order:1}.popover-content ul.list-group li.list-item .list-button{padding:.5rem 2rem;min-height:40px}.popover-content ul.list-group li.list-item span.mat-mdc-menu-item-text,.popover-content ul.list-group li.list-item span.mdc-list-item__primary-text,.popover-content ul.list-group li.list-item .list-button>span{display:flex;align-items:center}.popover-content ul.list-group li.list-item.list-company .list-button>span{width:100%;overflow:hidden}.popover-content ul.list-group li.list-item .list-button .hover-label.tooltip-label{opacity:0}.popover-content ul.list-group li.list-item.list-app .list-button:hover>span .hover-label.tooltip-label,.popover-content ul.list-group li.list-item.list-company .list-button:hover>span .hover-label.tooltip-label{opacity:0;display:inline-flex;color:#fff;background-color:#616161;font-size:11px;border-radius:4px;padding:0 .5rem;transition:opacity .3s ease-out}.popover-content ul.list-group li.list-item .list-button:hover{background:rgba(0,0,0,.04)}.popover-content ul.list-group li.list-item.company-active,.popover-content ul.list-group li.list-item.app-active{cursor:not-allowed;pointer-events:none;order:0}.popover-content ul.list-group li.list-item.company-active .active-label,.popover-content ul.list-group li.list-item.app-active .active-label{background-color:#93c47d;color:#212121;padding:0 .5rem;border-radius:50px;font-size:.75rem;margin-left:.5rem}.popover-content ul.list-group.list-apps-group{display:flex}.popover-content ul.list-group.list-overview li.list-item{cursor:not-allowed;pointer-events:none}.popover-content ul.list-group li.list-item p.list-text{padding:.5rem 2rem;margin:0;min-height:auto}.popover-content ul.list-group li.list-item .list-button .mat-icon,.popover-content ul.list-group li.list-item p.list-text mat-icon.list-icon,.popover-content ul.list-group li.list-item .list-button .list-icon,.popover-content ul.list-group li.list-item p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;font-size:24px!important}.popover-content ul.list-group li.list-item.list-active.company-active button.list-button .mat-icon{color:#2db051;font-variation-settings:\"FILL\" 1,\"wght\" 300,\"GRAD\" 0,\"opsz\" 24}.popover-content ul.list-group li.list-item p.list-text span.mdc-list-item__primary-text{width:100%;display:flex}.popover-content ul.list-group li.list-item span.title-case,.popover-content ul.list-group li.list-item span.lower-case,.popover-content ul.list-group li.list-item span.pmx-lower-case{font-size:.8rem;color:#212121;font-weight:500;display:block;line-height:normal}small{color:#9e9e9e}.popover-content ul.list-group li.list-item span.text-label{font-size:12px;color:#979797;font-weight:400;display:block;line-height:normal}.popover-content ul.list-group li.list-item .list-text,.popover-content ul.list-group li.list-item .list-text span.mat-mdc-menu-item-text{font-size:.875rem;color:#0a152f;font-weight:500;line-height:normal}.popover-content ul.list-group li.list-item .list-text.list-text-email span.mat-mdc-menu-item-text{width:calc(100% - 40px);display:inline-flex}.popover-content ul.list-group li.list-item .list-text.list-text-email span.pmx-text-wrap{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:none;hyphens:none;width:100%}.popover-content ul.list-group li.list-item span.upper-case{text-transform:uppercase}.popover-content ul.list-group li.list-item span.app-status,.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{font-size:13px;color:#0a152f;font-weight:400;display:block;line-height:normal;margin:0}.popover-content ul.list-group li.list-item.app-active .list-text,.popover-content ul.list-group li.list-item.company-active .list-text{color:#4b85ea}.popover-content ul.list-group li.list-item.app-active span.app-status,.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status,.popover-content ul.list-group li.list-item.company-active span.app-status,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status{color:#24a53f}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{display:flex;flex-direction:row;justify-content:flex-start}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{transition:all .3s ease-out;margin-left:auto;flex:1;justify-content:flex-end}.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{background-color:#408dd7;color:#f5f5f5}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip .mat-mdc-chip-action-label{font-size:.75rem}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip{height:24px}.popover-content ul.list-group li.list-item img.logo-thumb{width:24px;height:auto;margin-right:1rem}.popover-content ul.list-group li.list-item .list-button.btn-logout{display:flex;align-items:center;color:#616161}.popover-content ul.list-group li.list-item.app-active .list-button .app-icon-wrapper{background-color:#fff;border-color:#4b85ea;border-width:3px}.popover-content ul.list-group li.list-item.company-active .list-text .mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;color:var(--themelightblue)}.popover-content ul.list-group li.list-item .list-button.btn-logout .list-text{color:#616161}.popover-content ul.list-group li.list-item.app-active button,.popover-content ul.list-group li.list-item.company-active button{cursor:not-allowed;pointer-events:none}.popover-content hr{background-color:#c4c9d2;margin:0;width:100%;border:0;border-top:1px solid #c4c9d2;opacity:1}.popover-content ul.apps-grid{width:100%;white-space:nowrap;overflow:auto}.popover-content ul.apps-grid li.list-item,.popover-content ul.apps-grid li.list-item img.logo-thumb{display:flex;justify-content:flex-start;flex-wrap:nowrap;align-content:center;align-items:center;flex-direction:row}.popover-header{background-color:#d5e3fa;border-bottom:1px solid #d8d8d8;padding:.975rem 1rem;margin-bottom:0;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;flex-wrap:wrap}.popover-header .mat-icon{font-size:1.5rem!important;font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24;color:#254d93}.header-dropdown-profile .popover-header{padding:1.125rem 1rem}.popover-header h3.popover-title{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin-bottom:0;line-height:normal;font-weight:500;color:#254d93}.popover-body{max-height:420px;overflow:auto;padding:0}.app-icon-wrapper{margin:0 1rem 0 0;max-width:48px;max-height:48px;width:48px;height:48px;overflow:hidden;background-size:70%;background-repeat:no-repeat;background-position:center;border:1px solid #c4c9d2;border-radius:8px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap}.app-icon-wrapper img.app-icon{width:100%;height:auto;overflow:hidden;padding:.5rem}h4.app-name{font-size:.65rem;margin:.5rem 0 0;line-height:normal;color:#254d93;font-weight:400;text-transform:uppercase}.popover-body ul.enabled-apps{display:flex;flex-flow:column wrap;justify-content:space-evenly;align-items:center;align-content:flex-start;border-bottom:1px solid #E9E9E9;margin:0;padding:0 1rem;list-style:none}.popover-body ul.enabled-apps li.enabled-app{flex-grow:1;flex:0 1 auto;text-align:center;font-size:.8125rem;padding:10px;list-style:none}.pmx-button.mdc-icon-button[color=theme-white],.pmx-button.icon-btn.mdc-button--raised[color=theme-white]{color:#254d93}.pmx-button.icon-btn.orders-menu[color=theme-white]{border:1px solid #fafafa!important}:host(.mat-accent){--mat-slider-ripple-color: #24a148;--mat-slider-hover-state-layer-color: rgba(255, 64, 129, .05);--mat-slider-focus-state-layer-color: rgba(255, 64, 129, .2);--mdc-slider-handle-color: #24a148;--mdc-slider-focus-handle-color: #24a148;--mdc-slider-hover-handle-color: #24a148;--mdc-slider-active-track-color: #24a148;--mdc-slider-inactive-track-color: #24a148;--mdc-slider-with-tick-marks-inactive-container-color: #24a148;--mdc-slider-with-tick-marks-active-container-color: #51bc6b}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "lib-header", inputs: { template: "template", appName: "appName" }, outputs: { menuEvent: "menuEvent", infoEvent: "infoEvent" }, ngImport: i0, template: "<mat-toolbar cdkMenuBar color=\"primary\" [ngClass]=\"headerClass\" class=\"header-wrapper common_header shadow-sm\">\n    <!-- Main nav button and navigation links -->\n    <button mat-icon-button  color=\"theme-white\" (click)=\"menuAction()\" class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\"\n        aria-label=\"main menu\" tabindex=\"0\" matTooltip=\"Main menu\" matTooltipPosition=\"below\"\n        matTooltipClass=\"poc-header-tooltip\"><mat-icon>menu</mat-icon></button>\n    <a class=\"navbar-brand me-auto\" href=\"#\">\n        <img *ngIf=\"currentAppLogo\" [src]=\"currentAppLogo\" alt=\"App Logo\" class=\"app-logo\">\n    </a>\n    \n    <!-- Apps button and menu items -->\n    <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n    <button mat-icon-button *ngIf=\"(appList.length > 0)\" color=\"theme-white\"\n        class=\"pmx-button pmx-menu-button icon-btn btn-switch-apps ms-1 me-1\" [class.menu-opened]=\"isAppsMenuOpen == true\"\n        (menuOpened)=\"toggleMenu('apps')\" (menuClosed)=\"toggleMenu('apps')\" [matMenuTriggerFor]=\"apps\"\n        matTooltip=\"Switch application\" matTooltipPosition=\"below\" aria-label=\"apps menu\"\n        tabindex=\"0\">\n        <mat-icon class=\"icon-arrow-down\">apps</mat-icon>\n    </button>\n    <mat-menu #apps=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-apps\" hasBackdrop=\"true\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\"><h3 class=\"popover-title\">Switch Application</h3></div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"appList?.length == 1;else appsTitle\">Enabled Application</p>\n                    <ng-template #appsTitle><p>Enabled Applications</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-apps-group\">\n                    <li cdkMenuItem class=\"list-item list-app\" *ngFor=\"let app of appList;let i = index\" \n                        [ngClass]=\"(app?.active) ? 'app-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"appRedirect(app)\">\n                            <div class=\"app-icon-wrapper\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetThumbnail )\" class=\"app-icon\"></div>\n                            <span class=\"list-text me-auto\">{{ app?.name }}</span>\n                            <small class=\"active-label\" *ngIf=\"(app?.active)\">Active</small>\n                            <small class=\"hover-label tooltip-label\" *ngIf=\"!(app?.active)\">Click to switch app</small>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n    \n    <span class=\"vr vr-blury\"></span>\n    <!-- Profile button and profile dropdown links -->\n    <div class=\"btn-group\" role=\"group\" aria-label=\"Button group with profile info\" [ngClass]=\"(((currentCompany?.subDomain) && userCompanyLogo) ? 'branded-group-true' : 'branded-group-false') + ' ' + (isProfileMenuOpen ? 'btn-group-clicked' : '')\">\n        <button class=\"pmx-button pmx-menu-button profile-button\" mat-button mat-stroked-button [matMenuTriggerFor]=\"menu\"\n            color=\"primary\" (menuOpened)=\"toggleMenu('profile')\" (menuClosed)=\"toggleMenu('profile')\" [ngClass]=\"currentCompany?.subDomain ? 'branded-button-true' : 'branded-button-false'\" matTooltip=\"Profile Info\" matTooltipPosition=\"below\">\n            <div class=\"profile-inner\">\n                <div class=\"brand-logo align-self-center\" *ngIf=\"((currentCompany?.subDomain) && userCompanyLogo)\" [ngClass]=\"userCompanyLogo ? 'branded-logo-true' : 'branded-logo-false'\" [ngStyle]=\"{'background-image': 'url(' + userCompanyLogo + ')'}\"></div>\n                <div class=\"avatar\">\n                    <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n                    <ng-template #defaultAvatar><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\" class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n                </div>\n            </div>\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-profile\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\">\n                <div class=\"popover-user-top\">\n                    <div class=\"avatar-wrapper\">\n                        <div *ngIf=\"userImageLink;else defaultLargeAvatar\" [ngStyle]=\"{'background-image': 'url(' + userImageLink + ')'}\"\n                            class=\"avatar-icon\" alt=\"Avatar icon\">&nbsp;</div>\n                        <ng-template #defaultLargeAvatar>\n                            <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\" class=\"avatar-icon default-avatar\" alt=\"Avatar icon\">&nbsp;</div>\n                        </ng-template>\n                    </div>\n                    <div class=\"user-data\">\n                        <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{ userAuthData?.lastName }}</span></h3>\n                        <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\" (click)=\"profile()\">View Profile</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\"><p>Overview</p></div>\n                <ul cdkMenu class=\"list-group list-overview\" *ngIf=\"currentCompany\">\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.email\">\n                        <p mat-menu-item class=\"list-text list-text-email\">\n                            <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{ userAuthData?.email }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item d-none\" *ngIf=\"userAuthData?.contactPhone\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{ userAuthData?.contactPhone }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.address !== null\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">location_on</mat-icon>\n                            <span class=\"title-case me-auto\">\n                                <small>{{ userAuthData?.address?.streetAddress }} {{(userAuthData?.address?.streetAddress2 !== null) ? userAuthData?.address?.streetAddress2 : '' }}</small><br />\n                                {{ userAuthData?.address?.city }} {{userAuthData?.address?.stateOrProvince }} {{userAuthData?.address?.postalCode }}\n                            </span>\n                        </p>\n                    </li>\n                </ul>\n                <hr />\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"userCompanies?.length == 1;else companiesTitle\">Company</p>\n                    <ng-template #companiesTitle><p>Companies</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-group-companies\">\n                    <li cdkMenuItem class=\"list-item list-company\" *ngFor=\"let company of userCompanies\" [ngClass]=\"(company?.activeNow) ? 'list-active company-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"switchCompany(company)\" [matTooltip]=\"company?.name\"\n                          matTooltipPosition=\"below\">\n                            <mat-icon class=\"icon-check\">{{ (company?.activeNow) ? 'check_circle' : 'swap_vert' }}</mat-icon>\n                            <span class=\"list-text pmx-text-wrap me-auto\">{{ company?.name | titlecase }}</span>\n                            <small class=\"active-label\" *ngIf=\"(company?.activeNow)\">Active</small>\n                        </button>\n                    </li>\n                </ul>\n                <hr />\n                <ul cdkMenu class=\"list-group last-group my-1\">\n                    <li cdkMenuItem class=\"list-item py-2\">\n                        <button mat-menu-item class=\"pmx-button list-button btn-logout\" (click)=\"onLogoutClick()\">\n                            <mat-icon>power_settings_new</mat-icon>\n                            <span class=\"list-text\">Logout</span>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n</mat-toolbar>", styles: [".pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word}.pmx-lower-case{text-transform:lowercase}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #24a148;--mat-text-button-state-layer-color: #24a148;--mat-text-button-ripple-color: rgba(255, 64, 129, .1)}.header-user-name{text-align:end;color:#000}.header-user-name span{font-size:12px;color:#9e9e9ede}.avatarLogo{max-width:30px}mat-toolbar.mat-toolbar.common_header.mat-primary.mat-toolbar-single-row{position:absolute;left:0;top:0;background-color:#fff;height:56px}button.switchButton,button.menuHamberger{padding:8px!important}.sidenavPanel{padding:20px 25px;height:100vh;position:relative}ul.navbarList{padding-left:0;list-style:none;margin-top:40px}ul.navbarList li{color:#666;font-weight:400;margin-bottom:25px;width:170px;cursor:pointer}.active{color:#4177d6!important}ul.navbarList li img{width:23px;margin-right:15px}.accounts_drpmenu{margin-top:.7em}.xsShowUsername{display:none;padding:0 16px;height:48px;line-height:48px}.vr{width:2px;background-color:#f5f5f5;opacity:1;margin:0 .5rem 0 1rem}.vr-blury{background-image:linear-gradient(180deg,transparent,#666,transparent);width:1px;opacity:.25}.navbar-brand .app-logo{height:24px;width:auto}.pmx-button mat-icon.mat-icon,.pmx-button mat-icon.mat-primary,.pmx-button mat-icon.mat-accent,.pmx-button mat-icon.mat-warn{color:var(--mat-icon-color)}.pmx-button mat-icon.mat-icon{font-size:1.5rem!important;line-height:1.5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease}.pmx-button.mdc-button--raised mat-icon.mat-icon{width:24px;height:24px;display:contents}.pmx-button.mat-mdc-button-base mat-icon.mat-icon{z-index:1}.pmx-button mat-icon.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.pmx-button mat-icon.mdc-button span.button-text{display:inline-flex;padding:0 1rem;text-transform:uppercase;font-size:.875rem;line-height:1.5}.pmx-button mat-icon.mdc-button span.upper-case{text-transform:uppercase}.pmx-button.mdc-button,.pmx-button.mdc-icon-button,.pmx-button.mdc-button--outlined,.pmx-button.mdc-button .mat-mdc-button-touch-target,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{height:40px!important;font-size:.75rem!important;letter-spacing:.2px;padding:0 .5rem;line-height:normal}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--outlined,.pmx-button.icon-btn.mdc-button--raised,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{width:40px;border-radius:5px}.pmx-button.btn-small.mdc-button,.pmx-button.btn-small.mdc-icon-button,.pmx-button.btn-small.mdc-button--outlined{height:28px!important;padding:0 1rem}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--raised{color:#254d93}.pmx-header .icon-button-shadow{box-shadow:0 1px 3px #0003,0 0 #00000024,0 1px 3px #0000001f}.pmx-button.icon-btn.mdc-button--raised.btn-switch-apps.menu-opened,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps.menu-opened{background-color:#254d93;color:#fff;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24}.pmx-button.mdc-icon-button.pmx-menu-button:hover,.pmx-button.mat-mdc-outlined-button.btn-switch-apps:hover,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps:hover{background-color:#e5f3fb}.pmx-button.icon-app{width:20px}.pmx-button.mat-mdc-outlined-button,.pmx-button.mat-mdc-outlined-button:not(:disabled){background-color:#fff;overflow:hidden}.pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{padding:0;border-color:#bfdff7!important}.btn-group-clicked .pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{border-color:#bfdff7!important}.pmx-button.profile-button .profile-inner{border:0 solid transparent!important;display:flex;align-items:center;overflow:clip}.pmx-button.profile-button .avatar{width:38px;height:38px;box-sizing:border-box;border:3px #ffffff solid!important;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-content:center;align-items:center;flex-wrap:wrap}.pmx-button.profile-button .avatar{background-color:#9cd7a8}.pmx-button.profile-button .avatar img.avatar-image,.pmx-button.profile-button .avatar img.avatar-default{width:100%;height:auto}.branded-group-false{margin-left:.65rem}.branded-group-false .pmx-button.pmx-menu-button.profile-button.branded-button-false{width:40px;border-radius:20px!important}.branded-group-true{margin-left:.65rem;border-radius:20px;border:1px solid #bfdff7}.btn-group-clicked.branded-group-true{background-color:#99ccf2}.branded-group-true .pmx-button.profile-button .profile-inner{border:0 solid #c4c9d2!important}.branded-group-true .pmx-button.pmx-menu-button.profile-button.branded-button-true{border-radius:20px}.branded-group-true .pmx-button.profile-button.branded-button-true .profile-inner .branded-logo-true{border-radius:5px;display:block;position:relative;height:38px;background-size:100%;background-position:center;background-repeat:no-repeat;min-width:100px;margin-right:1rem}.pmx-menu-group.mat-mdc-menu-panel{margin-top:1rem}.header-dropdown-apps.mat-mdc-menu-panel .mat-mdc-menu-content,.header-dropdown-profile.mat-mdc-menu-panel .mat-mdc-menu-content{padding:0!important}.header-dropdown-apps{width:400px!important}.header-dropdown-apps.mat-mdc-menu-panel .list-button{padding:.5rem 2rem}.header-dropdown-apps.mdc-menu-surface--open,.header-dropdown-profile.mdc-menu-surface--open{position:absolute;z-index:1;top:0;right:0;margin:0;padding:0;border:1px solid #e5e5e5;border-radius:6px;background:#fff;animation:popover .2s ease-in-out}.header-dropdown-apps.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:400px!important;width:400px!important;overflow:visible}.header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible}.popover-content:after,.popover-content:before{font-size:1.4em;display:block;width:0;height:0;content:\"\";pointer-events:none;position:absolute;top:-.45em}.popover-content:before{border-right:10px solid transparent;border-bottom:10px solid #999;border-left:10px solid transparent;right:.97em}.popover-content:after{border-right:12px solid transparent;border-bottom:12px solid #d5e3fa;border-left:12px solid transparent;right:.9em}.popover-content-title{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 1rem;min-height:40px}.popover-content-title p{margin:0;font-size:.75rem!important;color:#777}.popover-content .popover-user-top:after{clear:both;content:\"\";display:table}.popover-content .popover-user-top{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}.popover-content .popover-user-top .avatar-wrapper{flex:0 4 auto;border-radius:100%;overflow-clip-margin:content-box;overflow:clip;background-color:#fff;padding:2px}.drop-shadow{filter:drop-shadow(0px 0px 3px rgba(0,0,0,.5))}.popover-content .popover-user-top .user-data{flex:1 0 auto;margin-left:1rem}.popover-content .popover-user-top .avatar-wrapper .avatar-icon{background-repeat:no-repeat;background-size:100%;background-position:center;width:64px;height:64px;background-color:#72c885}.avatar-icon.default-avatar{background-size:100%}.popover-content .popover-user-top .user-data h3.profile-name{font-size:1rem;text-overflow:ellipsis;margin-bottom:.5rem;line-height:normal;font-weight:600;color:#254d93}.btn.view-profile{background:#fafafa;color:#254d93}.popover-content ul.list-group{padding:0 0 8px;margin:0;display:flex;list-style:none}.popover-content ul.list-group.last-group,.popover-content ul.list-group.last-group .list-item{background-color:transparent}.popover-content ul.list-group li.list-item{align-items:center;border:none;padding:0;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;order:1}.popover-content ul.list-group li.list-item .list-button{padding:.5rem 2rem;min-height:40px}.popover-content ul.list-group li.list-item span.mat-mdc-menu-item-text,.popover-content ul.list-group li.list-item span.mdc-list-item__primary-text,.popover-content ul.list-group li.list-item .list-button>span{display:flex;align-items:center}.popover-content ul.list-group li.list-item.list-company .list-button>span{width:100%;overflow:hidden}.popover-content ul.list-group li.list-item .list-button .hover-label.tooltip-label{opacity:0}.popover-content ul.list-group li.list-item.list-app .list-button:hover>span .hover-label.tooltip-label,.popover-content ul.list-group li.list-item.list-company .list-button:hover>span .hover-label.tooltip-label{opacity:0;display:inline-flex;color:#fff;background-color:#616161;font-size:11px;border-radius:4px;padding:0 .5rem;transition:opacity .3s ease-out}.popover-content ul.list-group li.list-item .list-button:hover{background:rgba(0,0,0,.04)}.popover-content ul.list-group li.list-item.company-active,.popover-content ul.list-group li.list-item.app-active{cursor:not-allowed;pointer-events:none;order:0}.popover-content ul.list-group li.list-item.company-active .active-label,.popover-content ul.list-group li.list-item.app-active .active-label{background-color:#93c47d;color:#212121;padding:0 .5rem;border-radius:50px;font-size:.75rem;margin-left:.5rem}.popover-content ul.list-group.list-apps-group{display:flex}.popover-content ul.list-group.list-overview li.list-item{cursor:not-allowed;pointer-events:none}.popover-content ul.list-group li.list-item p.list-text{padding:.5rem 2rem;margin:0;min-height:auto}.popover-content ul.list-group li.list-item .list-button .mat-icon,.popover-content ul.list-group li.list-item p.list-text mat-icon.list-icon,.popover-content ul.list-group li.list-item .list-button .list-icon,.popover-content ul.list-group li.list-item p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;font-size:24px!important}.popover-content ul.list-group li.list-item.list-active.company-active button.list-button .mat-icon{color:#2db051;font-variation-settings:\"FILL\" 1,\"wght\" 300,\"GRAD\" 0,\"opsz\" 24}.popover-content ul.list-group li.list-item p.list-text span.mdc-list-item__primary-text{width:100%;display:flex}.popover-content ul.list-group li.list-item span.title-case,.popover-content ul.list-group li.list-item span.lower-case,.popover-content ul.list-group li.list-item span.pmx-lower-case{font-size:.8rem;color:#212121;font-weight:500;display:block;line-height:normal}small{color:#9e9e9e}.popover-content ul.list-group li.list-item span.text-label{font-size:12px;color:#979797;font-weight:400;display:block;line-height:normal}.popover-content ul.list-group li.list-item .list-text,.popover-content ul.list-group li.list-item .list-text span.mat-mdc-menu-item-text{font-size:.875rem;color:#0a152f;font-weight:500;line-height:normal}.popover-content ul.list-group li.list-item .list-text.list-text-email span.mat-mdc-menu-item-text{width:calc(100% - 40px);display:inline-flex}.popover-content ul.list-group li.list-item .list-text.list-text-email span.pmx-text-wrap{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:none;hyphens:none;width:100%}.popover-content ul.list-group li.list-item span.upper-case{text-transform:uppercase}.popover-content ul.list-group li.list-item span.app-status,.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{font-size:13px;color:#0a152f;font-weight:400;display:block;line-height:normal;margin:0}.popover-content ul.list-group li.list-item.app-active .list-text,.popover-content ul.list-group li.list-item.company-active .list-text{color:#4b85ea}.popover-content ul.list-group li.list-item.app-active span.app-status,.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status,.popover-content ul.list-group li.list-item.company-active span.app-status,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status{color:#24a53f}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{display:flex;flex-direction:row;justify-content:flex-start}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{transition:all .3s ease-out;margin-left:auto;flex:1;justify-content:flex-end}.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{background-color:#408dd7;color:#f5f5f5}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip .mat-mdc-chip-action-label{font-size:.75rem}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip{height:24px}.popover-content ul.list-group li.list-item img.logo-thumb{width:24px;height:auto;margin-right:1rem}.popover-content ul.list-group li.list-item .list-button.btn-logout{display:flex;align-items:center;color:#616161}.popover-content ul.list-group li.list-item.app-active .list-button .app-icon-wrapper{background-color:#fff;border-color:#4b85ea;border-width:3px}.popover-content ul.list-group li.list-item.company-active .list-text .mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;color:var(--themelightblue)}.popover-content ul.list-group li.list-item .list-button.btn-logout .list-text{color:#616161}.popover-content ul.list-group li.list-item.app-active button,.popover-content ul.list-group li.list-item.company-active button{cursor:not-allowed;pointer-events:none}.popover-content hr{background-color:#c4c9d2;margin:0;width:100%;border:0;border-top:1px solid #c4c9d2;opacity:1}.popover-content ul.apps-grid{width:100%;white-space:nowrap;overflow:auto}.popover-content ul.apps-grid li.list-item,.popover-content ul.apps-grid li.list-item img.logo-thumb{display:flex;justify-content:flex-start;flex-wrap:nowrap;align-content:center;align-items:center;flex-direction:row}.popover-header{background-color:#d5e3fa;border-bottom:1px solid #d8d8d8;padding:.975rem 1rem;margin-bottom:0;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;flex-wrap:wrap}.popover-header .mat-icon{font-size:1.5rem!important;font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24;color:#254d93}.header-dropdown-profile .popover-header{padding:1.125rem 1rem}.popover-header h3.popover-title{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin-bottom:0;line-height:normal;font-weight:500;color:#254d93}.popover-body{max-height:420px;overflow:auto;padding:0}.app-icon-wrapper{margin:0 1rem 0 0;max-width:48px;max-height:48px;width:48px;height:48px;overflow:hidden;background-size:70%;background-repeat:no-repeat;background-position:center;border:1px solid #c4c9d2;border-radius:8px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap}.app-icon-wrapper img.app-icon{width:100%;height:auto;overflow:hidden;padding:.5rem}h4.app-name{font-size:.65rem;margin:.5rem 0 0;line-height:normal;color:#254d93;font-weight:400;text-transform:uppercase}.popover-body ul.enabled-apps{display:flex;flex-flow:column wrap;justify-content:space-evenly;align-items:center;align-content:flex-start;border-bottom:1px solid #E9E9E9;margin:0;padding:0 1rem;list-style:none}.popover-body ul.enabled-apps li.enabled-app{flex-grow:1;flex:0 1 auto;text-align:center;font-size:.8125rem;padding:10px;list-style:none}.pmx-button.mdc-icon-button[color=theme-white],.pmx-button.icon-btn.mdc-button--raised[color=theme-white]{color:#254d93}.pmx-button.icon-btn.orders-menu[color=theme-white]{border:1px solid #fafafa!important}:host(.mat-accent){--mat-slider-ripple-color: #24a148;--mat-slider-hover-state-layer-color: rgba(255, 64, 129, .05);--mat-slider-focus-state-layer-color: rgba(255, 64, 129, .2);--mdc-slider-handle-color: #24a148;--mdc-slider-focus-handle-color: #24a148;--mdc-slider-hover-handle-color: #24a148;--mdc-slider-active-track-color: #24a148;--mdc-slider-inactive-track-color: #24a148;--mdc-slider-with-tick-marks-inactive-container-color: #24a148;--mdc-slider-with-tick-marks-active-container-color: #51bc6b}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header', encapsulation: ViewEncapsulation.None, template: "<mat-toolbar cdkMenuBar color=\"primary\" [ngClass]=\"headerClass\" class=\"header-wrapper common_header shadow-sm\">\n    <!-- Main nav button and navigation links -->\n    <button mat-icon-button  color=\"theme-white\" (click)=\"menuAction()\" class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\"\n        aria-label=\"main menu\" tabindex=\"0\" matTooltip=\"Main menu\" matTooltipPosition=\"below\"\n        matTooltipClass=\"poc-header-tooltip\"><mat-icon>menu</mat-icon></button>\n    <a class=\"navbar-brand me-auto\" href=\"#\">\n        <img *ngIf=\"currentAppLogo\" [src]=\"sanitizeUrl(currentAppLogo)\" alt=\"App Logo\" class=\"app-logo\">\n    </a>\n    \n    <!-- Apps button and menu items -->\n    <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n    <button mat-icon-button *ngIf=\"(appList.length > 0)\" color=\"theme-white\"\n        class=\"pmx-button pmx-menu-button icon-btn btn-switch-apps ms-1 me-1\" [class.menu-opened]=\"isAppsMenuOpen == true\"\n        (menuOpened)=\"toggleMenu('apps')\" (menuClosed)=\"toggleMenu('apps')\" [matMenuTriggerFor]=\"apps\"\n        matTooltip=\"Switch application\" matTooltipPosition=\"below\" aria-label=\"apps menu\"\n        tabindex=\"0\">\n        <mat-icon class=\"icon-arrow-down\">apps</mat-icon>\n    </button>\n    <mat-menu #apps=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-apps\" hasBackdrop=\"true\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\"><h3 class=\"popover-title\">Switch Application</h3></div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"appList?.length == 1;else appsTitle\">Enabled Application</p>\n                    <ng-template #appsTitle><p>Enabled Applications</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-apps-group\">\n                    <li cdkMenuItem class=\"list-item list-app\" *ngFor=\"let app of appList;let i = index\" \n                        [ngClass]=\"(app?.active) ? 'app-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"appRedirect(app)\">\n                            <div class=\"app-icon-wrapper\"><img [src]=\"sanitizeUrl(imageDataUrls.profetThumbnail )\" class=\"app-icon\"></div>\n                            <span class=\"list-text me-auto\">{{ app?.name }}</span>\n                            <small class=\"active-label\" *ngIf=\"(app?.active)\">Active</small>\n                            <small class=\"hover-label tooltip-label\" *ngIf=\"!(app?.active)\">Click to switch app</small>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n    \n    <span class=\"vr vr-blury\"></span>\n    <!-- Profile button and profile dropdown links -->\n    <div class=\"btn-group\" role=\"group\" aria-label=\"Button group with profile info\" [ngClass]=\"(((currentCompany?.subDomain) && userCompanyLogo) ? 'branded-group-true' : 'branded-group-false') + ' ' + (isProfileMenuOpen ? 'btn-group-clicked' : '')\">\n        <button class=\"pmx-button pmx-menu-button profile-button\" mat-button mat-stroked-button [matMenuTriggerFor]=\"menu\"\n            color=\"primary\" (menuOpened)=\"toggleMenu('profile')\" (menuClosed)=\"toggleMenu('profile')\" [ngClass]=\"currentCompany?.subDomain ? 'branded-button-true' : 'branded-button-false'\" matTooltip=\"Profile Info\" matTooltipPosition=\"below\">\n            <div class=\"profile-inner\">\n                <div class=\"brand-logo align-self-center\" *ngIf=\"((currentCompany?.subDomain) && userCompanyLogo)\" [ngClass]=\"userCompanyLogo ? 'branded-logo-true' : 'branded-logo-false'\" [ngStyle]=\"{'background-image': 'url(' + userCompanyLogo + ')'}\"></div>\n                <div class=\"avatar\">\n                    <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"sanitizeUrl(userImageLink)\" class=\"avatar-image\" alt=\"Avatar\">\n                    <ng-template #defaultAvatar><img [src]=\"sanitizeUrl(imageDataUrls.defaultUserImage)\" class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n                </div>\n            </div>\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-profile\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\">\n                <div class=\"popover-user-top\">\n                    <div class=\"avatar-wrapper\">\n                        <div *ngIf=\"userImageLink;else defaultLargeAvatar\" [ngStyle]=\"{'background-image': 'url(' + userImageLink + ')'}\"\n                            class=\"avatar-icon\" alt=\"Avatar icon\">&nbsp;</div>\n                        <ng-template #defaultLargeAvatar>\n                            <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\" class=\"avatar-icon default-avatar\" alt=\"Avatar icon\">&nbsp;</div>\n                        </ng-template>\n                    </div>\n                    <div class=\"user-data\">\n                        <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{ userAuthData?.lastName }}</span></h3>\n                        <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\" (click)=\"profile()\">View Profile</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\"><p>Overview</p></div>\n                <ul cdkMenu class=\"list-group list-overview\" *ngIf=\"currentCompany\">\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.email\">\n                        <p mat-menu-item class=\"list-text list-text-email\">\n                            <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{ userAuthData?.email }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item d-none\" *ngIf=\"userAuthData?.contactPhone\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{ userAuthData?.contactPhone }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.address !== null\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">location_on</mat-icon>\n                            <span class=\"title-case me-auto\">\n                                <small>{{ userAuthData?.address?.streetAddress }} {{(userAuthData?.address?.streetAddress2 !== null) ? userAuthData?.address?.streetAddress2 : '' }}</small><br />\n                                {{ userAuthData?.address?.city }} {{userAuthData?.address?.stateOrProvince }} {{userAuthData?.address?.postalCode }}\n                            </span>\n                        </p>\n                    </li>\n                </ul>\n                <hr />\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"userCompanies?.length == 1;else companiesTitle\">Company</p>\n                    <ng-template #companiesTitle><p>Companies</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-group-companies\">\n                    <li cdkMenuItem class=\"list-item list-company\" *ngFor=\"let company of userCompanies\" [ngClass]=\"(company?.activeNow) ? 'list-active company-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"switchCompany(company)\" [matTooltip]=\"company?.name\"\n                          matTooltipPosition=\"below\">\n                            <mat-icon class=\"icon-check\">{{ (company?.activeNow) ? 'check_circle' : 'swap_vert' }}</mat-icon>\n                            <span class=\"list-text pmx-text-wrap me-auto\">{{ company?.name | titlecase }}</span>\n                            <small class=\"active-label\" *ngIf=\"(company?.activeNow)\">Active</small>\n                        </button>\n                    </li>\n                </ul>\n                <hr />\n                <ul cdkMenu class=\"list-group last-group my-1\">\n                    <li cdkMenuItem class=\"list-item py-2\">\n                        <button mat-menu-item class=\"pmx-button list-button btn-logout\" (click)=\"onLogoutClick()\">\n                            <mat-icon>power_settings_new</mat-icon>\n                            <span class=\"list-text\">Logout</span>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n</mat-toolbar>", styles: [".pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word}.pmx-lower-case{text-transform:lowercase}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #24a148;--mat-text-button-state-layer-color: #24a148;--mat-text-button-ripple-color: rgba(255, 64, 129, .1)}.header-user-name{text-align:end;color:#000}.header-user-name span{font-size:12px;color:#9e9e9ede}.avatarLogo{max-width:30px}mat-toolbar.mat-toolbar.common_header.mat-primary.mat-toolbar-single-row{position:absolute;left:0;top:0;background-color:#fff;height:56px}button.switchButton,button.menuHamberger{padding:8px!important}.sidenavPanel{padding:20px 25px;height:100vh;position:relative}ul.navbarList{padding-left:0;list-style:none;margin-top:40px}ul.navbarList li{color:#666;font-weight:400;margin-bottom:25px;width:170px;cursor:pointer}.active{color:#4177d6!important}ul.navbarList li img{width:23px;margin-right:15px}.accounts_drpmenu{margin-top:.7em}.xsShowUsername{display:none;padding:0 16px;height:48px;line-height:48px}.vr{width:2px;background-color:#f5f5f5;opacity:1;margin:0 .5rem 0 1rem}.vr-blury{background-image:linear-gradient(180deg,transparent,#666,transparent);width:1px;opacity:.25}.navbar-brand .app-logo{height:24px;width:auto}.pmx-button mat-icon.mat-icon,.pmx-button mat-icon.mat-primary,.pmx-button mat-icon.mat-accent,.pmx-button mat-icon.mat-warn{color:var(--mat-icon-color)}.pmx-button mat-icon.mat-icon{font-size:1.5rem!important;line-height:1.5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease}.pmx-button.mdc-button--raised mat-icon.mat-icon{width:24px;height:24px;display:contents}.pmx-button.mat-mdc-button-base mat-icon.mat-icon{z-index:1}.pmx-button mat-icon.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.pmx-button mat-icon.mdc-button span.button-text{display:inline-flex;padding:0 1rem;text-transform:uppercase;font-size:.875rem;line-height:1.5}.pmx-button mat-icon.mdc-button span.upper-case{text-transform:uppercase}.pmx-button.mdc-button,.pmx-button.mdc-icon-button,.pmx-button.mdc-button--outlined,.pmx-button.mdc-button .mat-mdc-button-touch-target,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{height:40px!important;font-size:.75rem!important;letter-spacing:.2px;padding:0 .5rem;line-height:normal}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--outlined,.pmx-button.icon-btn.mdc-button--raised,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{width:40px;border-radius:5px}.pmx-button.btn-small.mdc-button,.pmx-button.btn-small.mdc-icon-button,.pmx-button.btn-small.mdc-button--outlined{height:28px!important;padding:0 1rem}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--raised{color:#254d93}.pmx-header .icon-button-shadow{box-shadow:0 1px 3px #0003,0 0 #00000024,0 1px 3px #0000001f}.pmx-button.icon-btn.mdc-button--raised.btn-switch-apps.menu-opened,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps.menu-opened{background-color:#254d93;color:#fff;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24}.pmx-button.mdc-icon-button.pmx-menu-button:hover,.pmx-button.mat-mdc-outlined-button.btn-switch-apps:hover,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps:hover{background-color:#e5f3fb}.pmx-button.icon-app{width:20px}.pmx-button.mat-mdc-outlined-button,.pmx-button.mat-mdc-outlined-button:not(:disabled){background-color:#fff;overflow:hidden}.pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{padding:0;border-color:#bfdff7!important}.btn-group-clicked .pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{border-color:#bfdff7!important}.pmx-button.profile-button .profile-inner{border:0 solid transparent!important;display:flex;align-items:center;overflow:clip}.pmx-button.profile-button .avatar{width:38px;height:38px;box-sizing:border-box;border:3px #ffffff solid!important;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-content:center;align-items:center;flex-wrap:wrap}.pmx-button.profile-button .avatar{background-color:#9cd7a8}.pmx-button.profile-button .avatar img.avatar-image,.pmx-button.profile-button .avatar img.avatar-default{width:100%;height:auto}.branded-group-false{margin-left:.65rem}.branded-group-false .pmx-button.pmx-menu-button.profile-button.branded-button-false{width:40px;border-radius:20px!important}.branded-group-true{margin-left:.65rem;border-radius:20px;border:1px solid #bfdff7}.btn-group-clicked.branded-group-true{background-color:#99ccf2}.branded-group-true .pmx-button.profile-button .profile-inner{border:0 solid #c4c9d2!important}.branded-group-true .pmx-button.pmx-menu-button.profile-button.branded-button-true{border-radius:20px}.branded-group-true .pmx-button.profile-button.branded-button-true .profile-inner .branded-logo-true{border-radius:5px;display:block;position:relative;height:38px;background-size:100%;background-position:center;background-repeat:no-repeat;min-width:100px;margin-right:1rem}.pmx-menu-group.mat-mdc-menu-panel{margin-top:1rem}.header-dropdown-apps.mat-mdc-menu-panel .mat-mdc-menu-content,.header-dropdown-profile.mat-mdc-menu-panel .mat-mdc-menu-content{padding:0!important}.header-dropdown-apps{width:400px!important}.header-dropdown-apps.mat-mdc-menu-panel .list-button{padding:.5rem 2rem}.header-dropdown-apps.mdc-menu-surface--open,.header-dropdown-profile.mdc-menu-surface--open{position:absolute;z-index:1;top:0;right:0;margin:0;padding:0;border:1px solid #e5e5e5;border-radius:6px;background:#fff;animation:popover .2s ease-in-out}.header-dropdown-apps.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:400px!important;width:400px!important;overflow:visible}.header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible}.popover-content:after,.popover-content:before{font-size:1.4em;display:block;width:0;height:0;content:\"\";pointer-events:none;position:absolute;top:-.45em}.popover-content:before{border-right:10px solid transparent;border-bottom:10px solid #999;border-left:10px solid transparent;right:.97em}.popover-content:after{border-right:12px solid transparent;border-bottom:12px solid #d5e3fa;border-left:12px solid transparent;right:.9em}.popover-content-title{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 1rem;min-height:40px}.popover-content-title p{margin:0;font-size:.75rem!important;color:#777}.popover-content .popover-user-top:after{clear:both;content:\"\";display:table}.popover-content .popover-user-top{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}.popover-content .popover-user-top .avatar-wrapper{flex:0 4 auto;border-radius:100%;overflow-clip-margin:content-box;overflow:clip;background-color:#fff;padding:2px}.drop-shadow{filter:drop-shadow(0px 0px 3px rgba(0,0,0,.5))}.popover-content .popover-user-top .user-data{flex:1 0 auto;margin-left:1rem}.popover-content .popover-user-top .avatar-wrapper .avatar-icon{background-repeat:no-repeat;background-size:100%;background-position:center;width:64px;height:64px;background-color:#72c885}.avatar-icon.default-avatar{background-size:100%}.popover-content .popover-user-top .user-data h3.profile-name{font-size:1rem;text-overflow:ellipsis;margin-bottom:.5rem;line-height:normal;font-weight:600;color:#254d93}.btn.view-profile{background:#fafafa;color:#254d93}.popover-content ul.list-group{padding:0 0 8px;margin:0;display:flex;list-style:none}.popover-content ul.list-group.last-group,.popover-content ul.list-group.last-group .list-item{background-color:transparent}.popover-content ul.list-group li.list-item{align-items:center;border:none;padding:0;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;order:1}.popover-content ul.list-group li.list-item .list-button{padding:.5rem 2rem;min-height:40px}.popover-content ul.list-group li.list-item span.mat-mdc-menu-item-text,.popover-content ul.list-group li.list-item span.mdc-list-item__primary-text,.popover-content ul.list-group li.list-item .list-button>span{display:flex;align-items:center}.popover-content ul.list-group li.list-item.list-company .list-button>span{width:100%;overflow:hidden}.popover-content ul.list-group li.list-item .list-button .hover-label.tooltip-label{opacity:0}.popover-content ul.list-group li.list-item.list-app .list-button:hover>span .hover-label.tooltip-label,.popover-content ul.list-group li.list-item.list-company .list-button:hover>span .hover-label.tooltip-label{opacity:0;display:inline-flex;color:#fff;background-color:#616161;font-size:11px;border-radius:4px;padding:0 .5rem;transition:opacity .3s ease-out}.popover-content ul.list-group li.list-item .list-button:hover{background:rgba(0,0,0,.04)}.popover-content ul.list-group li.list-item.company-active,.popover-content ul.list-group li.list-item.app-active{cursor:not-allowed;pointer-events:none;order:0}.popover-content ul.list-group li.list-item.company-active .active-label,.popover-content ul.list-group li.list-item.app-active .active-label{background-color:#93c47d;color:#212121;padding:0 .5rem;border-radius:50px;font-size:.75rem;margin-left:.5rem}.popover-content ul.list-group.list-apps-group{display:flex}.popover-content ul.list-group.list-overview li.list-item{cursor:not-allowed;pointer-events:none}.popover-content ul.list-group li.list-item p.list-text{padding:.5rem 2rem;margin:0;min-height:auto}.popover-content ul.list-group li.list-item .list-button .mat-icon,.popover-content ul.list-group li.list-item p.list-text mat-icon.list-icon,.popover-content ul.list-group li.list-item .list-button .list-icon,.popover-content ul.list-group li.list-item p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;font-size:24px!important}.popover-content ul.list-group li.list-item.list-active.company-active button.list-button .mat-icon{color:#2db051;font-variation-settings:\"FILL\" 1,\"wght\" 300,\"GRAD\" 0,\"opsz\" 24}.popover-content ul.list-group li.list-item p.list-text span.mdc-list-item__primary-text{width:100%;display:flex}.popover-content ul.list-group li.list-item span.title-case,.popover-content ul.list-group li.list-item span.lower-case,.popover-content ul.list-group li.list-item span.pmx-lower-case{font-size:.8rem;color:#212121;font-weight:500;display:block;line-height:normal}small{color:#9e9e9e}.popover-content ul.list-group li.list-item span.text-label{font-size:12px;color:#979797;font-weight:400;display:block;line-height:normal}.popover-content ul.list-group li.list-item .list-text,.popover-content ul.list-group li.list-item .list-text span.mat-mdc-menu-item-text{font-size:.875rem;color:#0a152f;font-weight:500;line-height:normal}.popover-content ul.list-group li.list-item .list-text.list-text-email span.mat-mdc-menu-item-text{width:calc(100% - 40px);display:inline-flex}.popover-content ul.list-group li.list-item .list-text.list-text-email span.pmx-text-wrap{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:none;hyphens:none;width:100%}.popover-content ul.list-group li.list-item span.upper-case{text-transform:uppercase}.popover-content ul.list-group li.list-item span.app-status,.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{font-size:13px;color:#0a152f;font-weight:400;display:block;line-height:normal;margin:0}.popover-content ul.list-group li.list-item.app-active .list-text,.popover-content ul.list-group li.list-item.company-active .list-text{color:#4b85ea}.popover-content ul.list-group li.list-item.app-active span.app-status,.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status,.popover-content ul.list-group li.list-item.company-active span.app-status,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status{color:#24a53f}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{display:flex;flex-direction:row;justify-content:flex-start}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{transition:all .3s ease-out;margin-left:auto;flex:1;justify-content:flex-end}.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{background-color:#408dd7;color:#f5f5f5}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip .mat-mdc-chip-action-label{font-size:.75rem}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip{height:24px}.popover-content ul.list-group li.list-item img.logo-thumb{width:24px;height:auto;margin-right:1rem}.popover-content ul.list-group li.list-item .list-button.btn-logout{display:flex;align-items:center;color:#616161}.popover-content ul.list-group li.list-item.app-active .list-button .app-icon-wrapper{background-color:#fff;border-color:#4b85ea;border-width:3px}.popover-content ul.list-group li.list-item.company-active .list-text .mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;color:var(--themelightblue)}.popover-content ul.list-group li.list-item .list-button.btn-logout .list-text{color:#616161}.popover-content ul.list-group li.list-item.app-active button,.popover-content ul.list-group li.list-item.company-active button{cursor:not-allowed;pointer-events:none}.popover-content hr{background-color:#c4c9d2;margin:0;width:100%;border:0;border-top:1px solid #c4c9d2;opacity:1}.popover-content ul.apps-grid{width:100%;white-space:nowrap;overflow:auto}.popover-content ul.apps-grid li.list-item,.popover-content ul.apps-grid li.list-item img.logo-thumb{display:flex;justify-content:flex-start;flex-wrap:nowrap;align-content:center;align-items:center;flex-direction:row}.popover-header{background-color:#d5e3fa;border-bottom:1px solid #d8d8d8;padding:.975rem 1rem;margin-bottom:0;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;flex-wrap:wrap}.popover-header .mat-icon{font-size:1.5rem!important;font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24;color:#254d93}.header-dropdown-profile .popover-header{padding:1.125rem 1rem}.popover-header h3.popover-title{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin-bottom:0;line-height:normal;font-weight:500;color:#254d93}.popover-body{max-height:420px;overflow:auto;padding:0}.app-icon-wrapper{margin:0 1rem 0 0;max-width:48px;max-height:48px;width:48px;height:48px;overflow:hidden;background-size:70%;background-repeat:no-repeat;background-position:center;border:1px solid #c4c9d2;border-radius:8px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap}.app-icon-wrapper img.app-icon{width:100%;height:auto;overflow:hidden;padding:.5rem}h4.app-name{font-size:.65rem;margin:.5rem 0 0;line-height:normal;color:#254d93;font-weight:400;text-transform:uppercase}.popover-body ul.enabled-apps{display:flex;flex-flow:column wrap;justify-content:space-evenly;align-items:center;align-content:flex-start;border-bottom:1px solid #E9E9E9;margin:0;padding:0 1rem;list-style:none}.popover-body ul.enabled-apps li.enabled-app{flex-grow:1;flex:0 1 auto;text-align:center;font-size:.8125rem;padding:10px;list-style:none}.pmx-button.mdc-icon-button[color=theme-white],.pmx-button.icon-btn.mdc-button--raised[color=theme-white]{color:#254d93}.pmx-button.icon-btn.orders-menu[color=theme-white]{border:1px solid #fafafa!important}:host(.mat-accent){--mat-slider-ripple-color: #24a148;--mat-slider-hover-state-layer-color: rgba(255, 64, 129, .05);--mat-slider-focus-state-layer-color: rgba(255, 64, 129, .2);--mdc-slider-handle-color: #24a148;--mdc-slider-focus-handle-color: #24a148;--mdc-slider-hover-handle-color: #24a148;--mdc-slider-active-track-color: #24a148;--mdc-slider-inactive-track-color: #24a148;--mdc-slider-with-tick-marks-inactive-container-color: #24a148;--mdc-slider-with-tick-marks-active-container-color: #51bc6b}\n"] }]
+            args: [{ selector: 'lib-header', encapsulation: ViewEncapsulation.None, template: "<mat-toolbar cdkMenuBar color=\"primary\" [ngClass]=\"headerClass\" class=\"header-wrapper common_header shadow-sm\">\n    <!-- Main nav button and navigation links -->\n    <button mat-icon-button  color=\"theme-white\" (click)=\"menuAction()\" class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\"\n        aria-label=\"main menu\" tabindex=\"0\" matTooltip=\"Main menu\" matTooltipPosition=\"below\"\n        matTooltipClass=\"poc-header-tooltip\"><mat-icon>menu</mat-icon></button>\n    <a class=\"navbar-brand me-auto\" href=\"#\">\n        <img *ngIf=\"currentAppLogo\" [src]=\"currentAppLogo\" alt=\"App Logo\" class=\"app-logo\">\n    </a>\n    \n    <!-- Apps button and menu items -->\n    <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n    <button mat-icon-button *ngIf=\"(appList.length > 0)\" color=\"theme-white\"\n        class=\"pmx-button pmx-menu-button icon-btn btn-switch-apps ms-1 me-1\" [class.menu-opened]=\"isAppsMenuOpen == true\"\n        (menuOpened)=\"toggleMenu('apps')\" (menuClosed)=\"toggleMenu('apps')\" [matMenuTriggerFor]=\"apps\"\n        matTooltip=\"Switch application\" matTooltipPosition=\"below\" aria-label=\"apps menu\"\n        tabindex=\"0\">\n        <mat-icon class=\"icon-arrow-down\">apps</mat-icon>\n    </button>\n    <mat-menu #apps=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-apps\" hasBackdrop=\"true\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\"><h3 class=\"popover-title\">Switch Application</h3></div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"appList?.length == 1;else appsTitle\">Enabled Application</p>\n                    <ng-template #appsTitle><p>Enabled Applications</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-apps-group\">\n                    <li cdkMenuItem class=\"list-item list-app\" *ngFor=\"let app of appList;let i = index\" \n                        [ngClass]=\"(app?.active) ? 'app-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"appRedirect(app)\">\n                            <div class=\"app-icon-wrapper\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetThumbnail )\" class=\"app-icon\"></div>\n                            <span class=\"list-text me-auto\">{{ app?.name }}</span>\n                            <small class=\"active-label\" *ngIf=\"(app?.active)\">Active</small>\n                            <small class=\"hover-label tooltip-label\" *ngIf=\"!(app?.active)\">Click to switch app</small>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n    \n    <span class=\"vr vr-blury\"></span>\n    <!-- Profile button and profile dropdown links -->\n    <div class=\"btn-group\" role=\"group\" aria-label=\"Button group with profile info\" [ngClass]=\"(((currentCompany?.subDomain) && userCompanyLogo) ? 'branded-group-true' : 'branded-group-false') + ' ' + (isProfileMenuOpen ? 'btn-group-clicked' : '')\">\n        <button class=\"pmx-button pmx-menu-button profile-button\" mat-button mat-stroked-button [matMenuTriggerFor]=\"menu\"\n            color=\"primary\" (menuOpened)=\"toggleMenu('profile')\" (menuClosed)=\"toggleMenu('profile')\" [ngClass]=\"currentCompany?.subDomain ? 'branded-button-true' : 'branded-button-false'\" matTooltip=\"Profile Info\" matTooltipPosition=\"below\">\n            <div class=\"profile-inner\">\n                <div class=\"brand-logo align-self-center\" *ngIf=\"((currentCompany?.subDomain) && userCompanyLogo)\" [ngClass]=\"userCompanyLogo ? 'branded-logo-true' : 'branded-logo-false'\" [ngStyle]=\"{'background-image': 'url(' + userCompanyLogo + ')'}\"></div>\n                <div class=\"avatar\">\n                    <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n                    <ng-template #defaultAvatar><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\" class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n                </div>\n            </div>\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\" class=\"accounts_drpmenu pmx-menu-group header-dropdown-profile\" xPosition=\"before\">\n        <div class=\"popover-content show-menu\">\n            <div class=\"popover-header\">\n                <div class=\"popover-user-top\">\n                    <div class=\"avatar-wrapper\">\n                        <div *ngIf=\"userImageLink;else defaultLargeAvatar\" [ngStyle]=\"{'background-image': 'url(' + userImageLink + ')'}\"\n                            class=\"avatar-icon\" alt=\"Avatar icon\">&nbsp;</div>\n                        <ng-template #defaultLargeAvatar>\n                            <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\" class=\"avatar-icon default-avatar\" alt=\"Avatar icon\">&nbsp;</div>\n                        </ng-template>\n                    </div>\n                    <div class=\"user-data\">\n                        <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{ userAuthData?.lastName }}</span></h3>\n                        <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\" (click)=\"profile()\">View Profile</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"popover-body\">\n                <div class=\"popover-content-title\"><p>Overview</p></div>\n                <ul cdkMenu class=\"list-group list-overview\" *ngIf=\"currentCompany\">\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.email\">\n                        <p mat-menu-item class=\"list-text list-text-email\">\n                            <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{ userAuthData?.email }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item d-none\" *ngIf=\"userAuthData?.contactPhone\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{ userAuthData?.contactPhone }}</span>\n                        </p>\n                    </li>\n                    <li cdkMenuItem class=\"list-item\" *ngIf=\"userAuthData?.address !== null\">\n                        <p mat-menu-item class=\"list-text\">\n                            <mat-icon class=\"list-icon\">location_on</mat-icon>\n                            <span class=\"title-case me-auto\">\n                                <small>{{ userAuthData?.address?.streetAddress }} {{(userAuthData?.address?.streetAddress2 !== null) ? userAuthData?.address?.streetAddress2 : '' }}</small><br />\n                                {{ userAuthData?.address?.city }} {{userAuthData?.address?.stateOrProvince }} {{userAuthData?.address?.postalCode }}\n                            </span>\n                        </p>\n                    </li>\n                </ul>\n                <hr />\n                <div class=\"popover-content-title\">\n                    <p *ngIf=\"userCompanies?.length == 1;else companiesTitle\">Company</p>\n                    <ng-template #companiesTitle><p>Companies</p></ng-template>\n                </div>\n                <ul cdkMenu class=\"list-group list-group-companies\">\n                    <li cdkMenuItem class=\"list-item list-company\" *ngFor=\"let company of userCompanies\" [ngClass]=\"(company?.activeNow) ? 'list-active company-active' : ''\">\n                        <button mat-menu-item class=\"pmx-button list-button\" (click)=\"switchCompany(company)\" [matTooltip]=\"company?.name\"\n                          matTooltipPosition=\"below\">\n                            <mat-icon class=\"icon-check\">{{ (company?.activeNow) ? 'check_circle' : 'swap_vert' }}</mat-icon>\n                            <span class=\"list-text pmx-text-wrap me-auto\">{{ company?.name | titlecase }}</span>\n                            <small class=\"active-label\" *ngIf=\"(company?.activeNow)\">Active</small>\n                        </button>\n                    </li>\n                </ul>\n                <hr />\n                <ul cdkMenu class=\"list-group last-group my-1\">\n                    <li cdkMenuItem class=\"list-item py-2\">\n                        <button mat-menu-item class=\"pmx-button list-button btn-logout\" (click)=\"onLogoutClick()\">\n                            <mat-icon>power_settings_new</mat-icon>\n                            <span class=\"list-text\">Logout</span>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </mat-menu>\n</mat-toolbar>", styles: [".pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word}.pmx-lower-case{text-transform:lowercase}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #24a148;--mat-text-button-state-layer-color: #24a148;--mat-text-button-ripple-color: rgba(255, 64, 129, .1)}.header-user-name{text-align:end;color:#000}.header-user-name span{font-size:12px;color:#9e9e9ede}.avatarLogo{max-width:30px}mat-toolbar.mat-toolbar.common_header.mat-primary.mat-toolbar-single-row{position:absolute;left:0;top:0;background-color:#fff;height:56px}button.switchButton,button.menuHamberger{padding:8px!important}.sidenavPanel{padding:20px 25px;height:100vh;position:relative}ul.navbarList{padding-left:0;list-style:none;margin-top:40px}ul.navbarList li{color:#666;font-weight:400;margin-bottom:25px;width:170px;cursor:pointer}.active{color:#4177d6!important}ul.navbarList li img{width:23px;margin-right:15px}.accounts_drpmenu{margin-top:.7em}.xsShowUsername{display:none;padding:0 16px;height:48px;line-height:48px}.vr{width:2px;background-color:#f5f5f5;opacity:1;margin:0 .5rem 0 1rem}.vr-blury{background-image:linear-gradient(180deg,transparent,#666,transparent);width:1px;opacity:.25}.navbar-brand .app-logo{height:24px;width:auto}.pmx-button mat-icon.mat-icon,.pmx-button mat-icon.mat-primary,.pmx-button mat-icon.mat-accent,.pmx-button mat-icon.mat-warn{color:var(--mat-icon-color)}.pmx-button mat-icon.mat-icon{font-size:1.5rem!important;line-height:1.5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease}.pmx-button.mdc-button--raised mat-icon.mat-icon{width:24px;height:24px;display:contents}.pmx-button.mat-mdc-button-base mat-icon.mat-icon{z-index:1}.pmx-button mat-icon.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.pmx-button mat-icon.mdc-button span.button-text{display:inline-flex;padding:0 1rem;text-transform:uppercase;font-size:.875rem;line-height:1.5}.pmx-button mat-icon.mdc-button span.upper-case{text-transform:uppercase}.pmx-button.mdc-button,.pmx-button.mdc-icon-button,.pmx-button.mdc-button--outlined,.pmx-button.mdc-button .mat-mdc-button-touch-target,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{height:40px!important;font-size:.75rem!important;letter-spacing:.2px;padding:0 .5rem;line-height:normal}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--outlined,.pmx-button.icon-btn.mdc-button--raised,.pmx-button.mdc-icon-button .mat-mdc-button-touch-target{width:40px;border-radius:5px}.pmx-button.btn-small.mdc-button,.pmx-button.btn-small.mdc-icon-button,.pmx-button.btn-small.mdc-button--outlined{height:28px!important;padding:0 1rem}.pmx-button.mdc-icon-button,.pmx-button.icon-btn.mdc-button--raised{color:#254d93}.pmx-header .icon-button-shadow{box-shadow:0 1px 3px #0003,0 0 #00000024,0 1px 3px #0000001f}.pmx-button.icon-btn.mdc-button--raised.btn-switch-apps.menu-opened,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps.menu-opened{background-color:#254d93;color:#fff;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24}.pmx-button.mdc-icon-button.pmx-menu-button:hover,.pmx-button.mat-mdc-outlined-button.btn-switch-apps:hover,.pmx-button.icon-btn.mdc-button--outlined.btn-switch-apps:hover{background-color:#e5f3fb}.pmx-button.icon-app{width:20px}.pmx-button.mat-mdc-outlined-button,.pmx-button.mat-mdc-outlined-button:not(:disabled){background-color:#fff;overflow:hidden}.pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{padding:0;border-color:#bfdff7!important}.btn-group-clicked .pmx-button.pmx-menu-button.profile-button.mat-mdc-outlined-button{border-color:#bfdff7!important}.pmx-button.profile-button .profile-inner{border:0 solid transparent!important;display:flex;align-items:center;overflow:clip}.pmx-button.profile-button .avatar{width:38px;height:38px;box-sizing:border-box;border:3px #ffffff solid!important;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-content:center;align-items:center;flex-wrap:wrap}.pmx-button.profile-button .avatar{background-color:#9cd7a8}.pmx-button.profile-button .avatar img.avatar-image,.pmx-button.profile-button .avatar img.avatar-default{width:100%;height:auto}.branded-group-false{margin-left:.65rem}.branded-group-false .pmx-button.pmx-menu-button.profile-button.branded-button-false{width:40px;border-radius:20px!important}.branded-group-true{margin-left:.65rem;border-radius:20px;border:1px solid #bfdff7}.btn-group-clicked.branded-group-true{background-color:#99ccf2}.branded-group-true .pmx-button.profile-button .profile-inner{border:0 solid #c4c9d2!important}.branded-group-true .pmx-button.pmx-menu-button.profile-button.branded-button-true{border-radius:20px}.branded-group-true .pmx-button.profile-button.branded-button-true .profile-inner .branded-logo-true{border-radius:5px;display:block;position:relative;height:38px;background-size:100%;background-position:center;background-repeat:no-repeat;min-width:100px;margin-right:1rem}.pmx-menu-group.mat-mdc-menu-panel{margin-top:1rem}.header-dropdown-apps.mat-mdc-menu-panel .mat-mdc-menu-content,.header-dropdown-profile.mat-mdc-menu-panel .mat-mdc-menu-content{padding:0!important}.header-dropdown-apps{width:400px!important}.header-dropdown-apps.mat-mdc-menu-panel .list-button{padding:.5rem 2rem}.header-dropdown-apps.mdc-menu-surface--open,.header-dropdown-profile.mdc-menu-surface--open{position:absolute;z-index:1;top:0;right:0;margin:0;padding:0;border:1px solid #e5e5e5;border-radius:6px;background:#fff;animation:popover .2s ease-in-out}.header-dropdown-apps.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:400px!important;width:400px!important;overflow:visible}.header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible}.popover-content:after,.popover-content:before{font-size:1.4em;display:block;width:0;height:0;content:\"\";pointer-events:none;position:absolute;top:-.45em}.popover-content:before{border-right:10px solid transparent;border-bottom:10px solid #999;border-left:10px solid transparent;right:.97em}.popover-content:after{border-right:12px solid transparent;border-bottom:12px solid #d5e3fa;border-left:12px solid transparent;right:.9em}.popover-content-title{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 1rem;min-height:40px}.popover-content-title p{margin:0;font-size:.75rem!important;color:#777}.popover-content .popover-user-top:after{clear:both;content:\"\";display:table}.popover-content .popover-user-top{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}.popover-content .popover-user-top .avatar-wrapper{flex:0 4 auto;border-radius:100%;overflow-clip-margin:content-box;overflow:clip;background-color:#fff;padding:2px}.drop-shadow{filter:drop-shadow(0px 0px 3px rgba(0,0,0,.5))}.popover-content .popover-user-top .user-data{flex:1 0 auto;margin-left:1rem}.popover-content .popover-user-top .avatar-wrapper .avatar-icon{background-repeat:no-repeat;background-size:100%;background-position:center;width:64px;height:64px;background-color:#72c885}.avatar-icon.default-avatar{background-size:100%}.popover-content .popover-user-top .user-data h3.profile-name{font-size:1rem;text-overflow:ellipsis;margin-bottom:.5rem;line-height:normal;font-weight:600;color:#254d93}.btn.view-profile{background:#fafafa;color:#254d93}.popover-content ul.list-group{padding:0 0 8px;margin:0;display:flex;list-style:none}.popover-content ul.list-group.last-group,.popover-content ul.list-group.last-group .list-item{background-color:transparent}.popover-content ul.list-group li.list-item{align-items:center;border:none;padding:0;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;order:1}.popover-content ul.list-group li.list-item .list-button{padding:.5rem 2rem;min-height:40px}.popover-content ul.list-group li.list-item span.mat-mdc-menu-item-text,.popover-content ul.list-group li.list-item span.mdc-list-item__primary-text,.popover-content ul.list-group li.list-item .list-button>span{display:flex;align-items:center}.popover-content ul.list-group li.list-item.list-company .list-button>span{width:100%;overflow:hidden}.popover-content ul.list-group li.list-item .list-button .hover-label.tooltip-label{opacity:0}.popover-content ul.list-group li.list-item.list-app .list-button:hover>span .hover-label.tooltip-label,.popover-content ul.list-group li.list-item.list-company .list-button:hover>span .hover-label.tooltip-label{opacity:0;display:inline-flex;color:#fff;background-color:#616161;font-size:11px;border-radius:4px;padding:0 .5rem;transition:opacity .3s ease-out}.popover-content ul.list-group li.list-item .list-button:hover{background:rgba(0,0,0,.04)}.popover-content ul.list-group li.list-item.company-active,.popover-content ul.list-group li.list-item.app-active{cursor:not-allowed;pointer-events:none;order:0}.popover-content ul.list-group li.list-item.company-active .active-label,.popover-content ul.list-group li.list-item.app-active .active-label{background-color:#93c47d;color:#212121;padding:0 .5rem;border-radius:50px;font-size:.75rem;margin-left:.5rem}.popover-content ul.list-group.list-apps-group{display:flex}.popover-content ul.list-group.list-overview li.list-item{cursor:not-allowed;pointer-events:none}.popover-content ul.list-group li.list-item p.list-text{padding:.5rem 2rem;margin:0;min-height:auto}.popover-content ul.list-group li.list-item .list-button .mat-icon,.popover-content ul.list-group li.list-item p.list-text mat-icon.list-icon,.popover-content ul.list-group li.list-item .list-button .list-icon,.popover-content ul.list-group li.list-item p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;font-size:24px!important}.popover-content ul.list-group li.list-item.list-active.company-active button.list-button .mat-icon{color:#2db051;font-variation-settings:\"FILL\" 1,\"wght\" 300,\"GRAD\" 0,\"opsz\" 24}.popover-content ul.list-group li.list-item p.list-text span.mdc-list-item__primary-text{width:100%;display:flex}.popover-content ul.list-group li.list-item span.title-case,.popover-content ul.list-group li.list-item span.lower-case,.popover-content ul.list-group li.list-item span.pmx-lower-case{font-size:.8rem;color:#212121;font-weight:500;display:block;line-height:normal}small{color:#9e9e9e}.popover-content ul.list-group li.list-item span.text-label{font-size:12px;color:#979797;font-weight:400;display:block;line-height:normal}.popover-content ul.list-group li.list-item .list-text,.popover-content ul.list-group li.list-item .list-text span.mat-mdc-menu-item-text{font-size:.875rem;color:#0a152f;font-weight:500;line-height:normal}.popover-content ul.list-group li.list-item .list-text.list-text-email span.mat-mdc-menu-item-text{width:calc(100% - 40px);display:inline-flex}.popover-content ul.list-group li.list-item .list-text.list-text-email span.pmx-text-wrap{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:none;hyphens:none;width:100%}.popover-content ul.list-group li.list-item span.upper-case{text-transform:uppercase}.popover-content ul.list-group li.list-item span.app-status,.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{font-size:13px;color:#0a152f;font-weight:400;display:block;line-height:normal;margin:0}.popover-content ul.list-group li.list-item.app-active .list-text,.popover-content ul.list-group li.list-item.company-active .list-text{color:#4b85ea}.popover-content ul.list-group li.list-item.app-active span.app-status,.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status,.popover-content ul.list-group li.list-item.company-active span.app-status,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status{color:#24a53f}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status{display:flex;flex-direction:row;justify-content:flex-start}.popover-content ul.list-group li.list-item .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{transition:all .3s ease-out;margin-left:auto;flex:1;justify-content:flex-end}.popover-content ul.list-group li.list-item.app-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected,.popover-content ul.list-group li.list-item.company-active .mat-mdc-chip-option.chip-status.mdc-evolution-chip--selected{background-color:#408dd7;color:#f5f5f5}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip .mat-mdc-chip-action-label{font-size:.75rem}.popover-content ul.list-group li.list-item .mat-mdc-standard-chip{height:24px}.popover-content ul.list-group li.list-item img.logo-thumb{width:24px;height:auto;margin-right:1rem}.popover-content ul.list-group li.list-item .list-button.btn-logout{display:flex;align-items:center;color:#616161}.popover-content ul.list-group li.list-item.app-active .list-button .app-icon-wrapper{background-color:#fff;border-color:#4b85ea;border-width:3px}.popover-content ul.list-group li.list-item.company-active .list-text .mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 200,\"GRAD\" 0,\"opsz\" 24;color:var(--themelightblue)}.popover-content ul.list-group li.list-item .list-button.btn-logout .list-text{color:#616161}.popover-content ul.list-group li.list-item.app-active button,.popover-content ul.list-group li.list-item.company-active button{cursor:not-allowed;pointer-events:none}.popover-content hr{background-color:#c4c9d2;margin:0;width:100%;border:0;border-top:1px solid #c4c9d2;opacity:1}.popover-content ul.apps-grid{width:100%;white-space:nowrap;overflow:auto}.popover-content ul.apps-grid li.list-item,.popover-content ul.apps-grid li.list-item img.logo-thumb{display:flex;justify-content:flex-start;flex-wrap:nowrap;align-content:center;align-items:center;flex-direction:row}.popover-header{background-color:#d5e3fa;border-bottom:1px solid #d8d8d8;padding:.975rem 1rem;margin-bottom:0;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;flex-wrap:wrap}.popover-header .mat-icon{font-size:1.5rem!important;font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24;color:#254d93}.header-dropdown-profile .popover-header{padding:1.125rem 1rem}.popover-header h3.popover-title{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin-bottom:0;line-height:normal;font-weight:500;color:#254d93}.popover-body{max-height:420px;overflow:auto;padding:0}.app-icon-wrapper{margin:0 1rem 0 0;max-width:48px;max-height:48px;width:48px;height:48px;overflow:hidden;background-size:70%;background-repeat:no-repeat;background-position:center;border:1px solid #c4c9d2;border-radius:8px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap}.app-icon-wrapper img.app-icon{width:100%;height:auto;overflow:hidden;padding:.5rem}h4.app-name{font-size:.65rem;margin:.5rem 0 0;line-height:normal;color:#254d93;font-weight:400;text-transform:uppercase}.popover-body ul.enabled-apps{display:flex;flex-flow:column wrap;justify-content:space-evenly;align-items:center;align-content:flex-start;border-bottom:1px solid #E9E9E9;margin:0;padding:0 1rem;list-style:none}.popover-body ul.enabled-apps li.enabled-app{flex-grow:1;flex:0 1 auto;text-align:center;font-size:.8125rem;padding:10px;list-style:none}.pmx-button.mdc-icon-button[color=theme-white],.pmx-button.icon-btn.mdc-button--raised[color=theme-white]{color:#254d93}.pmx-button.icon-btn.orders-menu[color=theme-white]{border:1px solid #fafafa!important}:host(.mat-accent){--mat-slider-ripple-color: #24a148;--mat-slider-hover-state-layer-color: rgba(255, 64, 129, .05);--mat-slider-focus-state-layer-color: rgba(255, 64, 129, .2);--mdc-slider-handle-color: #24a148;--mdc-slider-focus-handle-color: #24a148;--mdc-slider-hover-handle-color: #24a148;--mdc-slider-active-track-color: #24a148;--mdc-slider-inactive-track-color: #24a148;--mdc-slider-with-tick-marks-inactive-container-color: #24a148;--mdc-slider-with-tick-marks-active-container-color: #51bc6b}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { template: [{
                 type: Input
             }], appName: [{