@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/fesm2022/onemrvapublic-design-system-layout.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, effect, HostBinding, Input, Component, ChangeDetectorRef, TemplateRef, ContentChildren, ViewChild, Pipe, DestroyRef, ViewContainerRef, DOCUMENT, Directive, EventEmitter, computed, isDevMode, Output, ContentChild, NgModule } from '@angular/core';
-import { Subject, takeUntil, startWith, BehaviorSubject } from 'rxjs';
+import { signal, Injectable, model, inject, computed, effect, Component, ChangeDetectorRef, input, viewChild, TemplateRef, contentChildren, Pipe, DestroyRef, ViewContainerRef, DOCUMENT, Directive, contentChild, output, isDevMode, NgModule } from '@angular/core';
+import { Subject, takeUntil, BehaviorSubject } from 'rxjs';
 import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
-import { NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, NgStyle, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/sidenav';
 import { MatDrawer, MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
 import { ONEMRVA_THEME_CLASS, OnemRvaCDNService, OnemRvaSizeDirective, OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';
@@ -48,10 +48,10 @@ class OnemrvaLeftSidenavService {
     reset() {
         this.items.set(this.originalItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLeftSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLeftSidenavService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLeftSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLeftSidenavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLeftSidenavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLeftSidenavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -59,56 +59,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 class LayoutLeftSidenavComponent {
-    set items(value) {
-        this._items = value ?? [];
-        this.leftSidenavService.setOriginal(this._items);
-    }
-    get items() {
-        return this._items;
-    }
     constructor() {
-        this._items = [];
-        this._isHidden = false;
+        this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.leftSidenavService = inject(OnemrvaLeftSidenavService);
+        this.isHidden = computed(() => this.leftSidenavService.items().length === 0, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
         effect(() => {
-            this._isHidden = this.leftSidenavService.items().length === 0;
+            this.leftSidenavService.setOriginal(this.items());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLeftSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutLeftSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LayoutLeftSidenavComponent, isStandalone: true, selector: "onemrva-layout-left-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class.hidden": "isHidden()" } }, ngImport: i0, template: "@if (leftSidenavService.items().length > 0) {\n  <onemrva-mat-navigation [items]=\"leftSidenavService.items()\" />\n} @else {\n  <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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLeftSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutLeftSidenavComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{
-                type: Input
-            }], _isHidden: [{
-                type: HostBinding,
-                args: ['class.hidden']
-            }] } });
+            args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent], standalone: true, host: {
+                        '[class.hidden]': 'isHidden()',
+                    }, template: "@if (leftSidenavService.items().length > 0) {\n  <onemrva-mat-navigation [items]=\"leftSidenavService.items()\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:flex;overflow-y:hidden;max-height:calc(100vh - var(--layout-header-height))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }] } });
 
 class LayoutSubrouteComponent {
     constructor() {
         this.cd = inject(ChangeDetectorRef);
         this.router = inject(Router);
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
+        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
+        this.routerLinkActiveOptions = input(...(ngDevMode ? [undefined, { debugName: "routerLinkActiveOptions" }] : []));
+        this.dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.subroutes = contentChildren(LayoutSubrouteComponent, ...(ngDevMode ? [{ debugName: "subroutes" }] : []));
     }
     ngAfterViewInit() {
-        if (this.label === undefined) {
-            console.error('ONEM/RVA DESIGN SYSTEM ERROR : Since 20.1.0 , you must add a label attribute to the onemrva-layout-route', this.routerLink);
+        if (this.label() === undefined) {
+            console.error('ONEM/RVA DESIGN SYSTEM ERROR : Since 20.1.0 , you must add a label attribute to the onemrva-layout-route', this.routerLink());
         }
         this.cd.detectChanges();
     }
     hasSubroutes() {
-        return this.subroutes !== undefined && this.subroutes.length > 0;
+        const subroutes = this.subroutes();
+        return subroutes !== undefined && subroutes.length > 0;
     }
     hasActiveSubroute() {
-        return this.subroutes?.some(x => this.isActiveRoute(x)) ?? false;
+        return this.subroutes()?.some(x => this.isActiveRoute(x)) ?? false;
     }
     isActiveRoute(subroute) {
-        if (subroute.routerLink) {
-            const routerLink = Array.isArray(subroute.routerLink)
-                ? this.router.createUrlTree(subroute.routerLink)
-                : this.router.createUrlTree([subroute.routerLink]);
+        const routerLinkValue = subroute.routerLink();
+        if (routerLinkValue) {
+            const routerLink = Array.isArray(routerLinkValue)
+                ? this.router.createUrlTree(routerLinkValue)
+                : this.router.createUrlTree([routerLinkValue]);
             return this.router.isActive(routerLink, {
                 paths: 'exact',
                 queryParams: 'exact',
@@ -120,62 +120,55 @@ class LayoutSubrouteComponent {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSubrouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutSubrouteComponent, isStandalone: true, selector: "onemrva-layout-subroute", inputs: { customNgClass: "customNgClass", routerLink: "routerLink", routerLinkActiveOptions: "routerLinkActiveOptions", dataCy: "dataCy", label: "label", icon: "icon" }, queries: [{ propertyName: "subroutes", predicate: LayoutSubrouteComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  {{ label }}\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSubrouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutSubrouteComponent, isStandalone: true, selector: "onemrva-layout-subroute", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "subroutes", predicate: LayoutSubrouteComponent, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  {{ label() }}\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSubrouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSubrouteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-layout-subroute', standalone: true, template: "<ng-template>\n  {{ label }}\n</ng-template>\n" }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }], routerLink: [{
-                type: Input
-            }], routerLinkActiveOptions: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], subroutes: [{
-                type: ContentChildren,
-                args: [LayoutSubrouteComponent]
-            }] } });
+            args: [{ selector: 'onemrva-layout-subroute', standalone: true, template: "<ng-template>\n  {{ label() }}\n</ng-template>\n" }]
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], subroutes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutSubrouteComponent), { isSignal: true }] }] } });
 
 class LayoutRouteComponent {
     constructor() {
-        this.template = null;
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild('navTpl', ...(ngDevMode ? [{ debugName: "template" }] : []));
+        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
+        this.routerLinkActiveOptions = input(...(ngDevMode ? [undefined, { debugName: "routerLinkActiveOptions" }] : []));
+        this.dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+        this.baseRouteForActiveMenu = input(...(ngDevMode ? [undefined, { debugName: "baseRouteForActiveMenu" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.subroutes = contentChildren(LayoutSubrouteComponent, ...(ngDevMode ? [{ debugName: "subroutes" }] : []));
         this.cd = inject(ChangeDetectorRef);
         this.router = inject(Router);
     }
     hasSubroutes() {
-        return this.subroutes !== undefined && this.subroutes.length > 0;
+        const subroutes = this.subroutes();
+        return subroutes !== undefined && subroutes.length > 0;
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
-        if (this.label === undefined) {
-            console.error('ONEM/RVA DESIGN SYSTEM ERROR : Since 20.1.0 , you must add a label attribute to the onemrva-layout-route', this.routerLink);
+        if (this.label() === undefined) {
+            console.error('ONEM/RVA DESIGN SYSTEM ERROR : Since 20.1.0 , you must add a label attribute to the onemrva-layout-route', this.routerLink());
         }
     }
     isRouteActive() {
-        if (this.routerLink === null || this.routerLink === undefined) {
-            if (this.baseRouteForActiveMenu) {
+        const routerLink = this.routerLink();
+        if (routerLink === null || routerLink === undefined) {
+            const baseRouteForActiveMenu = this.baseRouteForActiveMenu();
+            if (baseRouteForActiveMenu) {
                 const currentRoute = this.router.url;
-                const isParentRoutePresent = new RegExp(this.baseRouteForActiveMenu + '/').test(currentRoute);
-                const isExactRoutePresent = new RegExp(this.baseRouteForActiveMenu + '$').test(currentRoute);
+                const isParentRoutePresent = new RegExp(baseRouteForActiveMenu + '/').test(currentRoute);
+                const isExactRoutePresent = new RegExp(baseRouteForActiveMenu + '$').test(currentRoute);
                 return isParentRoutePresent || isExactRoutePresent;
             }
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LayoutRouteComponent, isStandalone: true, selector: "onemrva-layout-route", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, baseRouteForActiveMenu: { classPropertyName: "baseRouteForActiveMenu", publicName: "baseRouteForActiveMenu", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "subroutes", predicate: LayoutSubrouteComponent, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["navTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #navTpl>\n  @if (!hasSubroutes()) {\n    {{ label() }}\n  } @else if (hasSubroutes()) {\n    <span\n      class=\"subroutes-menu-trigger\"\n      [matMenuTriggerFor]=\"menu\"\n      role=\"button\"\n    >\n      <span>\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(); 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\" />\n            }\n          </button>\n        }\n        @if (e.hasSubroutes()) {\n          <button\n            mat-menu-item\n            [matMenuTriggerFor]=\"submenu\"\n            [class.active]=\"e.hasActiveSubroute()\"\n            [attr.data-cy]=\"e.dataCy()\"\n            aria-haspopup=\"true\"\n          >\n            @if (e.template(); as routeTemplate) {\n              <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n            }\n          </button>\n          <mat-menu #submenu>\n            @for (es of e.subroutes(); 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                }\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutRouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-layout-route', standalone: true, imports: [
                         MatIcon,
@@ -185,77 +178,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatMenuItem,
                         RouterLinkActive,
                         NgTemplateOutlet,
-                        NgClass,
-                    ], 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"] }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: ['navTpl']
-            }], routerLink: [{
-                type: Input
-            }], routerLinkActiveOptions: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], baseRouteForActiveMenu: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], subroutes: [{
-                type: ContentChildren,
-                args: [LayoutSubrouteComponent]
-            }] } });
+                    ], template: "<ng-template #navTpl>\n  @if (!hasSubroutes()) {\n    {{ label() }}\n  } @else if (hasSubroutes()) {\n    <span\n      class=\"subroutes-menu-trigger\"\n      [matMenuTriggerFor]=\"menu\"\n      role=\"button\"\n    >\n      <span>\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(); 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\" />\n            }\n          </button>\n        }\n        @if (e.hasSubroutes()) {\n          <button\n            mat-menu-item\n            [matMenuTriggerFor]=\"submenu\"\n            [class.active]=\"e.hasActiveSubroute()\"\n            [attr.data-cy]=\"e.dataCy()\"\n            aria-haspopup=\"true\"\n          >\n            @if (e.template(); as routeTemplate) {\n              <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n            }\n          </button>\n          <mat-menu #submenu>\n            @for (es of e.subroutes(); 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                }\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"] }]
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: ['navTpl', { isSignal: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], baseRouteForActiveMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseRouteForActiveMenu", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], subroutes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutSubrouteComponent), { isSignal: true }] }] } });
 
 class LayoutContentComponent {
     constructor() {
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
         this.cd = inject(ChangeDetectorRef);
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutContentComponent, isStandalone: true, selector: "onemrva-layout-content", inputs: { customNgClass: "customNgClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutContentComponent, isStandalone: true, selector: "onemrva-layout-content", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-content',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     standalone: true,
                 }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class LayoutTitleComponent {
     constructor() {
         this.cd = inject(ChangeDetectorRef);
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutTitleComponent, isStandalone: true, selector: "onemrva-layout-title", inputs: { customNgClass: "customNgClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutTitleComponent, isStandalone: true, selector: "onemrva-layout-title", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-title',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     standalone: true,
                 }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 var Environment;
 (function (Environment) {
@@ -266,53 +232,50 @@ var Environment;
 })(Environment || (Environment = {}));
 
 class LayoutFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutFooterComponent, isStandalone: true, selector: "onemrva-layout-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    constructor() {
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutFooterComponent, isStandalone: true, selector: "onemrva-layout-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-footer',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     standalone: true,
                 }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class LayoutLoginMenuComponent {
     constructor() {
         this.cd = inject(ChangeDetectorRef);
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLoginMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutLoginMenuComponent, isStandalone: true, selector: "onemrva-layout-login-menu", inputs: { customNgClass: "customNgClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutLoginMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutLoginMenuComponent, isStandalone: true, selector: "onemrva-layout-login-menu", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutLoginMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutLoginMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-login-menu',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     standalone: true,
                 }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class StripHtmlPipe {
     transform(value) {
         return value.replace(/<.*?>/g, ''); // replace tags
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, isStandalone: true, name: "striphtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: StripHtmlPipe, isStandalone: true, name: "striphtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StripHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'striphtml',
@@ -347,10 +310,10 @@ class DrawerHostDirective {
             this.bodyClass();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DrawerHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: DrawerHostDirective, isStandalone: true, selector: "[drawerhost]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DrawerHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DrawerHostDirective, isStandalone: true, selector: "[drawerhost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DrawerHostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DrawerHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[drawerhost]',
@@ -390,10 +353,10 @@ class OnemrvaDrawerService {
     setDrawer(drawer) {
         this.drawer = drawer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -402,20 +365,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class LayoutSidenavComponent {
     constructor() {
-        this.languages = [];
+        this.isSmall = input.required(...(ngDevMode ? [{ debugName: "isSmall" }] : []));
+        this.routes = input(...(ngDevMode ? [undefined, { debugName: "routes" }] : []));
+        this.languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
         this.items = [];
         this.translateService = inject(TranslateService);
         this.document = inject(DOCUMENT$1);
         this.drawerService = inject(OnemrvaDrawerService);
     }
     ngOnInit() {
-        this.currentLanguage = this.languages.filter(l => l.code == this.translateService.currentLang)[0];
-        if (this.routes)
-            this.helpMenuOpen = this.routes.map(route => route.hasSubroutes()
-                ? ['out', ...route.subroutes.map(() => 'out')]
+        this.currentLanguage = this.languages().filter(l => l.code == this.translateService.currentLang)[0];
+        const routes = this.routes();
+        if (routes)
+            this.helpMenuOpen = routes.map(route => route.hasSubroutes()
+                ? ['out', ...route.subroutes().map(() => 'out')]
                 : ['in']);
         // Replace your existing items population with:
-        this.items = this.populateItemsRecursively(this.routes);
+        this.items = this.populateItemsRecursively(routes);
     }
     changeLanguage(event) {
         this.translateService.use(event.value.code);
@@ -431,14 +397,16 @@ class LayoutSidenavComponent {
         const routeArray = Array.isArray(routes) ? routes : routes.toArray();
         for (const route of routeArray) {
             const navItem = {
-                routerLink: typeof route.routerLink === 'string' ? route.routerLink : undefined,
+                routerLink: typeof route.routerLink() === 'string'
+                    ? route.routerLink()
+                    : undefined,
                 label: this.getRouteLabel(route),
                 icon: route.icon, // LayoutSubrouteComponent doesn't have icon, so cast to any
-                dataCy: route.dataCy,
+                dataCy: route.dataCy(),
             };
             // Recursively populate children if subroutes exist
-            if (route.hasSubroutes() && route.subroutes) {
-                navItem.children = this.populateItemsRecursively(route.subroutes);
+            if (route.hasSubroutes() && route.subroutes()) {
+                navItem.children = this.populateItemsRecursively(route.subroutes());
             }
             items.push(navItem);
         }
@@ -446,13 +414,13 @@ class LayoutSidenavComponent {
     }
     getRouteLabel(route) {
         // Check if it's a LayoutRouteComponent with label property
-        if ('label' in route && route.label) {
-            return route.label;
+        if ('label' in route && route.label()) {
+            return route.label() || 'Unnamed Route';
         }
         return 'Unnamed Route';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LayoutSidenavComponent, isStandalone: true, selector: "onemrva-layout-sidenav", inputs: { isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: true, transformFunction: null }, routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (\n  isSmall() &&\n  (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\" />\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 mat-form-field{width:100%}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}\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: [
             trigger('slideInOut', [
                 state('in', style({
                     overflow: 'hidden',
@@ -468,7 +436,7 @@ class LayoutSidenavComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-layout-sidenav', animations: [
                         trigger('slideInOut', [
@@ -492,68 +460,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatFormFieldModule,
                         MatSelectModule,
                         FormsModule,
-                    ], 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"] }]
-        }], propDecorators: { isSmall: [{
-                type: Input
-            }], routes: [{
-                type: Input
-            }], languages: [{
-                type: Input
-            }] } });
+                    ], template: "@if (\n  isSmall() &&\n  (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\" />\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 mat-form-field{width:100%}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}\n"] }]
+        }], propDecorators: { isSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSmall", required: true }] }], routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }] } });
 
 class LayoutAfterNavComponent {
     constructor() {
         this.cd = inject(ChangeDetectorRef);
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutAfterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutAfterNavComponent, isStandalone: true, selector: "onemrva-layout-after-nav", inputs: { customNgClass: "customNgClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutAfterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutAfterNavComponent, isStandalone: true, selector: "onemrva-layout-after-nav", inputs: { customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutAfterNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutAfterNavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-after-nav',
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     standalone: true,
                 }]
-        }], propDecorators: { customNgClass: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class LayoutComponent {
     toggleTheme(newTheme) {
-        this.activeTheme.set(newTheme);
+        // Force light theme only - dark mode is disabled
+        this.activeTheme.set('light');
         // Find all elements with onemrva-theme class
         const overlayThemeDivs = document.querySelectorAll('.' + this.onemrvaClass);
         overlayThemeDivs.forEach(div => {
             // Remove existing theme classes
             div.classList.remove('light-theme', 'dark-theme');
-            // Add new theme class if not system
-            if (newTheme !== 'system') {
-                div.classList.add(`${newTheme}-theme`);
-            }
+            // Always apply light theme
+            div.classList.add('light-theme');
         });
     }
     constructor() {
-        this.logo = ''; // custom logo, empty string will show default onem/rva/neo/lfa localised logo
-        this.languages = []; // list of languages
-        this.logoRedictionUrl = ''; // value for routerLink from logo. "" by default. Deactivated when set to null
+        this.routes = contentChildren(LayoutRouteComponent, ...(ngDevMode ? [{ debugName: "routes" }] : []));
+        this.title = contentChild(LayoutTitleComponent, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.loginMenu = contentChild(LayoutLoginMenuComponent, ...(ngDevMode ? [{ debugName: "loginMenu" }] : []));
+        this.content = contentChild(LayoutContentComponent, ...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.afterNav = contentChild(LayoutAfterNavComponent, ...(ngDevMode ? [{ debugName: "afterNav" }] : []));
+        this.footer = contentChild(LayoutFooterComponent, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+        this.logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : [])); // custom logo, empty string will show default onem/rva/neo/lfa localised logo
+        this.logoFinal = computed(() => {
+            if (this.logo() === '') {
+                return this.cdn.getImg(`logo/logo_onem_rva.svg`);
+            }
+            else {
+                return this.logo();
+            }
+        }, ...(ngDevMode ? [{ debugName: "logoFinal" }] : []));
+        this.languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : [])); // list of languages
+        this.environment = input(...(ngDevMode ? [undefined, { debugName: "environment" }] : [])); // possible environment to show on the frontend LOCAL, TEST, VAL, PROD
+        this.logoRedictionUrl = input('', ...(ngDevMode ? [{ debugName: "logoRedictionUrl" }] : [])); // value for routerLink from logo. "" by default. Deactivated when set to null
         this.selectedIndex = 0;
         this.destroyNotifier$ = new Subject();
-        this.profile = null; // To be defined for application with authentication
-        this.login = new EventEmitter();
-        this.logout = new EventEmitter();
+        this.profile = input(null, ...(ngDevMode ? [{ debugName: "profile" }] : [])); // To be defined for application with authentication
+        this.login = output();
+        this.logout = output();
         //    isLogoutUsed: boolean = false;
         this.env = Environment;
         this.isSmall = true;
-        this.id = 'main';
-        this.role = 'main';
-        this.showThemeSwitcher = false;
+        this.drawer = viewChild.required(MatDrawer);
+        this.drawerHost = viewChild.required(DrawerHostDirective);
+        this.id = input('main', ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.role = input('main', ...(ngDevMode ? [{ debugName: "role" }] : []));
+        this.showThemeSwitcher = input(false, ...(ngDevMode ? [{ debugName: "showThemeSwitcher" }] : []));
         this.onemrvaClass = inject(ONEMRVA_THEME_CLASS);
         this.map = {
             NL: {
@@ -573,9 +548,9 @@ class LayoutComponent {
                 imgCode: 'gb-eng',
             },
         };
-        this.activeTheme = signal('system', ...(ngDevMode ? [{ debugName: "activeTheme" }] : []));
+        this.activeTheme = signal('light', ...(ngDevMode ? [{ debugName: "activeTheme" }] : []));
         this.color = computed(() => {
-            switch (this.environment) {
+            switch (this.environment()) {
                 case Environment.LOCAL:
                     return OnemrvaMatColor.ACCENT;
                 case Environment.TEST:
@@ -586,6 +561,7 @@ class LayoutComponent {
                     return OnemrvaMatColor.PRIMARY;
             }
         }, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.OnemrvaMatColor = OnemrvaMatColor;
         this.translateService = inject(TranslateService);
         this.cdn = inject(OnemRvaCDNService);
         this.cd = inject(ChangeDetectorRef);
@@ -593,9 +569,9 @@ class LayoutComponent {
         this.document = inject(DOCUMENT$1);
         this.drawerService = inject(OnemrvaDrawerService);
         this.leftSidenavService = inject(OnemrvaLeftSidenavService);
-        if (this.languages.length === 0) {
+        if (this.languages().length === 0) {
             this.translateService.getLangs().forEach(value => {
-                this.languages.push({
+                this.languages().push({
                     code: value,
                     label: this.map[value.toUpperCase()].label || '',
                     imgCode: this.map[value.toUpperCase()].imgCode ||
@@ -605,7 +581,7 @@ class LayoutComponent {
         }
     }
     ngOnInit() {
-        this.selectedIndex = this.languages.findIndex(l => l.code === this.translateService.currentLang);
+        this.selectedIndex = this.languages().findIndex(l => l.code === this.translateService.currentLang);
         this.document.documentElement.lang = this.translateService.currentLang;
         this.breakpointObserver
             .observe([Breakpoints.XSmall, Breakpoints.Small])
@@ -619,20 +595,13 @@ class LayoutComponent {
                 this.isSmall = false;
             }
         });
-        if (this.logo === '') {
-            this.translateService.onLangChange
-                .pipe(startWith({ lang: this.translateService.currentLang }), takeUntil(this.destroyNotifier$))
-                .subscribe(lang => {
-                this.logo = this.cdn.getImg(`logo/logo_${lang.lang?.toLocaleLowerCase()}.svg`);
-            });
-        }
         this.translateService.onLangChange
             .pipe(takeUntil(this.destroyNotifier$))
             .subscribe(event => {
-            this.selectedIndex = this.languages.findIndex(lang => lang.code === event.lang);
+            this.selectedIndex = this.languages().findIndex(lang => lang.code === event.lang);
         });
-        this.drawerService.host = this.drawerHost;
-        this.drawerService.setDrawer(this.drawer);
+        this.drawerService.host = this.drawerHost();
+        this.drawerService.setDrawer(this.drawer());
     }
     get currentLanguage() {
         return this.translateService.currentLang || '';
@@ -641,10 +610,6 @@ class LayoutComponent {
         if (isDevMode()) {
             this.cd.detectChanges();
         }
-        // this.drawer.closedStart
-        //   .pipe(takeUntil(this.destroyNotifier$))
-        //   .subscribe(() => {
-        //   });
     }
     languageImg(language) {
         const lang = language?.code || this.translateService.getCurrentLang();
@@ -656,32 +621,30 @@ class LayoutComponent {
         this.destroyNotifier$.complete();
     }
     doLogout() {
-        this.logout.next();
+        this.logout.emit();
     }
     doLogin() {
-        this.login.next();
+        this.login.emit();
     }
     changeLanguage(langCode) {
         this.translateService.use(langCode);
         this.document.documentElement.lang = langCode;
     }
     toggleSideNav() {
-        const componentRef = this.drawerHost.createComponent(LayoutSidenavComponent);
+        const componentRef = this.drawerHost().createComponent(LayoutSidenavComponent);
         this.drawerService.size.set('');
-        componentRef.instance.isSmall = this.isSmall;
-        componentRef.instance.languages = this.languages;
-        componentRef.instance.routes = this.routes;
+        componentRef.setInput('isSmall', this.isSmall);
+        componentRef.setInput('languages', this.languages());
+        componentRef.setInput('routes', this.routes());
         this.drawerService.toggle(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\n          class=\"application-title ml-m\"\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 [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-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, logoRedictionUrl: { classPropertyName: "logoRedictionUrl", publicName: "logoRedictionUrl", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showThemeSwitcher: { classPropertyName: "showThemeSwitcher", publicName: "showThemeSwitcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "routes", predicate: LayoutRouteComponent, isSignal: true }, { propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true, isSignal: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true, isSignal: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, isSignal: 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 />\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]=\"logoFinal()\"\n          [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n          alt=\"Logo ONEM/RVA\"\n          [routerLink]=\"\n            logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n          \"\n          [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n        />\n        <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n          @if (title()?.template(); as titleTpl) {\n            <ng-container *ngTemplateOutlet=\"titleTpl\" />\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(); 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 *ngTemplateOutlet=\"routeTemplate\" />\n                }\n              </a>\n            }\n          </div>\n        }\n        <mat-tab-nav-panel #tabPanel />\n\n        @if (showThemeSwitcher()) {\n          <button\n            mat-icon-button\n            data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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\" />\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            />\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            />\n          }\n          @if (!profile()?.isLoggedIn) {\n            <onemrva-mat-avatar\n              matRipple\n              [matMenuTriggerFor]=\"menu\"\n              icon=\"account_circle\"\n              [color]=\"OnemrvaMatColor.PRIMARY\"\n              size=\"xsmall\"\n              class=\"clickable\"\n            />\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 class=\"mx-m\" style=\"align-self: stretch\" />\n\n              @if (loginMenu()?.template(); as menuLoginTpl) {\n                <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\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().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 />\n\n    <main>\n      <div class=\"notification\">\n        <ng-content select=\"onemrva-mat-notification\" />\n      </div>\n\n      <section>\n        <ng-container *ngTemplateOutlet=\"content()?.template()\" />\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\" />\n          </div>\n        }\n      </footer>\n    </main>\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 (/^(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)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--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-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: 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: "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"], outputs: ["itemsChange"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-layout', standalone: true, imports: [
                         RouterLink,
-                        NgStyle,
-                        NgClass,
                         MatToolbar,
                         MatDrawerContainer,
                         MatTabNav,
@@ -707,115 +670,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatSidenavModule,
                         LayoutLeftSidenavComponent,
                         OnemrvaMatStickerComponent,
-                    ], 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\n          class=\"application-title ml-m\"\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 [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-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--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"] }]
-        }], ctorParameters: () => [], propDecorators: { routes: [{
-                type: ContentChildren,
-                args: [LayoutRouteComponent]
-            }], title: [{
-                type: ContentChild,
-                args: [LayoutTitleComponent]
-            }], loginMenu: [{
-                type: ContentChild,
-                args: [LayoutLoginMenuComponent]
-            }], content: [{
-                type: ContentChild,
-                args: [LayoutContentComponent]
-            }], afterNav: [{
-                type: ContentChild,
-                args: [LayoutAfterNavComponent]
-            }], footer: [{
-                type: ContentChild,
-                args: [LayoutFooterComponent]
-            }], logo: [{
-                type: Input
-            }], languages: [{
-                type: Input
-            }], environment: [{
-                type: Input
-            }], logoRedictionUrl: [{
-                type: Input
-            }], profile: [{
-                type: Input
-            }], login: [{
-                type: Output
-            }], logout: [{
-                type: Output
-            }], drawer: [{
-                type: ViewChild,
-                args: [MatDrawer, { static: true }]
-            }], drawerHost: [{
-                type: ViewChild,
-                args: [DrawerHostDirective, { static: true }]
-            }], id: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }], showThemeSwitcher: [{
-                type: Input
-            }] } });
+                    ], 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 />\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]=\"logoFinal()\"\n          [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n          alt=\"Logo ONEM/RVA\"\n          [routerLink]=\"\n            logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n          \"\n          [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n        />\n        <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n          @if (title()?.template(); as titleTpl) {\n            <ng-container *ngTemplateOutlet=\"titleTpl\" />\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(); 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 *ngTemplateOutlet=\"routeTemplate\" />\n                }\n              </a>\n            }\n          </div>\n        }\n        <mat-tab-nav-panel #tabPanel />\n\n        @if (showThemeSwitcher()) {\n          <button\n            mat-icon-button\n            data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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              data-cy=\"theme-toggle\"\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\" />\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            />\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            />\n          }\n          @if (!profile()?.isLoggedIn) {\n            <onemrva-mat-avatar\n              matRipple\n              [matMenuTriggerFor]=\"menu\"\n              icon=\"account_circle\"\n              [color]=\"OnemrvaMatColor.PRIMARY\"\n              size=\"xsmall\"\n              class=\"clickable\"\n            />\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 class=\"mx-m\" style=\"align-self: stretch\" />\n\n              @if (loginMenu()?.template(); as menuLoginTpl) {\n                <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\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().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 />\n\n    <main>\n      <div class=\"notification\">\n        <ng-content select=\"onemrva-mat-notification\" />\n      </div>\n\n      <section>\n        <ng-container *ngTemplateOutlet=\"content()?.template()\" />\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\" />\n          </div>\n        }\n      </footer>\n    </main>\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 (/^(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)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--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-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: 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"] }]
+        }], ctorParameters: () => [], propDecorators: { routes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutRouteComponent), { isSignal: true }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutTitleComponent), { isSignal: true }] }], loginMenu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutLoginMenuComponent), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutContentComponent), { isSignal: true }] }], afterNav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutAfterNavComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutFooterComponent), { isSignal: true }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], logoRedictionUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoRedictionUrl", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], logout: [{ type: i0.Output, args: ["logout"] }], drawer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatDrawer), { isSignal: true }] }], drawerHost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DrawerHostDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], showThemeSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSwitcher", required: false }] }] } });
 
 class LayoutSidenavTitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSidenavTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutSidenavTitleComponent, isStandalone: true, selector: "onemrva-layout-sidenav-title", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
