@propmix/profet-common-header 2.3.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2020/lib/header/header.component.mjs +53 -39
  2. package/fesm2015/propmix-profet-common-header.mjs +50 -36
  3. package/fesm2015/propmix-profet-common-header.mjs.map +1 -1
  4. package/fesm2020/propmix-profet-common-header.mjs +50 -36
  5. package/fesm2020/propmix-profet-common-header.mjs.map +1 -1
  6. package/lib/header/header.component.d.ts +4 -3
  7. package/package.json +1 -1
package/fesm2015/propmix-profet-common-header.mjs CHANGED
@@ -249,7 +249,8 @@ class HeaderComponent {
249
249
  this.infoEvent = new EventEmitter();
250
250
  this.appList = [];
251
251
  this.portalUrl = '';
252
- this.headerClass = "";
252
+ this.userImageLink = null;
253
+ this.headerClass = '';
253
254
  this.currentAppLogo = '';
254
255
  this.userCompanyLogo = '';
255
256
  this.enabledApplications = [];
@@ -272,7 +273,7 @@ class HeaderComponent {
272
273
  this.portalUrl = (_a = v === null || v === void 0 ? void 0 : v.data) === null || _a === void 0 ? void 0 : _a.portalUrl;
273
274
  let data = {
274
275
  companyInfo: this.companyProfile,
275
- portalUrl: this.portalUrl
276
+ portalUrl: this.portalUrl,
276
277
  };
277
278
  this.infoEvent.emit(data);
278
279
  // let config: any = Auth.configure();
@@ -284,27 +285,29 @@ class HeaderComponent {
284
285
  this.appList = [];
285
286
  this.enabledApplications = v.data.applications;
286
287
  v.data.applications.forEach((element) => {
287
- let currentApp = (element.name === this.appName);
288
+ let currentApp = element.name === this.appName;
288
289
  this.appList.push({
289
290
  name: element.displayName,
290
291
  value: element,
291
292
  appUrl: element.appUrl,
292
- active: currentApp
293
+ active: currentApp,
293
294
  });
294
295
  });
295
296
  let appData = {
296
- enabledApps: this.appList
297
+ enabledApps: this.appList,
297
298
  };
298
299
  this.infoEvent.emit(appData);
299
300
  }
300
301
  },
301
302
  error: (e) => {
302
303
  console.log(e);
303
- }
304
+ },
304
305
  });
305
306
  let userInfo = yield getCurrentUser();
306
307
  if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) {
307
- let userDetails = this._ser.getUserDetailsByEmail({ email: userInfo.username });
308
+ let userDetails = this._ser.getUserDetailsByEmail({
309
+ email: userInfo.username,
310
+ });
308
311
  let userCompanyInfo = this._ser.getUserCompanies();
309
312
  forkJoin([userDetails, userCompanyInfo]).subscribe({
310
313
  next: (res) => {
@@ -331,7 +334,7 @@ class HeaderComponent {
331
334
  this.getCurrentCompanyInfo();
332
335
  this.setCurrentAppLogo();
333
336
  }
334
- }
337
+ },
335
338
  });
336
339
  }
337
340
  });
@@ -341,17 +344,17 @@ class HeaderComponent {
341
344
  }
342
345
  fetchCompanyProfile() {
343
346
  let req = {
344
- companyName: document.location.host.split('.')[0]
347
+ companyName: document.location.host.split('.')[0],
345
348
  };
346
349
  this._ser.fetchCompanyProfile(req).subscribe({
347
350
  next: (v) => {
348
351
  this.companyProfile = v;
349
352
  let data = {
350
353
  companyInfo: v,
351
- portalUrl: this.portalUrl
354
+ portalUrl: this.portalUrl,
352
355
  };
353
356
  this.infoEvent.emit(data);
354
- }
357
+ },
355
358
  });
356
359
  }
357
360
  fetchCompanyData(allApps) {
@@ -364,35 +367,39 @@ class HeaderComponent {
364
367
  let fetchedApplications = (_b = v.data.enabledApplications) === null || _b === void 0 ? void 0 : _b.split(',');
365
368
  if (fetchedApplications.length > 0) {
366
369
  fetchedApplications.forEach((element) => {
367
- appInfo = allApps.filter(ele => ele.name == element);
370
+ appInfo = allApps.filter((ele) => ele.name == element);
368
371
  if (appInfo && appInfo.length > 0) {
369
372
  if (appInfo[0].name != 'mca') {
370
373
  this.appList.push({
371
374
  name: appInfo[0].displayName,
372
375
  value: element,
373
- appUrl: appInfo[0].appUrl
376
+ appUrl: appInfo[0].appUrl,
374
377
  });
375
378
  }
376
379
  }
377
380
  });
378
381
  }
379
382
  }
380
- }
383
+ },
381
384
  });
382
385
  }
383
386
  sanitizeUrl(url) {
384
387
  return this._domSanitizer.bypassSecurityTrustUrl(url);
385
388
  }
