@onemrvapublic/design-system 17.6.0-develop.6 → 17.6.2
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/README.md +2 -5
- package/esm2022/layout/src/components/layout/layout.component.mjs +8 -8
- package/esm2022/layout/src/layout.module.mjs +5 -2
- package/esm2022/mat-selectable-box/src/onemrva-mat-selectable-box.component.mjs +80 -6
- package/fesm2022/onemrvapublic-design-system-layout.mjs +13 -10
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs +79 -5
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs.map +1 -1
- package/layout/src/components/layout/_layout-mixin.component.scss +1 -2
- package/layout/src/components/layout/layout.component.d.ts +1 -1
- package/layout/src/layout.module.d.ts +2 -1
- package/mat-selectable-box/src/onemrva-mat-selectable-box.component.d.ts +1 -2
- package/mat-selectable-box/src/onemrva-mat-selectable-box.component.scss +3 -17
- package/package.json +3 -2
|
@@ -19,16 +19,18 @@ import * as i1$2 from '@ngx-translate/core';
|
|
|
19
19
|
import { TranslateModule } from '@ngx-translate/core';
|
|
20
20
|
import * as i5 from '@angular/material/divider';
|
|
21
21
|
import { MatDividerModule } from '@angular/material/divider';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i6 from '@angular/material/tabs';
|
|
23
23
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
24
24
|
import * as i10 from '@angular/material/button';
|
|
25
25
|
import { MatButtonModule } from '@angular/material/button';
|
|
26
|
-
import * as i6 from '@angular/material/toolbar';
|
|
26
|
+
import * as i6$1 from '@angular/material/toolbar';
|
|
27
27
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
28
28
|
import * as i13 from '@onemrvapublic/design-system/mat-avatar';
|
|
29
29
|
import { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';
|
|
30
30
|
import * as i14 from '@angular/material/tooltip';
|
|
31
31
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
32
|
+
import * as i15 from '@angular/material/core';
|
|
33
|
+
import { MatRipple } from '@angular/material/core';
|
|
32
34
|
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
|
|
33
35
|
|
|
34
36
|
class LayoutSubrouteComponent {
|
|
@@ -323,7 +325,7 @@ class LayoutSidenavComponent {
|
|
|
323
325
|
this.helpMenuOpen[index][subIdx] === 'out' ? 'in' : 'out';
|
|
324
326
|
}
|
|
325
327
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LayoutSidenavComponent, deps: [{ token: i1$2.TranslateService }, { token: DOCUMENT }, { token: OnemrvaDrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: LayoutSidenavComponent, selector: "onemrva-layout-sidenav", inputs: { isSmall: "isSmall", languages: "languages", routes: "routes" }, ngImport: i0, template: "<ng-container\n *ngIf=\"\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n \"\n>\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-close-button\"\n (click)=\"close()\"\n data-cy=\"smallDeviceMenu\"\n attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n >\n <mat-icon>close</mat-icon>\n </button>\n <ng-container *ngIf=\"isSmall && languages && languages.length > 1\">\n <mat-tab-group\n class=\"language-tabs\"\n [selectedIndex]=\"selectedLanguageIndex$ | async\"\n (selectedIndexChange)=\"changeLanguage($event)\"\n >\n <mat-tab *ngFor=\"let lang of languages\">\n <div *matTabLabel [attr.data-cy]=\"'language_' + lang.code\">\n {{ lang.label }}\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container *ngIf=\"isSmall && routes?.toArray()?.length\">\n <mat-divider\n style=\"align-self: stretch; margin-bottom: 10px\"\n *ngIf=\"languages && languages.length > 1\"\n ></mat-divider>\n <div>\n <ng-container *ngFor=\"let e of routes?.toArray(); let i = index\">\n <ng-container *ngIf=\"!e.hasSubroutes()\">\n <button\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n >\n <ng-container *ngIf=\"e.mobileTemplate as routeTemplate\">\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"e.hasSubroutes()\">\n <button\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n (click)=\"openSubmenu(i)\"\n [attr.data-cy]=\"e.dataCy\"\n >\n {{ e.label }}\n <mat-icon>expand_more</mat-icon>\n </button>\n <div [@slideInOut]=\"helpMenuOpen[i][0]\">\n <ng-container\n *ngFor=\"let es of e.subroutes?.toArray(); let j = index\"\n >\n <button\n [routerLink]=\"es.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n (click)=\"openSubmenu(i, j + 1)\"\n [attr.data-cy]=\"es.dataCy\"\n >\n <ng-container *ngIf=\"es.template as routeTemplate\">\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n </ng-container>\n <mat-icon *ngIf=\"es.hasSubroutes()\">expand_more</mat-icon>\n </button>\n <div [@slideInOut]=\"helpMenuOpen[i][j + 1]\">\n <ng-container *ngFor=\"let ess of es.subroutes?.toArray()\">\n <button\n [routerLink]=\"ess.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n [attr.data-cy]=\"ess.dataCy\"\n >\n \n <ng-container *ngIf=\"ess.template as routeTemplate\">\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type:
|
|
328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: LayoutSidenavComponent, selector: "onemrva-layout-sidenav", inputs: { isSmall: "isSmall", languages: "languages", routes: "routes" }, ngImport: i0, template: "<ng-container\n *ngIf=\"\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n \"\n>\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-close-button\"\n (click)=\"close()\"\n data-cy=\"smallDeviceMenu\"\n attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n >\n <mat-icon>close</mat-icon>\n </button>\n <ng-container *ngIf=\"isSmall && languages && languages.length > 1\">\n <mat-tab-group\n class=\"language-tabs\"\n [selectedIndex]=\"selectedLanguageIndex$ | async\"\n (selectedIndexChange)=\"changeLanguage($event)\"\n >\n <mat-tab *ngFor=\"let lang of languages\">\n <div *matTabLabel [attr.data-cy]=\"'language_' + lang.code\">\n {{ lang.label }}\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container *ngIf=\"isSmall && routes?.toArray()?.length\">\n <mat-divider\n style=\"align-self: stretch; margin-bottom: 10px\"\n *ngIf=\"languages && languages.length > 1\"\n ></mat-divider>\n <div>\n <ng-container *ngFor=\"let e of routes?.toArray(); let i = index\">\n <ng-container *ngIf=\"!e.hasSubroutes()\">\n <button\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n >\n <ng-container *ngIf=\"e.mobileTemplate as routeTemplate\">\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"e.hasSubroutes()\">\n <button\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n (click)=\"openSubmenu(i)\"\n [attr.data-cy]=\"e.dataCy\"\n >\n {{ e.label }}\n <mat-icon>expand_more</mat-icon>\n </button>\n <div [@slideInOut]=\"helpMenuOpen[i][0]\">\n <ng-container\n *ngFor=\"let es of e.subroutes?.toArray(); let j = index\"\n >\n <button\n [routerLink]=\"es.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n (click)=\"openSubmenu(i, j + 1)\"\n [attr.data-cy]=\"es.dataCy\"\n >\n <ng-container *ngIf=\"es.template as routeTemplate\">\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n </ng-container>\n <mat-icon *ngIf=\"es.hasSubroutes()\">expand_more</mat-icon>\n </button>\n <div [@slideInOut]=\"helpMenuOpen[i][j + 1]\">\n <ng-container *ngFor=\"let ess of es.subroutes?.toArray()\">\n <button\n [routerLink]=\"ess.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n routerLinkActive=\"active\"\n class=\"mobile-menu-item\"\n [attr.data-cy]=\"ess.dataCy\"\n >\n \n <ng-container *ngIf=\"ess.template as routeTemplate\">\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [
|
|
327
329
|
trigger('slideInOut', [
|
|
328
330
|
state('in', style({
|
|
329
331
|
overflow: 'hidden',
|
|
@@ -460,10 +462,9 @@ class LayoutComponent {
|
|
|
460
462
|
doLogin() {
|
|
461
463
|
this.login.next();
|
|
462
464
|
}
|
|
463
|
-
changeLanguage(
|
|
464
|
-
|
|
465
|
-
this.
|
|
466
|
-
this.document.documentElement.lang = language.code;
|
|
465
|
+
changeLanguage(langCode) {
|
|
466
|
+
this.translateService.use(langCode);
|
|
467
|
+
this.document.documentElement.lang = langCode;
|
|
467
468
|
}
|
|
468
469
|
toggleSideNav() {
|
|
469
470
|
this.drawerHost.viewContainerRef.clear();
|
|
@@ -475,11 +476,11 @@ class LayoutComponent {
|
|
|
475
476
|
this.drawer.open();
|
|
476
477
|
}
|
|
477
478
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LayoutComponent, deps: [{ token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i2.BreakpointObserver }, { token: DOCUMENT }, { token: OnemrvaDrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: LayoutComponent, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n class=\"example-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop\"\n autosize\n>\n <div class=\"app-content\">\n <header>\n <mat-toolbar class=\"mat-elevation-z4\">\n <div class=\"environment\" [class]=\"environment\">\n {{ environment }}\n </div>\n <div\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"nav-container flex-center\"\n >\n {{ logoRedictionUrl }}\n <img\n class=\"logo\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + translateService.currentLang\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl !== null ? logoRedictionUrl : undefined\n \"\n [ngStyle]=\"{\n cursor: logoRedictionUrl !== null ? 'pointer' : 'default'\n }\"\n />\n <div\n class=\"application-title\"\n [ngClass]=\"{ 'small-screen': isSmall }\"\n >\n <ng-container *ngIf=\"title?.template as titleTpl\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </ng-container>\n </div>\n\n <div style=\"flex: 1\"></div>\n <div\n class=\"flex-center\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n *ngIf=\"!isSmall\"\n >\n <ng-container *ngFor=\"let e of routes?.toArray(); let i = index\">\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: !e.hasSubroutes() }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n <ng-container *ngIf=\"e.template as routeTemplate\">\n <ng-container *ngTemplateOutlet=\"routeTemplate\">\n </ng-container>\n </ng-container>\n </a>\n </ng-container>\n </div>\n\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n <ng-container *ngIf=\"afterNav?.template as tpl\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </ng-container>\n\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n *ngIf=\"!isSmall && routes?.toArray()?.length\"\n ></mat-divider>\n\n <mat-tab-group\n class=\"language-tabs\"\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"changeLanguage($event)\"\n *ngIf=\"!isSmall\"\n >\n <mat-tab *ngFor=\"let lang of languages\">\n <div *matTabLabel [attr.data-cy]=\"'language_' + lang.code\">\n {{ lang.label }}\n </div>\n </mat-tab>\n </mat-tab-group>\n\n <ng-container *ngIf=\"profile !== null\">\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n *ngIf=\"!isSmall\"\n ></mat-divider>\n <button\n disableRipple\n data-cy=\"accountMenu\"\n class=\"account-button\"\n [matMenuTriggerFor]=\"menu\"\n mat-icon-button\n attr.aria-label=\"{{ 'layout.profile' | translate }}\"\n >\n <mat-icon *ngIf=\"!profile.isLoggedIn\" class=\"large\"\n >account_circle</mat-icon\n >\n\n <onemrva-mat-avatar\n *ngIf=\"profile.isLoggedIn\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"extrasmall\"\n ></onemrva-mat-avatar>\n </button>\n <mat-menu #menu=\"matMenu\">\n <ng-container *ngIf=\"profile.isLoggedIn; else notConnected\">\n <p class=\"accountName\">\n {{ profile.firstName }} {{ profile.lastName }}\n </p>\n <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n <ng-container *ngIf=\"loginMenu?.template as menuLoginTpl\">\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\"></ng-container>\n </ng-container>\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-itemMrzapoie\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n attr.aria-label=\"{{ 'layout.logout' | translate }}\"\n >\n <mat-icon>logout</mat-icon>{{ 'layout.logout' | translate }}\n </button>\n </ng-container>\n <ng-template #notConnected>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n attr.aria-label=\"{{ 'layout.login' | translate }}\"\n >\n <mat-icon>login</mat-icon>{{ 'layout.login' | translate }}\n </button>\n </ng-template>\n </mat-menu>\n </ng-container>\n <ng-container\n *ngIf=\"\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n \"\n >\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"toggleSideNav()\"\n attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n </ng-container>\n </div>\n </mat-toolbar>\n </header>\n <ng-container>\n <div\n [id]=\"id\"\n [attr.role]=\"role\"\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"onemrva-layout-content\"\n *ngIf=\"content?.template as tpl\"\n >\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n\n <ng-container\n *ngIf=\"\n environment &&\n (environment === env.LOCAL || environment === env.TEST)\n \"\n >\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"javascript:(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n </ng-container>\n </div>\n\n <footer class=\"onemrva-footer\" *ngIf=\"footer?.template as footer\">\n <div [class.container]=\"!fluid\" [class.container-fluid]=\"fluid\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </footer>\n </ng-container>\n </div>\n\n <mat-drawer\n class=\"onemrva-drawer mobile-menu-sidebar\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n</mat-drawer-container>\n", styles: [".mat-mdc-tab-nav-bar .mat-mdc-tab-header{height:42px!important}.logo{align-self:center;cursor:pointer}.application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px}:host .mat-toolbar{background:#fff;position:fixed;top:0;height:90px;z-index:400}.accountName{margin:16px;line-height:16px;font-weight:700}:host{position:relative}:host router-outlet{display:block;margin-bottom:90px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host a:active{outline:none}.s-menu .s-menu-languages{display:flex}.s-menu .s-menu-item.active{font-weight:700!important}.s-menu .s-menu-item:hover{cursor:pointer;font-weight:700}.onemrva-layout-content{padding-top:90px;min-height:calc(100vh - 195px)}.onemrva-footer{text-align:center;padding:9.5px;margin-top:16px}onemrva-mat-avatar.clickable{cursor:pointer}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:18px!important;height:18px;width:18px}.mat-mdc-menu-content button span{font-size:14px!important}#accessibility_fab{position:fixed;bottom:16px;left:16px}nav a.disabled{pointer-events:none}.menu-close-button{float:right}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "icon", "src", "size", "color"] }, { kind: "directive", type: i14.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
479
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: LayoutComponent, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n class=\"example-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop\"\n autosize\n>\n <div class=\"app-content\">\n <header>\n <mat-toolbar class=\"mat-elevation-z4\">\n <div class=\"environment\" [class]=\"environment\">\n {{ environment }}\n </div>\n <div\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"nav-container flex-center\"\n >\n {{ logoRedictionUrl }}\n <img\n class=\"logo\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + translateService.currentLang\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl !== null ? logoRedictionUrl : undefined\n \"\n [ngStyle]=\"{\n cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n }\"\n />\n <div\n class=\"application-title\"\n [ngClass]=\"{ 'small-screen': isSmall }\"\n >\n <ng-container *ngIf=\"title?.template as titleTpl\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </ng-container>\n </div>\n\n <div style=\"flex: 1\"></div>\n <div\n class=\"flex-center\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n *ngIf=\"!isSmall\"\n >\n <ng-container *ngFor=\"let e of routes?.toArray(); let i = index\">\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: !e.hasSubroutes() }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n <ng-container *ngIf=\"e.template as routeTemplate\">\n <ng-container *ngTemplateOutlet=\"routeTemplate\">\n </ng-container>\n </ng-container>\n </a>\n </ng-container>\n </div>\n\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n <ng-container *ngIf=\"afterNav?.template as tpl\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"profile !== null\">\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n *ngIf=\"!isSmall\"\n ></mat-divider>\n <onemrva-mat-avatar\n matRipple\n *ngIf=\"profile.isLoggedIn\"\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"extrasmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n\n <onemrva-mat-avatar\n matRipple\n *ngIf=\"!profile.isLoggedIn\"\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"extrasmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n <mat-menu #menu=\"matMenu\">\n <ng-container *ngIf=\"profile.isLoggedIn; else notConnected\">\n <p class=\"accountName\">\n {{ profile.firstName }} {{ profile.lastName }}\n </p>\n <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n <ng-container *ngIf=\"loginMenu?.template as menuLoginTpl\">\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\"></ng-container>\n </ng-container>\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>{{ 'layout.logout' | translate }}\n </button>\n </ng-container>\n <ng-template #notConnected>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>{{ 'layout.login' | translate }}\n </button>\n </ng-template>\n </mat-menu>\n </ng-container>\n <ng-container\n *ngIf=\"\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n \"\n >\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n </ng-container>\n <div\n class=\"flex-center\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n *ngIf=\"!isSmall\"\n >\n <a\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n {{ translateService.currentLang }}\n <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n </a>\n </div>\n <mat-menu #languageMenu>\n <button\n *ngFor=\"let lang of languages\"\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n {{ lang.label }}\n </button>\n </mat-menu>\n </div>\n </mat-toolbar>\n </header>\n <ng-container>\n <div\n [id]=\"id\"\n [attr.role]=\"role\"\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"onemrva-layout-content\"\n *ngIf=\"content?.template as tpl\"\n >\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n\n <ng-container\n *ngIf=\"\n environment &&\n (environment === env.LOCAL || environment === env.TEST)\n \"\n >\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n </ng-container>\n </div>\n\n <footer class=\"onemrva-footer\" *ngIf=\"footer?.template as footer\">\n <div [class.container]=\"!fluid\" [class.container-fluid]=\"fluid\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </footer>\n </ng-container>\n </div>\n\n <mat-drawer\n class=\"onemrva-drawer mobile-menu-sidebar\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n</mat-drawer-container>\n", styles: [".mat-mdc-tab-nav-bar .mat-mdc-tab-header{height:42px!important}.logo{align-self:center;cursor:pointer}.application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px}:host .mat-toolbar{background:#fff;position:fixed;top:0;height:90px;z-index:400}.accountName{margin:16px;line-height:16px;font-weight:700}:host{position:relative}:host router-outlet{display:block;margin-bottom:90px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host a:active{outline:none}.s-menu .s-menu-languages{display:flex}.s-menu .s-menu-item.active{font-weight:700!important}.s-menu .s-menu-item:hover{cursor:pointer;font-weight:700}.onemrva-layout-content{padding-top:90px;min-height:calc(100vh - 195px)}.onemrva-footer{text-align:center;padding:9.5px;margin-top:16px}onemrva-mat-avatar.clickable{cursor:pointer}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:18px!important;height:18px;width:18px}.mat-mdc-menu-content button span{font-size:14px!important}#accessibility_fab{position:fixed;bottom:16px;left:16px}nav a.disabled{pointer-events:none}.menu-close-button{float:right}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i6$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i6.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i6.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "icon", "src", "size", "color"] }, { kind: "directive", type: i14.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i15.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
479
480
|
}
|
|
480
481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
481
482
|
type: Component,
|
|
482
|
-
args: [{ selector: 'onemrva-layout', template: "<mat-drawer-container\n class=\"example-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop\"\n autosize\n>\n <div class=\"app-content\">\n <header>\n <mat-toolbar class=\"mat-elevation-z4\">\n <div class=\"environment\" [class]=\"environment\">\n {{ environment }}\n </div>\n <div\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"nav-container flex-center\"\n >\n {{ logoRedictionUrl }}\n <img\n class=\"logo\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + translateService.currentLang\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl !== null ? logoRedictionUrl : undefined\n \"\n [ngStyle]=\"{\n cursor: logoRedictionUrl !== null ? 'pointer' : 'default'
|
|
483
|
+
args: [{ selector: 'onemrva-layout', template: "<mat-drawer-container\n class=\"example-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop\"\n autosize\n>\n <div class=\"app-content\">\n <header>\n <mat-toolbar class=\"mat-elevation-z4\">\n <div class=\"environment\" [class]=\"environment\">\n {{ environment }}\n </div>\n <div\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"nav-container flex-center\"\n >\n {{ logoRedictionUrl }}\n <img\n class=\"logo\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + translateService.currentLang\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl !== null ? logoRedictionUrl : undefined\n \"\n [ngStyle]=\"{\n cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n }\"\n />\n <div\n class=\"application-title\"\n [ngClass]=\"{ 'small-screen': isSmall }\"\n >\n <ng-container *ngIf=\"title?.template as titleTpl\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </ng-container>\n </div>\n\n <div style=\"flex: 1\"></div>\n <div\n class=\"flex-center\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n *ngIf=\"!isSmall\"\n >\n <ng-container *ngFor=\"let e of routes?.toArray(); let i = index\">\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [routerLinkActiveOptions]=\"{ exact: !e.hasSubroutes() }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n <ng-container *ngIf=\"e.template as routeTemplate\">\n <ng-container *ngTemplateOutlet=\"routeTemplate\">\n </ng-container>\n </ng-container>\n </a>\n </ng-container>\n </div>\n\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n <ng-container *ngIf=\"afterNav?.template as tpl\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"profile !== null\">\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n *ngIf=\"!isSmall\"\n ></mat-divider>\n <onemrva-mat-avatar\n matRipple\n *ngIf=\"profile.isLoggedIn\"\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"extrasmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n\n <onemrva-mat-avatar\n matRipple\n *ngIf=\"!profile.isLoggedIn\"\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"extrasmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n <mat-menu #menu=\"matMenu\">\n <ng-container *ngIf=\"profile.isLoggedIn; else notConnected\">\n <p class=\"accountName\">\n {{ profile.firstName }} {{ profile.lastName }}\n </p>\n <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n <ng-container *ngIf=\"loginMenu?.template as menuLoginTpl\">\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\"></ng-container>\n </ng-container>\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>{{ 'layout.logout' | translate }}\n </button>\n </ng-container>\n <ng-template #notConnected>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>{{ 'layout.login' | translate }}\n </button>\n </ng-template>\n </mat-menu>\n </ng-container>\n <ng-container\n *ngIf=\"\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n \"\n >\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n </ng-container>\n <div\n class=\"flex-center\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n *ngIf=\"!isSmall\"\n >\n <a\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n {{ translateService.currentLang }}\n <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n </a>\n </div>\n <mat-menu #languageMenu>\n <button\n *ngFor=\"let lang of languages\"\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n {{ lang.label }}\n </button>\n </mat-menu>\n </div>\n </mat-toolbar>\n </header>\n <ng-container>\n <div\n [id]=\"id\"\n [attr.role]=\"role\"\n [class.container]=\"!fluid\"\n [class.container-fluid]=\"fluid\"\n class=\"onemrva-layout-content\"\n *ngIf=\"content?.template as tpl\"\n >\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n\n <ng-container\n *ngIf=\"\n environment &&\n (environment === env.LOCAL || environment === env.TEST)\n \"\n >\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n </ng-container>\n </div>\n\n <footer class=\"onemrva-footer\" *ngIf=\"footer?.template as footer\">\n <div [class.container]=\"!fluid\" [class.container-fluid]=\"fluid\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </footer>\n </ng-container>\n </div>\n\n <mat-drawer\n class=\"onemrva-drawer mobile-menu-sidebar\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n</mat-drawer-container>\n", styles: [".mat-mdc-tab-nav-bar .mat-mdc-tab-header{height:42px!important}.logo{align-self:center;cursor:pointer}.application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px}:host .mat-toolbar{background:#fff;position:fixed;top:0;height:90px;z-index:400}.accountName{margin:16px;line-height:16px;font-weight:700}:host{position:relative}:host router-outlet{display:block;margin-bottom:90px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host a:active{outline:none}.s-menu .s-menu-languages{display:flex}.s-menu .s-menu-item.active{font-weight:700!important}.s-menu .s-menu-item:hover{cursor:pointer;font-weight:700}.onemrva-layout-content{padding-top:90px;min-height:calc(100vh - 195px)}.onemrva-footer{text-align:center;padding:9.5px;margin-top:16px}onemrva-mat-avatar.clickable{cursor:pointer}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:18px!important;height:18px;width:18px}.mat-mdc-menu-content button span{font-size:14px!important}#accessibility_fab{position:fixed;bottom:16px;left:16px}nav a.disabled{pointer-events:none}.menu-close-button{float:right}\n"] }]
|
|
483
484
|
}], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i2.BreakpointObserver }, { type: Document, decorators: [{
|
|
484
485
|
type: Inject,
|
|
485
486
|
args: [DOCUMENT]
|
|
@@ -668,7 +669,8 @@ class OnemrvaLayoutModule {
|
|
|
668
669
|
MatIconModule,
|
|
669
670
|
OnemrvaMatAvatarModule,
|
|
670
671
|
MatTooltipModule,
|
|
671
|
-
TranslateModule
|
|
672
|
+
TranslateModule,
|
|
673
|
+
MatRipple], exports: [LayoutComponent, LayoutContentComponent, LayoutFooterComponent, LayoutRouteComponent, LayoutSubrouteComponent, LayoutTitleComponent, LayoutSidenavTitleComponent, LayoutSidenavComponent, LayoutLoginMenuComponent, LayoutAfterNavComponent, LayoutModule] }); }
|
|
672
674
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: OnemrvaLayoutModule, providers: [
|
|
673
675
|
{
|
|
674
676
|
provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
|
|
@@ -706,6 +708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
706
708
|
OnemrvaMatAvatarModule,
|
|
707
709
|
MatTooltipModule,
|
|
708
710
|
TranslateModule,
|
|
711
|
+
MatRipple,
|
|
709
712
|
],
|
|
710
713
|
exports: [...components, LayoutModule],
|
|
711
714
|
providers: [
|