+    constructor() {
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSidenavTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LayoutSidenavTitleComponent, isStandalone: true, selector: "onemrva-layout-sidenav-title", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template>
-      <ng-content></ng-content>
+      <ng-content />
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutSidenavTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutSidenavTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'onemrva-layout-sidenav-title',
                     template: `
     <ng-template>
-      <ng-content></ng-content>
+      <ng-content />
     </ng-template>
   `,
                     standalone: true,
                 }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+        }], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class LayoutDrawerActionsComponent {
     constructor() {
         this.drawerService = inject(OnemrvaDrawerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutDrawerActionsComponent, isStandalone: true, selector: "onemrva-drawer-actions", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);text-align:right}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LayoutDrawerActionsComponent, isStandalone: true, selector: "onemrva-drawer-actions", ngImport: i0, template: "<ng-content />\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);text-align:right}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-drawer-actions', standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);text-align:right}\n"] }]
+            args: [{ selector: 'onemrva-drawer-actions', standalone: true, template: "<ng-content />\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);text-align:right}\n"] }]
         }] });
 
 class LayoutDrawerContentComponent {
     constructor() {
         this.drawerService = inject(OnemrvaDrawerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LayoutDrawerContentComponent, isStandalone: true, selector: "onemrva-drawer-content", ngImport: i0, template: "<span><ng-content></ng-content></span>\n", styles: [":host{background-color:var(--mat-sys-surface);padding:23px 32px;margin:0 var(--spacer);border-radius:var(--border-radius);display:block;height:calc(100vh - 190px);overflow:auto}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LayoutDrawerContentComponent, isStandalone: true, selector: "onemrva-drawer-content", ngImport: i0, template: "<span><ng-content /></span>\n", styles: [":host{background-color:var(--mat-sys-surface);padding:23px 32px;margin:0 var(--spacer);border-radius:var(--border-radius);display:block;height:calc(100vh - 190px);overflow:auto}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-drawer-content', standalone: true, template: "<span><ng-content></ng-content></span>\n", styles: [":host{background-color:var(--mat-sys-surface);padding:23px 32px;margin:0 var(--spacer);border-radius:var(--border-radius);display:block;height:calc(100vh - 190px);overflow:auto}\n"] }]
+            args: [{ selector: 'onemrva-drawer-content', standalone: true, template: "<span><ng-content /></span>\n", styles: [":host{background-color:var(--mat-sys-surface);padding:23px 32px;margin:0 var(--spacer);border-radius:var(--border-radius);display:block;height:calc(100vh - 190px);overflow:auto}\n"] }]
         }] });
 
 class LayoutDrawerTitleComponent {
     constructor() {
-        this.showClose = true;
+        this.showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
         this.drawerService = inject(OnemrvaDrawerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LayoutDrawerTitleComponent, isStandalone: true, selector: "onemrva-drawer-title", inputs: { showClose: "showClose" }, ngImport: i0, template: "<span><ng-content></ng-content></span>\n@if (showClose) {\n  <mat-icon\n    class=\"close-drawer clickable large float-right\"\n    (click)=\"drawerService.close()\"\n    >close</mat-icon\n  >\n}\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);margin:var(--spacer)}:host span:first-child{font:var(--mat-sys-title-large);color:var(--mat-sys-error)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LayoutDrawerTitleComponent, isStandalone: true, selector: "onemrva-drawer-title", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span><ng-content /></span>\n@if (showClose()) {\n  <mat-icon\n    class=\"close-drawer clickable large float-right\"\n    (click)=\"drawerService.close()\"\n    >close</mat-icon\n  >\n}\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);margin:var(--spacer)}:host span:first-child{font:var(--mat-sys-title-large);color:var(--mat-sys-error)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutDrawerTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutDrawerTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-drawer-title', standalone: true, imports: [MatIcon], template: "<span><ng-content></ng-content></span>\n@if (showClose) {\n  <mat-icon\n    class=\"close-drawer clickable large float-right\"\n    (click)=\"drawerService.close()\"\n    >close</mat-icon\n  >\n}\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);margin:var(--spacer)}:host span:first-child{font:var(--mat-sys-title-large);color:var(--mat-sys-error)}\n"] }]
-        }], propDecorators: { showClose: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'onemrva-drawer-title', standalone: true, imports: [MatIcon], template: "<span><ng-content /></span>\n@if (showClose()) {\n  <mat-icon\n    class=\"close-drawer clickable large float-right\"\n    (click)=\"drawerService.close()\"\n    >close</mat-icon\n  >\n}\n", styles: [":host{width:calc(100% - var(--double-spacer));display:block;padding:var(--spacer);margin:var(--spacer)}:host span:first-child{font:var(--mat-sys-title-large);color:var(--mat-sys-error)}\n"] }]
+        }], propDecorators: { showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }] } });
 
 const layoutComponents = [
     LayoutComponent,
@@ -906,8 +823,8 @@ class OnemRvaProfile {
 }
 
 class OnemrvaLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLayoutModule, imports: [LayoutComponent, LayoutContentComponent, LayoutFooterComponent, LayoutRouteComponent, LayoutSubrouteComponent, LayoutTitleComponent, LayoutSidenavTitleComponent, LayoutSidenavComponent, LayoutLoginMenuComponent, LayoutAfterNavComponent, LayoutLeftSidenavComponent, StripHtmlPipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLayoutModule, imports: [LayoutComponent, LayoutContentComponent, LayoutFooterComponent, LayoutRouteComponent, LayoutSubrouteComponent, LayoutTitleComponent, LayoutSidenavTitleComponent, LayoutSidenavComponent, LayoutLoginMenuComponent, LayoutAfterNavComponent, LayoutLeftSidenavComponent, StripHtmlPipe,
             DrawerHostDirective,
             CommonModule,
             RouterModule,
@@ -923,7 +840,7 @@ class OnemrvaLayoutModule {
             MatTooltipModule,
             TranslateModule,
             MatRipple], exports: [LayoutComponent, LayoutContentComponent, LayoutFooterComponent, LayoutRouteComponent, LayoutSubrouteComponent, LayoutTitleComponent, LayoutSidenavTitleComponent, LayoutSidenavComponent, LayoutLoginMenuComponent, LayoutAfterNavComponent, LayoutLeftSidenavComponent, LayoutModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLayoutModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLayoutModule, providers: [
             {
                 provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
                 useValue: { horizontalPosition: 'right' },
@@ -942,7 +859,7 @@ class OnemrvaLayoutModule {
             MatTooltipModule,
             TranslateModule, LayoutModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],