386
389
  getUserProfile() {
387
- this._ser.obtainDataByUrl(this.userAuthData._links.profileImage.href).subscribe(img => {
390
+ this._ser
391
+ .obtainDataByUrl(this.userAuthData._links.profileImage.href)
392
+ .subscribe((img) => {
388
393
  if (img === null || img === void 0 ? void 0 : img.locationUrl) {
389
- this.userImageLink = img.locationUrl ? img.locationUrl : null;
394
+ this.userImageLink = img.locationUrl
395
+ ? this._domSanitizer.bypassSecurityTrustUrl(img.locationUrl)
396
+ : null;
390
397
  }
391
398
  });
392
399
  }
393
400
  appRedirect(app) {
394
401
  if (!(app === null || app === void 0 ? void 0 : app.active)) {
395
- window.open(app.appUrl, "_self");
402
+ window.open(app.appUrl, '_self');
396
403
  }
397
404
  }
398
405
  profile() {
@@ -415,16 +422,16 @@ class HeaderComponent {
415
422
  }
416
423
  onLogoutClick() {
417
424
  signOut({ global: true, oauth: { redirectUrl: this._ser.signOutUrl } })
418
- .then(data => {
419
- window.open(this._ser.signOutUrl, "_self");
425
+ .then((data) => {
426
+ window.open(this._ser.signOutUrl, '_self');
420
427
  })
421
- .catch(err => {
428
+ .catch((err) => {
422
429
  console.log(err);
423
430
  signOut({ global: true, oauth: { redirectUrl: this._ser.signOutUrl } })
424
431
  .then(() => {
425
- window.open(this._ser.signOutUrl, "_self");
432
+ window.open(this._ser.signOutUrl, '_self');
426
433
  })
427
- .catch(error => console.log(error));
434
+ .catch((error) => console.log(error));
428
435
  });
429
436
  }
430
437
  switchCompany(company) {
@@ -433,10 +440,13 @@ class HeaderComponent {
433
440
  if (!company.activeNow) {
434
441
  let domainInfo = this._ser.getDomainInfo();
435
442
  if (domainInfo) {
436
- let req = { companyKey: company.companyKey, appName: domainInfo.appCode };
443
+ let req = {
444
+ companyKey: company.companyKey,
445
+ appName: domainInfo.appCode,
446
+ };
437
447
  this._ser.updateUserCompany(req).subscribe({
438
448
  next: (response) => {
439
- if (response && response.type && response.type == "OK") {
449
+ if (response && response.type && response.type == 'OK') {
440
450
  if (response.data.applicationURL) {
441
451
  let url = response.data.applicationURL;
442
452
  window.location.replace(url);
@@ -452,7 +462,7 @@ class HeaderComponent {
452
462
  error: (e) => {
453
463
  // display a message to the user that the company could not be switched.
454
464
  this._snackbar.open('Company could not be switched. Please try again or contact support.', 'OK', { duration: 5000 });
455
- }
465
+ },
456
466
  });
457
467
  }
458
468
  else {
@@ -468,44 +478,48 @@ class HeaderComponent {
468
478
  const company = (_b = (_a = this.currentCompany) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.split(' ')[0];
469
479
  this.headerClass = 'header-' + ((_c = this._lowerCasePipe) === null || _c === void 0 ? void 0 : _c.transform(company));
470
480
  this.headerClass = 'header-' + ((_d = this._titleCasepipe) === null || _d === void 0 ? void 0 : _d.transform(company));
471
- this.userCompanyLogo = ((_e = this.currentCompany) === null || _e === void 0 ? void 0 : _e.companyLogoUrl) ? (_f = this.currentCompany) === null || _f === void 0 ? void 0 : _f.companyLogoUrl : null;
481
+ this.userCompanyLogo = ((_e = this.currentCompany) === null || _e === void 0 ? void 0 : _e.companyLogoUrl)
482
+ ? (_f = this.currentCompany) === null || _f === void 0 ? void 0 : _f.companyLogoUrl
483
+ : null;
472
484
  }
473
485
  return this.currentCompany ? this.currentCompany : null;
474
486
  }
475
487
  setCurrentAppLogo() {
476
488
  var _a;
477
- const currentApp = (_a = this.enabledApplications) === null || _a === void 0 ? void 0 : _a.find(app => app.name === this.appName);
489
+ const currentApp = (_a = this.enabledApplications) === null || _a === void 0 ? void 0 : _a.find((app) => app.name === this.appName);
478
490
  this.currentApp = currentApp;
479
491
  if (currentApp) {
480
492
  switch (currentApp === null || currentApp === void 0 ? void 0 : currentApp.name) {
481
493
  case PROFET_APPS.appraisal_management:
482
- this.currentAppLogo = imageDataUrl.profetOrdersLogo;
494
+ this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetOrdersLogo);
483
495
  break;
484
496
  case PROFET_APPS.appraisal_valuation:
485
- this.currentAppLogo = imageDataUrl.profetValuationLogo;
497
+ this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetValuationLogo);
486
498
  break;
487
499
  case PROFET_APPS.appraisal_review:
488
- this.currentAppLogo = imageDataUrl.profetReviewLogo;
500
+ this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetReviewLogo);
489
501
  break;
490
502
  case PROFET_APPS.profet_portal:
491
- this.currentAppLogo = imageDataUrl.profetPortalLogo;
503
+ this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetPortalLogo);
492
504
  break;
493
505
  }
494
506
  }
495
507
  else {
496
- this.currentAppLogo = imageDataUrl.profetPortalLogo;
508
+ this.currentAppLogo = this._domSanitizer.bypassSecurityTrustUrl(imageDataUrl.profetPortalLogo);
497
509
  }
498
510
  }
499
511
  toggleMenu(menu) {
500
- (menu === 'apps') ? (this.isAppsMenuOpen = !this.isAppsMenuOpen) : null;
501
- (menu === 'profile') ? this.isProfileMenuOpen = !this.isProfileMenuOpen : null;
512
+ menu === 'apps' ? (this.isAppsMenuOpen = !this.isAppsMenuOpen) : null;
513
+ menu === 'profile'
514
+ ? (this.isProfileMenuOpen = !this.isProfileMenuOpen)
515
+ : null;
502
516
  }
503
517
  }
504
518
  HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
505
- 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 });
519
+ 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 });
506
520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
507
521
  type: Component,
508
- 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"] }]
522
+ 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"] }]
509
523
  }], ctorParameters: function () { return []; }, propDecorators: { template: [{
510
524
  type: Input
511
525
  }], appName: [{