@onemrvapublic/design-system 20.11.0-develop.2 → 20.11.0-develop.3
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 +9 -3
- package/fesm2022/onemrvapublic-design-system-layout.mjs +34 -9
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs +4 -4
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs +2 -2
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map +1 -1
- package/layout/index.d.ts +4 -1
- package/layout/src/components/layout/layout.component.scss +118 -52
- package/layout/src/components/layout-left-sidenav/layout-left-sidenav.component.scss +3 -8
- package/layout/src/components/layout-route/layout-route.component.scss +4 -0
- package/layout/src/components/layout-sidenav/layout-sidenav.component.scss +2 -1
- package/mat-navigation/src/mat-navigation-tree/onemrva-mat-navigation-tree.component.scss +2 -0
- package/mat-navigation/src/onemrva-mat-navigation.component.scss +6 -2
- package/mat-notification/src/onemrva-mat-notification.component.scss +8 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,12 +33,18 @@ If you need access to our design system board, send us a message.
|
|
|
33
33
|
@Bram Decuypere (NL/EN)
|
|
34
34
|
## Changelog
|
|
35
35
|
|
|
36
|
-
### 20.11.0-develop.
|
|
36
|
+
### 20.11.0-develop.3
|
|
37
37
|
|
|
38
|
-
# [20.11.0-develop.
|
|
38
|
+
# [20.11.0-develop.3](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v20.11.0-develop.2...v20.11.0-develop.3) (2025-12-16)
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
### Bug Fixes
|
|
42
42
|
|
|
43
|
-
* **
|
|
43
|
+
* **mat-navigation:** change overflow-y from scroll to auto for better UX ([aa8e018](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/aa8e018c3062c88e3d1587a237ce4668788787e1))
|
|
44
|
+
* **header:** fix header font-weight ([c594fea](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/c594fea2f06f3ae60a50e8ba71ba759ca5db7a42))
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
### Features
|
|
48
|
+
|
|
49
|
+
* **layout:** enhance language selection with flags, adjust layout dimensions and styling ([0aa3d2a](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/0aa3d2ae79127196d233ab9df2e86b504dc3a74e))
|
|
44
50
|
|
|
@@ -75,11 +75,11 @@ class LayoutLeftSidenavComponent {
|
|
|
75
75
|
});
|
|
76
76
|
}
|
|
77
77
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLeftSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutLeftSidenavComponent, isStandalone: true, selector: "onemrva-layout-left-sidenav", inputs: { items: "items" }, host: { properties: { "class.hidden": "this._isHidden" } }, ngImport: i0, template: "@if (leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation\n [items]=\"leftSidenavService.items()\"\n ></onemrva-mat-navigation>\n} @else {\n <ng-content></ng-content>\n}\n
|
|
78
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutLeftSidenavComponent, isStandalone: true, selector: "onemrva-layout-left-sidenav", inputs: { items: "items" }, host: { properties: { "class.hidden": "this._isHidden" } }, ngImport: i0, template: "@if (leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation\n [items]=\"leftSidenavService.items()\"\n ></onemrva-mat-navigation>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{display:flex;overflow-y:hidden;max-height:calc(100vh - var(--layout-header-height))}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationComponent, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }] }); }
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLeftSidenavComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent
|
|
82
|
+
args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent], standalone: true, template: "@if (leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation\n [items]=\"leftSidenavService.items()\"\n ></onemrva-mat-navigation>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{display:flex;overflow-y:hidden;max-height:calc(100vh - var(--layout-header-height))}\n"] }]
|
|
83
83
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}], _isHidden: [{
|
|
@@ -173,7 +173,7 @@ class LayoutRouteComponent {
|
|
|
173
173
|
return false;
|
|
174
174
|
}
|
|
175
175
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutRouteComponent, isStandalone: true, selector: "onemrva-layout-route", inputs: { customNgClass: "customNgClass", routerLink: "routerLink", routerLinkActiveOptions: "routerLinkActiveOptions", dataCy: "dataCy", baseRouteForActiveMenu: "baseRouteForActiveMenu", label: "label", icon: "icon" }, queries: [{ propertyName: "subroutes", predicate: LayoutSubrouteComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["navTpl"], descendants: true }], ngImport: i0, template: "<ng-template #navTpl>\n @if (!hasSubroutes()) {\n {{ label }}\n } @else if (hasSubroutes()) {\n <span
|
|
176
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutRouteComponent, isStandalone: true, selector: "onemrva-layout-route", inputs: { customNgClass: "customNgClass", routerLink: "routerLink", routerLinkActiveOptions: "routerLinkActiveOptions", dataCy: "dataCy", baseRouteForActiveMenu: "baseRouteForActiveMenu", label: "label", icon: "icon" }, queries: [{ propertyName: "subroutes", predicate: LayoutSubrouteComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["navTpl"], descendants: true }], ngImport: i0, template: "<ng-template #navTpl>\n @if (!hasSubroutes()) {\n {{ label }}\n } @else if (hasSubroutes()) {\n <span class=\"subroutes-menu-trigger\" [matMenuTriggerFor]=\"menu\">\n <span role=\"button\">\n {{ label }}\n </span>\n <mat-icon>expand_more</mat-icon>\n </span>\n <mat-menu #menu class=\"layout-menu-offset\">\n @for (e of subroutes?.toArray(); track e.routerLink) {\n @if (!e.hasSubroutes()) {\n <button\n mat-menu-item\n [routerLink]=\"e.routerLink\"\n routerLinkActive=\"active\"\n [attr.data-cy]=\"e.dataCy\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n }\n </button>\n }\n @if (e.hasSubroutes()) {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"submenu\"\n [ngClass]=\"{ active: e.hasActiveSubroute() }\"\n [attr.data-cy]=\"e.dataCy\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n }\n </button>\n <mat-menu #submenu>\n @for (es of e.subroutes?.toArray(); track es.routerLink) {\n <button\n mat-menu-item\n [routerLink]=\"es.routerLink\"\n routerLinkActive=\"active\"\n >\n @if (es.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\">\n </ng-container>\n }\n </button>\n }\n </mat-menu>\n }\n }\n </mat-menu>\n }\n</ng-template>\n", styles: [".subroutes-menu-trigger{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
177
177
|
}
|
|
178
178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutRouteComponent, decorators: [{
|
|
179
179
|
type: Component,
|
|
@@ -186,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
186
186
|
RouterLinkActive,
|
|
187
187
|
NgTemplateOutlet,
|
|
188
188
|
NgClass,
|
|
189
|
-
], template: "<ng-template #navTpl>\n @if (!hasSubroutes()) {\n {{ label }}\n } @else if (hasSubroutes()) {\n <span
|
|
189
|
+
], template: "<ng-template #navTpl>\n @if (!hasSubroutes()) {\n {{ label }}\n } @else if (hasSubroutes()) {\n <span class=\"subroutes-menu-trigger\" [matMenuTriggerFor]=\"menu\">\n <span role=\"button\">\n {{ label }}\n </span>\n <mat-icon>expand_more</mat-icon>\n </span>\n <mat-menu #menu class=\"layout-menu-offset\">\n @for (e of subroutes?.toArray(); track e.routerLink) {\n @if (!e.hasSubroutes()) {\n <button\n mat-menu-item\n [routerLink]=\"e.routerLink\"\n routerLinkActive=\"active\"\n [attr.data-cy]=\"e.dataCy\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n }\n </button>\n }\n @if (e.hasSubroutes()) {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"submenu\"\n [ngClass]=\"{ active: e.hasActiveSubroute() }\"\n [attr.data-cy]=\"e.dataCy\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\"></ng-container>\n }\n </button>\n <mat-menu #submenu>\n @for (es of e.subroutes?.toArray(); track es.routerLink) {\n <button\n mat-menu-item\n [routerLink]=\"es.routerLink\"\n routerLinkActive=\"active\"\n >\n @if (es.template; as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\">\n </ng-container>\n }\n </button>\n }\n </mat-menu>\n }\n }\n </mat-menu>\n }\n</ng-template>\n", styles: [".subroutes-menu-trigger{display:flex;align-items:center}\n"] }]
|
|
190
190
|
}], propDecorators: { customNgClass: [{
|
|
191
191
|
type: Input
|
|
192
192
|
}], template: [{
|
|
@@ -452,7 +452,7 @@ class LayoutSidenavComponent {
|
|
|
452
452
|
return 'Unnamed Route';
|
|
453
453
|
}
|
|
454
454
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
455
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutSidenavComponent, isStandalone: true, selector: "onemrva-layout-sidenav", inputs: { isSmall: "isSmall", routes: "routes", languages: "languages" }, ngImport: i0, template: "@if (\n isSmall && (routes?.toArray()?.length || (languages && languages.length > 1))\n) {\n <div class=\"sidebar\">\n @if (isSmall && routes?.toArray()?.length) {\n <div class=\"navigation\">\n <div class=\"close-button\">\n <button\n type=\"button\"\n mat-icon-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 </div>\n <onemrva-mat-navigation [items]=\"items\"></onemrva-mat-navigation>\n </div>\n @if (languages && languages.length > 1) {\n <div class=\"language-selector\">\n <mat-form-field>\n <mat-select\n [ngModel]=\"currentLanguage\"\n (selectionChange)=\"changeLanguage($event)\"\n >\n @for (lang of languages; track lang.code) {\n <mat-option\n [value]=\"lang\"\n [attr.data-cy]=\"'language_' + lang.code\"\n >\n {{ lang.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n }\n </div>\n}\n", styles: [":host
|
|
455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutSidenavComponent, isStandalone: true, selector: "onemrva-layout-sidenav", inputs: { isSmall: "isSmall", routes: "routes", languages: "languages" }, ngImport: i0, template: "@if (\n isSmall && (routes?.toArray()?.length || (languages && languages.length > 1))\n) {\n <div class=\"sidebar\">\n @if (isSmall && routes?.toArray()?.length) {\n <div class=\"navigation\">\n <div class=\"close-button\">\n <button\n type=\"button\"\n mat-icon-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 </div>\n <onemrva-mat-navigation [items]=\"items\"></onemrva-mat-navigation>\n </div>\n @if (languages && languages.length > 1) {\n <div class=\"language-selector\">\n <mat-form-field>\n <mat-select\n [ngModel]=\"currentLanguage\"\n (selectionChange)=\"changeLanguage($event)\"\n >\n @for (lang of languages; track lang.code) {\n <mat-option\n [value]=\"lang\"\n [attr.data-cy]=\"'language_' + lang.code\"\n >\n {{ lang.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n }\n </div>\n}\n", styles: [":host .close-button{display:flex;justify-content:flex-end;padding:var(--spacer)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--spacer);border:none;box-shadow:none;font-size:1.2rem;align-items:center;text-align:left}:host .mobile-menu-item:active,:host .mobile-menu-item.active{border-right:4px solid var(--mat-sys-secondary);font-weight:700!important}:host .mobile-menu-item mat-icon{margin-left:4px}:host .sidebar{overflow:scroll;display:flex;flex-direction:column;justify-content:space-between;height:100vh}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}:host .sidebar .language-selector mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OnemrvaMatNavigationComponent, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
456
456
|
trigger('slideInOut', [
|
|
457
457
|
state('in', style({
|
|
458
458
|
overflow: 'hidden',
|
|
@@ -492,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
492
492
|
MatFormFieldModule,
|
|
493
493
|
MatSelectModule,
|
|
494
494
|
FormsModule,
|
|
495
|
-
], template: "@if (\n isSmall && (routes?.toArray()?.length || (languages && languages.length > 1))\n) {\n <div class=\"sidebar\">\n @if (isSmall && routes?.toArray()?.length) {\n <div class=\"navigation\">\n <div class=\"close-button\">\n <button\n type=\"button\"\n mat-icon-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 </div>\n <onemrva-mat-navigation [items]=\"items\"></onemrva-mat-navigation>\n </div>\n @if (languages && languages.length > 1) {\n <div class=\"language-selector\">\n <mat-form-field>\n <mat-select\n [ngModel]=\"currentLanguage\"\n (selectionChange)=\"changeLanguage($event)\"\n >\n @for (lang of languages; track lang.code) {\n <mat-option\n [value]=\"lang\"\n [attr.data-cy]=\"'language_' + lang.code\"\n >\n {{ lang.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n }\n </div>\n}\n", styles: [":host
|
|
495
|
+
], template: "@if (\n isSmall && (routes?.toArray()?.length || (languages && languages.length > 1))\n) {\n <div class=\"sidebar\">\n @if (isSmall && routes?.toArray()?.length) {\n <div class=\"navigation\">\n <div class=\"close-button\">\n <button\n type=\"button\"\n mat-icon-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 </div>\n <onemrva-mat-navigation [items]=\"items\"></onemrva-mat-navigation>\n </div>\n @if (languages && languages.length > 1) {\n <div class=\"language-selector\">\n <mat-form-field>\n <mat-select\n [ngModel]=\"currentLanguage\"\n (selectionChange)=\"changeLanguage($event)\"\n >\n @for (lang of languages; track lang.code) {\n <mat-option\n [value]=\"lang\"\n [attr.data-cy]=\"'language_' + lang.code\"\n >\n {{ lang.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n }\n </div>\n}\n", styles: [":host .close-button{display:flex;justify-content:flex-end;padding:var(--spacer)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--spacer);border:none;box-shadow:none;font-size:1.2rem;align-items:center;text-align:left}:host .mobile-menu-item:active,:host .mobile-menu-item.active{border-right:4px solid var(--mat-sys-secondary);font-weight:700!important}:host .mobile-menu-item mat-icon{margin-left:4px}:host .sidebar{overflow:scroll;display:flex;flex-direction:column;justify-content:space-between;height:100vh}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}:host .sidebar .language-selector mat-form-field{width:100%}\n"] }]
|
|
496
496
|
}], propDecorators: { isSmall: [{
|
|
497
497
|
type: Input
|
|
498
498
|
}], routes: [{
|
|
@@ -555,6 +555,24 @@ class LayoutComponent {
|
|
|
555
555
|
this.role = 'main';
|
|
556
556
|
this.showThemeSwitcher = false;
|
|
557
557
|
this.onemrvaClass = inject(ONEMRVA_THEME_CLASS);
|
|
558
|
+
this.map = {
|
|
559
|
+
NL: {
|
|
560
|
+
label: 'Nederlands',
|
|
561
|
+
imgCode: 'nl',
|
|
562
|
+
},
|
|
563
|
+
FR: {
|
|
564
|
+
label: 'Français',
|
|
565
|
+
imgCode: 'fr',
|
|
566
|
+
},
|
|
567
|
+
DE: {
|
|
568
|
+
label: 'Deutsch',
|
|
569
|
+
imgCode: 'de',
|
|
570
|
+
},
|
|
571
|
+
EN: {
|
|
572
|
+
label: 'English',
|
|
573
|
+
imgCode: 'gb-eng',
|
|
574
|
+
},
|
|
575
|
+
};
|
|
558
576
|
this.activeTheme = signal('system', ...(ngDevMode ? [{ debugName: "activeTheme" }] : []));
|
|
559
577
|
this.color = computed(() => {
|
|
560
578
|
switch (this.environment) {
|
|
@@ -579,7 +597,9 @@ class LayoutComponent {
|
|
|
579
597
|
this.translateService.getLangs().forEach(value => {
|
|
580
598
|
this.languages.push({
|
|
581
599
|
code: value,
|
|
582
|
-
label: value.toUpperCase(),
|
|
600
|
+
label: this.map[value.toUpperCase()].label || '',
|
|
601
|
+
imgCode: this.map[value.toUpperCase()].imgCode ||
|
|
602
|
+
'',
|
|
583
603
|
});
|
|
584
604
|
});
|
|
585
605
|
}
|
|
@@ -626,6 +646,11 @@ class LayoutComponent {
|
|
|
626
646
|
// .subscribe(() => {
|
|
627
647
|
// });
|
|
628
648
|
}
|
|
649
|
+
languageImg(language) {
|
|
650
|
+
const lang = language?.code || this.translateService.getCurrentLang();
|
|
651
|
+
const finalImgCode = this.map[lang.toUpperCase()].imgCode || '';
|
|
652
|
+
return this.cdn.getImg(`flags/4x3/${finalImgCode}.svg`);
|
|
653
|
+
}
|
|
629
654
|
ngOnDestroy() {
|
|
630
655
|
this.destroyNotifier$.next();
|
|
631
656
|
this.destroyNotifier$.complete();
|
|
@@ -649,7 +674,7 @@ class LayoutComponent {
|
|
|
649
674
|
this.drawerService.toggle(true);
|
|
650
675
|
}
|
|
651
676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, 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 id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n <mat-drawer-content>\n <div class=\"app-content\">\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment\"></div>\n <mat-toolbar>\n <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n {{ logoRedictionUrl }}\n <img\n class=\"logo align-center clickable\"\n [src]=\"logo\"\n [attr.data-cy]=\"\n 'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n \"\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 @if (title?.template; as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n }\n\n @if (\n environment &&\n (environment === env.LOCAL ||\n environment === env.TEST ||\n environment === env.VAL)\n ) {\n <onemrva-mat-sticker\n [color]=\"color()\"\n class=\"ml-m text-capitalize\"\n >\n {{ environment.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes?.toArray(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [attr.data-ci]=\"e.dataCy\"\n [attr.data-cy]=\"e.dataCy\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n @if (showThemeSwitcher) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"themeSwitch\"\n [matTooltip]=\"'layout.mode.select' | translate\"\n [attr.aria-label]=\"'layout.mode.select' | translate\"\n >\n <mat-icon>{{\n activeTheme() === 'dark'\n ? 'dark_mode'\n : activeTheme() === 'light'\n ? 'light_mode'\n : 'brightness_auto'\n }}</mat-icon>\n </button>\n <mat-menu #themeSwitch>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.dark' | translate\"\n (click)=\"toggleTheme('dark')\"\n >\n <mat-icon>dark_mode</mat-icon>\n <span>{{ 'layout.mode.dark' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.light' | translate\"\n (click)=\"toggleTheme('light')\"\n >\n <mat-icon>light_mode</mat-icon>\n <span>{{ 'layout.mode.light' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.system' | translate\"\n (click)=\"toggleTheme('system')\"\n >\n <mat-icon>brightness_auto</mat-icon>\n <span>{{ 'layout.mode.system' | translate }}</span>\n </button>\n </mat-menu>\n }\n @if (afterNav?.template; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n\n @if (profile !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n ></mat-divider>\n }\n @if (profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n @if (!profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile.firstName }} {{ profile.lastName }}\n </div>\n <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n @if (loginMenu?.template; as menuLoginTpl) {\n <ng-container\n *ngTemplateOutlet=\"menuLoginTpl\"\n ></ng-container>\n }\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>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\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>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages && languages.length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n {{ currentLanguage }}\n <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n </a>\n </div>\n }\n <mat-menu #languageMenu>\n @for (lang of languages; track lang.code) {\n <button\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 }\n </mat-menu>\n </div>\n </mat-toolbar>\n </header>\n <ng-container>\n @if (content?.template; as tpl) {\n <div\n [id]=\"id\"\n [attr.role]=\"role\"\n class=\"onemrva-layout-content onemrva-layout-container\"\n >\n @if (leftSidenavService.items().length > 0) {\n <div class=\"container-with-nav\">\n <div class=\"left-content\">\n <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n </div>\n <div class=\"right-content\">\n <div class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </div>\n }\n @if (\n environment &&\n (environment === env.LOCAL || environment === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (\n /^(complete|loaded)$/.test(this.readyState) === true\n ) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document\n .getElementsByTagName('head')[0]\n .appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </div>\n }\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer?.template; as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n </div>\n }\n </footer>\n </ng-container>\n </div>\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant);--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}@media screen and (max-width:640px){:host .onemrva-layout-content .container-with-nav .left-content{position:absolute;z-index:10;margin-left:-240px;transition:.5s ease-in-out margin-left;overflow:hidden}:host .onemrva-layout-content .container-with-nav .left-content.open{margin-left:0}}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;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,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "text", "icon", "src"] }, { kind: "directive", type: 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: 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LayoutLeftSidenavComponent, selector: "onemrva-layout-left-sidenav", inputs: ["items"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, 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 id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\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 class=\"application-title\" [ngClass]=\"{ 'small-screen': isSmall }\">\n @if (title?.template; as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n }\n\n @if (\n environment &&\n (environment === env.LOCAL ||\n environment === env.TEST ||\n environment === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes?.toArray(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [attr.data-ci]=\"e.dataCy\"\n [attr.data-cy]=\"e.dataCy\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n @if (showThemeSwitcher) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"themeSwitch\"\n [matTooltip]=\"'layout.mode.select' | translate\"\n [attr.aria-label]=\"'layout.mode.select' | translate\"\n >\n <mat-icon>{{\n activeTheme() === 'dark'\n ? 'dark_mode'\n : activeTheme() === 'light'\n ? 'light_mode'\n : 'brightness_auto'\n }}</mat-icon>\n </button>\n <mat-menu #themeSwitch>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.dark' | translate\"\n (click)=\"toggleTheme('dark')\"\n >\n <mat-icon>dark_mode</mat-icon>\n <span>{{ 'layout.mode.dark' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.light' | translate\"\n (click)=\"toggleTheme('light')\"\n >\n <mat-icon>light_mode</mat-icon>\n <span>{{ 'layout.mode.light' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.system' | translate\"\n (click)=\"toggleTheme('system')\"\n >\n <mat-icon>brightness_auto</mat-icon>\n <span>{{ 'layout.mode.system' | translate }}</span>\n </button>\n </mat-menu>\n }\n @if (afterNav?.template; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n\n @if (profile !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n ></mat-divider>\n }\n @if (profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n @if (!profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile.firstName }} {{ profile.lastName }}\n </div>\n <mat-divider\n class=\"mx-m\"\n style=\"align-self: stretch\"\n ></mat-divider>\n\n @if (loginMenu?.template; as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\"></ng-container>\n }\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>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\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>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages && languages.length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages; track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__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 <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\"></ng-content>\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer?.template; as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment && (environment === env.LOCAL || environment === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant);--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-surface-container-low);--mat-tab-active-focus-indicator-color: var(--mat-sys-surface-container-low);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;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,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:240px 1fr;grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - 240px)}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "text", "icon", "src"] }, { kind: "directive", type: 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: 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LayoutLeftSidenavComponent, selector: "onemrva-layout-left-sidenav", inputs: ["items"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
653
678
|
}
|
|
654
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
655
680
|
type: Component,
|
|
@@ -682,7 +707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
682
707
|
MatSidenavModule,
|
|
683
708
|
LayoutLeftSidenavComponent,
|
|
684
709
|
OnemrvaMatStickerComponent,
|
|
685
|
-
], template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n <mat-drawer-content>\n <div class=\"app-content\">\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment\"></div>\n <mat-toolbar>\n <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n {{ logoRedictionUrl }}\n <img\n class=\"logo align-center clickable\"\n [src]=\"logo\"\n [attr.data-cy]=\"\n 'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n \"\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 @if (title?.template; as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n }\n\n @if (\n environment &&\n (environment === env.LOCAL ||\n environment === env.TEST ||\n environment === env.VAL)\n ) {\n <onemrva-mat-sticker\n [color]=\"color()\"\n class=\"ml-m text-capitalize\"\n >\n {{ environment.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes?.toArray(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [attr.data-ci]=\"e.dataCy\"\n [attr.data-cy]=\"e.dataCy\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n @if (showThemeSwitcher) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"themeSwitch\"\n [matTooltip]=\"'layout.mode.select' | translate\"\n [attr.aria-label]=\"'layout.mode.select' | translate\"\n >\n <mat-icon>{{\n activeTheme() === 'dark'\n ? 'dark_mode'\n : activeTheme() === 'light'\n ? 'light_mode'\n : 'brightness_auto'\n }}</mat-icon>\n </button>\n <mat-menu #themeSwitch>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.dark' | translate\"\n (click)=\"toggleTheme('dark')\"\n >\n <mat-icon>dark_mode</mat-icon>\n <span>{{ 'layout.mode.dark' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.light' | translate\"\n (click)=\"toggleTheme('light')\"\n >\n <mat-icon>light_mode</mat-icon>\n <span>{{ 'layout.mode.light' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.system' | translate\"\n (click)=\"toggleTheme('system')\"\n >\n <mat-icon>brightness_auto</mat-icon>\n <span>{{ 'layout.mode.system' | translate }}</span>\n </button>\n </mat-menu>\n }\n @if (afterNav?.template; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n\n @if (profile !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n style=\"height: 1em; align-self: center\"\n ></mat-divider>\n }\n @if (profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n @if (!profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile.firstName }} {{ profile.lastName }}\n </div>\n <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n @if (loginMenu?.template; as menuLoginTpl) {\n <ng-container\n *ngTemplateOutlet=\"menuLoginTpl\"\n ></ng-container>\n }\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>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\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>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages && languages.length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n {{ currentLanguage }}\n <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n </a>\n </div>\n }\n <mat-menu #languageMenu>\n @for (lang of languages; track lang.code) {\n <button\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 }\n </mat-menu>\n </div>\n </mat-toolbar>\n </header>\n <ng-container>\n @if (content?.template; as tpl) {\n <div\n [id]=\"id\"\n [attr.role]=\"role\"\n class=\"onemrva-layout-content onemrva-layout-container\"\n >\n @if (leftSidenavService.items().length > 0) {\n <div class=\"container-with-nav\">\n <div class=\"left-content\">\n <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n </div>\n <div class=\"right-content\">\n <div class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n </div>\n }\n @if (\n environment &&\n (environment === env.LOCAL || environment === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (\n /^(complete|loaded)$/.test(this.readyState) === true\n ) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document\n .getElementsByTagName('head')[0]\n .appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </div>\n }\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer?.template; as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n </div>\n }\n </footer>\n </ng-container>\n </div>\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant);--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}@media screen and (max-width:640px){:host .onemrva-layout-content .container-with-nav .left-content{position:absolute;z-index:10;margin-left:-240px;transition:.5s ease-in-out margin-left;overflow:hidden}:host .onemrva-layout-content .container-with-nav .left-content.open{margin-left:0}}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;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,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"] }]
|
|
710
|
+
], template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost></ng-template>\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logo\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\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 class=\"application-title\" [ngClass]=\"{ 'small-screen': isSmall }\">\n @if (title?.template; as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n }\n\n @if (\n environment &&\n (environment === env.LOCAL ||\n environment === env.TEST ||\n environment === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes?.toArray(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink\"\n [attr.data-ci]=\"e.dataCy\"\n [attr.data-cy]=\"e.dataCy\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template; as routeTemplate) {\n <ng-container\n *ngTemplateOutlet=\"routeTemplate\"\n ></ng-container>\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n @if (showThemeSwitcher) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"themeSwitch\"\n [matTooltip]=\"'layout.mode.select' | translate\"\n [attr.aria-label]=\"'layout.mode.select' | translate\"\n >\n <mat-icon>{{\n activeTheme() === 'dark'\n ? 'dark_mode'\n : activeTheme() === 'light'\n ? 'light_mode'\n : 'brightness_auto'\n }}</mat-icon>\n </button>\n <mat-menu #themeSwitch>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.dark' | translate\"\n (click)=\"toggleTheme('dark')\"\n >\n <mat-icon>dark_mode</mat-icon>\n <span>{{ 'layout.mode.dark' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.light' | translate\"\n (click)=\"toggleTheme('light')\"\n >\n <mat-icon>light_mode</mat-icon>\n <span>{{ 'layout.mode.light' | translate }}</span>\n </button>\n <button\n mat-menu-item\n [attr.aria-label]=\"'layout.mode.system' | translate\"\n (click)=\"toggleTheme('system')\"\n >\n <mat-icon>brightness_auto</mat-icon>\n <span>{{ 'layout.mode.system' | translate }}</span>\n </button>\n </mat-menu>\n }\n @if (afterNav?.template; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n }\n\n @if (profile !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n ></mat-divider>\n }\n @if (profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n @if (!profile.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n color=\"\"\n size=\"xsmall\"\n class=\"clickable\"\n ></onemrva-mat-avatar>\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile.firstName }} {{ profile.lastName }}\n </div>\n <mat-divider\n class=\"mx-m\"\n style=\"align-self: stretch\"\n ></mat-divider>\n\n @if (loginMenu?.template; as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\"></ng-container>\n }\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>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\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>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes?.toArray()?.length || (languages && languages.length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages && languages.length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages; track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__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 <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\"></ng-content>\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer?.template; as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment && (environment === env.LOCAL || environment === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant);--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-surface-container-low);--mat-tab-active-focus-indicator-color: var(--mat-sys-surface-container-low);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;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,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:240px 1fr;grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - 240px)}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"] }]
|
|
686
711
|
}], ctorParameters: () => [], propDecorators: { routes: [{
|
|
687
712
|
type: ContentChildren,
|
|
688
713
|
args: [LayoutRouteComponent]
|