@propmix/profet-common-header 3.0.11-unstable → 3.0.12-unstable
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.
- package/esm2020/lib/common-header.module.mjs +9 -5
- package/esm2020/lib/header/header.component.mjs +30 -4
- package/fesm2015/propmix-profet-common-header.mjs +36 -5
- package/fesm2015/propmix-profet-common-header.mjs.map +1 -1
- package/fesm2020/propmix-profet-common-header.mjs +35 -5
- package/fesm2020/propmix-profet-common-header.mjs.map +1 -1
- package/lib/common-header.module.d.ts +2 -1
- package/lib/header/header.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -14,6 +14,8 @@ import * as i8 from '@angular/material/form-field';
|
|
|
14
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
15
|
import * as i3 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
|
+
import * as i12 from '@angular/material/input';
|
|
18
|
+
import { MatInputModule } from '@angular/material/input';
|
|
17
19
|
import { MatListModule } from '@angular/material/list';
|
|
18
20
|
import * as i6 from '@angular/material/menu';
|
|
19
21
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -410,6 +412,8 @@ class HeaderComponent {
|
|
|
410
412
|
this.appConfig = AppConfig.appConfig;
|
|
411
413
|
this.companyList = [];
|
|
412
414
|
this.menuList = [];
|
|
415
|
+
this.filteredOptions = [];
|
|
416
|
+
this.searchControl = new FormControl('');
|
|
413
417
|
}
|
|
414
418
|
async ngOnInit() {
|
|
415
419
|
this.updateLastAccessedAppInfo();
|
|
@@ -519,6 +523,15 @@ class HeaderComponent {
|
|
|
519
523
|
this.companyList = v;
|
|
520
524
|
this.selectCurrentCompany();
|
|
521
525
|
this.patchCurrentCompanyInfo();
|
|
526
|
+
this.filteredOptions = this.companyList;
|
|
527
|
+
this.searchControl.valueChanges.subscribe((searchTerm) => {
|
|
528
|
+
if (searchTerm) {
|
|
529
|
+
this.filteredOptions = this.companyList.filter((opt) => opt.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
530
|
+
}
|
|
531
|
+
else {
|
|
532
|
+
this.filteredOptions = this.companyList;
|
|
533
|
+
}
|
|
534
|
+
});
|
|
522
535
|
}
|
|
523
536
|
});
|
|
524
537
|
}
|
|
@@ -562,6 +575,17 @@ class HeaderComponent {
|
|
|
562
575
|
}
|
|
563
576
|
});
|
|
564
577
|
}
|
|
578
|
+
onOpened(opened) {
|
|
579
|
+
if (opened) {
|
|
580
|
+
setTimeout(() => {
|
|
581
|
+
this.searchInput?.nativeElement?.focus();
|
|
582
|
+
}, 100); // Wait for panel to render
|
|
583
|
+
}
|
|
584
|
+
else {
|
|
585
|
+
// Clear the search input when panel closes
|
|
586
|
+
this.searchControl.setValue('');
|
|
587
|
+
}
|
|
588
|
+
}
|
|
565
589
|
switchCompany(info) {
|
|
566
590
|
let company = info.value;
|
|
567
591
|
let comInfo = {
|
|
@@ -622,15 +646,18 @@ class HeaderComponent {
|
|
|
622
646
|
}
|
|
623
647
|
}
|
|
624
648
|
HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
625
|
-
HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "lib-header", inputs: { INACTIVITY_LIMIT: "INACTIVITY_LIMIT" }, host: { listeners: { "document:mousemove": "resetTimer()", "document:keydown": "resetTimer()", "document:click": "resetTimer()", "document:touchstart": "resetTimer()", "document:touchmove": "resetTimer()", "document:scroll": "resetTimer()", "window:focus": "resetTimer()" } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"app-menu-sidenav-container\">\n <mat-sidenav cdkMenuBar #sidenav mode=\"over\" class=\"sidenavDrawer\">\n <div class=\"drawerHeadLogo\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetLogo)\"></div>\n <div class=\"app-menu-content-section\">\n <ng-container *ngFor=\"let appType of menuList\">\n <div class=\"appList\">\n <img *ngIf=\"appConfig[appType.key]?.appLogoUri\"\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[appType.key]?.appLogoUri)\">\n </div>\n <div class=\"subHeadListItems\">\n <div *ngFor=\"let item of appType.value\" class=\"menu-item\" (click)=\"menuSelection(item)\"\n [ngClass]=\"{'active-menu': item | activeRoute : _router.url:_headerSer.headerConfig.appType}\">\n <mat-icon class=\"menuIconList\" *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span>{{ item.menuName }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n<mat-toolbar cdkMenuBar color=\"primary\" class=\"header-wrapper common_header shadow-sm\">\n <!-- Main nav button and navigation links -->\n <button mat-icon-button color=\"theme-white\" (click)=\"sidenav.toggle()\"\n class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\" aria-label=\"main menu\" tabindex=\"0\"\n 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 [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[_headerSer.headerConfig.appType]?.appLogoUri)\"\n alt=\"App Logo\" class=\"app-logo\">\n </a>\n\n <ng-content></ng-content>\n\n <mat-form-field appearance=\"outline\" class=\"switchCompanyField\">\n <mat-label>Company</mat-label>\n <mat-select [formControl]=\"companyControl\" (selectionChange)=\"switchCompany($event)\">\n <mat-option *ngFor=\"let opt of companyList\" [value]=\"opt\">\n {{opt.name}}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n\n <!-- Profile button and profile dropdown links -->\n <button class=\"pmx-button pmx-menu-button profile-button\" mat-button [matMenuTriggerFor]=\"menu\" color=\"primary\"\n matTooltipPosition=\"below\">\n <div class=\"profile-inner\">\n <!-- <div class=\"brand-logo align-self-center\" *ngIf=\"activeCompany?.logo\"\n [ngClass]=\"activeCompany?.logo ? 'branded-logo-true' : 'branded-logo-false'\"\n [ngStyle]=\"{'background-image': 'url(' + activeCompany?.logo + ')'}\"></div> -->\n <div class=\"avatar\">\n <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n <ng-template #defaultAvatar><img\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\"\n class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n </div>\n </div>\n </button>\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 <img *ngIf=\"userImageLink;else defaultLargeAvatar\" [src]=\"userImageLink\" class=\"avatar-icon\"\n alt=\"Avatar\">\n <ng-template #defaultLargeAvatar>\n <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\"\n class=\"avatar-icon default-avatar\" alt=\"Avatar icon\"> </div>\n </ng-template>\n </div>\n <div class=\"user-data\">\n <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{\n userAuthData?.lastName }}</span></h3>\n <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\"\n (click)=\"profile()\">View Profile</button>\n </div>\n </div>\n </div>\n <div class=\"popover-body\">\n <!-- <div class=\"popover-content-title\">\n <p>Overview</p>\n </div> -->\n\n <div *ngIf=\"userAuthData?.email\">\n <p mat-menu-item class=\"list-text list-text-email mt-3 mb-3\">\n <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{\n userAuthData?.email }}</span>\n </p>\n </div>\n <ng-container *ngIf=\"userAuthData?.contactPhone\">\n <p mat-menu-item class=\"list-text mb-3\">\n <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{\n userAuthData?.contactPhone }}</span>\n </p>\n </ng-container>\n\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: [":root{--contentfont: 13.12px !important;--labelfont: .75rem !important}.pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word;word-break: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:fixed;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:20px;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:24px!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-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}::ng-deep .header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible;margin-top:1rem}.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}.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 1rem;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}::ng-deep .popover-content ul.list-group li.list-item button.list-button .list-text{font-size:15px}.popover-content .popover-body p.list-text{padding:.5rem 1rem;margin:0;min-height:auto;cursor:default}::ng-deep .popover-content .popover-body p.list-text .mat-mdc-menu-item-text{font-size:15px;font-weight:500}.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,.popover-content .popover-body p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"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 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}:host ::ng-deep .app-menu-sidenav-container{z-index:999}:host ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{position:fixed;background:rgba(63,81,181,.25)}.mat-drawer-backdrop{position:fixed!important}.sidenavDrawer{position:fixed!important;left:0;width:250px;padding:0}.mdc-list-group__subheader{background-color:#eef4ff;padding:5px 20px;margin-bottom:5px!important;font-size:14px!important;font-weight:500!important}.menusubItems{padding-left:2rem!important}.switchCompanyField{min-width:175px!important;margin-left:13px}.profile-button{margin-left:10px}.brand-logo{width:100px;height:38px;background-repeat:no-repeat;background-size:contain;background-origin:content-box;padding:7px}.menuIconList{font-size:20px!important;height:20px;width:20px;margin-right:.5rem;position:relative;color:#747474;font-weight:300}.subHeadListItems{padding:0 15px}.subHeadListItems .menu-item{display:flex;flex-direction:row;align-items:center;color:#000;padding:.7rem .5rem;border-radius:3px;transition:all .3s;font-size:var(--contentfont)}.subHeadListItems .menu-item:hover:not(.no-select){cursor:pointer;background-color:#f5f5f5}.subHeadInnerItem{margin-bottom:0!important}.drawerHeadLogo{width:100%;padding:10px 20px;margin-bottom:20px;margin-top:15px}.drawerHeadLogo img{width:130px}.app-menu-content-section{overflow-y:auto;height:calc(100vh - 80px);padding-bottom:25px}.active-menu{background-color:var(--themelightblue)!important;color:#fff!important;font-weight:500}.active-menu .menuIconList{color:#fff}.appList{padding:11px 15px;background-color:#eef4ff;margin:20px 0 10px;height:35px;display:flex}.appList img{object-fit:contain}::ng-deep .header-dropdown-profile .mat-mdc-menu-content{margin:0;padding:0;list-style-type:none}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.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.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ActiveRoutePipe, name: "activeRoute" }] });
|
|
649
|
+
HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "lib-header", inputs: { INACTIVITY_LIMIT: "INACTIVITY_LIMIT" }, host: { listeners: { "document:mousemove": "resetTimer()", "document:keydown": "resetTimer()", "document:click": "resetTimer()", "document:touchstart": "resetTimer()", "document:touchmove": "resetTimer()", "document:scroll": "resetTimer()", "window:focus": "resetTimer()" } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<mat-sidenav-container class=\"app-menu-sidenav-container\">\n <mat-sidenav cdkMenuBar #sidenav mode=\"over\" class=\"sidenavDrawer\">\n <div class=\"drawerHeadLogo\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetLogo)\"></div>\n <div class=\"app-menu-content-section\">\n <ng-container *ngFor=\"let appType of menuList\">\n <div class=\"appList\">\n <img *ngIf=\"appConfig[appType.key]?.appLogoUri\"\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[appType.key]?.appLogoUri)\">\n </div>\n <div class=\"subHeadListItems\">\n <div *ngFor=\"let item of appType.value\" class=\"menu-item\" (click)=\"menuSelection(item)\"\n [ngClass]=\"{'active-menu': item | activeRoute : _router.url:_headerSer.headerConfig.appType}\">\n <mat-icon class=\"menuIconList\" *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span>{{ item.menuName }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n<mat-toolbar cdkMenuBar color=\"primary\" class=\"header-wrapper common_header shadow-sm\">\n <!-- Main nav button and navigation links -->\n <button mat-icon-button color=\"theme-white\" (click)=\"sidenav.toggle()\"\n class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\" aria-label=\"main menu\" tabindex=\"0\"\n 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 [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[_headerSer.headerConfig.appType]?.appLogoUri)\"\n alt=\"App Logo\" class=\"app-logo\">\n </a>\n\n <ng-content></ng-content>\n\n <mat-form-field appearance=\"outline\" class=\"switchCompanyField\">\n <mat-label>Company</mat-label>\n <mat-select [formControl]=\"companyControl\" (selectionChange)=\"switchCompany($event)\"\n (openedChange)=\"onOpened($event)\">\n <div class=\"options-search mat-select-search-container\">\n <mat-form-field appearance=\"outline\">\n <input #searchInput matInput placeholder=\"Search\" [formControl]=\"searchControl\"\n (keydown)=\"$event.stopPropagation()\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n </div>\n <mat-option *ngFor=\"let opt of filteredOptions\" [value]=\"opt\">\n {{opt.name}}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n\n <!-- Profile button and profile dropdown links -->\n <button class=\"pmx-button pmx-menu-button profile-button\" mat-button [matMenuTriggerFor]=\"menu\" color=\"primary\"\n matTooltipPosition=\"below\">\n <div class=\"profile-inner\">\n <!-- <div class=\"brand-logo align-self-center\" *ngIf=\"activeCompany?.logo\"\n [ngClass]=\"activeCompany?.logo ? 'branded-logo-true' : 'branded-logo-false'\"\n [ngStyle]=\"{'background-image': 'url(' + activeCompany?.logo + ')'}\"></div> -->\n <div class=\"avatar\">\n <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n <ng-template #defaultAvatar><img\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\"\n class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n </div>\n </div>\n </button>\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 <img *ngIf=\"userImageLink;else defaultLargeAvatar\" [src]=\"userImageLink\" class=\"avatar-icon\"\n alt=\"Avatar\">\n <ng-template #defaultLargeAvatar>\n <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\"\n class=\"avatar-icon default-avatar\" alt=\"Avatar icon\"> </div>\n </ng-template>\n </div>\n <div class=\"user-data\">\n <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{\n userAuthData?.lastName }}</span></h3>\n <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\"\n (click)=\"profile()\">View Profile</button>\n </div>\n </div>\n </div>\n <div class=\"popover-body\">\n <!-- <div class=\"popover-content-title\">\n <p>Overview</p>\n </div> -->\n\n <div *ngIf=\"userAuthData?.email\">\n <p mat-menu-item class=\"list-text list-text-email mt-3 mb-3\">\n <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{\n userAuthData?.email }}</span>\n </p>\n </div>\n <ng-container *ngIf=\"userAuthData?.contactPhone\">\n <p mat-menu-item class=\"list-text mb-3\">\n <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{\n userAuthData?.contactPhone }}</span>\n </p>\n </ng-container>\n\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: [":root{--contentfont: 13.12px !important;--labelfont: .75rem !important}.pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word;word-break: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:fixed;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:20px;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:24px!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-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}::ng-deep .header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible;margin-top:1rem}.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}.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 1rem;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}::ng-deep .popover-content ul.list-group li.list-item button.list-button .list-text{font-size:15px}.popover-content .popover-body p.list-text{padding:.5rem 1rem;margin:0;min-height:auto;cursor:default}::ng-deep .popover-content .popover-body p.list-text .mat-mdc-menu-item-text{font-size:15px;font-weight:500}.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,.popover-content .popover-body p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"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 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}:host ::ng-deep .app-menu-sidenav-container{z-index:999}:host ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{position:fixed;background:rgba(63,81,181,.25)}.mat-drawer-backdrop{position:fixed!important}.sidenavDrawer{position:fixed!important;left:0;width:250px;padding:0}.mdc-list-group__subheader{background-color:#eef4ff;padding:5px 20px;margin-bottom:5px!important;font-size:14px!important;font-weight:500!important}.menusubItems{padding-left:2rem!important}.switchCompanyField{min-width:175px!important;margin-left:13px}.profile-button{margin-left:10px}.brand-logo{width:100px;height:38px;background-repeat:no-repeat;background-size:contain;background-origin:content-box;padding:7px}.menuIconList{font-size:20px!important;height:20px;width:20px;margin-right:.5rem;position:relative;color:#747474;font-weight:300}.subHeadListItems{padding:0 15px}.subHeadListItems .menu-item{display:flex;flex-direction:row;align-items:center;color:#000;padding:.7rem .5rem;border-radius:3px;transition:all .3s;font-size:var(--contentfont)}.subHeadListItems .menu-item:hover:not(.no-select){cursor:pointer;background-color:#f5f5f5}.subHeadInnerItem{margin-bottom:0!important}.drawerHeadLogo{width:100%;padding:10px 20px;margin-bottom:20px;margin-top:15px}.drawerHeadLogo img{width:130px}.app-menu-content-section{overflow-y:auto;height:calc(100vh - 80px);padding-bottom:25px}.active-menu{background-color:var(--themelightblue)!important;color:#fff!important;font-weight:500}.active-menu .menuIconList{color:#fff}.appList{padding:11px 15px;background-color:#eef4ff;margin:20px 0 10px;height:35px;display:flex}.appList img{object-fit:contain}::ng-deep .header-dropdown-profile .mat-mdc-menu-content{margin:0;padding:0;list-style-type:none}.options-search ::ng-deep .mat-mdc-form-field-icon-suffix>.mat-icon{font-size:21px!important;color:gray;padding:0!important}::ng-deep .mat-select-panel{position:relative}::ng-deep .mat-select-search-container{position:sticky;top:0;z-index:1;background:white;padding:8px 12px;border-bottom:1px solid #ddd}::ng-deep div.mat-mdc-select-panel{padding-top:0!important}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.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.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: ActiveRoutePipe, name: "activeRoute" }] });
|
|
626
650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
627
651
|
type: Component,
|
|
628
|
-
args: [{ selector: 'lib-header', template: "<mat-sidenav-container class=\"app-menu-sidenav-container\">\n <mat-sidenav cdkMenuBar #sidenav mode=\"over\" class=\"sidenavDrawer\">\n <div class=\"drawerHeadLogo\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetLogo)\"></div>\n <div class=\"app-menu-content-section\">\n <ng-container *ngFor=\"let appType of menuList\">\n <div class=\"appList\">\n <img *ngIf=\"appConfig[appType.key]?.appLogoUri\"\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[appType.key]?.appLogoUri)\">\n </div>\n <div class=\"subHeadListItems\">\n <div *ngFor=\"let item of appType.value\" class=\"menu-item\" (click)=\"menuSelection(item)\"\n [ngClass]=\"{'active-menu': item | activeRoute : _router.url:_headerSer.headerConfig.appType}\">\n <mat-icon class=\"menuIconList\" *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span>{{ item.menuName }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n<mat-toolbar cdkMenuBar color=\"primary\" class=\"header-wrapper common_header shadow-sm\">\n <!-- Main nav button and navigation links -->\n <button mat-icon-button color=\"theme-white\" (click)=\"sidenav.toggle()\"\n class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\" aria-label=\"main menu\" tabindex=\"0\"\n 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 [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[_headerSer.headerConfig.appType]?.appLogoUri)\"\n alt=\"App Logo\" class=\"app-logo\">\n </a>\n\n <ng-content></ng-content>\n\n <mat-form-field appearance=\"outline\" class=\"switchCompanyField\">\n <mat-label>Company</mat-label>\n <mat-select [formControl]=\"companyControl\" (selectionChange)=\"switchCompany($event)\">\n <mat-option *ngFor=\"let opt of companyList\" [value]=\"opt\">\n {{opt.name}}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n\n <!-- Profile button and profile dropdown links -->\n <button class=\"pmx-button pmx-menu-button profile-button\" mat-button [matMenuTriggerFor]=\"menu\" color=\"primary\"\n matTooltipPosition=\"below\">\n <div class=\"profile-inner\">\n <!-- <div class=\"brand-logo align-self-center\" *ngIf=\"activeCompany?.logo\"\n [ngClass]=\"activeCompany?.logo ? 'branded-logo-true' : 'branded-logo-false'\"\n [ngStyle]=\"{'background-image': 'url(' + activeCompany?.logo + ')'}\"></div> -->\n <div class=\"avatar\">\n <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n <ng-template #defaultAvatar><img\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\"\n class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n </div>\n </div>\n </button>\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 <img *ngIf=\"userImageLink;else defaultLargeAvatar\" [src]=\"userImageLink\" class=\"avatar-icon\"\n alt=\"Avatar\">\n <ng-template #defaultLargeAvatar>\n <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\"\n class=\"avatar-icon default-avatar\" alt=\"Avatar icon\"> </div>\n </ng-template>\n </div>\n <div class=\"user-data\">\n <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{\n userAuthData?.lastName }}</span></h3>\n <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\"\n (click)=\"profile()\">View Profile</button>\n </div>\n </div>\n </div>\n <div class=\"popover-body\">\n <!-- <div class=\"popover-content-title\">\n <p>Overview</p>\n </div> -->\n\n <div *ngIf=\"userAuthData?.email\">\n <p mat-menu-item class=\"list-text list-text-email mt-3 mb-3\">\n <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{\n userAuthData?.email }}</span>\n </p>\n </div>\n <ng-container *ngIf=\"userAuthData?.contactPhone\">\n <p mat-menu-item class=\"list-text mb-3\">\n <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{\n userAuthData?.contactPhone }}</span>\n </p>\n </ng-container>\n\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: [":root{--contentfont: 13.12px !important;--labelfont: .75rem !important}.pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word;word-break: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:fixed;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:20px;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:24px!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-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}::ng-deep .header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible;margin-top:1rem}.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}.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 1rem;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}::ng-deep .popover-content ul.list-group li.list-item button.list-button .list-text{font-size:15px}.popover-content .popover-body p.list-text{padding:.5rem 1rem;margin:0;min-height:auto;cursor:default}::ng-deep .popover-content .popover-body p.list-text .mat-mdc-menu-item-text{font-size:15px;font-weight:500}.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,.popover-content .popover-body p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"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 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}:host ::ng-deep .app-menu-sidenav-container{z-index:999}:host ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{position:fixed;background:rgba(63,81,181,.25)}.mat-drawer-backdrop{position:fixed!important}.sidenavDrawer{position:fixed!important;left:0;width:250px;padding:0}.mdc-list-group__subheader{background-color:#eef4ff;padding:5px 20px;margin-bottom:5px!important;font-size:14px!important;font-weight:500!important}.menusubItems{padding-left:2rem!important}.switchCompanyField{min-width:175px!important;margin-left:13px}.profile-button{margin-left:10px}.brand-logo{width:100px;height:38px;background-repeat:no-repeat;background-size:contain;background-origin:content-box;padding:7px}.menuIconList{font-size:20px!important;height:20px;width:20px;margin-right:.5rem;position:relative;color:#747474;font-weight:300}.subHeadListItems{padding:0 15px}.subHeadListItems .menu-item{display:flex;flex-direction:row;align-items:center;color:#000;padding:.7rem .5rem;border-radius:3px;transition:all .3s;font-size:var(--contentfont)}.subHeadListItems .menu-item:hover:not(.no-select){cursor:pointer;background-color:#f5f5f5}.subHeadInnerItem{margin-bottom:0!important}.drawerHeadLogo{width:100%;padding:10px 20px;margin-bottom:20px;margin-top:15px}.drawerHeadLogo img{width:130px}.app-menu-content-section{overflow-y:auto;height:calc(100vh - 80px);padding-bottom:25px}.active-menu{background-color:var(--themelightblue)!important;color:#fff!important;font-weight:500}.active-menu .menuIconList{color:#fff}.appList{padding:11px 15px;background-color:#eef4ff;margin:20px 0 10px;height:35px;display:flex}.appList img{object-fit:contain}::ng-deep .header-dropdown-profile .mat-mdc-menu-content{margin:0;padding:0;list-style-type:none}\n"] }]
|
|
652
|
+
args: [{ selector: 'lib-header', template: "<mat-sidenav-container class=\"app-menu-sidenav-container\">\n <mat-sidenav cdkMenuBar #sidenav mode=\"over\" class=\"sidenavDrawer\">\n <div class=\"drawerHeadLogo\"><img [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.profetLogo)\"></div>\n <div class=\"app-menu-content-section\">\n <ng-container *ngFor=\"let appType of menuList\">\n <div class=\"appList\">\n <img *ngIf=\"appConfig[appType.key]?.appLogoUri\"\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[appType.key]?.appLogoUri)\">\n </div>\n <div class=\"subHeadListItems\">\n <div *ngFor=\"let item of appType.value\" class=\"menu-item\" (click)=\"menuSelection(item)\"\n [ngClass]=\"{'active-menu': item | activeRoute : _router.url:_headerSer.headerConfig.appType}\">\n <mat-icon class=\"menuIconList\" *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span>{{ item.menuName }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n<mat-toolbar cdkMenuBar color=\"primary\" class=\"header-wrapper common_header shadow-sm\">\n <!-- Main nav button and navigation links -->\n <button mat-icon-button color=\"theme-white\" (click)=\"sidenav.toggle()\"\n class=\"pmx-button pmx-menu-button orders-menu icon-btn ms-0 me-3\" aria-label=\"main menu\" tabindex=\"0\"\n 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 [src]=\"_domSanitizer.bypassSecurityTrustUrl(appConfig[_headerSer.headerConfig.appType]?.appLogoUri)\"\n alt=\"App Logo\" class=\"app-logo\">\n </a>\n\n <ng-content></ng-content>\n\n <mat-form-field appearance=\"outline\" class=\"switchCompanyField\">\n <mat-label>Company</mat-label>\n <mat-select [formControl]=\"companyControl\" (selectionChange)=\"switchCompany($event)\"\n (openedChange)=\"onOpened($event)\">\n <div class=\"options-search mat-select-search-container\">\n <mat-form-field appearance=\"outline\">\n <input #searchInput matInput placeholder=\"Search\" [formControl]=\"searchControl\"\n (keydown)=\"$event.stopPropagation()\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n </div>\n <mat-option *ngFor=\"let opt of filteredOptions\" [value]=\"opt\">\n {{opt.name}}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n\n <!-- Profile button and profile dropdown links -->\n <button class=\"pmx-button pmx-menu-button profile-button\" mat-button [matMenuTriggerFor]=\"menu\" color=\"primary\"\n matTooltipPosition=\"below\">\n <div class=\"profile-inner\">\n <!-- <div class=\"brand-logo align-self-center\" *ngIf=\"activeCompany?.logo\"\n [ngClass]=\"activeCompany?.logo ? 'branded-logo-true' : 'branded-logo-false'\"\n [ngStyle]=\"{'background-image': 'url(' + activeCompany?.logo + ')'}\"></div> -->\n <div class=\"avatar\">\n <img *ngIf=\"userImageLink;else defaultAvatar\" [src]=\"userImageLink\" class=\"avatar-image\" alt=\"Avatar\">\n <ng-template #defaultAvatar><img\n [src]=\"_domSanitizer.bypassSecurityTrustUrl(imageDataUrls.defaultUserImage)\"\n class=\"avatar-default\" alt=\"profile pic\"></ng-template>\n </div>\n </div>\n </button>\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 <img *ngIf=\"userImageLink;else defaultLargeAvatar\" [src]=\"userImageLink\" class=\"avatar-icon\"\n alt=\"Avatar\">\n <ng-template #defaultLargeAvatar>\n <div [ngStyle]=\"{'background-image': 'url(' + imageDataUrls.defaultUserImage + ')'}\"\n class=\"avatar-icon default-avatar\" alt=\"Avatar icon\"> </div>\n </ng-template>\n </div>\n <div class=\"user-data\">\n <h3 class=\"profile-name\"><span *ngIf=\"userAuthData\">{{ userAuthData?.firstName }} {{\n userAuthData?.lastName }}</span></h3>\n <button mat-button color=\"accent\" class=\"pmx-button btn btn-small view-profile ms-0\"\n (click)=\"profile()\">View Profile</button>\n </div>\n </div>\n </div>\n <div class=\"popover-body\">\n <!-- <div class=\"popover-content-title\">\n <p>Overview</p>\n </div> -->\n\n <div *ngIf=\"userAuthData?.email\">\n <p mat-menu-item class=\"list-text list-text-email mt-3 mb-3\">\n <mat-icon class=\"list-icon\">mail</mat-icon><span class=\"pmx-lower-case pmx-text-wrap me-auto\">{{\n userAuthData?.email }}</span>\n </p>\n </div>\n <ng-container *ngIf=\"userAuthData?.contactPhone\">\n <p mat-menu-item class=\"list-text mb-3\">\n <mat-icon class=\"list-icon\">call</mat-icon><span class=\"title-case me-auto\">{{\n userAuthData?.contactPhone }}</span>\n </p>\n </ng-container>\n\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: [":root{--contentfont: 13.12px !important;--labelfont: .75rem !important}.pmx-text-truncate{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pmx-text-wrap{overflow-wrap:break-word;word-break: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:fixed;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:20px;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:24px!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-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}::ng-deep .header-dropdown-profile.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:408px!important;width:408px!important;overflow:visible;margin-top:1rem}.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}.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 1rem;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}::ng-deep .popover-content ul.list-group li.list-item button.list-button .list-text{font-size:15px}.popover-content .popover-body p.list-text{padding:.5rem 1rem;margin:0;min-height:auto;cursor:default}::ng-deep .popover-content .popover-body p.list-text .mat-mdc-menu-item-text{font-size:15px;font-weight:500}.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,.popover-content .popover-body p.list-text .list-icon{color:#2db051;font-variation-settings:\"FILL\" 0,\"wght\" 300,\"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 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}:host ::ng-deep .app-menu-sidenav-container{z-index:999}:host ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{position:fixed;background:rgba(63,81,181,.25)}.mat-drawer-backdrop{position:fixed!important}.sidenavDrawer{position:fixed!important;left:0;width:250px;padding:0}.mdc-list-group__subheader{background-color:#eef4ff;padding:5px 20px;margin-bottom:5px!important;font-size:14px!important;font-weight:500!important}.menusubItems{padding-left:2rem!important}.switchCompanyField{min-width:175px!important;margin-left:13px}.profile-button{margin-left:10px}.brand-logo{width:100px;height:38px;background-repeat:no-repeat;background-size:contain;background-origin:content-box;padding:7px}.menuIconList{font-size:20px!important;height:20px;width:20px;margin-right:.5rem;position:relative;color:#747474;font-weight:300}.subHeadListItems{padding:0 15px}.subHeadListItems .menu-item{display:flex;flex-direction:row;align-items:center;color:#000;padding:.7rem .5rem;border-radius:3px;transition:all .3s;font-size:var(--contentfont)}.subHeadListItems .menu-item:hover:not(.no-select){cursor:pointer;background-color:#f5f5f5}.subHeadInnerItem{margin-bottom:0!important}.drawerHeadLogo{width:100%;padding:10px 20px;margin-bottom:20px;margin-top:15px}.drawerHeadLogo img{width:130px}.app-menu-content-section{overflow-y:auto;height:calc(100vh - 80px);padding-bottom:25px}.active-menu{background-color:var(--themelightblue)!important;color:#fff!important;font-weight:500}.active-menu .menuIconList{color:#fff}.appList{padding:11px 15px;background-color:#eef4ff;margin:20px 0 10px;height:35px;display:flex}.appList img{object-fit:contain}::ng-deep .header-dropdown-profile .mat-mdc-menu-content{margin:0;padding:0;list-style-type:none}.options-search ::ng-deep .mat-mdc-form-field-icon-suffix>.mat-icon{font-size:21px!important;color:gray;padding:0!important}::ng-deep .mat-select-panel{position:relative}::ng-deep .mat-select-search-container{position:sticky;top:0;z-index:1;background:white;padding:8px 12px;border-bottom:1px solid #ddd}::ng-deep div.mat-mdc-select-panel{padding-top:0!important}\n"] }]
|
|
629
653
|
}], ctorParameters: function () { return []; }, propDecorators: { INACTIVITY_LIMIT: [{
|
|
630
654
|
type: Input
|
|
631
655
|
}], sidenav: [{
|
|
632
656
|
type: ViewChild,
|
|
633
657
|
args: ['sidenav']
|
|
658
|
+
}], searchInput: [{
|
|
659
|
+
type: ViewChild,
|
|
660
|
+
args: ['searchInput', { static: false }]
|
|
634
661
|
}], resetTimer: [{
|
|
635
662
|
type: HostListener,
|
|
636
663
|
args: ['document:mousemove']
|
|
@@ -671,7 +698,8 @@ CommonHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
671
698
|
MatFormFieldModule,
|
|
672
699
|
MatSelectModule,
|
|
673
700
|
ReactiveFormsModule,
|
|
674
|
-
MatDialogModule
|
|
701
|
+
MatDialogModule,
|
|
702
|
+
MatInputModule], exports: [HeaderComponent] });
|
|
675
703
|
CommonHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommonHeaderModule, providers: [TitleCasePipe, LowerCasePipe], imports: [CommonModule,
|
|
676
704
|
MatToolbarModule,
|
|
677
705
|
MatIconModule,
|
|
@@ -686,7 +714,8 @@ CommonHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
686
714
|
MatFormFieldModule,
|
|
687
715
|
MatSelectModule,
|
|
688
716
|
ReactiveFormsModule,
|
|
689
|
-
MatDialogModule
|
|
717
|
+
MatDialogModule,
|
|
718
|
+
MatInputModule] });
|
|
690
719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommonHeaderModule, decorators: [{
|
|
691
720
|
type: NgModule,
|
|
692
721
|
args: [{
|
|
@@ -706,7 +735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
706
735
|
MatFormFieldModule,
|
|
707
736
|
MatSelectModule,
|
|
708
737
|
ReactiveFormsModule,
|
|
709
|
-
MatDialogModule
|
|
738
|
+
MatDialogModule,
|
|
739
|
+
MatInputModule
|
|
710
740
|
],
|
|
711
741
|
providers: [TitleCasePipe, LowerCasePipe],
|
|
712
742
|
exports: [HeaderComponent],
|