@testgorilla/tgo-ui 2.24.10 → 2.24.12
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/esm2022/components/navbar/navbar.component.mjs +2 -2
- package/esm2022/components/page-header/page-header.component.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui.mjs +4 -4
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/theme/_button.scss +11 -12
- package/projects/tgo-canopy-ui/theme/_tooltip.scss +0 -4
|
@@ -167,11 +167,11 @@ export class NavbarComponent {
|
|
|
167
167
|
this.menuState.emit({ isOpened, screenSize });
|
|
168
168
|
}
|
|
169
169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, deps: [{ token: i1.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2.SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar", menuClass: "menuClass" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:1px solid transparent;position:relative}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i10.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i11.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i12.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i13.MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: i14.BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar", menuClass: "menuClass" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i10.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i11.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i12.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i13.MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: i14.BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
171
171
|
}
|
|
172
172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:1px solid transparent;position:relative}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
|
|
174
|
+
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
|
|
175
175
|
}], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: undefined, decorators: [{
|
|
176
176
|
type: Optional
|
|
177
177
|
}, {
|
|
@@ -42,11 +42,11 @@ export class PageHeaderComponent {
|
|
|
42
42
|
this.back.emit();
|
|
43
43
|
}
|
|
44
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
|
-
args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px
|
|
49
|
+
args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
|
|
50
50
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
51
51
|
type: Optional
|
|
52
52
|
}, {
|
|
@@ -6983,11 +6983,11 @@ class NavbarComponent {
|
|
|
6983
6983
|
this.menuState.emit({ isOpened, screenSize });
|
|
6984
6984
|
}
|
|
6985
6985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar", menuClass: "menuClass" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:1px solid transparent;position:relative}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.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: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar", menuClass: "menuClass" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.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: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6987
6987
|
}
|
|
6988
6988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
6989
6989
|
type: Component,
|
|
6990
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:1px solid transparent;position:relative}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
|
|
6990
|
+
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n ></ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
|
|
6991
6991
|
}], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: undefined, decorators: [{
|
|
6992
6992
|
type: Optional
|
|
6993
6993
|
}, {
|
|
@@ -12422,11 +12422,11 @@ class PageHeaderComponent {
|
|
|
12422
12422
|
this.back.emit();
|
|
12423
12423
|
}
|
|
12424
12424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12425
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px
|
|
12425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
12426
12426
|
}
|
|
12427
12427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
12428
12428
|
type: Component,
|
|
12429
|
-
args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px
|
|
12429
|
+
args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
|
|
12430
12430
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
12431
12431
|
type: Optional
|
|
12432
12432
|
}, {
|